From f2efe02cd3346914ae97d81ee0d0ca1f34a804ba Mon Sep 17 00:00:00 2001 From: onehanddev Date: Sat, 7 Dec 2024 16:15:01 +0530 Subject: [PATCH] fix: lint and ts errors and refactoring --- client/src/app/(overview)/url-store.ts | 10 ++- .../src/app/auth/api/[...nextauth]/config.ts | 1 + client/src/components/ui/score-card.tsx | 14 ++-- client/src/containers/overview/table/utils.ts | 11 +++- .../overview/table/view/overview/columns.tsx | 1 + .../overview/table/view/overview/index.tsx | 25 ++++--- .../view/scorecard-prioritization/columns.tsx | 65 ++++--------------- .../view/scorecard-prioritization/index.tsx | 22 +++---- client/src/lib/query-keys.ts | 18 ++++- 9 files changed, 79 insertions(+), 88 deletions(-) diff --git a/client/src/app/(overview)/url-store.ts b/client/src/app/(overview)/url-store.ts index 80acb260..7f5f1281 100644 --- 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 = { abatementPotentialRange: INITIAL_ABATEMENT_POTENTIAL_RANGE, }; -export const INITIAL_SCORECARD_FILTERS_STATE: z.infer = { +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 index f68bbb0e..e28316ce 100644 --- 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 index 3007e5b5..8ca158fe 100644 --- 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 (
{children ? children : score}
); -}; \ No newline at end of file +}; diff --git a/client/src/containers/overview/table/utils.ts b/client/src/containers/overview/table/utils.ts index 7e0a84bf..817d34fe 100644 --- 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, + filters: z.infer, ) => { 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 index 82d24950..70b6902d 100644 --- 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>(); diff --git a/client/src/containers/overview/table/view/overview/index.tsx b/client/src/containers/overview/table/view/overview/index.tsx index 5ac9c304..77ac5731 100644 --- 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) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + )) - ) : ( + ) : ( 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 index 45948fda..8cf1b515 100644 --- 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 & { - financialFeasibility: number; - legalFeasibility: number; - implementationFeasibility: number; - socialFeasibility: number; - securityRating: number; - availabilityOfExperiencedLabor: number; - availabilityOfAlternatingFunding: number; - coastalProtectionBenefit: number; - biodiversityBenefit: number; - } ->(); +const columnHelper = createColumnHelper(); export const TABLE_COLUMNS = [ columnHelper.accessor("projectName", { @@ -24,73 +14,46 @@ export const TABLE_COLUMNS = [ columnHelper.accessor("financialFeasibility", { enableSorting: true, header: () => Financial feasibility, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("legalFeasibility", { enableSorting: true, header: () => Legal Feasibility, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("implementationFeasibility", { enableSorting: true, header: () => Implementation feasibility, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("socialFeasibility", { enableSorting: true, header: () => Social Feasibility, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("securityRating", { enableSorting: true, header: () => Security Rating, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("availabilityOfExperiencedLabor", { enableSorting: true, header: () => Availability of experienced labor, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("availabilityOfAlternatingFunding", { enableSorting: true, header: () => Availability of alternating funding, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), - columnHelper.accessor("coastalProtectionBenefit", { + columnHelper.accessor("coastalProtectionBenefits", { enableSorting: true, header: () => Coastal Protection benefit, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), columnHelper.accessor("biodiversityBenefit", { enableSorting: true, header: () => Biodiversity benefit, - cell: (props) => { - const value = props.getValue(); - return ; - }, + cell: (props) => , }), ]; diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx index ec24e6a1..8b6570a6 100644 --- 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([ - { + { 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 index dad8e4cc..8aee773b 100644 --- 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 & { + sorting?: SortingState; + pagination?: PaginationState; + }, + ) => ["all", tableView, filters], + id: (id: string) => [id], + countries: null, +}); + export const queryKeys = mergeQueryKeys( authKeys, userKeys, geometriesKeys, projectKeys, + scorecardFiltersKeys, );