fix: lint and ts errors and refactoring

Vizzuality · Dec 7, 2024 · f2efe02 · f2efe02
1 parent 0782b52
commit f2efe02
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 88 deletions.
diff --git a/client/src/app/(overview)/url-store.ts b/client/src/app/(overview)/url-store.ts
@@ -3,6 +3,7 @@ import {
   RESTORATION_ACTIVITY_SUBTYPE,
 } from "@shared/entities/activity.enum";
 import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
+import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 import {
   COST_TYPE_SELECTOR,
   PROJECT_PRICE_TYPE,
@@ -20,7 +21,6 @@ import {
   INITIAL_ABATEMENT_POTENTIAL_RANGE,
 } from "@/containers/overview/filters/constants";
 import { TABLE_VIEWS } from "@/containers/overview/table/toolbar/table-selector";
-import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 
 const SUB_ACTIVITIES = RESTORATION_ACTIVITY_SUBTYPE;
 
@@ -62,7 +62,9 @@ export const INITIAL_FILTERS_STATE: z.infer<typeof filtersSchema> = {
   abatementPotentialRange: INITIAL_ABATEMENT_POTENTIAL_RANGE,
 };
 
-export const INITIAL_SCORECARD_FILTERS_STATE: z.infer<typeof scorecardFiltersSchema> = {
+export const INITIAL_SCORECARD_FILTERS_STATE: z.infer<
+  typeof scorecardFiltersSchema
+> = {
   availabilityOfExperiencedLabor: undefined,
   availabilityOfAlternatingFunding: undefined,
   coastalProtectionBenefits: undefined,
@@ -97,7 +99,9 @@ export function useScorecardFilters() {
   const [popup, setPopup] = useAtom(popupAtom);
   const [filters, setFilters] = useQueryState(
     "scorecardFilters",
-    parseAsJson(scorecardFiltersSchema.parse).withDefault(INITIAL_SCORECARD_FILTERS_STATE),
+    parseAsJson(scorecardFiltersSchema.parse).withDefault(
+      INITIAL_SCORECARD_FILTERS_STATE,
+    ),
   );
 
   const updateFilters = async (

diff --git a/client/src/app/auth/api/[...nextauth]/config.ts b/client/src/app/auth/api/[...nextauth]/config.ts
@@ -1,4 +1,5 @@
 import { cookies } from "next/headers";
+
 import { UserWithAccessToken } from "@shared/dtos/users/user.dto";
 import { LogInSchema } from "@shared/schemas/auth/login.schema";
 import type {

diff --git a/client/src/components/ui/score-card.tsx b/client/src/components/ui/score-card.tsx
@@ -1,10 +1,16 @@
+export type Score = "high" | "medium" | "low";
+
 interface ScoreIndicatorProps {
-  score: "high" | "medium" | "low";
+  score: Score;
   className?: string;
   children?: React.ReactNode;
 }
 
-export const ScoreIndicator = ({ score, children, className = "" }: ScoreIndicatorProps) => {
+export const ScoreIndicator = ({
+  score,
+  children,
+  className = "",
+}: ScoreIndicatorProps) => {
   const bgColorClass = {
     high: "bg-high",
     medium: "bg-medium",
@@ -13,9 +19,9 @@ export const ScoreIndicator = ({ score, children, className = "" }: ScoreIndicat
 
   return (
     <div
-      className={`flex h-10 items-center justify-center font-medium text-deep-ocean capitalize ${bgColorClass} ${className}`}
+      className={`flex h-10 items-center justify-center font-medium capitalize text-deep-ocean ${bgColorClass} ${className}`}
     >
       {children ? children : score}
     </div>
   );
-};
+};
diff --git a/client/src/containers/overview/table/utils.ts b/client/src/containers/overview/table/utils.ts
@@ -1,9 +1,14 @@
+import { ProjectScorecardView } from "@shared/entities/project-scorecard.view";
 import { Project } from "@shared/entities/projects.entity";
 import { z } from "zod";
 
-import { filtersSchema } from "@/app/(overview)/url-store";
+import {
+  filtersSchema,
+  scorecardFiltersSchema,
+} from "@/app/(overview)/url-store";
 
 export const NO_DATA: Project[] = [];
+export const NO_SCORECARD_DATA: ProjectScorecardView[] = [];
 
 const OMITTED_FIELDS = [
   "keyword",
@@ -13,14 +18,14 @@ const OMITTED_FIELDS = [
 ];
 
 export const filtersToQueryParams = (
-  filters: z.infer<typeof filtersSchema>,
+  filters: z.infer<typeof filtersSchema | typeof scorecardFiltersSchema>,
 ) => {
   return Object.keys(filters)
     .filter((key) => !OMITTED_FIELDS.includes(key))
     .reduce(
       (acc, key) => ({
         ...acc,
-        ...(filters[key as keyof typeof filters]?.length && {
+        ...(Array.isArray(filters[key as keyof typeof filters]) && {
           [`filter[${key}]`]: filters[key as keyof typeof filters],
         }),
       }),

diff --git a/client/src/containers/overview/table/view/overview/columns.tsx b/client/src/containers/overview/table/view/overview/columns.tsx
@@ -5,6 +5,7 @@ import { z } from "zod";
 import { formatNumber } from "@/lib/format";
 
 import { filtersSchema } from "@/app/(overview)/url-store";
+
 import { ScoreIndicator } from "@/components/ui/score-card";
 
 const columnHelper = createColumnHelper<Partial<ProjectType>>();

diff --git a/client/src/containers/overview/table/view/overview/index.tsx b/client/src/containers/overview/table/view/overview/index.tsx
@@ -170,21 +170,18 @@ export function OverviewTable() {
                 }}
               >
                 {row.getVisibleCells().map((cell) => (
-                    <TableCell
-                      key={cell.id}
-                      className={cn({
-                        "p-0": cell.column.id === "scoreCardRating",
-                      })}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                    cell.getContext(),
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
+                  <TableCell
+                    key={cell.id}
+                    className={cn({
+                      "p-0": cell.column.id === "scoreCardRating",
+                    })}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
             ))
-          ) : ( 
+          ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
                 No results.

diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx
@@ -1,20 +1,10 @@
+import { ProjectScorecardView } from "@shared/entities/project-scorecard.view";
 import { createColumnHelper } from "@tanstack/react-table";
+
+import { Score } from "@/components/ui/score-card";
 import { ScoreIndicator } from "@/components/ui/score-card";
-import { ProjectScorecard } from "@shared/entities/project-scorecard.entity";
 
-const columnHelper = createColumnHelper<
-  Partial<ProjectScorecard> & {
-    financialFeasibility: number;
-    legalFeasibility: number;
-    implementationFeasibility: number;
-    socialFeasibility: number;
-    securityRating: number;
-    availabilityOfExperiencedLabor: number;
-    availabilityOfAlternatingFunding: number;
-    coastalProtectionBenefit: number;
-    biodiversityBenefit: number;
-  }
->();
+const columnHelper = createColumnHelper<ProjectScorecardView>();
 
 export const TABLE_COLUMNS = [
   columnHelper.accessor("projectName", {
@@ -24,73 +14,46 @@ export const TABLE_COLUMNS = [
   columnHelper.accessor("financialFeasibility", {
     enableSorting: true,
     header: () => <span>Financial feasibility</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("legalFeasibility", {
     enableSorting: true,
     header: () => <span>Legal Feasibility</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("implementationFeasibility", {
     enableSorting: true,
     header: () => <span>Implementation feasibility</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("socialFeasibility", {
     enableSorting: true,
     header: () => <span>Social Feasibility</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("securityRating", {
     enableSorting: true,
     header: () => <span>Security Rating</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("availabilityOfExperiencedLabor", {
     enableSorting: true,
     header: () => <span>Availability of experienced labor</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("availabilityOfAlternatingFunding", {
     enableSorting: true,
     header: () => <span>Availability of alternating funding</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
-  columnHelper.accessor("coastalProtectionBenefit", {
+  columnHelper.accessor("coastalProtectionBenefits", {
     enableSorting: true,
     header: () => <span>Coastal Protection benefit</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
   columnHelper.accessor("biodiversityBenefit", {
     enableSorting: true,
     header: () => <span>Biodiversity benefit</span>,
-    cell: (props) => {
-      const value = props.getValue();
-      return <ScoreIndicator score={value as "high" | "medium" | "low"} />;
-    },
+    cell: (props) => <ScoreIndicator score={props.getValue() as Score} />,
   }),
 ];
diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 
 import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import { ProjectScorecardView } from "@shared/entities/project-scorecard.view";
 import { keepPreviousData } from "@tanstack/react-query";
 import {
   flexRender,
@@ -21,7 +22,7 @@ import { useScorecardFilters, useTableView } from "@/app/(overview)/url-store";
 
 import {
   filtersToQueryParams,
-  NO_DATA,
+  NO_SCORECARD_DATA,
 } from "@/containers/overview/table/utils";
 import { TABLE_COLUMNS } from "@/containers/overview/table/view/scorecard-prioritization/columns";
 
@@ -41,7 +42,7 @@ export function ScoredCardPrioritizationTable() {
   const [tableView] = useTableView();
   const [filters] = useScorecardFilters();
   const [sorting, setSorting] = useState<SortingState>([
-    { 
+    {
       id: "projectName",
       desc: true,
     },
@@ -50,7 +51,7 @@ export function ScoredCardPrioritizationTable() {
     pageIndex: 0,
     pageSize: Number.parseInt(PAGINATION_SIZE_OPTIONS[0]),
   });
-  const queryKey = queryKeys.projects.all(tableView, {
+  const queryKey = queryKeys.scorecardFilters.all(tableView, {
     ...filters,
     sorting,
     pagination,
@@ -61,26 +62,23 @@ export function ScoredCardPrioritizationTable() {
     {
       query: {
         ...filtersToQueryParams(filters),
-
-        filter: {
-        },
-        // fields: TABLE_COLUMNS.map((column) => column.accessorKey),
-        // ...(sorting.length > 0 && {
-        //   sort: sorting.map((sort) => `${sort.desc ? "" : "-"}${sort.id}`),
-        // }),
+        filter: {},
         pageNumber: pagination.pageIndex + 1,
         pageSize: pagination.pageSize,
       },
     },
     {
       queryKey,
-      select: (data) => data.body,
+      select: (data) => ({
+        ...data.body,
+        data: data.body.data as ProjectScorecardView[],
+      }),
       placeholderData: keepPreviousData,
     },
   );
 
   const table = useReactTable({
-    data: isSuccess ? data.data : NO_DATA,
+    data: isSuccess ? data.data : NO_SCORECARD_DATA,
     columns: TABLE_COLUMNS,
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,

diff --git a/client/src/lib/query-keys.ts b/client/src/lib/query-keys.ts
@@ -5,7 +5,10 @@ import {
 import { PaginationState, SortingState } from "@tanstack/react-table";
 import { z } from "zod";
 
-import { filtersSchema } from "@/app/(overview)/url-store";
+import {
+  filtersSchema,
+  scorecardFiltersSchema,
+} from "@/app/(overview)/url-store";
 
 import { TABLE_VIEWS } from "@/containers/overview/table/toolbar/table-selector";
 
@@ -34,9 +37,22 @@ export const projectKeys = createQueryKeys("projects", {
   countries: null,
 });
 
+export const scorecardFiltersKeys = createQueryKeys("scorecardFilters", {
+  all: (
+    tableView: (typeof TABLE_VIEWS)[number],
+    filters?: z.infer<typeof scorecardFiltersSchema> & {
+      sorting?: SortingState;
+      pagination?: PaginationState;
+    },
+  ) => ["all", tableView, filters],
+  id: (id: string) => [id],
+  countries: null,
+});
+
 export const queryKeys = mergeQueryKeys(
   authKeys,
   userKeys,
   geometriesKeys,
   projectKeys,
+  scorecardFiltersKeys,
 );