theme changer for code preview ONLY

Author: brianjshan

app/src/components/bottom/BottomPanel.tsx

@@ -10,7 +10,7 @@ const BottomPanel = () => {
   return (
     <Resizable
       enable={{
-        top: true,
+        top: true
       }}
     >
       <div className="bottom-panel">
@@ -20,4 +20,4 @@ const BottomPanel = () => {
   );
 };
 
-export default BottomPanel;
+export default BottomPanel;

app/src/components/bottom/BottomTabs.tsx

@@ -8,6 +8,7 @@ import CodePreview from './CodePreview';
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import { emitKeypressEvents } from 'readline';
+import 'ace-builds/src-noconflict/theme-monokai';
 
 const BottomTabs = () => {
   // state that controls which tab the user is on
@@ -16,13 +17,16 @@ const BottomTabs = () => {
   const classes = useStyles();
   treeWrapper: HTMLDivElement;
 
+  const [theme, setTheme] = useState('monokai');
+  // console.log('theme:', theme);
+
   // method changes the
   const handleChange = (event: React.ChangeEvent, value: number) => {
     setTab(value);
   };
 
   const { HTMLTypes } = state;
-  const { components } = state; 
+  const { components } = state;
 
   return (
     <div className={classes.root}>
@@ -47,7 +51,7 @@ const BottomTabs = () => {
           />
         </Tabs>
       </Box>
-      {tab === 0 && <CodePreview />}
+      {tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
       {tab === 1 && <Tree data={components} />}
     </div>
   );

app/src/components/bottom/CodePreview.tsx

@@ -23,9 +23,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const CodePreview = () => {
+const optionColor = '#252526';
+
+const CodePreview = ({ theme, setTheme }) => {
   const [state, dispatch] = useContext(stateContext);
-  const [theme, setTheme] = useState('monokai');
+  // const [theme, setTheme] = useState('monokai');
   const classes = useStyles();
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -44,15 +46,14 @@ const CodePreview = () => {
       style={{
         height: '90%',
         paddingLeft: '0px',
-        // paddingTop: '1rem',
-        // paddingBottom: '1rem',
+        paddingBottom: '8%',
         // overflow: 'auto',
         maxWidth: '100%',
         // display: 'flex',
         justifyContent: 'center'
       }}
     >
-      <FormControl fullWidth={true} className={classes.formControl}>
+      <FormControl className={classes.formControl}>
         <div className="flex-container">
           <div className="flex1">Change Theme:</div>
           <NativeSelect

app/src/components/left/HTMLPanel.tsx

@@ -14,7 +14,6 @@ const HTMLPanel = (): JSX.Element => {
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
 
-
   const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     resetError();
     setTag(e.target.value);
@@ -31,7 +30,10 @@ const HTMLPanel = (): JSX.Element => {
     // checks to see if inputted comp name already exists
     let dupe = false;
     checkList.forEach(HTMLTag => {
-      if ((HTMLTag.name.toLowerCase() === inputName.toLowerCase()) || (HTMLTag.tag.toLowerCase() === inputName.toLowerCase())) {
+      if (
+        HTMLTag.name.toLowerCase() === inputName.toLowerCase() ||
+        HTMLTag.tag.toLowerCase() === inputName.toLowerCase()
+      ) {
         dupe = true;
       }
     });
@@ -58,7 +60,8 @@ const HTMLPanel = (): JSX.Element => {
   const createOption = (inputTag: String, inputName: String) => {
     // format name so first letter is capitalized and there are no whitespaces
     let inputNameClean = inputName.replace(/\s+/g, '');
-    const formattedName = inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
+    const formattedName =
+      inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
     // add new component to state
     const newElement = {
       id: currentID,
@@ -82,18 +85,18 @@ const HTMLPanel = (): JSX.Element => {
     let letterNumber = /^[0-9a-zA-Z]+$/;
     if (input.match(letterNumber)) return true;
     return false;
-  }
+  };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = e => {
     e.preventDefault();
     let letters = /[a-zA-Z]/;
-    if ((!tag.charAt(0).match(letters)) || (!name.charAt(0).match(letters))) {
+    if (!tag.charAt(0).match(letters) || !name.charAt(0).match(letters)) {
       triggerError('letters');
       return;
     } else if (!alphanumeric(tag) || !alphanumeric(name)) {
       triggerError('symbolsDetected');
       return;
-    } else if ((tag.trim() === '') || (name.trim() === '')) {
+    } else if (tag.trim() === '' || name.trim() === '') {
       triggerError('empty');
       return;
     } else if (checkNameDupe(tag) || checkNameDupe(name)) {
@@ -102,28 +105,45 @@ const HTMLPanel = (): JSX.Element => {
     }
     createOption(tag, name);
     resetError();
-  }
+  };
 
   return (
     <div>
       <h4> HTML Elements</h4>
       <div className={classes.addComponentWrapper}>
-        <div className={classes.inputWrapper} >
-          <form onSubmit={handleSubmit} >
+        <div className={classes.inputWrapper}>
+          <form onSubmit={handleSubmit}>
             <h4>Create New Element: </h4>
             <label className={classes.inputLabel}>
               Tag:
-              <input color={'primary'} type="text" name="Tag" value={tag} onChange={handleTagChange} className={classes.input} />
-              {errorStatus &&
-              <span>{errorMsg}</span>}
+              <input
+                color={'primary'}
+                type="text"
+                name="Tag"
+                value={tag}
+                onChange={handleTagChange}
+                className={classes.input}
+              />
+              {errorStatus && <span>{errorMsg}</span>}
             </label>
             <label className={classes.inputLabel}>
               Tag Name:
-              <input color={'primary'} type="text" name="Tag Name" value={name} onChange={handleNameChange} className={classes.input} />
-              {errorStatus &&
-              <span>{errorMsg}</span>}
+              <input
+                color={'primary'}
+                type="text"
+                name="Tag Name"
+                value={name}
+                onChange={handleNameChange}
+                className={classes.input}
+              />
+              {errorStatus && <span>{errorMsg}</span>}
             </label>
-            <input className={classes.button} color="primary" type="submit" value="Add Element" />
+            <input
+              className={classes.button}
+              color="primary"
+              type="submit"
+              value="Add Element"
+            />
           </form>
         </div>
       </div>

app/src/reducers/componentReducer.ts

@@ -7,7 +7,6 @@ import {
 import initialState from '../context/initialState';
 import generateCode from '../helperFunctions/generateCode';
 import cloneDeep from '../helperFunctions/cloneDeep';
-import HTMLTypes from '../context/HTMLTypes';
 
 const reducer = (state: State, action: Action) => {
   // if the project type is set as Next.js, next component code should be generated
@@ -103,13 +102,14 @@ const reducer = (state: State, action: Action) => {
       });
     });
     return isChild;
-  }
+  };
 
   const updateIds = (components: Component[]) => {
-    components.forEach((comp, i) => comp.id = i + 1);
-  }
+    components.forEach((comp, i) => (comp.id = i + 1));
+  };
 
-  const deleteById = (id: number): Component[] => [...state.components].filter(comp => comp.id != id);
+  const deleteById = (id: number): Component[] =>
+    [...state.components].filter(comp => comp.id != id);
 
   switch (action.type) {
     // Add a new component type
@@ -172,10 +172,10 @@ const reducer = (state: State, action: Action) => {
           return state;
       }
 
-      let newName = HTMLTypes.reduce((name, el) => {
+      let newName = state.HTMLTypes.reduce((name, el) => {
         if (typeId === el.id) name = el.tag;
         return name;
-      },'');
+      }, '');
 
       const newChild: ChildElement = {
         type,
@@ -195,7 +195,6 @@ const reducer = (state: State, action: Action) => {
         parentComponent.children.push(newChild);
       }
       // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
-
       else {
         const directParent = findChild(parentComponent, childId);
         directParent.children.push(newChild);
@@ -329,31 +328,33 @@ const reducer = (state: State, action: Action) => {
       updateIds(components);
 
       // rebuild root components
-      const rootComponents: number[] = []; 
+      const rootComponents: number[] = [];
       components.forEach(comp => {
         if (comp.isPage) rootComponents.push(comp.id);
       });
-      
+
       //TODO: where should canvas focus after deleting comp?
-      const canvasFocus = { componentId: 1, childId: null }
+      const canvasFocus = { componentId: 1, childId: null };
 
-      return {...state, rootComponents, components, canvasFocus}
+      return { ...state, rootComponents, components, canvasFocus };
     }
-    case 'DELETE REUSABLE COMPONENT' : {
+    case 'DELETE REUSABLE COMPONENT': {
       // TODO: bug when deleting element inside page
-        // can't edit component name
-        // happens sometimes. not sure exactly when
+      // can't edit component name
+      // happens sometimes. not sure exactly when
 
       const id: number = state.canvasFocus.componentId;
       // check if component is a child element of a page
       // check if id is inside root components
-      if(isChildOfPage(id)) {
+      if (isChildOfPage(id)) {
         // TODO: include name of parent in alert
         // TODO: change canvas focus to parent
         // TODO: modal
-        console.log('Reusable components inside of a page must be deleted from the page');
+        console.log(
+          'Reusable components inside of a page must be deleted from the page'
+        );
         //const canvasFocus:Object = { componentId: id, childId: null };
-        return  { ...state }
+        return { ...state };
       }
       // filter out components that don't match id
       const components: Component[] = deleteById(id);
@@ -362,7 +363,7 @@ const reducer = (state: State, action: Action) => {
 
       // TODO: temporary fix. should point to id directly
       const canvasFocus = { componentId: 1, childId: null };
-      return {...state, components, canvasFocus};
+      return { ...state, components, canvasFocus };
     }
 
     case 'SET INITIAL STATE': {
@@ -450,7 +451,7 @@ const reducer = (state: State, action: Action) => {
       return {
         ...state,
         HTMLTypes
-      }
+      };
     }
     default:
       return state;