integrated code preview functionality for adding context

Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Ken Bains [email protected]
Co-authored-by: Bianca Picasso [email protected]

Author: huypham048

app/src/components/App.tsx

@@ -49,16 +49,16 @@ export const App = (): JSX.Element => {
         } else {
           console.log(
             'No user project found in localforage, setting initial state blank'
-            );
-          }
-        });
-      }
-      }, []);
+          );
+        }
+      });
+    }
+  }, []);
   useEffect(() => {
     // provide config properties to legacy projects so new edits can be auto saved
     if (state.config === undefined) {
-      state.config = {saveFlag:true, saveTimer:false};
-    };
+      state.config = { saveFlag: true, saveTimer: false };
+    }
     // New project save configuration to optimize server load and minimize Ajax requests
     if (state.config.saveFlag) {
       state.config.saveFlag = false;
@@ -82,7 +82,7 @@ export const App = (): JSX.Element => {
         state.config.saveFlag = true;
       }, 15000);
     }
-  }, [state])
+  }, [state]);
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>

app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

@@ -26,7 +26,7 @@ const AssignContainer = () => {
   }, []);
 
   const renderTable = targetContext => {
-    if (!targetContext.values) {
+    if (targetContext === null || !targetContext.values) {
       setTableState(defaultTableData);
     } else {
       setTableState(targetContext.values);
@@ -37,12 +37,17 @@ const AssignContainer = () => {
     //target Component is main
 
     const listOfContexts = [];
-    if (!Array.isArray(state)) {
+    if (
+      !Array.isArray(state) &&
+      targetComponent !== null &&
+      targetComponent.name
+    ) {
       state.allContext.forEach(context => {
         if (context.components.includes(targetComponent.name)) {
           listOfContexts.push(context.name);
         }
       });
+      console.log('setting component table with ', listOfContexts);
       setComponentTable(listOfContexts);
     }
   };

app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -27,11 +27,10 @@ const CreateContainer = () => {
     for (let i = 0; i < state.allContext.length; i += 1) {
       if (state.allContext[i].name === contextInput.name) {
         return;
-      } 
+      }
     }
     dispatch(actions.addContextActionCreator(contextInput));
     setState(store.getState().contextSlice);
-    
   };
 
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
@@ -48,7 +47,12 @@ const CreateContainer = () => {
   };
 
   const renderTable = targetContext => {
-    if (!targetContext.values) {
+    if (
+      targetContext === null ||
+      targetContext === undefined ||
+      !targetContext.values
+    ) {
+      // if (targetContext === null || targetContext === undefined) {
       setTableState(defaultTableData);
     } else {
       setTableState(targetContext.values);

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -1,9 +1,10 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment, useState, useEffect, useContext } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
+import StateContext from '../../../../context/context';
 
 const filter = createFilterOptions();
 
@@ -17,10 +18,17 @@ const AddContextForm = ({
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
+  const [state, dispatch] = useContext(StateContext);
 
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
     handleClickSelectContext();
+
+    //need to trigger the generate code functionality to update the code preview tab. Sending dummy data to trigger with a DELELTE ELEMENT dispatch method
+    dispatch({
+      type: 'DELETE ELEMENT',
+      payload: 'FAKE_ID'
+    });
   };
 
   const onChange = (event, newValue) => {

app/src/components/bottom/CodePreview.tsx

@@ -19,27 +19,24 @@ import store from '../../redux/store';
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
-  }> = ({ theme, setTheme }) => {
-
-
+}> = ({ theme, setTheme }) => {
   const ref = useRef<any>();
-  
+
   /**
- * Starts the Web Assembly service.
- */
+   * Starts the Web Assembly service.
+   */
   const startService = async () => {
     ref.current = await esbuild.startService({
       worker: true,
-      wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm',
-    })
-  }
+      wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm'
+    });
+  };
 
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
-  const {height } =
-    dimensions || 0;
+  const { height } = dimensions || 0;
 
-  const [state,] = useContext(StateContext);
+  const [state] = useContext(StateContext);
   const [, setDivHeight] = useState(0);
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -53,49 +50,51 @@ const CodePreview: React.FC<{
 
   useEffect(() => {
     setDivHeight(height);
-  }, [height])
+  }, [height]);
 
   useEffect(() => {
-
- setInput(currentComponent.code);
-  store.dispatch({type: "CODE_PREVIEW_INPUT", payload: currentComponent.code});
-  }, [state.components])
+    setInput(currentComponent.code);
+    store.dispatch({
+      type: 'CODE_PREVIEW_INPUT',
+      payload: currentComponent.code
+    });
+  }, [state.components]);
 
   /**
- * Handler thats listens to changes in code editor
- * @param {string} data - Code entered by the user
- */
-  const handleChange = async (data) => {
+   * Handler thats listens to changes in code editor
+   * @param {string} data - Code entered by the user
+   */
+  const handleChange = async data => {
     setInput(data);
-    store.dispatch({type: "CODE_PREVIEW_INPUT", payload: data});
-    if(!ref.current) {
+    store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
+    if (!ref.current) {
       return;
     }
     let result = await ref.current.build({
       entryPoints: ['index.js'],
       bundle: true,
       write: false,
-      incremental:true,
+      incremental: true,
       minify: true,
-      plugins: [
-        unpkgPathPlugin(),
-        fetchPlugin(data)
-      ],
+      plugins: [unpkgPathPlugin(), fetchPlugin(data)],
       define: {
         'process.env.NODE_ENV': '"production"',
         global: 'window'
       }
-    })
-     store.dispatch({type: "CODE_PREVIEW_SAVE", payload: result.outputFiles[0].text});
-  }
+    });
+    store.dispatch({
+      type: 'CODE_PREVIEW_SAVE',
+      payload: result.outputFiles[0].text
+    });
+  };
 
   return (
     <div
-    ref={wrapper}
+      ref={wrapper}
       style={{
         height: '100%',
         maxWidth: '100%',
-        justifyContent: 'center',
+        justifyContent: 'center'
       }}
     >
       <AceEditor
@@ -110,13 +109,8 @@ const CodePreview: React.FC<{
         fontSize={18}
         tabSize={2}
       />
-
     </div>
   );
 };
 
 export default CodePreview;
