Dataset componentization

client/package.json

@@ -42,6 +42,7 @@
     "deck.gl": "^8.9.31",
     "express": "4.18.2",
     "jotai": "^2.5.0",
+    "lodash-es": "^4.17.21",
     "mapbox-gl": "2.15.0",
     "next": "13.5.3",
     "next-usequerystate": "^1.8.4",
@@ -65,6 +66,7 @@
     "@tanstack/eslint-plugin-query": "4.34.1",
     "@types/express": "4.17.18",
     "@types/geojson": "^7946.0.12",
+    "@types/lodash-es": "^4.17.10",
     "@types/mapbox": "1.6.43",
     "@types/node": "20.7.0",
     "@types/react": "18.2.23",

client/src/components/ui/accordion.tsx

@@ -30,9 +30,9 @@ const AccordionTrigger = React.forwardRef<
       )}
       {...props}
     >
-      <button className="mr-4 flex h-6 w-6 items-center justify-center rounded-sm bg-gray-100">
+      <span className="mr-4 flex h-6 w-6 items-center justify-center rounded-sm bg-gray-100">
         <LuChevronDown className="h-4 w-4 shrink-0 text-foreground transition-transform duration-200" />
-      </button>
+      </span>
       {children}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
@@ -45,10 +45,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className,
-    )}
+    className={cn("overflow-hidden text-sm transition-all", className)}
     {...props}
   >
     <div className="pb-4 pt-0">{children}</div>

client/src/containers/categories/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useGetCategories } from "@/types/generated/category";
+
+import CategoriesItem from "@/containers/categories/item";
+
+import { Accordion } from "@/components/ui/accordion";
+
+const Categories = () => {
+  const { data: categoriesData } = useGetCategories({
+    "pagination[pageSize]": 100,
+  });
+
+  return (
+    <Accordion
+      type="multiple"
+      className="mt-5"
+      defaultValue={categoriesData?.data?.data?.map((c) => `${c?.id}`)}
+    >
+      {categoriesData?.data?.data?.map((category) => {
+        if (!category.id) return null;
+
+        return <CategoriesItem key={category.id} {...category} />;
+      })}
+    </Accordion>
+  );
+};
+
+export default Categories;

client/src/containers/categories/item.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { CategoryListResponseDataItem } from "@/types/generated/strapi.schemas";
+
+import Datasets from "@/containers/datasets";
+
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+
+const CategoriesItem = (category: CategoryListResponseDataItem) => {
+  return (
+    <AccordionItem key={category?.id} value={`${category?.id}`}>
+      <AccordionTrigger>{category?.attributes?.name}</AccordionTrigger>
+      <AccordionContent>
+        {!!category?.id && <Datasets categoryId={category?.id} />}
+      </AccordionContent>
+    </AccordionItem>
+  );
+};
+
+export default CategoriesItem;

client/src/containers/datasets/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useGetDatasets } from "@/types/generated/dataset";
+
+import DatasetsItem from "@/containers/datasets/item";
+
+type DatasetsProps = {
+  categoryId: number;
+};
+
+const Datasets = ({ categoryId }: DatasetsProps) => {
+  const { data: datasetsData } = useGetDatasets({
+    "pagination[pageSize]": 100,
+    filters: {
+      category: categoryId,
+    },
+    populate: "*",
+  });
+
+  return (
+    <div className="space-y-2.5">
+      {datasetsData?.data?.data?.map((dataset) => {
+        return <DatasetsItem key={dataset?.id} {...dataset} />;
+      })}
+    </div>
+  );
+};
+
+export default Datasets;

client/src/containers/datasets/item.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { LuInfo } from "react-icons/lu";
+
+import { DatasetListResponseDataItem } from "@/types/generated/strapi.schemas";
+
+import { useSyncLayers } from "@/app/url-query-params";
+
+import { Switch } from "@/components/ui/switch";
+
+const DatasetsItem = ({ id, attributes }: DatasetListResponseDataItem) => {
+  const lysIds = attributes?.layers?.data?.map((l) => l.id);
+  const [layers, setLayers] = useSyncLayers();
+
+  return (
+    <div
+      key={id}
+      className="flex items-center justify-between space-x-2.5 rounded-[18px] border p-2.5"
+    >
+      <div className="flex items-center justify-start space-x-2.5">
+        <Switch
+          defaultChecked={layers?.some((l) => lysIds?.includes(l))}
+          onCheckedChange={(c: boolean) => {
+            const lys = attributes?.layers;
+
+            if (!lys) return;
+
+            setLayers((prev) => {
+              const ids = lys?.data?.map((l) => {
+                return l.id as number;
+              });
+
+              if (c && ids) return [...ids, ...prev];
+              if (!c && ids) {
+                return prev.filter((id) => !ids.includes(id));
+              }
+
+              return prev;
+            });
+          }}
+        />
+        <div>
+          <h2>{attributes?.name}</h2>
+        </div>
+      </div>
+
+      <LuInfo className="h-5 w-5" />
+    </div>
+  );
+};
+
+export default DatasetsItem;

