ui: Fetch scenarios and portfolios using React Query

1 files changed, 5 insertions, 22 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
index ce7d5514..f9a380cb 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
@@ -1,32 +1,15 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent'
 import { useRouter } from 'next/router'
+import { usePortfolio, useScenarios } from '../../../data/project'
 
 const PortfolioResultsContainer = (props) => {
     const router = useRouter()
     const { portfolio: currentPortfolioId } = router.query
-    const { scenarios, portfolio } = useSelector((state) => {
-        if (
-            !currentPortfolioId ||
-            !state.objects.portfolio[currentPortfolioId] ||
-            state.objects.portfolio[currentPortfolioId].scenarioIds
-                .map((scenarioId) => state.objects.scenario[scenarioId])
-                .some((s) => s === undefined)
-        ) {
-            return {
-                portfolio: undefined,
-                scenarios: [],
-            }
-        }
-
-        return {
-            portfolio: state.objects.portfolio[currentPortfolioId],
-            scenarios: state.objects.portfolio[currentPortfolioId].scenarioIds.map(
-                (scenarioId) => state.objects.scenario[scenarioId]
-            ),
-        }
-    })
+    const { data: portfolio } = usePortfolio(currentPortfolioId)
+    const scenarios = useScenarios(portfolio?.scenarioIds ?? [])
+        .filter((res) => res.data)
+        .map((res) => res.data)
 
     return <PortfolioResultsComponent {...props} scenarios={scenarios} portfolio={portfolio} />
 }