Merge pull request #195 from AgainIoT/feature/192

Fix : owner and framework data remains after leaving the page

Author: ymw0407

src/components/common/Autocomplete.js

@@ -60,7 +60,7 @@ export const AutocompleteInput = (props) => {
             <AutocompleteTextField
               {...params}
               variant="standard"
-              helperText={props.disableValue ? "First select Language" : " "}
+              helperText={props.disableValue ? "Select Language First" : " "}
             />
           </InputFieldContainer>
         )}

src/components/step1/RequiredFieldContainer.js

@@ -1,11 +1,12 @@
 import styled from "styled-components";
 import { useState, useEffect } from "react";
 import { useRecoilState } from "recoil";
+import { repoDataAtomFamily } from "../../recoil/repoData";
+import { eachStepState } from "../../recoil/commonState";
 import { Box, Grid } from "@mui/material";
 import axios from "axios";
 import { TextInputContainer } from "../common/InputComponent";
 import { SelectAuto } from "../common/SelectAuto";
-import { repoDataAtomFamily } from "../../recoil/repoData";
 import gifRepoName from "../../assets/images/repoName.gif";
 import gifDescription from "../../assets/images/description.gif";
 import { useNavigate } from "react-router-dom";
@@ -17,6 +18,7 @@ export const RequiredFieldContainer = () => {
   const [repoName, setRepoName] = useRecoilState(
     repoDataAtomFamily("repoName"),
   );
+  const [stepComplete, setStepComplted] = useRecoilState(eachStepState("1"));
 
   const navigate = useNavigate();
 
@@ -35,26 +37,41 @@ export const RequiredFieldContainer = () => {
           withCredentials: true,
         },
       );
-
-      const initUserData = [
-        {
-          id: response.data.id,
-          avatar: response.data.avatar,
-        },
-      ];
-      response.data.org.forEach((it) => {
-        initUserData.push({ id: it.id, avatar: it.avatar });
-      });
-
-      setOwner(response.data.id);
-      setUserRepoData(initUserData);
+      return response.data;
     } catch (e) {
       console.error(e);
     }
   }
 
+  function refineData(rawData) {
+    const data = [
+      {
+        id: rawData.id,
+        avatar: rawData.avatar,
+      },
+    ];
+    rawData.org.forEach((it) => {
+      data.push({ id: it.id, avatar: it.avatar });
+    });
+    return data;
+  }
+
+  async function initUserData() {
+    const refinedData = refineData(await getUserRepoData());
+    setUserRepoData(refinedData);
+    return refinedData;
+  }
+
+  async function initOwner() {
+    const refinedData = await initUserData();
+    setOwner(refinedData[0].id);
+  }
+
   useEffect(() => {
-    getUserRepoData();
+    initUserData();
+    if (!stepComplete) {
+      initOwner();
+    }
   }, []);
 
   async function checkRepoName() {
@@ -125,7 +142,7 @@ export const RequiredFieldContainer = () => {
       }
     }, 300);
     return () => clearTimeout(debounce);
-  }, [owner,repoName]);
+  }, [owner, repoName]);
 
   const [helperText, setHelperText] = useState(" ");
 

src/components/step1/SelectContainer.js

@@ -17,7 +17,7 @@ export const SelectContainer = () => {
   );
   const [frameworkOpions, setFrameworkOptions] = useState([]);
   const [isSelectLang, setIsSelectLang] = useState(false);
-  const [disableValue, setDisableValue] = useState(true);
+  const [disableValue, setDisableValue] = useState(false);
 
   // GET - Lang/Framework
   const [baseOption, setBaseOption] = useState([
@@ -31,36 +31,48 @@ export const SelectContainer = () => {
       );
 
       setBaseOption(response.data);
+      return response.data;
     } catch (e) {
       console.error(e);
     }
   }
 
+  async function getFrameworkOptionData() {
+    const data = await getBaseOptionData();
+    const selectedLanguageOption = data.find(
+      (it) => it.language === selectLang,
+    );
+    const selectedFrameworks = selectedLanguageOption.frameworks || [];
+    const selectedFrameworkNames = selectedFrameworks.map(
+      (frameworkItem) => frameworkItem.framework,
+    );
+    setFrameworkOptions(selectedFrameworkNames);
+  }
+
   useEffect(() => {
-    getBaseOptionData();
+    // isSelectLang = 0, disableValue = 0
+    if (selectLang) {
+      getFrameworkOptionData();
+    } else {
+      getBaseOptionData();
+    }
   }, []);
-  const langs = baseOption.map((it) => it.language);
 
   //Apply options based on the language of choice
   useEffect(() => {
+    // isSelectLang = 1, disableValue = 0
     if (isSelectLang) {
-      const selectedLanguageOption = baseOption.find(
-        (it) => it.language === selectLang,
-      );
-      const selectedFrameworks = selectedLanguageOption.frameworks || [];
-      const selectedFrameworkNames = selectedFrameworks.map(
-        (frameworkItem) => frameworkItem.framework,
-      );
-
-      setFrameworkOptions(selectedFrameworkNames);
-    } else {
+      getFrameworkOptionData();
       setSelectFramework("");
     }
   }, [selectLang]);
 
   useEffect(() => {
-    setSelectFramework("");
-  }, [selectLang]);
+    // isSelectLang = 0, disableValue = 1
+    if (disableValue) {
+      setSelectFramework("");
+    }
+  }, [disableValue]);
 
   return (
     <StSelectContainer container>
@@ -70,7 +82,7 @@ export const SelectContainer = () => {
       <Grid item xs={12} sm={5}>
         <AutocompleteInput
           type={"lang"}
-          options={langs}
+          options={baseOption.map((it) => it.language)}
           setIsSelectLang={setIsSelectLang}
           setDisableValue={setDisableValue}
           disableValue={false}