From 021345f07397c144069817a7e26fc13eaf900596 Mon Sep 17 00:00:00 2001 From: Michael Taylor Date: Thu, 5 Oct 2023 09:43:03 -0400 Subject: [PATCH] fix: data crashes --- src/App.js | 16 ++++-- src/components/blocks/APIDataTable.js | 6 +- src/components/blocks/UnitsDetails.js | 26 ++++++--- src/components/forms/ProjectEditModal.js | 4 +- src/components/forms/ProjectTransferModal.js | 4 +- src/components/forms/UnitDetailsForm.js | 60 +++++++++++++------- src/pages/Projects/index.js | 4 +- 7 files changed, 83 insertions(+), 37 deletions(-) diff --git a/src/App.js b/src/App.js index de75bb5c..018e8950 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ import { import { getOrganizationData, getPickLists, + getProjects, } from './store/actions/climateWarehouseActions'; import { initiateSocket } from './store/actions/socket'; @@ -28,12 +29,19 @@ const App = () => { const { socketStatus } = useSelector(state => state.app); const appStore = useSelector(state => state.app); const [translationTokens, setTranslationTokens] = useState(); + const { projects } = useSelector(store => store.climateWarehouse); useEffect(() => { dispatch(initiateSocket(appStore.serverAddress)); - dispatch(getOrganizationData()); - dispatch(getPickLists()); - dispatch(getUser()); + + const hydrateData = () => { + dispatch(getOrganizationData()); + dispatch(getPickLists()); + dispatch(getUser()); + dispatch(getProjects({ useMockedResponse: false, useApiMock: false })); + }; + + hydrateData(); }, [dispatch, appStore.serverAddress]); useEffect(() => { @@ -52,7 +60,7 @@ const App = () => { } }, [appStore.locale]); - if (!translationTokens) { + if (!translationTokens || !projects) { return ; } diff --git a/src/components/blocks/APIDataTable.js b/src/components/blocks/APIDataTable.js index 6ccf2860..a5e774fc 100644 --- a/src/components/blocks/APIDataTable.js +++ b/src/components/blocks/APIDataTable.js @@ -167,10 +167,14 @@ const APIDataTable = withTheme( const getFullRecord = useCallback( partialRecord => { + if (!projects) { + return null; + } + let fullRecord = null; if (actions === 'Projects') { - fullRecord = projects.filter( + fullRecord = projects?.filter( project => project.warehouseProjectId === partialRecord.warehouseProjectId, )[0]; diff --git a/src/components/blocks/UnitsDetails.js b/src/components/blocks/UnitsDetails.js index adf07d96..e69771e2 100644 --- a/src/components/blocks/UnitsDetails.js +++ b/src/components/blocks/UnitsDetails.js @@ -1,6 +1,6 @@ -import React from 'react'; +import React, { useMemo, useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { useNavigate, useLocation } from 'react-router-dom'; import styledComponents from 'styled-components'; @@ -14,6 +14,7 @@ import { SpanTwoColumnsContainer } from '../layout'; import { detailsViewData } from '../../utils/functionUtils'; import { MagnifyGlassIcon } from '..'; import { getUpdatedUrl } from '../../utils/urlUtils'; +import { getProjects } from '../../store/actions/climateWarehouseActions'; const StyledCursor = styledComponents('div')` cursor: zoom-in; @@ -23,17 +24,28 @@ const UnitsDetails = ({ data, stagingData, changeColor }) => { const { issuances, projects } = useSelector(store => store.climateWarehouse); const navigate = useNavigate(); let location = useLocation(); + const dispatch = useDispatch(); + + useEffect(() => { + dispatch(getProjects({ useMockedResponse: false, useApiMock: false })); + }, [data]); const unitBelongsToProjectId = data && issuances?.filter(issuanceItem => issuanceItem.id === data.issuanceId)[0] ?.warehouseProjectId; - const unitBelongsToProjectName = - data && - projects?.filter( - projectItem => projectItem.warehouseProjectId === unitBelongsToProjectId, - )[0]?.projectName; + const unitBelongsToProjectName = useMemo(() => { + if (data && projects) { + const projectData = projects.data || projects; + return projectData?.filter( + projectItem => + projectItem.warehouseProjectId === unitBelongsToProjectId, + )[0]?.projectName; + } + + return '--'; + }, [data, projects]); const projectUrl = data && diff --git a/src/components/forms/ProjectEditModal.js b/src/components/forms/ProjectEditModal.js index 9b09ed4f..70297709 100644 --- a/src/components/forms/ProjectEditModal.js +++ b/src/components/forms/ProjectEditModal.js @@ -42,9 +42,9 @@ const ProjectEditModal = ({ }) => { const projectToBeEdited = useSelector( state => - state.climateWarehouse.projects.filter( + state.climateWarehouse.projects?.filter( project => project.warehouseProjectId === record.warehouseProjectId, - )[0], + )?.[0], ); const [project, setProject] = useState(null); const [tabValue, setTabValue] = useState(0); diff --git a/src/components/forms/ProjectTransferModal.js b/src/components/forms/ProjectTransferModal.js index 71691c01..dae4d924 100644 --- a/src/components/forms/ProjectTransferModal.js +++ b/src/components/forms/ProjectTransferModal.js @@ -42,9 +42,9 @@ const ProjectTransferModal = ({ }) => { const projectToBeTransferred = useSelector( state => - state.climateWarehouse.projects.filter( + state.climateWarehouse.projects?.filter( project => project.warehouseProjectId === record.warehouseProjectId, - )[0], + )?.[0], ); const [project, setProject] = useState(null); const [tabValue, setTabValue] = useState(0); diff --git a/src/components/forms/UnitDetailsForm.js b/src/components/forms/UnitDetailsForm.js index c404e0fc..45a674fb 100644 --- a/src/components/forms/UnitDetailsForm.js +++ b/src/components/forms/UnitDetailsForm.js @@ -55,7 +55,8 @@ const UnitDetailsForm = () => { const projectsSelectOptions = useMemo(() => { if (myProjects) { - return myProjects.map(projectItem => ({ + const projectData = myProjects.data || myProjects; + return projectData.map(projectItem => ({ value: projectItem, label: projectItem.projectName, })); @@ -155,7 +156,8 @@ const UnitDetailsForm = () => { + })} + > @@ -211,7 +213,8 @@ const UnitDetailsForm = () => { + })} + > @@ -249,7 +252,8 @@ const UnitDetailsForm = () => { + })} + > @@ -283,7 +287,8 @@ const UnitDetailsForm = () => { + })} + > @@ -317,7 +322,8 @@ const UnitDetailsForm = () => { + })} + > @@ -351,7 +357,8 @@ const UnitDetailsForm = () => { + })} + > @@ -385,7 +392,8 @@ const UnitDetailsForm = () => { + })} + > @@ -422,7 +430,8 @@ const UnitDetailsForm = () => { + })} + > @@ -453,7 +462,8 @@ const UnitDetailsForm = () => { + })} + > @@ -482,7 +492,8 @@ const UnitDetailsForm = () => { + })} + > @@ -512,7 +523,8 @@ const UnitDetailsForm = () => { + })} + > @@ -546,7 +558,8 @@ const UnitDetailsForm = () => { + })} + > @@ -579,7 +592,8 @@ const UnitDetailsForm = () => { + })} + > @@ -612,7 +626,8 @@ const UnitDetailsForm = () => { + })} + > @@ -646,7 +661,8 @@ const UnitDetailsForm = () => { + })} + > @@ -683,7 +699,8 @@ const UnitDetailsForm = () => { + })} + > @@ -717,7 +734,8 @@ const UnitDetailsForm = () => { + })} + > @@ -748,7 +766,8 @@ const UnitDetailsForm = () => { + })} + > @@ -783,7 +802,8 @@ const UnitDetailsForm = () => { + })} + > diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js index 6701f746..49eec0db 100644 --- a/src/pages/Projects/index.js +++ b/src/pages/Projects/index.js @@ -322,7 +322,9 @@ const Projects = withTheme(({ theme }) => { return null; } - return projects.map(project => + const projectData = projects.data || projects; + + return projectData.map(project => _.pick(project, [ 'warehouseProjectId', 'currentRegistry',