Fixed the Navigation/Modals

-Made the Navigation make the species and reaction not stay when going of page -Made the modal reset the values of inputs when closed
NCAR · Apr 9, 2024 · 6adc67a · 6adc67a
1 parent e9be54b
commit 6adc67a
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 103 deletions.
diff --git a/src/buttonSystem/ButtonSystemGrid.tsx b/src/buttonSystem/ButtonSystemGrid.tsx
@@ -5,7 +5,7 @@ import { renderButton, ButtonData } from './RenderButtons';
 interface ButtonSystemGridProps {
   buttonArray: Promise<ButtonData[]>[];
   category: string;
-  handleClick: (uuid: string) => void;
+  handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void;
   cols: number;
   height: string;
 }

diff --git a/src/buttonSystem/GlobalVariables.tsx b/src/buttonSystem/GlobalVariables.tsx
@@ -48,20 +48,34 @@ export const useMechanismUuid = () => {
 
 export const useReactionUuid = () => {
     const [reactionUuid, setReactionUuid] = useState<string | null>(null);
+    const [reactantListUuid, setReactantListUuid] = useState<string | null>(null);
+    const [productListUuid, setProductListUuid] = useState<string | null>(null);
 
     useEffect(() => {
         const storedReactionUuid = localStorage.getItem('reaction_uuid');
+        const storedReactantListUuid = localStorage.getItem('reactant_list_uuid');
+        const storedProductListUuid = localStorage.getItem('product_list_uuid');
         if (storedReactionUuid) {
             setReactionUuid(storedReactionUuid);
         }
+        if (storedReactantListUuid) {
+            setReactantListUuid(storedReactantListUuid);
+        }
+        if (storedProductListUuid) {
+            setProductListUuid(storedProductListUuid);
+        }
     }, []);
 
-    const handleReactionClick = (uuid: string) => {
+    const handleReactionClick = (uuid: string, reactant_list_uuid: string, product_list_uuid: string) => {
         localStorage.setItem('reaction_uuid', uuid);
         setReactionUuid(uuid);
+        localStorage.setItem('reactant_list_uuid', reactant_list_uuid);
+        setReactantListUuid(reactant_list_uuid);
+        localStorage.setItem('product_list_uuid', product_list_uuid);
+        setProductListUuid(product_list_uuid);
     };
 
-    return { reactionUuid, handleReactionClick };
+    return { reactionUuid, setReactionUuid, reactantListUuid, setReactantListUuid, productListUuid, setProductListUuid, handleReactionClick };
 };
 
 export const useSpeciesUuid = () => {
@@ -79,7 +93,7 @@ export const useSpeciesUuid = () => {
         setSpeciesUuid(uuid);
     };
 
-    return { speciesUuid, handleSpeciesClick };
+    return { speciesUuid, setSpeciesUuid, handleSpeciesClick };
 };
 
 export const useTagMechanismUuid = () => {

diff --git a/src/buttonSystem/RenderButtons.tsx b/src/buttonSystem/RenderButtons.tsx
@@ -4,7 +4,7 @@ import { StyledFamilyButton, StyledMechanismsFromFamilyButton, StyledTagMechanis
 
 export type ButtonData = Family | Mechanism | Reaction | Species | TagMechanism;
 
-export const renderButton = (button: ButtonData, category: string, handleClick: (uuid: string) => void) => {
+export const renderButton = (button: ButtonData, category: string, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void) => {
   switch (category) {
     case 'Families':
       return familiesButton(button as Family, handleClick);
@@ -53,8 +53,8 @@ const speciesFromTagMechanismButton = ({ uuid, type}: Species, handleClick: (uui
   </StyledSpeciesFromTagMechanismButton>
 );
 
-const reactionsFromTagMechanismButton = ({ uuid, type, reactant_list_uuid, product_list_uuid}: Reaction, handleClick: (uuid: string) => void) => (
-  <StyledReactionsFromTagMechanismButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid, reactant_list_uuid, product_list_uuid}}>
+const reactionsFromTagMechanismButton = ({ uuid, type, reactant_list_uuid, product_list_uuid}: Reaction, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void) => (
+  <StyledReactionsFromTagMechanismButton onClick={() => handleClick(uuid, reactant_list_uuid, product_list_uuid)} style={{ width: '100%' }} {...{ uuid, reactant_list_uuid, product_list_uuid}}>
     {type}
   </StyledReactionsFromTagMechanismButton>
 );

diff --git a/src/webPages/RenderPropeties/RenderProperties.tsx b/src/webPages/RenderPropeties/RenderProperties.tsx
@@ -64,7 +64,10 @@ const getPropertyInputType = (validation: string): string => {
 const getPropertyValue = (property: PropertyVersion): string | undefined=> {
     if (property.validation === 'string') {
       return property.string_value?.toString();
-    } else if (property.validation === 'float') {
+    }else if (property.validation === 'int') {
+      return property.int_value?.toString(); 
+    } 
+    else if (property.validation === 'float') {
       return property.float_value?.toString(); 
     } else if (property.validation === 'double') {
       return property.double_value?.toString(); 

diff --git a/src/webPages/family.tsx b/src/webPages/family.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import ButtonSystemGrid from '.././buttonSystem/ButtonSystemGrid';
 import { getFamilies, getMechanisms, getMechanismsFromFamily } from '../API/API_GetMethods';
-import { createFamily, createFamilyMechList } from '../API/API_CreateMethods';
+import { createFamily, createFamilyMechList, createMechanism } from '../API/API_CreateMethods';
 import { useFamilyUuid, useMechanismUuid } from '../buttonSystem/GlobalVariables';
 import { FamilyMechList, Mechanism } from '../API/API_Interfaces';
 import { StyledHeader, StyledDetailBox } from '../buttonSystem/RenderButtonsStyling';
@@ -23,6 +23,7 @@ import "./family.css";
 
 const FamilyPage = () => {
     const createFamRef = useRef("");
+    const createMechanismRef = useRef("");
 
     const { familyUuid, handleFamilyClick } = useFamilyUuid();
     const { handleFamilyMechanismClick } = useMechanismUuid();
@@ -48,6 +49,16 @@ const FamilyPage = () => {
         setSelectedMechanism(event.target.value);
     };
 
+    const [createMechanismOpen, setCreateMechanismOpen] = React.useState(false);
+    const handleCreateMechanismOpen = () => setCreateMechanismOpen(true);
+    const handleCreateMechanismClose = () => setCreateMechanismOpen(false);
+
+    const handleCreateMechanismClick = () => {
+        createMechanism(createMechanismRef.current);
+        setCreateMechanismOpen(false);
+    }
+
+
     const [addMToFOpen, setAddMtoFOpen] = React.useState(false);
     const handleAddMtoFOpen = () => setAddMtoFOpen(true);
     const handleAddMtoFClose = () => setAddMtoFOpen(false);
@@ -112,7 +123,7 @@ const FamilyPage = () => {
 
                 <div className="L1">
                     <StyledHeader>
-                        Family/
+                        Family/{familyUuid}
                     </StyledHeader>
                 </div>
 
@@ -134,6 +145,9 @@ const FamilyPage = () => {
                             <Button onClick = {handleCreateFamOpen}>
                                 Create Family
                             </Button>
+                            <Button onClick = {handleCreateMechanismOpen}>
+                                Create Mechanism
+                            </Button>
                             <Button onClick = {handleAddMtoFOpen}>
                                 Add Mechanism to Family
                             </Button>
@@ -195,6 +209,20 @@ const FamilyPage = () => {
                             </Button>
                         </Box>
                     </Modal>
+                    <Modal
+                        open={createMechanismOpen}
+                        onClose={handleCreateMechanismClose}
+                    >
+                        <Box sx={style}>
+                            Enter name for new Mechanism below.
+                            <TextField id="textField" label="Name" onChange={ e => createMechanismRef.current = e.target.value}>
+
+                            </TextField>
+                            <Button onClick={handleCreateMechanismClick}>
+                                Submit
+                            </Button>
+                        </Box>
+                    </Modal>
                     <Modal
                         open={addMToFOpen}
                         onClose={handleAddMtoFClose}

diff --git a/src/webPages/familyMechanism.tsx b/src/webPages/familyMechanism.tsx
@@ -125,7 +125,7 @@ const FamilyMechanismPage = () => {
             <section className="layout">
                 <div className="L1">
                     <StyledHeader>
-                        Family/Mechanism
+                        Family/{familyUuid}/Mechanism/{mechanismUuid}
                     </StyledHeader>
                 </div>
 

diff --git a/src/webPages/mechanisms.tsx b/src/webPages/mechanisms.tsx
@@ -107,7 +107,7 @@ const MechanismPage = () => {
             <section className="layout">
                 <div className="L1">
                     <StyledHeader>
-                        Mechanisms
+                        Mechanisms/{mechanismUuid}
                     </StyledHeader>
                 </div>
 

diff --git a/src/webPages/reactions.tsx b/src/webPages/reactions.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLocation } from 'react-router-dom';
 import { useRef, useState, useEffect } from 'react';
 import ButtonSystemGrid from '../buttonSystem/ButtonSystemGrid';
 import { createReaction, createTagMechanismReactionList, createPropertyList, createPropertyType, createPropertyVersion, createReactantProduct } from '../API/API_CreateMethods';
@@ -24,9 +25,9 @@ import TaskSharpIcon from '@mui/icons-material/TaskSharp';
 import "./family.css";
 
 const ReactionsPage = () => {
+    const location = useLocation();
+
     const createReactionRef = useRef("");
-    const createReactantListRef = useRef("");
-    const createProductListRef = useRef("");
 
     const createPropertyNameRef = useRef("");
     const createPropertyUnitsRef = useRef("");
@@ -55,7 +56,7 @@ const ReactionsPage = () => {
 
     const { mechanismUuid } = useMechanismUuid();
     const { tagMechanismUuid } = useTagMechanismUuid();
-    const { reactionUuid, handleReactionClick } = useReactionUuid();
+    const { reactionUuid, setReactionUuid, reactantListUuid, setReactantListUuid, productListUuid, setProductListUuid, handleReactionClick } = useReactionUuid();
 
     const [createReactionOpen, setCreateReactionOpen] = React.useState(false);
     const handleCreateReactionOpen = () => setCreateReactionOpen(true);
@@ -67,11 +68,17 @@ const ReactionsPage = () => {
 
     const [createReactantOpen, setCreateReactantOpen] = React.useState(false);
     const handleCreateReactantOpen = () => setCreateReactantOpen(true);
-    const handleCreateReactantClose = () => setCreateReactantOpen(false);
+    const handleCreateReactantClose = () => { setCreateReactantOpen(false); setSelectedSpecies('')};
 
     const [createProductOpen, setCreateProductOpen] = React.useState(false);
     const handleCreateProductOpen = () => setCreateProductOpen(true);
-    const handleCreateProductClose = () => setCreateProductOpen(false);
+    const handleCreateProductClose = () => { setCreateProductOpen(false); setSelectedSpecies('')};
+
+    useEffect(() => {
+        setReactionUuid('');
+        setReactantListUuid('');
+        setProductListUuid('');
+    }, [location]);
 
     const handleCreateReactionClick = async () => {
         try {
@@ -165,7 +172,7 @@ const ReactionsPage = () => {
     const handleCreateReactantClick = async () => {
         try {
             const reactantProductList: ReactantProductList = {
-                reactant_product_uuid: createReactantListRef.current, 
+                reactant_product_uuid: reactantListUuid as string, 
                 reaction_uuid: reactionUuid as string,
                 species_uuid: selectedSpecies,
                 quantity: parseInt(createReactantQuantityRef.current),
@@ -182,7 +189,7 @@ const ReactionsPage = () => {
     const handleCreateProductClick = async () => {
         try {
             const reactantProductList: ReactantProductList = {
-                reactant_product_uuid: createProductListRef.current, 
+                reactant_product_uuid: productListUuid as string, 
                 reaction_uuid: reactionUuid as string,
                 species_uuid: selectedSpecies,
                 quantity: parseInt(createProductQuantityRef.current),
@@ -196,9 +203,8 @@ const ReactionsPage = () => {
         }
     }
 
-    const masterhandleReactionClick = (uuid: string) => {
-        handleReactionClick(uuid);
-        getReactionProperties();
+    const masterhandleReactionClick = (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => {
+        handleReactionClick(uuid, reactant_list_uuid as string, product_list_uuid as string);
     }  
 
     useEffect(() => {
@@ -214,19 +220,6 @@ const ReactionsPage = () => {
         fetchSpecies();
     }, [tagMechanismUuid]);
 
-    const getReactionProperties = async () => {
-        try {
-            const reaction = await getReaction(reactionUuid as string);
-
-            createReactantListRef.current = reaction.reactant_list_uuid;
-            createProductListRef.current = reaction.product_list_uuid;
-
-        } catch (error) {
-            console.error(error);
-            return null;
-        }
-    }
-
     const style = {
         position: 'absolute' as 'absolute',
         top: '50%',
@@ -243,7 +236,7 @@ const ReactionsPage = () => {
             <section className="layout">
                 <div className="L1">
                     <StyledHeader>
-                        TagMechanism/Reactions
+                        TagMechanism/{tagMechanismUuid}/Reactions/{reactionUuid}
                     </StyledHeader>
                 </div>
 
@@ -280,8 +273,8 @@ const ReactionsPage = () => {
 
                 <StyledDetailBox>
                     <p></p>
-                        <RenderReactantProducts reactantProducts={[getReactantsFromReactionReactantList(createReactantListRef.current as string)]} reactants_or_products='Reactants' handleClick={handleCreateReactantOpen}/>
-                        <RenderReactantProducts reactantProducts={[getProductsFromReactionReactantList(createProductListRef.current as string)]} reactants_or_products='Products' handleClick={handleCreateProductOpen}/>
+                        <RenderReactantProducts reactantProducts={[getReactantsFromReactionReactantList(reactantListUuid as string)]} reactants_or_products='Reactants' handleClick={handleCreateReactantOpen}/>
+                        <RenderReactantProducts reactantProducts={[getProductsFromReactionReactantList(productListUuid as string)]} reactants_or_products='Products' handleClick={handleCreateProductOpen}/>
                         <RenderProperties properties={[getPropertyiesFromParent(reactionUuid as string)]} />
                     <p></p>
                 </StyledDetailBox>