refactor: naming + formatting of percentage values

Vizzuality · Jan 15, 2025 · e346c4d · e346c4d
1 parent 48791ab
commit e346c4d
Show file tree

Hide file tree

Showing 22 changed files with 137 additions and 104 deletions.
diff --git a/client/src/containers/projects/form/assumptions/columns.tsx b/client/src/containers/projects/form/assumptions/columns.tsx
@@ -2,7 +2,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 
 import CellValue from "@/containers/projects/form/cell-value";
 import { DataColumnDef } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 import {
   formatCellValue,
   shouldFormatToPercentage,
@@ -11,7 +11,7 @@ import {
 import { Label } from "@/components/ui/label";
 
 export type AssumptionsFormProperty =
-  `assumption.${keyof NonNullable<CreateCustomProjectForm["assumptions"]>}`;
+  `assumption.${keyof NonNullable<CustomProjectForm["assumptions"]>}`;
 
 const columnHelper =
   createColumnHelper<DataColumnDef<AssumptionsFormProperty>>();
@@ -45,8 +45,7 @@ export const COLUMNS = [
     cell: (props) => (
       <CellValue
         name={
-          props.row.original
-            .property as keyof CreateCustomProjectForm["assumptions"]
+          props.row.original.property as keyof CustomProjectForm["assumptions"]
         }
         isPercentage={shouldFormatToPercentage(props.row.original.unit)}
       />

diff --git a/client/src/containers/projects/form/assumptions/index.tsx b/client/src/containers/projects/form/assumptions/index.tsx
@@ -15,7 +15,7 @@ import {
   COLUMNS,
 } from "@/containers/projects/form/assumptions/columns";
 import { DataColumnDef } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
   Accordion,
@@ -35,7 +35,7 @@ import {
 export const NO_DATA: DataColumnDef<AssumptionsFormProperty>[] = [];
 
 export default function AssumptionsProjectForm() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   const { ecosystem, activity } = form.getValues();
 

diff --git a/client/src/containers/projects/form/cell-value.tsx b/client/src/containers/projects/form/cell-value.tsx
@@ -5,7 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { toDecimalPercentageValue } from "@/lib/format";
 import { cn } from "@/lib/utils";
 
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
   FormControl,
@@ -21,12 +21,12 @@ export default function CellValue({
   hasUnit = false,
   isPercentage = false,
 }: {
-  name: keyof CreateCustomProjectForm;
+  name: keyof CustomProjectForm;
   className?: ComponentProps<typeof FormControl>["className"];
   hasUnit?: boolean;
   isPercentage?: boolean;
 }) {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   return (
     <FormField

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/capex/columns.tsx b/client/src/containers/projects/form/cost-inputs-overrides/capex/columns.tsx
@@ -7,7 +7,7 @@ import {
   COST_INPUTS_KEYS,
   DataColumnDef,
 } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 import {
   formatCellValue,
   shouldFormatToPercentage,
@@ -50,8 +50,7 @@ export const COLUMNS = [
       return (
         <CellValue
           name={
-            props.row.original
-              .property as keyof CreateCustomProjectForm["costInputs"]
+            props.row.original.property as keyof CustomProjectForm["costInputs"]
           }
           isPercentage={shouldFormatToPercentage(props.row.original.unit)}
         />

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/capex/index.tsx b/client/src/containers/projects/form/cost-inputs-overrides/capex/index.tsx
@@ -19,7 +19,7 @@ import {
   COST_INPUTS_KEYS,
   DataColumnDef,
 } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
   Table,
@@ -33,7 +33,7 @@ import {
 const NO_DATA: DataColumnDef<CapexFormProperty>[] = [];
 
 export default function CapexCostInputsTable() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   const {
     ecosystem,

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/constants.ts b/client/src/containers/projects/form/cost-inputs-overrides/constants.ts
@@ -1,6 +1,6 @@
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
-type CostInputsKeys = NonNullable<CreateCustomProjectForm["costInputs"]>;
+type CostInputsKeys = NonNullable<CustomProjectForm["costInputs"]>;
 
 // todo: label dictionary
 

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/opex/columns.tsx b/client/src/containers/projects/form/cost-inputs-overrides/opex/columns.tsx
@@ -7,7 +7,7 @@ import {
   COST_INPUTS_KEYS,
   DataColumnDef,
 } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 import {
   formatCellValue,
   shouldFormatToPercentage,
@@ -50,8 +50,7 @@ export const COLUMNS = [
       return (
         <CellValue
           name={
-            props.row.original
-              .property as keyof CreateCustomProjectForm["costInputs"]
+            props.row.original.property as keyof CustomProjectForm["costInputs"]
           }
           isPercentage={shouldFormatToPercentage(props.row.original.unit)}
         />

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/opex/index.tsx b/client/src/containers/projects/form/cost-inputs-overrides/opex/index.tsx
@@ -19,7 +19,7 @@ import {
   COLUMNS,
   OpexFormProperty,
 } from "@/containers/projects/form/cost-inputs-overrides/opex/columns";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
   Table,
@@ -33,7 +33,7 @@ import {
 const NO_DATA: DataColumnDef<OpexFormProperty>[] = [];
 
 export default function OpexCostInputsTable() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   const {
     ecosystem,

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/other/columns.tsx b/client/src/containers/projects/form/cost-inputs-overrides/other/columns.tsx
@@ -7,7 +7,7 @@ import {
   COST_INPUTS_KEYS,
   DataColumnDef,
 } from "@/containers/projects/form/cost-inputs-overrides/constants";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 import {
   formatCellValue,
   shouldFormatToPercentage,
@@ -50,8 +50,7 @@ export const COLUMNS = [
       return (
         <CellValue
           name={
-            props.row.original
-              .property as keyof CreateCustomProjectForm["costInputs"]
+            props.row.original.property as keyof CustomProjectForm["costInputs"]
           }
           isPercentage={shouldFormatToPercentage(props.row.original.unit)}
         />

diff --git a/client/src/containers/projects/form/cost-inputs-overrides/other/index.tsx b/client/src/containers/projects/form/cost-inputs-overrides/other/index.tsx
@@ -19,7 +19,7 @@ import {
   COLUMNS,
   OtherFormProperty,
 } from "@/containers/projects/form/cost-inputs-overrides/other/columns";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
   Table,
@@ -33,7 +33,7 @@ import {
 const NO_DATA: DataColumnDef<OtherFormProperty>[] = [];
 
 export default function OtherCostInputsTable() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   const {
     ecosystem,

diff --git a/client/src/containers/projects/form/header.tsx b/client/src/containers/projects/form/header.tsx
@@ -10,7 +10,7 @@ import { useSession } from "next-auth/react";
 import { queryKeys } from "@/lib/query-keys";
 import { getAuthHeader } from "@/lib/utils";
 
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 import {
   createCustomProject,
   parseFormValues,
@@ -27,14 +27,14 @@ interface HeaderProps {
 }
 
 export default function Header({ name, id }: HeaderProps) {
-  const methods = useFormContext<CreateCustomProjectForm>();
+  const methods = useFormContext<CustomProjectForm>();
   const { data: session } = useSession();
   const queryClient = useQueryClient();
   const router = useRouter();
   const { toast } = useToast();
   const isEdit = !!id;
   const handleSubmit = useCallback(
-    async (data: CreateCustomProjectForm) => {
+    async (data: CustomProjectForm) => {
       try {
         const formValues = parseFormValues(data);
 

diff --git a/client/src/containers/projects/form/index.tsx b/client/src/containers/projects/form/index.tsx
@@ -10,7 +10,7 @@ import { ExtractAtomValue, useSetAtom } from "jotai";
 
 import Header from "@/containers/projects/form/header";
 import ProjectForm from "@/containers/projects/form/project-form";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { type CustomProjectForm } from "@/containers/projects/form/setup";
 import ProjectSidebar from "@/containers/projects/form/sidebar";
 import { useDefaultFormValues } from "@/containers/projects/form/utils";
 import { formStepAtom } from "@/containers/projects/store";
@@ -26,7 +26,7 @@ export default function CustomProjectForm({ id }: CustomProjectFormProps) {
   const setIntersecting = useSetAtom(formStepAtom);
 
   const formValues = useDefaultFormValues(id);
-  const methods = useForm<CreateCustomProjectForm>({
+  const methods = useForm<CustomProjectForm>({
     resolver: zodResolver(CustomProjectSchema),
     defaultValues: formValues,
     mode: "all",

diff --git a/client/src/containers/projects/form/project-form/index.tsx b/client/src/containers/projects/form/project-form/index.tsx
@@ -6,7 +6,7 @@ import AssumptionsProjectForm from "@/containers/projects/form/assumptions";
 import CostInputsOverridesProjectForm from "@/containers/projects/form/cost-inputs-overrides";
 import RestorationPlanProjectForm from "@/containers/projects/form/restoration-plan";
 import SetupProjectForm, {
-  CreateCustomProjectForm,
+  CustomProjectForm,
 } from "@/containers/projects/form/setup";
 import {
   PROJECT_SETUP_STEPS,
@@ -16,7 +16,7 @@ import {
 import { Card } from "@/components/ui/card";
 
 export const useFormValues = () => {
-  const { getValues } = useFormContext<CreateCustomProjectForm>();
+  const { getValues } = useFormContext<CustomProjectForm>();
 
   return {
     ...getValues(),
@@ -25,7 +25,7 @@ export const useFormValues = () => {
 };
 
 export default function ProjectForm() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
   const { activity } = form.getValues();
 
   return (

diff --git a/client/src/containers/projects/form/restoration-plan/index.tsx b/client/src/containers/projects/form/restoration-plan/index.tsx
@@ -13,7 +13,7 @@ import { queryKeys } from "@/lib/query-keys";
 
 import { useFormValues } from "@/containers/projects/form/project-form";
 import { COLUMNS } from "@/containers/projects/form/restoration-plan/columns";
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
   Accordion,
@@ -31,7 +31,7 @@ import {
 } from "@/components/ui/table";
 
 export default function RestorationPlanProjectForm() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   const {
     ecosystem,

diff --git a/client/src/containers/projects/form/setup/conservation-project-details/index.tsx b/client/src/containers/projects/form/setup/conservation-project-details/index.tsx
@@ -10,7 +10,7 @@ import {
 import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
 import { LOSS_RATE_USED } from "@shared/schemas/custom-projects/custom-project.schema";
 
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
 import LossRate from "@/containers/projects/form/setup/conservation-project-details/loss-rate";
 import T1GlobalEmissionFactor from "@/containers/projects/form/setup/conservation-project-details/t1-global-emission-factor";
 import T2NationalEmissionFactors from "@/containers/projects/form/setup/conservation-project-details/t2-national-emission-factors";
@@ -34,7 +34,7 @@ import {
 } from "@/components/ui/select";
 
 export default function ConservationProjectDetails() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   return (
     <Card variant="secondary" className="flex flex-col gap-4">

diff --git a/client/src/containers/projects/form/setup/conservation-project-details/loss-rate.tsx b/client/src/containers/projects/form/setup/conservation-project-details/loss-rate.tsx
@@ -9,19 +9,14 @@ import { toPercentageValue } from "@/lib/format";
 import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 
-import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
+import { CustomProjectForm } from "@/containers/projects/form/setup";
+import ProjectSpecificLossRate from "@/containers/projects/form/setup/conservation-project-details/project-specific-loss-rate";
 
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
+import { FormLabel } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 
 export default function LossRate() {
-  const form = useFormContext<CreateCustomProjectForm>();
+  const form = useFormContext<CustomProjectForm>();
 
   const {
     ecosystem,
@@ -81,35 +76,5 @@ export default function LossRate() {
     );
   }
 
-  return (
-    <FormField
-      control={form?.control}
-      name="parameters.projectSpecificLossRate"
-      render={() => (
-        <FormItem className="flex items-center justify-between gap-4 space-y-0">
-          <div className="flex-1">
-            <FormLabel
-              tooltip={{
-                title: "Project-specific loss rate",
-                content: "TBD",
-              }}
-            >
-              Project-specific loss rate
-            </FormLabel>
-          </div>
-          <FormControl className="relative after:absolute after:right-6 after:inline-block after:text-sm after:text-muted-foreground after:content-['%']">
-            <div className="relative flex flex-1 items-center">
-              <Input
-                {...form.register("parameters.projectSpecificLossRate")}
-                className="w-full pr-12"
-                type="number"
-                max={0}
-              />
-            </div>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
+  return <ProjectSpecificLossRate />;
 }