Currently working on bug of deleting the first state

and added error handler for invalid input for state
Co-authored-by: Ron Fu

Author: WilliamCheng12345

app/src/components/right/StatePropsPanel.tsx

@@ -36,7 +36,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const [inputKey, setInputKey] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [inputType, setInputType] = useState("");
-
+  const [errorStatus, setErrorStatus] = useState(false);
+  const [errorMsg, setErrorMsg] = useState('');
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
@@ -61,11 +62,25 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
     setInputValue("");
     setInputType("");
   };
+  //reset error warning
+  const resetError = () => {
+    setErrorStatus(false);
+  };
 
   // submit new stateProps entries to state context
+  let currKey;
   const submitNewState = (e) => {
     e.preventDefault();
     const statesArray = currentComponent.stateProps;
+    //loop though array, access each obj at key property
+    let keyToInt = parseInt(inputKey[0]);
+    if(!isNaN(keyToInt)) {
+      setErrorStatus(true);
+      setErrorMsg('Key name can not start with int.');
+      return;
+    }
+
+    //return alert('key can not start with number');
     const newState = {
       // check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
       id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
@@ -78,6 +93,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
       type: 'ADD STATE', 
       payload: {newState: newState}
     }); 
+    resetError();
     clearForm();
   };
 
@@ -107,6 +123,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             label="key:"
             variant="outlined"
             value={inputKey}
+            error={errorStatus}
             onChange={(e) => setInputKey(e.target.value)}
             className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`} 
             />

app/src/components/right/TableStateProps.tsx

@@ -71,7 +71,7 @@ const deleteState = (selectedId) => {
   const filtered = currentComponent.stateProps.filter(element => element.id !== selectedId);  
   dispatch({
     type: 'DELETE STATE', 
-    payload: {stateProps: filtered}
+    payload: {stateProps: filtered, rowId: selectedId}
   });
 }
 

app/src/containers/CustomizationPanel.tsx

@@ -212,27 +212,31 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     const providerComponent = state.components[componentProviderId - 1];
     const providerStates = providerComponent.stateProps;
     const newInput = providerStates[statePropsId - 1].value;
+
+    // states providerComponent
+    // adding new state into provideComponent 
+    // currComponent = canvas focus component 
+    // currComponent = state.components[componentProviderId - 1]; {1 : {Set, compLink, compText}} 
+    // Our set holds the state row ids of that component 
+
 
-    console.log("state-components", JSON.parse(JSON.stringify(state.components))); 
-    console.log("current-component", JSON.parse(JSON.stringify(currentComponent))); 
+    // console.log("state-components", JSON.parse(JSON.stringify(state.components))); 
+    // console.log("current-component", JSON.parse(JSON.stringify(currentComponent))); 
 
     if (attributeName === 'compText') {
       let newContextObj = {...currentComponent.useContext}; 
       if(!newContextObj) {
-        console.log("New Context Obj created"); 
         newContextObj = {}; 
       }
 
       if (!newContextObj[componentProviderId]) {
-        console.log("Provider Id added to our new context obj ", componentProviderId); 
         newContextObj[componentProviderId] = {statesFromProvider : new Set()};
       }
 
       newContextObj[componentProviderId].compText = statePropsId;
       newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
       setCompText(newInput);
-      // setUseContextObj(newContextObj);
-      console.log("newContextObj to be dispatched ", newContextObj); 
+      // setUseContextObj(newContextObj); 
 
       dispatch({
         type: 'UPDATE USE CONTEXT',

app/src/helperFunctions/generateCode.ts

@@ -254,10 +254,11 @@ const generateUnformattedCode = (
   // check for context
   if (currComponent.useContext) {
     for (const providerId of Object.keys(currComponent.useContext)) {
-      const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //currently just from App
+      const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...}
       const providerComponent = components[parseInt(providerId) - 1];
       providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
-
+      console.log('statesFromProviders: ', statesFromProvider);
+      console.log('providerComponent: ', providerComponent);
       for (const stateId of statesFromProvider.values()) {
         context +=
           'const ' +

app/src/reducers/componentReducer.ts

@@ -798,9 +798,23 @@ const reducer = (state: State, action: Action) => {
       );
 
       currComponent.stateProps = action.payload.stateProps; 
-      
       currComponent.useStateCodes = updateUseStateCodes(currComponent);  
 
+      components.forEach((component) => {
+        if(component.useContext && component.useContext[state.canvasFocus.componentId ]) {
+          // console.log("component that takes state from curr", JSON.parse(JSON.stringify(component))); 
+          component.useContext[state.canvasFocus.componentId].statesFromProvider.delete(action.payload.rowId); 
+          // console.log("component that has deleted state", JSON.parse(JSON.stringify(component))); 
+          component.code = generateCode(
+            components,
+            component.id,
+            [...state.rootComponents],
+            state.projectType,
+            state.HTMLTypes
+          );
+        } 
+      }); 
+
       currComponent.code = generateCode(
         components,
         state.canvasFocus.componentId,