feat: Global state continued (#359)

* feat: Added empty analogue model state

* feat: Removed all unnecessary fetch model calls, and removed some prop drills

* feat: Added model area type and outcrops to global state

* feat: Added several Dto's to global state

* feat: Updated GDE and stratographics

* feat: Added new hook for compute settings

* feat: Updated model page to do most calls. Added multiple states in global context

Author: thomaslf97

src/components/AreaCoordinates/AreaCoordinates.tsx

@@ -16,9 +16,6 @@ import {
   CoordinateDto,
   ModelAreaTypeDto,
 } from '../../api/generated';
-import { useFetchCases } from '../../hooks/useFetchCases';
-import { useFetchModel } from '../../hooks/useFetchModel';
-import { useFetchModelAreas } from '../../hooks/useFetchModelAreas';
 import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates';
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 import { AnalogueModelImageView } from '../ImageView/AnalogueModelImageView';
@@ -29,6 +26,10 @@ import {
   validateCoordinates,
 } from './hooks/AreaCoordinates.hooks';
 import { useModelResults } from './hooks/useModelResults';
+import {
+  analogueModelDefault,
+  usePepmContextStore,
+} from '../../hooks/GlobalState';
 
 export type AreaCoordinateType = {
   modelAreaId: string;
@@ -84,13 +85,11 @@ export const AreaCoordinates = ({
   const [fallbackAreaCoordinate, setfallbackAreaCoordinate] =
     useState<AreaCoordinateType>();
   const { modelId } = useParams();
-  const { data, isLoading } = useFetchModel(modelId);
-  const cases = useFetchCases();
+  const { analogueModel, modelAreaTypes, computeCases } = usePepmContextStore();
   const { activeAreaResultList } = useModelResults(
     activeArea.name,
-    cases.data?.data,
+    computeCases,
   );
-  const modelAreas = useFetchModelAreas();
   const mutateAreaCoordinates = useMutateAreaCoordinates();
 
   const handleSelectChange = async (
@@ -108,7 +107,8 @@ export const AreaCoordinates = ({
       return;
     }
 
-    const selectableAreas = data?.data?.modelAreas && data?.data?.modelAreas;
+    const selectableAreas =
+      analogueModel.modelAreas && analogueModel.modelAreas;
 
     const selectedArea = selectableAreas?.filter(
       (area) => area.modelAreaType === changes.selectedItems[0].name,
@@ -267,7 +267,7 @@ export const AreaCoordinates = ({
     setEdit(!edit);
   };
 
-  if (modelAreas.isLoading || modelAreas.data === undefined || isLoading)
+  if (modelAreaTypes.length === 0 || analogueModel === analogueModelDefault)
     return <p>Loading.....</p>;
 
   return (
@@ -278,7 +278,7 @@ export const AreaCoordinates = ({
             <Autocomplete
               className={errors?.area && 'autocomplete-error'}
               label={'Select area'}
-              options={modelAreas.data.data}
+              options={modelAreaTypes}
               optionLabel={(option) => option.name}
               onOptionsChange={handleSelectChange}
               selectedOptions={[activeArea]}
@@ -365,18 +365,19 @@ export const AreaCoordinates = ({
             </Styled.CoordinateFields>
           )}
         </Styled.Selects>
-        {data && data.data.analogueModelImage === null && (
-          <div>
-            <Typography>
-              No image is found for this model. Try refreshing the page
-            </Typography>
-          </div>
-        )}
-        {data?.data.analogueModelId &&
-          data.data.analogueModelImage?.analogueModelImageId && (
+        {analogueModel !== analogueModelDefault &&
+          analogueModel.analogueModelImage === null && (
+            <div>
+              <Typography>
+                No image is found for this model. Try refreshing the page
+              </Typography>
+            </div>
+          )}
+        {analogueModel.analogueModelId &&
+          analogueModel.analogueModelImage?.analogueModelImageId && (
             <AnalogueModelImageView
-              modelId={data?.data.analogueModelId}
-              imageId={data?.data.analogueModelImage?.analogueModelImageId}
+              modelId={analogueModel.analogueModelId}
+              imageId={analogueModel.analogueModelImage?.analogueModelImageId}
               coordinateBox={areaCoordinate}
             />
           )}

src/components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog.tsx

@@ -3,12 +3,13 @@
 
 import { Button, Dialog, Snackbar } from '@equinor/eds-core-react';
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
 import { CoordinateDto } from '../../../api/generated';
-import { useFetchModel } from '../../../hooks/useFetchModel';
-import { useFetchModelAreas } from '../../../hooks/useFetchModelAreas';
 import { AreaCoordinates } from '../AreaCoordinates';
 import * as Styled from '../AreaCoordinates.styled';
+import {
+  analogueModelDefault,
+  usePepmContextStore,
+} from '../../../hooks/GlobalState';
 
 export type AreaCoordinateType = {
   modelAreaId: string;
@@ -23,15 +24,7 @@ export const CoordinatesDialog = ({
   toggleOpen: () => void;
 }) => {
   const [showSaveAlert, setSaveAlert] = useState(false);
-
-  const { modelId } = useParams();
-
-  const { data, isLoading } = useFetchModel(modelId);
-  const modelAreas = useFetchModelAreas();
-
-  // const [activeModelArea, setActiveModelArea] = useState(null);
-
-  // const {data, isLoading} = useFetch
+  const { analogueModel, modelAreaTypes } = usePepmContextStore();
 
   function clearStatus() {
     setSaveAlert(false);
@@ -41,14 +34,16 @@ export const CoordinatesDialog = ({
     toggleOpen();
   };
 
-  if (modelAreas.isLoading || modelAreas.data === undefined || isLoading)
+  if (modelAreaTypes.length === 0 || analogueModel === analogueModelDefault)
     return <p>Loading.....</p>;
 
   return (
     <>
       <Styled.Dialog open={open}>
         <Dialog.Header>
-          <Dialog.Title>Manage model areas for {data?.data.name}</Dialog.Title>
+          <Dialog.Title>
+            Manage model areas for {analogueModel.name}
+          </Dialog.Title>
         </Dialog.Header>
         <Styled.Content>
           <AreaCoordinates setSaveAlert={setSaveAlert}></AreaCoordinates>

src/components/GrossDepositionEnviroment/GdeSelect/GdeSelect.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable max-lines-per-function */
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { GeologicalStandardDto } from '../../../api/generated';
-import { useFetchGrossDepData } from '../../../hooks/useFetchGrossDepData';
 import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { sortList } from '../../../utils/SortList';
 import {
   GDEErrorType,
   GdeType,
 } from '../GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup';
+import { usePepmContextStore } from '../../../hooks/GlobalState';
 
 export const GdeSelect = ({
   gdeObject,
@@ -20,29 +20,28 @@ export const GdeSelect = ({
   error: GDEErrorType;
   setErrors: React.Dispatch<React.SetStateAction<GDEErrorType>>;
 }) => {
-  const GdeData = useFetchGrossDepData();
+  const { geologyStandards } = usePepmContextStore();
+  if (geologyStandards.length === 0) return <p>Loading .....</p>;
 
-  if (GdeData.isLoading || !GdeData.data?.success) return <p>Loading .....</p>;
-
-  const Gde = GdeData.data.data.filter(
+  const Gde = geologyStandards.filter(
     (g) => g.geologyGroup === 'GrossDepositionalEnvironment',
   );
 
-  const De = GdeData.data.data.filter(
+  const De = geologyStandards.filter(
     (g) =>
       g.geologyGroup === 'DepositionalEnvironment' &&
       g.geologicalStandardParentId ===
         gdeObject.grossDepEnv?.geologicalStandardId,
   );
 
-  const SubEnvironment = GdeData.data.data.filter(
+  const SubEnvironment = geologyStandards.filter(
     (g) =>
       g.geologyGroup === 'Subenvironment' &&
       g.geologicalStandardParentId ===
         gdeObject.grossDepEnv?.geologicalStandardId,
   );
 
-  const ArchitecturalElement = GdeData.data.data.filter(
+  const ArchitecturalElement = geologyStandards.filter(
     (g) => g.geologyGroup === 'ArchitecturalElement',
   );
 

src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx

@@ -11,10 +11,8 @@ import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import {
   AddGeologicalGroupForm,
-  AnalogueModelDetail,
   AnalogueModelsService,
   DeleteGeologicalGroupCommandResponse,
-  GeologicalGroupDto,
   GeologicalStandardDto,
 } from '../../../api/generated';
 import { queryClient } from '../../../auth/queryClient';
@@ -24,6 +22,7 @@ import * as Styled from './GrossDepositionEnviromentGroup.styled';
 
 import { validateInput } from './GDE.hooks';
 import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin';
+import { usePepmContextStore } from '../../../hooks/GlobalState';
 
 export interface GdeType {
   grossDepEnv?: GeologicalStandardDto;
@@ -46,18 +45,15 @@ export type GDEErrorType = {
 };
 export const GrossDepositionEnviromentGroup = ({
   modelIdParent,
-  defaultMetadata,
-  gdeGroups,
   deleteGdeRow,
 }: {
   modelIdParent?: string;
-  defaultMetadata: AnalogueModelDetail;
-  gdeGroups: GeologicalGroupDto[];
   deleteGdeRow: (
     geologicalGroupId: string,
   ) => Promise<DeleteGeologicalGroupCommandResponse | undefined>;
 }) => {
   const isOwnerOrAdmin = useIsOwnerOrAdmin();
+  const { analogueModel } = usePepmContextStore();
   const [showGdeDialog, setShowGdeDialog] = useState<boolean>(false);
   const [gdeObject, setGdeObject] = useState<GdeType>(defaultGdeData);
   const [errors, setErrors] = useState<GDEErrorType>({});
@@ -85,7 +81,7 @@ export const GrossDepositionEnviromentGroup = ({
   });
 
   const handleAddGde = async () => {
-    const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId;
+    const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId;
     const err = await validateInput(gdeObject);
     setErrors(err);
 
@@ -128,7 +124,7 @@ export const GrossDepositionEnviromentGroup = ({
         <Typography variant="h4" as="h3">
           Gross Depositional Environment (GDE)
         </Typography>
-        {gdeGroups.length > 0 && (
+        {analogueModel.geologicalGroups.length > 0 && (
           <Table>
             <Table.Head>
               <Table.Row>
@@ -141,7 +137,7 @@ export const GrossDepositionEnviromentGroup = ({
             </Table.Head>
 
             <Table.Body>
-              {gdeGroups.map((row) => (
+              {analogueModel.geologicalGroups.map((row) => (
                 <Table.Row key={row.geologicalGroupId}>
                   <Table.Cell>
                     {isOwnerOrAdmin && (

src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx

@@ -8,17 +8,13 @@ import {
 } from '@equinor/eds-core-react';
 import { delete_to_trash as deleteIcon } from '@equinor/eds-icons';
 import { useState } from 'react';
-import {
-  AddAnalogueModelOutcropForm,
-  AnalogueModelDetail,
-  OutcropDto,
-  RegionDto,
-} from '../../../api/generated';
+import { AddAnalogueModelOutcropForm } from '../../../api/generated';
 import { useOutcropAnalouge } from '../../../hooks/useOutcropAnalogue';
 import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { OutcropSelect } from '../OutcropSelect/OutcropSelect';
 import * as Styled from './OutcropAnalogueGroup.styled';
 import { useIsOwnerOrAdmin } from '../../../hooks/useIsOwnerOrAdmin';
+import { usePepmContextStore } from '../../../hooks/GlobalState';
 
 export interface OutcropType {
   outcropId?: string;
@@ -42,14 +38,11 @@ export type OutcropErrorType = {
 
 export const OutcropAnalogueGroup = ({
   modelIdParent,
-  defaultMetadata,
-  outcropGroup,
 }: {
   modelIdParent?: string;
-  defaultMetadata: AnalogueModelDetail;
-  outcropGroup: OutcropDto[];
 }) => {
   const isOwnerOrAdmin = useIsOwnerOrAdmin();
+  const { analogueModel } = usePepmContextStore();
   const [showOutcropDialog, setShowOutcropDialog] = useState<boolean>(false);
   const [errors, setErrors] = useState<OutcropErrorType>({});
   const [outcropObject, setOutcropObject] =
@@ -73,7 +66,7 @@ export const OutcropAnalogueGroup = ({
   };
 
   const handleAddOutcropAnalogue = async () => {
-    const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId;
+    const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId;
     const err = await validateInput(outcropObject);
     setErrors(err);
 
@@ -90,7 +83,7 @@ export const OutcropAnalogueGroup = ({
   };
 
   const handleDeleteOutcropAnalogue = async (stratigraphicGroupId: string) => {
-    const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId;
+    const id = modelIdParent ? modelIdParent : analogueModel.analogueModelId;
     const res = await useOutcrop.deleteOutcropAnalogue.mutateAsync({
       id: id,
       outcropId: stratigraphicGroupId,
@@ -103,7 +96,7 @@ export const OutcropAnalogueGroup = ({
       <Typography variant="h4" as="h3">
         Outcrop Analogue
       </Typography>
-      {outcropGroup.length > 0 && (
+      {analogueModel.outcrops.length > 0 && (
         <Table>
           <Table.Head>
             <Table.Row>
@@ -117,7 +110,7 @@ export const OutcropAnalogueGroup = ({
             </Table.Row>
           </Table.Head>
           <Table.Body>
-            {outcropGroup.map((row) => (
+            {analogueModel.outcrops.map((row) => (
               <Table.Row key={row.outcropId}>
                 <Table.Cell>
                   {isOwnerOrAdmin && (
@@ -180,7 +173,7 @@ export const OutcropAnalogueGroup = ({
         <Dialog.CustomContent>
           <OutcropSelect
             outcropObject={outcropObject}
-            outcropGroup={outcropGroup}
+            outcropGroup={analogueModel.outcrops}
             setOutcropObject={setOutcropObject}
             error={errors}
           />

src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable max-lines-per-function */
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { OutcropDto } from '../../../api/generated';
-import { useFetchOutcropData } from '../../../hooks/useFetchOutcropData';
 import * as StyledDialog from '../../../styles/addRowDialog/AddRowDialog.styled';
 import { sortList } from '../../../utils/SortList';
 import {
   OutcropErrorType,
   OutcropType,
 } from '../OutcropAnalogueGroup/OutcropAnalogueGroup';
+import { usePepmContextStore } from '../../../hooks/GlobalState';
 
 export const OutcropSelect = ({
   outcropObject,
@@ -20,9 +20,10 @@ export const OutcropSelect = ({
   error: OutcropErrorType;
   setOutcropObject: React.Dispatch<React.SetStateAction<OutcropType>>;
 }) => {
-  const OutcropData = useFetchOutcropData();
-  if (OutcropData.isLoading || !OutcropData.data?.success)
-    return <p>Loading .....</p>;
+  const { outcrops } = usePepmContextStore();
+  const oc: OutcropDto[] = [...outcrops];
+
+  if (outcrops.length === 0) return <p>Loading .....</p>;
 
   const filterDisabled = (option: OutcropDto) => {
     const caseExists = outcropGroup.filter(
@@ -35,7 +36,7 @@ export const OutcropSelect = ({
     <StyledDialog.AutocompleteList>
       <Autocomplete
         label="Analogue"
-        options={sortList(OutcropData.data.data)}
+        options={sortList(oc)}
         optionLabel={(option) => option.name}
         onOptionsChange={(e: AutocompleteChanges<OutcropDto>) => {
           const copyObject: OutcropType = {