From dd65d40ff1a6bbd4569a1e72ca8d44bd601bd3db Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Tue, 16 Apr 2024 02:15:33 +0100 Subject: [PATCH] fixing type errors --- .../summary/SelectComparisonModal.tsx | 2 +- .../portfolio/summary/SummaryTable.tsx | 137 +++++++++--------- 2 files changed, 67 insertions(+), 72 deletions(-) diff --git a/src/app/components/portfolio/summary/SelectComparisonModal.tsx b/src/app/components/portfolio/summary/SelectComparisonModal.tsx index dbad4e4..4468d66 100644 --- a/src/app/components/portfolio/summary/SelectComparisonModal.tsx +++ b/src/app/components/portfolio/summary/SelectComparisonModal.tsx @@ -71,7 +71,7 @@ const SelectComparisonModal = ({ {userPortfolios.map((portfolio) => ( diff --git a/src/app/components/portfolio/summary/SummaryTable.tsx b/src/app/components/portfolio/summary/SummaryTable.tsx index dc25f39..c4a2e97 100644 --- a/src/app/components/portfolio/summary/SummaryTable.tsx +++ b/src/app/components/portfolio/summary/SummaryTable.tsx @@ -18,6 +18,42 @@ import { import SelectComparisonModal from "./SelectComparisonModal"; import EpcBarChart from "./EpcBarChart"; import { DataItem, ChartData } from "@/app/portfolio/[slug]/utils"; +import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"; + +export async function getComparsionOverviewPortfolioData( + portfolioId: string +): Promise> { + const url = process.env.URL || "" + `/api/portfolio/summary/${portfolioId}`; + + // This is the client side counterpart to getOverviewPortfolioData + const response = await fetch(url, { + method: "GET", + headers: { "Content-Type": "application/json" }, + next: { revalidate: 60 }, + }); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); +} + +interface UseFetchPortfolioSummaryProps { + portfolioId: string; // Assuming portfolioId can be null to handle cases before it's available + onSuccess: (data: DataItem[]) => void; + options?: Omit, "queryKey" | "queryFn">; +} + +export const useFetchPortfolioSummary = ({ + portfolioId, + onSuccess, +}: UseFetchPortfolioSummaryProps) => { + return useQuery({ + queryKey: ["portfolioSummary", portfolioId], + queryFn: () => getComparsionOverviewPortfolioData(portfolioId as string), // Ensure non-null assertion or handle potential null inside the function + onSuccess, + enabled: portfolioId !== "no-id", // Ensure the query only runs when portfolioId is not null + }); +}; const SummaryTable = ({ data, @@ -72,94 +108,53 @@ const SummaryTable = ({ const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedPortfolioId, setSelectedPortfolioId] = + useState("no-id"); + + // Fetch and handle data when a new portfolio is selected + const { + isLoading, + error, + data: fetchedData, + } = useFetchPortfolioSummary({ + portfolioId: selectedPortfolioId, + onSuccess: (fetchedData: DataItem[]) => { + const updatedData = managedData.map((item) => ({ + ...item, + scenarios: [ + ...item.scenarios, + ...(fetchedData.find((fi) => fi.title === item.title)?.scenarios || + []), + ], + })); + setManagedData(updatedData); + if (fetchedData[0] && fetchedData[0].scenarios.length > 0) { + addColumn(fetchedData[0].scenarios[0].scenarioName); + } + }, + }); + const table = useReactTable({ data: managedData, columns: columns, getCoreRowModel: getCoreRowModel(), }); - const addColumn = (portfolioId: string) => { - // Example of dynamically fetched data for a new scenario - const fetchedScenarioData: DataItem[] = [ - { - title: "EPCs", - scenarios: [ - { - scenarioName: "EPC B Scenario", - data: [ - { name: "G", G: Math.random() * 1000 }, - { name: "F", F: Math.random() * 1000 }, - { name: "E", E: Math.random() * 1000 }, - { name: "D", D: Math.random() * 1000 }, - { name: "C", C: Math.random() * 1000 }, - { name: "B", B: Math.random() * 1000 }, - { name: "A", A: Math.random() * 1000 }, - ], - }, - ], - }, - { - title: "# Units", - scenarios: [{ scenarioName: "EPC B Scenario", data: "" }], - }, - { - title: "Co2/unit", - scenarios: [{ scenarioName: "EPC B Scenario", data: "50t" }], - }, - { - title: "Energy bills/unit", - scenarios: [{ scenarioName: "EPC B Scenario", data: "£1,500" }], - }, - { - title: "Cost", - scenarios: [{ scenarioName: "EPC B Scenario", data: "£32,412" }], - }, - { - title: "Cost (£) /unit", - scenarios: [{ scenarioName: "EPC B Scenario", data: "£1,412" }], - }, - { - title: "£ per CO2 reduction", - scenarios: [{ scenarioName: "EPC B Scenario", data: "£50" }], - }, - { - title: "£ per SAP point", - scenarios: [{ scenarioName: "EPC B Scenario", data: "£30" }], - }, - ]; - - // This will come from the fetched data - const scenarioName = fetchedScenarioData[0].scenarios[0].scenarioName; - - // Map over existing data and append new scenario data for matching titles - const updatedData = managedData.map((item) => { - const fetchedItem = fetchedScenarioData.find( - (fi) => fi.title === item.title - ); - return { - ...item, - scenarios: [...item.scenarios, ...(fetchedItem?.scenarios || [])], - }; - }); - - setManagedData(updatedData); - - // Create a new column for this scenario + const addColumn = (scenarioName: string) => { const newColumn: ColumnDef = { + id: scenarioName.toLowerCase().replace(/\s+/g, "_"), accessorFn: (row) => row.scenarios.find((s) => s.scenarioName === scenarioName)?.data, - id: scenarioName.toLowerCase().replace(/\s+/g, "_"), header: () => {scenarioName}, cell: (info) => { const value = info.getValue(); return Array.isArray(value) ? ( ) : ( - {value as String} + {String(value)} ); }, }; - setColumns((oldColumns) => [...oldColumns, newColumn]); }; @@ -175,7 +170,7 @@ const SummaryTable = ({ isOpen={isModalOpen} setIsOpen={setIsModalOpen} userPortfolios={userPortfolios} - onAddColumn={addColumn} + onAddColumn={(id: string) => setSelectedPortfolioId(id)} />