Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/beta-branch #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions app/api/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { NextResponse } from "next/server"

export async function GET() {
const res = await fetch("https://data.mongodb-api.com/...", {
headers: {
"Content-Type": "application/json",
},
})
const data = await res.json()

return NextResponse.json({ data })
}
6 changes: 4 additions & 2 deletions app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { RootLayoutType } from "@/types"
import { Inter } from "next/font/google"
import clsx from "clsx"
import "../styles/globals.css"
import "../styles/nextglobal.css"
import { Providers } from "./providers"

const inter = Inter({
subsets: ["latin"],
Expand All @@ -15,7 +15,9 @@ const RootLayout: React.FC<RootLayoutType> = ({ children }) => {
<title>Sen.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body className="dark:bg-slate-900 dark:text-white">{children}</body>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
Expand Down
5 changes: 5 additions & 0 deletions app/loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const Loading = () => {
return <div>loading</div>
}

export default Loading
53 changes: 51 additions & 2 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,59 @@
"use client"
import { Await, Suspense } from "@/components/await"
import NextOverview from "@/containers/next"
import Header from "@/containers/next/header"
import { getData } from "@/libs/api"
import { Movie } from "@/types/movie"
import { getBaseURL } from "@/utils"
import { useSuspenseQuery } from "@tanstack/react-query"
import type { NextPage } from "next"
import { headers } from "next/headers"

const Home: NextPage = ({ searchParams }: any) => {
const query = useSuspenseQuery({
queryKey: ["wait"],
queryFn: async () => {
const path = "/api/3/discover/movie"
const url = getBaseURL() + path

console.log("fetching", url)
const res = (await (
await fetch(url, {
cache: "no-store",
headers: {
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NjcyY2U0MjY4MDk1MTI4OGE2OWZjZmE2YTA3NTkyOSIsInN1YiI6IjY1MGUxNmUwZTFmYWVkMDExZDVkNDhlMiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.rgswMtK-5K4JnHk2h9ExgXCYGioC5e6d-_iqbKeGqAs",
},
})
).json()) as { results: Movie[] }
return res
},
})

const Home: NextPage = () => {
return (
<div>
<NextOverview />
<Header />
<ul>
{query.data.results.map((item, i) => (
<li key={i}>{item.title}</li>
))}
</ul>
{/* <Suspense>
<Await
sleep={4000}
promise={getData<{ results: Movie[] }>("/discover/movie", {
query: searchParams,
})}
>
{movies => (
<ul>
{movies.results.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
)}
</Await>
</Suspense> */}
</div>
)
}
Expand Down
32 changes: 32 additions & 0 deletions app/providers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use client"

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental"
import { useState } from "react"

type Props = {
children: React.ReactNode
}

export const Providers: React.FC<Props> = ({ children }) => {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
// With SSR, we usually want to set some default staleTime
// above 0 to avoid refetching immediately on the client
staleTime: 60 * 1000,
},
},
})
)

return (
<QueryClientProvider client={queryClient}>
<ReactQueryStreamedHydration>
<div>{children}</div>
</ReactQueryStreamedHydration>
</QueryClientProvider>
)
}
41 changes: 41 additions & 0 deletions containers/next/header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
"use client"
import { useFilterSearch } from "@/hooks"

const Header = () => {
const { removeFilter, setFilter, clearFilter, searchParams } =
useFilterSearch()
return (
<div className="flex space-x-3">
<button onClick={() => setFilter({ q: "test", firstDate: "test" })}>
filter
</button>
<button onClick={() => setFilter({ sort_by: "popularity.asc" })}>
sort asc
</button>
<button onClick={() => setFilter({ sort_by: "popularity.desc" })}>
sort
</button>
<button onClick={() => removeFilter("q")}>remove</button>
<button
onClick={() => setFilter({ q: "test-test", lastDate: "test-22" })}
>
filter3
</button>
<button onClick={() => clearFilter()}>clear</button>
<form
onSubmit={e => {
e.preventDefault()

const val = e.target as HTMLFormElement
const search = val.search as HTMLInputElement

setFilter("s", search.value)
}}
>
<input placeholder="search" name="search" />
</form>
</div>
)
}

export default Header
28 changes: 12 additions & 16 deletions containers/next/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@ import Head from "next/head"
import Image from "next/image"
import { Inter } from "next/font/google"
import styles from "@/styles/next.module.css"

const inter = Inter({ subsets: ["latin"] })
import { useFilterSearch } from "@/hooks"
import Header from "./header"

export default function NextOverview() {
return (
<main className={styles.main}>
<Header />
<div className={styles.description}>
<p>
Get started by editing&nbsp;
<code className={styles.code}>app/page.tsx</code>
</p>

<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
Expand Down Expand Up @@ -53,12 +55,10 @@ export default function NextOverview() {
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
<h2>
Docs <span>-&gt;</span>
</h2>
<p className={inter.className}>
Find in-depth information about Next.js features and&nbsp;API.
</p>
<p>Find in-depth information about Next.js features and&nbsp;API.</p>
</a>

<a
Expand All @@ -67,12 +67,10 @@ export default function NextOverview() {
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
<h2>
Learn <span>-&gt;</span>
</h2>
<p className={inter.className}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
</a>

<a
Expand All @@ -81,12 +79,10 @@ export default function NextOverview() {
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
<h2>
Templates <span>-&gt;</span>
</h2>
<p className={inter.className}>
Discover and deploy boilerplate example Next.js&nbsp;projects.
</p>
<p>Discover and deploy boilerplate example Next.js&nbsp;projects.</p>
</a>

<a
Expand All @@ -95,10 +91,10 @@ export default function NextOverview() {
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
<h2>
Deploy <span>-&gt;</span>
</h2>
<p className={inter.className}>
<p>
Instantly deploy your Next.js site to a shareable URL
with&nbsp;Vercel.
</p>
Expand Down
Loading