Parsers and options extracted

Vizzuality · Nov 16, 2023 · c4b8cd9 · c4b8cd9
1 parent f49e93e
commit c4b8cd9
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 88 deletions.
diff --git a/client/src/app/(app)/layout.tsx b/client/src/app/(app)/layout.tsx
@@ -3,7 +3,6 @@ import { PropsWithChildren } from "react";
 import { headers } from "next/headers";
 
 import { Hydrate, dehydrate } from "@tanstack/react-query";
-import { parseAsArrayOf, parseAsInteger } from "next-usequerystate";
 
 import getQueryClient from "@/lib/react-query/getQueryClient";
 
@@ -13,7 +12,10 @@ import { getGetDatasetsQueryOptions } from "@/types/generated/dataset";
 import { getGetProjectsQueryOptions } from "@/types/generated/project";
 import { CategoryListResponse } from "@/types/generated/strapi.schemas";
 
+import { pillarsParser } from "@/app/parsers";
+
 import { GET_COUNTRIES_OPTIONS } from "@/constants/countries";
+import { GET_CATEGORIES_OPTIONS, GET_DATASETS_OPTIONS } from "@/constants/datasets";
 import { GET_PROJECTS_OPTIONS } from "@/constants/projects";
 
 import Map from "@/containers/map";
