diff --git a/src/app/components/plan/PartModal.tsx b/src/app/components/plan/PartModal.tsx index f08d7d6a..ace394ff 100644 --- a/src/app/components/plan/PartModal.tsx +++ b/src/app/components/plan/PartModal.tsx @@ -17,6 +17,7 @@ type PartModalProps = { partIndex: number; setTotalCost: Dispatch>; setWorkHours: Dispatch>; + setCo2Reduction: Dispatch>; }; export default function PartModal({ @@ -31,6 +32,7 @@ export default function PartModal({ partIndex, setTotalCost, setWorkHours, + setCo2Reduction, }: PartModalProps) { function handleModalSubmit() { // Right now the dropdown is setting the state on the selected option so we might not need @@ -39,9 +41,14 @@ export default function PartModal({ parts[partIndex].cost = costInput; setTotalCost(formatNumber(parts.reduce((sum, part) => sum + part.cost, 0))); - // recalculata total hours + // recalculate total hours parts[partIndex].workHours = hoursInput; setWorkHours(parts.reduce((sum, part) => sum + part.workHours, 0)); + + // recalculate total co2 reduction + parts[partIndex].co2Reduction = co2ReductionInput; + setCo2Reduction(parts.reduce((sum, part) => sum + part.co2Reduction, 0)); + setParts(parts); setIsOpen(false); } @@ -51,6 +58,9 @@ export default function PartModal({ const [hoursInput, setHoursInput] = useState( parts[partIndex].workHours ); + const [co2ReductionInput, setCo2ReductionInput] = useState( + parts[partIndex].co2Reduction + ); return ( <> @@ -101,6 +111,7 @@ export default function PartModal({ setOptionInput(option.part); setCostInput(option.cost); setHoursInput(option.workHours); + setCo2ReductionInput(option.co2Reduction); }} selectedOption={optionInput} /> diff --git a/src/app/components/plan/PlanPart.tsx b/src/app/components/plan/PlanPart.tsx index 0ddd726b..2c0dedab 100644 --- a/src/app/components/plan/PlanPart.tsx +++ b/src/app/components/plan/PlanPart.tsx @@ -13,6 +13,7 @@ type PlanPartProps = { setParts: Dispatch>; setTotalCost: Dispatch>; setWorkHours: Dispatch>; + setCo2Reduction: Dispatch>; }; export default function PlanPart({ @@ -25,9 +26,9 @@ export default function PlanPart({ setParts, setTotalCost, setWorkHours, + setCo2Reduction, }: PlanPartProps) { const [isOpen, setIsOpen] = useState(false); - const [partCost, setPartCost] = useState(parts[partIndex].cost); // These are temporary options for the demo const options: PartOption[] = [ @@ -83,7 +84,7 @@ export default function PlanPart({

Cost: £{parts[partIndex].cost}

-

CO2 Reduction: {parts[partIndex].co2Reduction}

+

CO2 Saved: {parts[partIndex].co2Reduction}

Work Hours: {parts[partIndex].workHours}

@@ -100,6 +101,7 @@ export default function PlanPart({ partIndex={partIndex} setTotalCost={setTotalCost} setWorkHours={setWorkHours} + setCo2Reduction={setCo2Reduction} />
); diff --git a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx index 5c00e865..59765609 100644 --- a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx +++ b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx @@ -131,6 +131,9 @@ export default function Plan({ const [workHours, setWorkHours] = useState( parts.reduce((sum, part) => sum + part.workHours, 0) ); + const [co2Reduction, setCo2Reduction] = useState( + parts.reduce((sum, part) => sum + part.co2Reduction, 0) + ); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [isBudgetModalOpen, setIsBudgetModalOpen] = useState(false); @@ -180,6 +183,7 @@ export default function Plan({ setParts={setParts} setTotalCost={setTotalCost} setWorkHours={setWorkHours} + setCo2Reduction={setCo2Reduction} /> ); })} @@ -216,6 +220,7 @@ export default function Plan({
  • Installation Time: {workHours} hours
  • +
  • Co2 saved: {co2Reduction}t
  • diff --git a/src/types/parts.ts b/src/types/parts.ts new file mode 100644 index 00000000..ad2d980b --- /dev/null +++ b/src/types/parts.ts @@ -0,0 +1,10 @@ +type Part = { + part: string; + cost: number; + co2Reduction: number; + workHours: number; +}; + +type PartOption = { label: string } & Part; + +export type { Part, PartOption };