-
-
-
-

app/src/components/right/ExportButton.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useContext, useCallback, useEffect } from 'react';
 import StateContext from '../../context/context';
 import List from '@material-ui/core/List';
@@ -11,7 +10,7 @@ import createModal from './createModal';
 import { styleContext } from '../../containers/AppContainer';
 export default function ExportButton() {
   const [modal, setModal] = useState(null);
-  const [state,] = useContext(StateContext);
+  const [state] = useContext(StateContext);
 
   const genOptions: string[] = [
     'Export components',
@@ -22,7 +21,6 @@ export default function ExportButton() {
   // Closes out the open modal
   const closeModal = () => setModal('');
 
-
   const showGenerateAppModal = () => {
     const children = (
       <List className="export-preference">
@@ -92,29 +90,31 @@ export default function ExportButton() {
     );
   };
 
-  const exportKeyBind = useCallback((e) => {
+  const exportKeyBind = useCallback(e => {
     //Export Project
-    (e.key === 'e' && e.metaKey || e.key === 'e' && e.ctrlKey ) ? showGenerateAppModal() : '';
+    (e.key === 'e' && e.metaKey) || (e.key === 'e' && e.ctrlKey)
+      ? showGenerateAppModal()
+      : '';
   }, []);
 
   useEffect(() => {
     document.addEventListener('keydown', exportKeyBind);
     return () => {
-      document.removeEventListener('keydown', exportKeyBind)
-    }
+      document.removeEventListener('keydown', exportKeyBind);
+    };
   }, []);
   return (
     <div>
-       <Button
-          variant="contained"
-          color="secondary"
-          onClick={showGenerateAppModal}
-          id="navbarButton"
-          endIcon={<GetAppIcon/>}
-        >
-          EXPORT
-        </Button>
-        {modal}
+      <Button
+        variant="contained"
+        color="secondary"
+        onClick={showGenerateAppModal}
+        id="navbarButton"
+        endIcon={<GetAppIcon />}
+      >
+        EXPORT
+      </Button>
+      {modal}
     </div>
   );
-};
+}