fix: parameter persistence on layout (#491)

* parameter persistence on layout * added initial step2 ref to null Co-authored-by: Mcvean Soans <69250084+McTechie@users.noreply.github.com> Co-authored-by: Mcvean Soans <69250084+McTechie@users.noreply.github.com>
Auto-DL · Mar 1, 2022 · b9da656 · b9da656
1 parent c6113f1
commit b9da656
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/FrontEndApp/v1-react/src/Components/Login/LoginIndex.js b/FrontEndApp/v1-react/src/Components/Login/LoginIndex.js
@@ -1,25 +1,28 @@
 import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
-import React from "react";
+import React, { useRef } from "react";
 import LoginForm from "./LoginForm";
 import Homeindex from "../MainApp/Homeindex";
 import ProfileIndex from "../ProfilePage/ProfileIndex";
 import Deployment from "../Deployment/DeploymentIndex";
 import Layout from "../MainApp/Layout";
-import step2 from "../MainApp/Step2";
+import Step2 from "../MainApp/Step2";
 import AuthorizeGitHub from "../MainApp/step-2/AuthorizeGithub.js";
 import GitHubResponse from "../MainApp/step-2/GitHubResponse";
 
 function LoginIndex() {
+
+  const step2Ref = useRef(null);
+
   return (
     <>
       <BrowserRouter>
-        <Layout />
+        <Layout step2Ref={step2Ref} />
         <Switch>
           <Route path="/login" exact component={LoginForm} />
           <Route path="/home" component={Homeindex} />
           <Route path="/profile" component={ProfileIndex} />
           <Route path="/deploy" component={Deployment} />
-          <Route path="/step-2" component={step2} />
+          <Route path="/step-2" render={(props) => <Step2  ref={step2Ref} {...props} />}/>
           <Route path="/github/authorize" component={AuthorizeGitHub} />
           <Route path="/github/status/" component={GitHubResponse} />
           <Redirect to="/login" />

diff --git a/FrontEndApp/v1-react/src/Components/MainApp/Layout.js b/FrontEndApp/v1-react/src/Components/MainApp/Layout.js
@@ -97,7 +97,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-function Layout() {
+function Layout( { step2Ref }) {
   const classes = useStyles();
   const theme = useTheme();
   const history = useHistory();
@@ -109,8 +109,10 @@ function Layout() {
   const openAvatarDropdown = Boolean(anchorEl);
 
   const handleClick = (event) => {
+    if(history.location.pathname == '/step-2') step2Ref.current.saveStep2();
     setAnchorEl(event.currentTarget);
   };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -124,19 +126,29 @@ function Layout() {
     setOpen(false);
   };
 
+
   const home = () => {
     console.log("home");
+    if(history.location.pathname == '/step-2') step2Ref.current.saveStep2();
     history.push("/home");
     handleDrawerClose();
   };
 
   const deploy = () => {
     console.log("deployments");
+    if(history.location.pathname == '/step-2') step2Ref.current.saveStep2();
     history.push("/deploy");
     handleDrawerClose();
   };
 
+  const profile = () => {
+    console.log("profile");
+    if(history.location.pathname == '/step-2') step2Ref.current.saveStep2();
+    history.push("/profile");
+  }
+
   const logout = () => {
+    if(history.location.pathname == '/step-2') step2Ref.current.saveStep2();
     localStorage.clear();
     history.push("/login");
     window.location.reload();
@@ -207,7 +219,7 @@ function Layout() {
                   "aria-labelledby": "basic-button"
                 }}
               >
-                <MenuItem onClick={() => history.push('/profile')}>Profile</MenuItem>
+                <MenuItem onClick={profile}>Profile</MenuItem>
                 <MenuItem onClick={logout}>Logout</MenuItem>
                 <MenuItem onClick={handleClose}>
                   Delete Account

diff --git a/FrontEndApp/v1-react/src/Components/MainApp/Step2.js b/FrontEndApp/v1-react/src/Components/MainApp/Step2.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect,forwardRef, useImperativeHandle } from "react";
 import {
   Button,
   AppBar,
@@ -65,7 +65,8 @@ function a11yProps(index) {
   };
 }
 
-function Step2() {
+const Step2 = forwardRef((props, ref) => {
+
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const [alertopen, setAlertopen] = React.useState(false);
@@ -224,6 +225,23 @@ function Step2() {
     }
   }
 
+  useImperativeHandle(ref, () => ({
+
+    saveStep2(){
+      if(value == 1){
+        saveData();
+      }
+      else if(value == 0){
+        savepre();
+      }
+      else {
+        savehyper();
+      }
+    }
+
+  }));
+
+
   const handleChangetabs = (event, newValue) => {
     if (newValue !== 1 && value === 1) {
       saveData();
@@ -2952,6 +2970,6 @@ function Step2() {
       </Snackbar>
     </div>
   );
-}
+})
 
 export default Step2;