Merge pull request #15 from jinsoolim/customel

Customel

Author: diegovazquezny

app/src/components/bottom/BottomTabs.tsx

@@ -9,22 +9,24 @@ import Tree from '../../tree/TreeChart';
 import { emitKeypressEvents } from 'readline';
 import NativeSelect from '@material-ui/core/NativeSelect';
 import FormControl from '@material-ui/core/FormControl';
+import { styleContext } from '../../containers/AppContainer';
 
-const BottomTabs = ({ style }) => {
+
+const BottomTabs = () => {
   // state that controls which tab the user is on
   const [state, dispatch] = useContext(StateContext);
   const [tab, setTab] = useState(0);
   const classes = useStyles();
   treeWrapper: HTMLDivElement;
   const [theme, setTheme] = useState('monokai');
+  const { style } = useContext(styleContext);
 
   // method changes the
   const handleChange = (event: React.ChangeEvent, value: number) => {
     setTab(value);
   };
 
-  const { HTMLTypes } = state;
-  const { components } = state;
+  const { components, HTMLTypes } = state;
 
   const changeTheme = e => {
     setTheme(e.target.value);

app/src/containers/LeftContainer.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
-
+import React, { useContext } from 'react';
 import Grid from '@material-ui/core/Grid';
-
 import ComponentPanel from '../components/left/ComponentPanel';
 import HTMLPanel from '../components/left/HTMLPanel';
+import { styleContext } from './AppContainer';
 
 // Left-hand portion of the app, where component options are displayed
-const LeftContainer = ({ style }): JSX.Element => {
+const LeftContainer = (): JSX.Element => {
+  const { style } = useContext(styleContext);
+
   return (
     <div className="column left" style={style}>
       <Grid container direction="row" alignItems="center">

app/src/containers/MainContainer.tsx

@@ -1,14 +1,17 @@
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
+import { styleContext } from './AppContainer';
+
+const MainContainer = () => {
+  const { style } = useContext(styleContext);
 
-const MainContainer = ({ style }) => {
   return (
-    <div className="main-container" style={style}>
+    <div className="main-container" style={style} >
       <div className="main">
         <CanvasContainer />
       </div>
-      <BottomPanel style={style}/>
+      <BottomPanel />
     </div>
   );
 };

app/src/containers/RightContainer.tsx

@@ -19,9 +19,10 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import ErrorMessages from '../constants/ErrorMessages';
+import { styleContext } from './AppContainer';
 
 // need to pass in props to use the useHistory feature of react router
-const RightContainer = ({ style }): JSX.Element => {
+const RightContainer = (): JSX.Element => {
   const classes = useStyles();
   const [state, dispatch] = useContext(StateContext);
   const [displayMode, setDisplayMode] = useState('');
@@ -34,6 +35,7 @@ const RightContainer = ({ style }): JSX.Element => {
   const [deleteLinkedPageError, setDeleteLinkedPageError] = useState(false);
   const [deleteIndexError, setDeleteIndexError] = useState(false);
   const [deleteComponentError, setDeleteComponentError] = useState(false);
+  const { style } = useContext(styleContext);
 
   const resetFields = () => {
     const style = configTarget.child

app/src/tree/TreeChart.tsx

@@ -11,7 +11,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-function TreeChart({ theme, setTheme, data }) {
+function TreeChart({ data }) {
   const [state, dispatch] = useContext(StateContext);
   const canvasId = state.canvasFocus.componentId;