client/src/containers/home/index.tsx

@@ -1,101 +1,14 @@
 "use client";
 
-import { useMemo } from "react";
-
-import { useGetDatasets } from "@/types/generated/dataset";
-
-import { useSyncLayers } from "@/app/url-query-params";
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Switch } from "@/components/ui/switch";
+import Categories from "@/containers/categories";
 
 const Home = () => {
-  const [layers, setLayers] = useSyncLayers();
-
-  const { data: datasetsData } = useGetDatasets({
-    "pagination[pageSize]": 100,
-    populate: "*",
-  });
-
-  const CATEGORIES = useMemo(() => {
-    if (!datasetsData?.data?.data) return [];
-
-    const categories = datasetsData.data.data.map((dataset) => dataset?.attributes?.category);
-
-    return Array.from(new Set(categories));
-  }, [datasetsData]);
-
-  if (CATEGORIES.length === 0) return null;
-
   return (
     <div className="h-full overflow-auto">
       <div className="px-5 py-10">
-        <h1 className="text-3xl">Explore datasets</h1>
-
-        {/* List of datasets */}
-        <Accordion
-          type="multiple"
-          className="mt-5"
-          defaultValue={CATEGORIES.map((c) => `${c?.data?.id}`)}
-        >
-          {CATEGORIES.map((category) => {
-            if (!category?.data) return null;
-
-            const DATASETS = datasetsData?.data?.data?.filter(
-              (dataset) => dataset?.attributes?.category?.data?.id === category?.data?.id,
-            );
-
-            return (
-              <AccordionItem key={category?.data?.id} value={`${category?.data?.id}`}>
-                <AccordionTrigger>{category?.data?.attributes?.name}</AccordionTrigger>
-                <AccordionContent>
-                  {DATASETS?.map((dataset) => {
-                    if (!dataset?.attributes) return null;
-
-                    const lysIds = dataset?.attributes?.layers?.data?.map((l) => l.id);
-
-                    return (
-                      <div
-                        key={dataset?.id}
-                        className="flex items-center justify-start space-x-2.5"
-                      >
-                        <Switch
-                          defaultChecked={layers?.some((l) => lysIds?.includes(l))}
-                          onCheckedChange={(c: boolean) => {
-                            const lys = dataset?.attributes?.layers;
-
-                            if (!lys) return;
-
-                            setLayers((prev) => {
-                              const ids = lys?.data?.map((l) => {
-                                return l.id as number;
-                              });
-
-                              if (c && ids) return [...prev, ...ids];
-                              if (!c && ids) {
-                                return prev.filter((id) => !ids.includes(id));
-                              }
+        <h1 className="font-metropolis text-3xl tracking-tight">Explore datasets</h1>
 
-                              return prev;
-                            });
-                          }}
-                        />
-                        <div>
-                          <h2>{dataset?.attributes?.name}</h2>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </AccordionContent>
-              </AccordionItem>
-            );
-          })}
-        </Accordion>
+        <Categories />
       </div>
     </div>
   );

client/tailwind.config.ts

@@ -55,20 +55,6 @@ module.exports = {
         "open-sans": ["var(--font-open-sans)"],
         metropolis: ["var(--font-metropolis)"],
       },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
     },
   },
   plugins: [require("tailwindcss-animate")],

client/yarn.lock

@@ -2681,6 +2681,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash-es@npm:^4.17.10":
+  version: 4.17.10
+  resolution: "@types/lodash-es@npm:4.17.10"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 129e9dde830815a72f9bd17c3a7b7ffb10a9cf76d65c7bb4f14df13b38411ed3ebe9ebbc2f9059c4e61198e784d499e48d0a281e27a4defbbba748dd8a4cfd9d
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.200
+  resolution: "@types/lodash@npm:4.14.200"
+  checksum: 6471f8bb5da692a6ecf03a8da4935bfbc341e67ee9bcb4f5730bfacff0c367232548f0a01e8ac5ea18c6fe78fb085d502494e33ccb47a7ee87cbdee03b47d00d
+  languageName: node
+  linkType: hard
+
 "@types/mapbox-gl@npm:>=1.0.0, @types/mapbox-gl@npm:^2.6.3":
   version: 2.7.17
   resolution: "@types/mapbox-gl@npm:2.7.17"
@@ -3766,6 +3782,7 @@ __metadata:
     "@tanstack/react-query": 4.35.3
     "@types/express": 4.17.18
     "@types/geojson": ^7946.0.12
+    "@types/lodash-es": ^4.17.10
     "@types/mapbox": 1.6.43
     "@types/node": 20.7.0
     "@types/react": 18.2.23
@@ -3784,6 +3801,7 @@ __metadata:
     express: 4.18.2
     husky: 8.0.3
     jotai: ^2.5.0
+    lodash-es: ^4.17.21
     mapbox-gl: 2.15.0
     next: 13.5.3
     next-usequerystate: ^1.8.4
@@ -6936,6 +6954,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"