muhrusdi · muhrusdi · Oct 16, 2023 · Oct 21, 2023 · Oct 21, 2023
diff --git a/app/api/route.ts b/app/api/route.ts
@@ -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 })
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -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"],
@@ -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>
   )
 }

diff --git a/app/loading.tsx b/app/loading.tsx
@@ -0,0 +1,5 @@
+const Loading = () => {
+  return <div>loading</div>
+}
+
+export default Loading
diff --git a/app/page.tsx b/app/page.tsx
@@ -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>
   )
 }

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -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>
+  )
+}
diff --git a/containers/next/header.tsx b/containers/next/header.tsx
@@ -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
diff --git a/containers/next/index.tsx b/containers/next/index.tsx
@@ -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"
@@ -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
@@ -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
@@ -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
@@ -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>