Revert "feat: Layout and loading set for root page"

This reverts commit ce92893.
kudos-ink · Jan 21, 2024 · dfef1be · dfef1be
1 parent ce92893
commit dfef1be
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 28 deletions.
diff --git a/app/explore/[slug]/layout.tsx b/app/explore/[slug]/layout.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import Toolbar from "@/components/filters/toolbar";
+import { container } from "@/components/primitives";
+import { FiltersProvider } from "@/contexts/filters";
+import { decodingSlug } from "@/utils/url";
+
+export default function ExploreLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { slug: string };
+}) {
+  const filters = decodingSlug(params.slug);
+  return (
+    <FiltersProvider initialFilters={filters}>
+      <div className="flex flex-col">
+        <Toolbar />
+        <section className={container()}>{children}</section>
+      </div>
+    </FiltersProvider>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,10 +8,6 @@ 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"],
@@ -64,13 +60,9 @@ 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"
@@ -92,14 +84,7 @@ export default function RootLayout({
               <section className={container()}>
                 <CtaBanner />
               </section>
-              <div className="pt-10">
-                <FiltersProvider initialFilters={filters}>
-                  <div className="flex flex-col">
-                    <Toolbar />
-                    <section className={container()}>{children}</section>
-                  </div>
-                </FiltersProvider>
-              </div>
+              <div className="pt-10">{children}</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
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,13 @@
-import ContributionsTable from "@/components/table/table";
+import ControlledTable from "@/components/controlled-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,
   });
@@ -17,11 +19,6 @@ export default async function Home() {
   };
 
   return (
-    <ContributionsTable
-      items={items}
-      queries={{
-        page_size: DEFAULT_PAGE_SIZE,
-      }}
-    />
+    <ControlledTable filters={filters} items={items} queryFilter={undefined} />
   );
 }
diff --git a/components/controlled-table.tsx b/components/controlled-table.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import ContributionsTable from "@/components/table/table";
+import Toolbar from "@/components/filters/toolbar";
+import { container } from "@/components/primitives";
+import { FiltersProvider } from "@/contexts/filters";
+import { PaginatedCustomDataResponse } from "@/types";
+import { Contribution } from "@/types/contribution";
+import { Filters } from "@/types/filters";
+import { DEFAULT_PAGE_SIZE } from "@/data/fetch";
+
+interface IControlledTableProps {
+  items: PaginatedCustomDataResponse<Contribution>;
+  filters: Filters;
+  queryFilter: any;
+}
+const ControlledTable = ({
+  filters,
+  items,
+  queryFilter,
+}: IControlledTableProps) => {
+  return (
+    <FiltersProvider initialFilters={filters}>
+      <div className="flex flex-col">
+        <Toolbar />
+        <section className={container()}>
+          <ContributionsTable
+            items={items}
+            queries={{
+              page_size: DEFAULT_PAGE_SIZE,
+              filter: queryFilter,
+            }}
+          />
+        </section>
+      </div>
+    </FiltersProvider>
+  );
+};
+
+export default ControlledTable;