feat: Layout and loading set for root page

kudos-ink · Jan 21, 2024 · ce92893 · ce92893
1 parent d9439f0
commit ce92893
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 67 deletions.
diff --git a/app/explore/[slug]/layout.tsx b/app/explore/[slug]/layout.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,6 +8,10 @@ import { SITE_CONFIG } from "@/data/config";
 import clsx from "clsx";
 import CtaBanner from "@/components/cta-banner";
 import { container, title } from "@/components/primitives";
+import Toolbar from "@/components/filters/toolbar";
+import { FiltersProvider } from "@/contexts/filters";
+import { decodingSlug } from "@/utils/url";
+import { initFilters } from "@/utils/filters";
 
 export const fontSans = Inter({
   subsets: ["latin"],
@@ -60,9 +64,13 @@ export const viewport: Viewport = {
 
 export default function RootLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: { slug: string };
 }) {
+  const filters = params.slug ? decodingSlug(params.slug) : initFilters();
+
   return (
     <html
       lang="en"
@@ -84,7 +92,14 @@ export default function RootLayout({
               <section className={container()}>
                 <CtaBanner />
               </section>
-              <div className="pt-10">{children}</div>
+              <div className="pt-10">
+                <FiltersProvider initialFilters={filters}>
+                  <div className="flex flex-col">
+                    <Toolbar />
+                    <section className={container()}>{children}</section>
+                  </div>
+                </FiltersProvider>
+              </div>
             </main>
             <footer className="py-6 px-6 md:px-8 md:py-0">
               <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">

diff --git a/app/loading.tsx b/app/loading.tsx
@@ -0,0 +1,5 @@
+import TableSkeleton from "@/components/table/skeleton";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,13 +1,11 @@
-import ControlledTable from "@/components/controlled-table";
+import ContributionsTable from "@/components/table/table";
 import { DEFAULT_PAGE_SIZE } from "@/data/fetch";
 import { queryDatabase } from "@/lib/notion";
 import { PaginatedCustomDataResponse } from "@/types";
 import { Contribution } from "@/types/contribution";
-import { initFilters } from "@/utils/filters";
 import { transformNotionDataToContributions } from "@/utils/notion";
 
 export default async function Home() {
-  const filters = initFilters();
   const data = await queryDatabase({
     page_size: DEFAULT_PAGE_SIZE,
   });
@@ -19,6 +17,11 @@ export default async function Home() {
   };
 
   return (
-    <ControlledTable filters={filters} items={items} queryFilter={undefined} />
+    <ContributionsTable
+      items={items}
+      queries={{
+        page_size: DEFAULT_PAGE_SIZE,
+      }}
+    />
   );
 }
diff --git a/components/controlled-table.tsx b/components/controlled-table.tsx