From 2eea4a185e8fff53c965247e04591b0823eca802 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Sat, 28 Oct 2023 11:16:57 +0200 Subject: [PATCH] Dataset componentization --- client/package.json | 2 + client/src/components/ui/accordion.tsx | 9 +-- client/src/containers/categories/index.tsx | 29 +++++++ client/src/containers/categories/item.tsx | 20 +++++ client/src/containers/datasets/index.tsx | 29 +++++++ client/src/containers/datasets/item.tsx | 52 ++++++++++++ client/src/containers/home/index.tsx | 93 +--------------------- client/tailwind.config.ts | 14 ---- client/yarn.lock | 25 ++++++ 9 files changed, 163 insertions(+), 110 deletions(-) create mode 100644 client/src/containers/categories/index.tsx create mode 100644 client/src/containers/categories/item.tsx create mode 100644 client/src/containers/datasets/index.tsx create mode 100644 client/src/containers/datasets/item.tsx diff --git a/client/package.json b/client/package.json index 291e20f0..9f701fec 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx index fa554169..f6dea61d 100644 --- a/client/src/components/ui/accordion.tsx +++ b/client/src/components/ui/accordion.tsx @@ -30,9 +30,9 @@ const AccordionTrigger = React.forwardRef< )} {...props} > - + {children} @@ -45,10 +45,7 @@ const AccordionContent = React.forwardRef< >(({ className, children, ...props }, ref) => (
{children}
diff --git a/client/src/containers/categories/index.tsx b/client/src/containers/categories/index.tsx new file mode 100644 index 00000000..d853c791 --- /dev/null +++ b/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 ( + `${c?.id}`)} + > + {categoriesData?.data?.data?.map((category) => { + if (!category.id) return null; + + return ; + })} + + ); +}; + +export default Categories; diff --git a/client/src/containers/categories/item.tsx b/client/src/containers/categories/item.tsx new file mode 100644 index 00000000..7be613f0 --- /dev/null +++ b/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 ( + + {category?.attributes?.name} + + {!!category?.id && } + + + ); +}; + +export default CategoriesItem; diff --git a/client/src/containers/datasets/index.tsx b/client/src/containers/datasets/index.tsx new file mode 100644 index 00000000..1cbf08f1 --- /dev/null +++ b/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 ( +
+ {datasetsData?.data?.data?.map((dataset) => { + return ; + })} +
+ ); +}; + +export default Datasets; diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx new file mode 100644 index 00000000..e00b3d93 --- /dev/null +++ b/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 ( +
+
+ 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; + }); + }} + /> +
+

{attributes?.name}

+
+
+ + +
+ ); +}; + +export default DatasetsItem; diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx index 6d18cdc6..25bacda4 100644 --- a/client/src/containers/home/index.tsx +++ b/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 (
-

Explore datasets

- - {/* List of datasets */} - `${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 ( - - {category?.data?.attributes?.name} - - {DATASETS?.map((dataset) => { - if (!dataset?.attributes) return null; - - const lysIds = dataset?.attributes?.layers?.data?.map((l) => l.id); - - return ( -
- 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)); - } +

Explore datasets

- return prev; - }); - }} - /> -
-

{dataset?.attributes?.name}

-
-
- ); - })} - - - ); - })} - +
); diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts index 23005899..eff5eb7a 100644 --- a/client/tailwind.config.ts +++ b/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")], diff --git a/client/yarn.lock b/client/yarn.lock index a559eb5b..655d4730 100644 --- a/client/yarn.lock +++ b/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"