Merge pull request #18 from oslabs-beta/sonya-cleaning

Updated dependencies, TypeScript conversion...

Author: HadriChan

app/src/components/form/Selector.tsx

@@ -3,6 +3,24 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 
+type Props = {
+  items: [],
+  classes: {
+    configRow: any,
+    configType: any,
+    lightThemeFontColor: {color: String},
+    formControl: any,
+    select: any,
+    selectInput: any,
+    darkThemeFontColor: {color: String},
+  },
+  isThemeLight: Boolean,
+  title: String,
+  selectValue: any,
+  handleChange: any,
+  name: String,
+}
+
 const FormSelector = (props): JSX.Element => {
   const items = [];
   let key = 1;

app/src/components/left/ComponentsContainer.tsx

@@ -28,6 +28,7 @@ const ComponentsContainer = () => {
                     name={comp.name}
                     id={comp.id}
                     root={false}
+                    isThemeLight={false}
                   />
                 );
               })}

app/src/components/right/SimpleModal.tsx

@@ -28,7 +28,7 @@ const styles = (theme: any): any => ({
   }
 });
 
-const SimpleModal = (props: any) => {
+const SimpleModal = (props) => {
   const {
     classes,
     open,
@@ -67,7 +67,8 @@ const SimpleModal = (props: any) => {
               fontSize: '17px',
               fontWeight: 'bold'
             }}
-            size="large">
+            size="large"
+          >
             <CloseIcon />
           </IconButton>
           <Typography variant="h6" id="modal-title">

app/src/helperFunctions/generateCode.ts

@@ -1,4 +1,10 @@
-import { Component, ChildElement, HTMLType } from '../interfaces/Interfaces';
+import {
+  Component,
+  ChildElement,
+  HTMLType,
+  ChildStyle,
+  StateProp
+} from '../interfaces/Interfaces';
 declare global {
   interface Window {
     api: any;
@@ -52,7 +58,7 @@ const generateUnformattedCode = (
     // declare an array of enriched children
     const enrichedChildren = currentComponent.children?.map((elem: any) => {
       //enrichedChildren is iterating through the children array
-      const child = { ...elem };
+      const child: ChildElement = { ...elem };
       // check if child is a component
       if (child.type === 'Component') {
         // verify that the child is in the components array in state
@@ -106,10 +112,10 @@ const generateUnformattedCode = (
   };
   // Raised formatStyles so that it is declared before it is referenced. It was backwards.
   // format styles stored in object to match React inline style format
-  const formatStyles = (styleObj: any) => {
+  const formatStyles = (styleObj: ChildStyle) => {
     if (Object.keys(styleObj).length === 0) return ``;
-    const formattedStyles = [];
-    let styleString;
+    const formattedStyles: String[] = [];
+    let styleString: String;
     for (let i in styleObj) {
       if (i === 'style') {
         styleString = i + '=' + '{' + JSON.stringify(styleObj[i]) + '}';
@@ -124,7 +130,7 @@ const generateUnformattedCode = (
     let customizationDetails = '';
     let passedInPropsString = '';
     if (childElement.type === 'Component') {
-      let childComponent;
+      let childComponent: Component;
       for (let i = 0; i < components.length; i++) {
         if (childElement.name === components[i].name) {
           childComponent = components[i];
@@ -152,7 +158,7 @@ const generateUnformattedCode = (
       Object.keys(childElement.style).length > 0 &&
       tailwind === false
     )
-      customizationDetails += ' ' + formatStyles(childElement);
+      customizationDetails += ' ' + formatStyles(childElement.style);
     if (
       childElement.style &&
       Object.keys(childElement.style).length > 0 &&
@@ -167,7 +173,7 @@ const generateUnformattedCode = (
         width,
         justifyContent
       } = childElement.style;
-      let w, h, items, bg, d, flexDir, justCon, cssClasses;
+      let w:String, h:String, items:String, bg:String, d:String, flexDir:String, justCon:String, cssClasses:String;
       if (childElement.style.alignItems) {
         if (alignItems === 'center') items = 'items-center ';
         else if (alignItems === 'flex-start') items = 'items-start ';
@@ -337,7 +343,7 @@ const generateUnformattedCode = (
   // write all code that will be under the "return" of the component
   const writeNestedElements = (enrichedChildren: any, level: number = 2) => {
     return `${enrichedChildren
-      .map((child: any) => {
+      .map((child: ChildElement) => {
         if (child.type === 'Component') {
           return `<${child.name} ${elementTagDetails(child)}/>`;
         } else if (child.type === 'HTML Element') {
@@ -363,14 +369,14 @@ const generateUnformattedCode = (
       .join('')}`;
   };
   // function to properly incorporate the user created state that is stored in the application state
-  const writeStateProps = (stateArray: any) => {
-    let stateToRender = '';
+  const writeStateProps = (stateArray: String[]) => {
+    let stateToRender:String = '';
     for (const element of stateArray) {
       stateToRender += levelSpacer(2, 2) + element + ';';
     }
     return stateToRender;
   };
-  const enrichedChildren: any = getEnrichedChildren(currComponent);
+  const enrichedChildren: ChildElement[] = getEnrichedChildren(currComponent);
   // import statements differ between root (pages) and regular components (components)
   const importsMapped =
     projectType === 'Next.js' || projectType === 'Gatsby.js'
@@ -386,7 +392,7 @@ const generateUnformattedCode = (
             return `import ${comp} from './${comp}'`;
           })
           .join('\n');
-  const createState = (stateProps) => {
+  const createState = (stateProps:StateProp[]) => {
     let state = '{';
     stateProps.forEach((ele) => {
       state += ele.key + ':' + JSON.stringify(ele.value) + ', ';
@@ -462,7 +468,7 @@ const generateUnformattedCode = (
       return importStr;
     };
 
-    const createEventHandler = (children) => {
+    const createEventHandler = (children:ChildElement[]) => {
       let importStr = '';
       children.map((child) => {
         if (child.type === 'HTML Element') {

app/src/interfaces/Interfaces.ts

@@ -71,7 +71,6 @@ export interface StateProp {
   value: any;
   type: unknown;
 }
-
 export interface Action {
   type: string;
   payload: any;

app/src/redux/reducers/slice/appStateSlice.ts

@@ -128,7 +128,7 @@ const updateAllIds = (comp: Component[] | ChildElement[]) => {
   // put components' names and ids into an obj
   const obj = { spr: 1000, others: 1 };
   // for each of the components, if it has children, iterate through that children array
-  comp.forEach((el) => {
+  comp.forEach((el:Component | ChildElement) => {
     if (el.children.length > 0) {
       for (let i = 0; i < el.children.length; i++) {
         // update each child's childId
@@ -180,7 +180,7 @@ const deleteById = (id: number, name: string, state: State): Component[] => {
   const checkChildren = (child: Component[] | ChildElement[]) => {
     // for each of the components in the passed in components array, if the child
     // component has a children array, iterate through the array of children
-    child.forEach((el) => {
+    child.forEach((el:Component | ChildElement) => {
       if (el.children.length) {
         const arr: ChildElement[] = [];
         for (let i = 0; i < el.children.length; i++) {
@@ -206,7 +206,7 @@ const deleteById = (id: number, name: string, state: State): Component[] => {
   return updateIds(filteredArr);
 };
 
-const updateUseStateCodes = (currentComponent) => {
+const updateUseStateCodes = (currentComponent: Component | ChildElement) => {
   // array of snippets of state prop codes
   const localStateCode: string[] = []; // avoid never by assigning it to string
   currentComponent.stateProps
@@ -359,7 +359,7 @@ const appStateSlice = createSlice({
       // if the newChild Element is an input or img type, delete the children key/value pair
       // if (newChild.name === 'input' && newChild.name === 'img')
       //   delete newChild.children;
-      let directParent;
+      let directParent: HTMLElement | any;
       if (childId === null) {
         if (parentComponent) {
           parentComponent.children.push(topSeparator);
@@ -417,7 +417,7 @@ const appStateSlice = createSlice({
       state.tailwind = action.payload;
     },
     changeFocus: (state, action) => {
-      const { componentId, childId } = action.payload;
+      const { componentId, childId} = action.payload;
       if (childId < 1000) {
         // makes separators not selectable
         state.canvasFocus = { ...state.canvasFocus, componentId, childId };
@@ -894,7 +894,7 @@ const appStateSlice = createSlice({
           state.components[focusIndex].past.length - 1
         ];
       // the last element of the past array gets popped off
-      const poppedEl = state.components[focusIndex].past.pop();
+      const poppedEl: Component = state.components[focusIndex].past.pop();
       // the last element of the past array gets popped off and pushed into the future array
       state.components[focusIndex].future.push(poppedEl);
       //generate code for the Code Preview
@@ -922,7 +922,7 @@ const appStateSlice = createSlice({
           state.components[focusIndex].future.length - 1
         ];
       //the last element of the future array gets pushed into the past
-      const poppedEl = state.components[focusIndex].future.pop();
+      const poppedEl: Component = state.components[focusIndex].future.pop();
       //the last element of the future array gets popped out
       state.components[focusIndex].past.push(poppedEl);
       // generate code for the Code Preview
@@ -978,7 +978,7 @@ const appStateSlice = createSlice({
       }
 
       //find the parent for deleting instances of where the parent is passing props to children
-      let parent;
+      let parent: Component;
       for (let i = 0; i < components.length; i++) {
         let currComponent = components[i];
         for (let j = 0; j < currComponent.children.length; j++) {
@@ -1034,7 +1034,7 @@ const appStateSlice = createSlice({
       );
 
       //find the parent of the component that we are deleting from
-      let parent;
+      let parent: Component;
       for (let i = 0; i < components.length; i++) {
         let currComponent = components[i];
         for (let j = 0; j < currComponent.children.length; j++) {
@@ -1046,8 +1046,8 @@ const appStateSlice = createSlice({
       }
 
       //deletes all instances of passedInProps from the children arrays of the current Component
-      const deletePassedInPropsChildren = (currComponent) => {
-        const innerFunc = (currChild) => {
+      const deletePassedInPropsChildren = (currComponent:Component) => {
+        const innerFunc = (currChild:Component|ChildElement) => {
           // when there are no children, return up a level
           if (
             currChild.children.filter((el) => el.type === 'Component')
@@ -1080,7 +1080,7 @@ const appStateSlice = createSlice({
         );
       };
       //delete from the components passedInProps array
-      const deletePassedInProps = (myComponent) => {
+      const deletePassedInProps = (myComponent:Component) => {
         if (
           myComponent.children.filter((el) => el.type === 'Component')
             .length === 0