@@ -26,8 +28,6 @@ export default async function AppLayout({ children }: PropsWithChildren) {
   const url = new URL(headers().get("x-url")!);
   const searchParams = url.searchParams;
 
-  const pillarsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
-
   const queryClient = getQueryClient();
 
   // Prefetch countries
@@ -37,36 +37,19 @@ export default async function AppLayout({ children }: PropsWithChildren) {
 
   // Prefetch categories
   await queryClient.prefetchQuery({
-    ...getGetCategoriesQueryOptions({
-      "pagination[pageSize]": 100,
-      populate: "datasets",
-      sort: "name:asc",
-      filters: {},
-    }),
+    ...getGetCategoriesQueryOptions(GET_CATEGORIES_OPTIONS()),
   });
 
   const CATEGORIES = queryClient.getQueryData<CategoryListResponse>(
-    getGetCategoriesQueryKey({
-      "pagination[pageSize]": 100,
-      populate: "datasets",
-      sort: "name:asc",
-      filters: {},
-    }),
+    getGetCategoriesQueryKey(GET_CATEGORIES_OPTIONS()),
   );
 
   for (const category of CATEGORIES?.data || []) {
     if (!category.id) continue;
 
     // Prefetch datasets
     await queryClient.prefetchQuery({
-      ...getGetDatasetsQueryOptions({
-        "pagination[pageSize]": 100,
-        filters: {
-          category: category.id,
-        },
-        populate: "*",
-        sort: "name:asc",
-      }),
+      ...getGetDatasetsQueryOptions(GET_DATASETS_OPTIONS("", category.id)),
     });
   }
 

diff --git a/client/src/app/parsers.ts b/client/src/app/parsers.ts
@@ -0,0 +1,26 @@
+import {
+  parseAsArrayOf,
+  parseAsFloat,
+  parseAsInteger,
+  parseAsString,
+  parseAsJson,
+} from "next-usequerystate/parsers";
+
+import { DEFAULT_BBOX, DEFAULT_MAP_SETTINGS } from "@/constants/map";
+
+export const datasetsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
+
+export const layersParser = parseAsArrayOf(parseAsInteger).withDefault([]);
+export const layersSettingsParser = parseAsJson<{
+  [key: string]: Record<string, unknown>;
+}>();
+
+export const bboxParser = parseAsArrayOf(parseAsFloat).withDefault(DEFAULT_BBOX);
+export const mapSettingsParser =
+  parseAsJson<typeof DEFAULT_MAP_SETTINGS>().withDefault(DEFAULT_MAP_SETTINGS);
+
+export const countryParser = parseAsString.withDefault("");
+export const countriesComparisonParser = parseAsArrayOf(parseAsString).withDefault([]);
+
+export const projectParser = parseAsInteger;
+export const pillarsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
diff --git a/client/src/app/store.ts b/client/src/app/store.ts
@@ -1,58 +1,50 @@
 import { atom } from "jotai";
-import {
-  parseAsArrayOf,
-  parseAsFloat,
-  parseAsInteger,
-  parseAsString,
-  useQueryState,
-} from "next-usequerystate";
-import { parseAsJson } from "next-usequerystate/parsers";
+import { useQueryState } from "next-usequerystate";
 
-import { DEFAULT_BBOX, DEFAULT_MAP_SETTINGS } from "@/constants/map";
+import {
+  bboxParser,
+  countriesComparisonParser,
+  countryParser,
+  datasetsParser,
+  layersParser,
+  layersSettingsParser,
+  mapSettingsParser,
+  pillarsParser,
+  projectParser,
+} from "@/app/parsers";
 
-const datasetsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
 export const useSyncDatasets = () => {
   return useQueryState("datasets", datasetsParser);
 };
 
-const layersParser = parseAsArrayOf(parseAsInteger).withDefault([]);
 export const useSyncLayers = () => {
   return useQueryState("layers", layersParser);
 };
 
-const layersSettingsParser = parseAsJson<{
-  [key: string]: Record<string, unknown>;
-}>();
 export const useSyncLayersSettings = () => {
   return useQueryState("layers-settings", layersSettingsParser);
 };
 
-const bboxParser = parseAsArrayOf(parseAsFloat).withDefault(DEFAULT_BBOX);
 export const useSyncBbox = () => {
   return useQueryState("bbox", bboxParser);
 };
 
-const mapSettingsParser =
-  parseAsJson<typeof DEFAULT_MAP_SETTINGS>().withDefault(DEFAULT_MAP_SETTINGS);
 export const useSyncMapSettings = () => {
   return useQueryState("map-settings", mapSettingsParser);
 };
 
-const countryParser = parseAsString.withDefault("");
 export const useSyncCountry = () => {
   return useQueryState("country", countryParser);
 };
 
-const countriesComparisonParser = parseAsArrayOf(parseAsString).withDefault([]);
 export const useSyncCountriesComparison = () => {
   return useQueryState("countries-comparison", countriesComparisonParser);
 };
 
 export const useSyncProject = () => {
-  return useQueryState("project", parseAsInteger);
+  return useQueryState("project", projectParser);
 };
 
-const pillarsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
 export const useSyncPillars = () => {
   return useQueryState("pillars", pillarsParser);
 };
@@ -89,7 +81,7 @@ export const useSyncSearchParams = () => {
     sp.set("countries-comparison", countriesComparisonParser.serialize(countriesComparison));
 
   // Project
-  if (project) sp.set("project", parseAsInteger.serialize(project));
+  if (project) sp.set("project", projectParser.serialize(project));
   if (pillarsParser.defaultValue !== pillars) sp.set("pillars", pillarsParser.serialize(pillars));
 
   return sp;

diff --git a/client/src/constants/datasets.ts b/client/src/constants/datasets.ts
@@ -0,0 +1,32 @@
+export function GET_CATEGORIES_OPTIONS(search?: string) {
+  return {
+    "pagination[pageSize]": 100,
+    populate: "datasets",
+    sort: "name:asc",
+    filters: {
+      ...(!!search && {
+        datasets: {
+          name: {
+            $containsi: search,
+          },
+        },
+      }),
+    },
+  };
+}
+
+export function GET_DATASETS_OPTIONS(search?: string, categoryId?: number) {
+  return {
+    "pagination[pageSize]": 100,
+    filters: {
+      category: categoryId,
+      ...(!!search && {
+        name: {
+          $containsi: search,
+        },
+      }),
+    },
+    populate: "*",
+    sort: "name:asc",
+  };
+}
diff --git a/client/src/containers/datasets/categories/index.tsx b/client/src/containers/datasets/categories/index.tsx
@@ -8,6 +8,8 @@ import { useGetCategories } from "@/types/generated/category";
 
 import { datasetSearchAtom } from "@/app/store";
 
+import { GET_CATEGORIES_OPTIONS } from "@/constants/datasets";
+
 import CategoriesItem from "@/containers/datasets/categories/item";
 
 import { Accordion } from "@/components/ui/accordion";
@@ -16,27 +18,11 @@ const DatasetsCategories = () => {
   const [values, setValues] = useState<string[]>();
   const datasetSearch = useAtomValue(datasetSearchAtom);
 
-  const { data: categoriesData } = useGetCategories(
-    {
-      "pagination[pageSize]": 100,
-      populate: "datasets",
-      sort: "name:asc",
-      filters: {
-        ...(!!datasetSearch && {
-          datasets: {
-            name: {
-              $containsi: datasetSearch,
-            },
-          },
-        }),
-      },
-    },
-    {
-      query: {
-        keepPreviousData: true,
-      },
+  const { data: categoriesData } = useGetCategories(GET_CATEGORIES_OPTIONS(datasetSearch), {
+    query: {
+      keepPreviousData: true,
     },
-  );
+  });
 
   const VALUE = useMemo(() => {
     if (!values) return categoriesData?.data?.map((c) => `${c?.id}`);

diff --git a/client/src/containers/datasets/index.tsx b/client/src/containers/datasets/index.tsx
@@ -6,6 +6,8 @@ import { useGetDatasets } from "@/types/generated/dataset";
 
 import { datasetSearchAtom } from "@/app/store";
 
+import { GET_DATASETS_OPTIONS } from "@/constants/datasets";
+
 import DatasetsItem from "@/containers/datasets/item";
 
 type DatasetsProps = {
@@ -15,26 +17,11 @@ type DatasetsProps = {
 const Datasets = ({ categoryId }: DatasetsProps) => {
   const datasetSearch = useAtomValue(datasetSearchAtom);
 
-  const { data: datasetsData } = useGetDatasets(
-    {
-      "pagination[pageSize]": 100,
-      filters: {
-        category: categoryId,
-        ...(!!datasetSearch && {
-          name: {
-            $containsi: datasetSearch,
-          },
-        }),
-      },
-      populate: "*",
-      sort: "name:asc",
-    },
-    {
-      query: {
-        keepPreviousData: true,
-      },
+  const { data: datasetsData } = useGetDatasets(GET_DATASETS_OPTIONS(datasetSearch, categoryId), {
+    query: {
+      keepPreviousData: true,
     },
-  );
+  });
 
   return (
     <div className="space-y-2.5">

diff --git a/client/src/containers/projects/filters/dialog.tsx b/client/src/containers/projects/filters/dialog.tsx
@@ -18,7 +18,6 @@ import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -68,9 +67,6 @@ const ProjectsFiltersDialog = () => {
                   <FormItem>
                     <div className="mb-4">
                       <FormLabel className="text-base">Pillars</FormLabel>
-                      <FormDescription>
-                        Select the Pillars you want to display in the sidebar.
-                      </FormDescription>
                     </div>
 
                     {pillarsData?.data?.map((item) => {