customization panel can now render useStateModal with a button click. useStateModal has minimal styling and can display state of parent app component.

Co-authored-by: Crys Lim [email protected]

Author: chrisjtang

app/src/components/bottom/UseStateModal.tsx

@@ -0,0 +1,47 @@
+import React, {useRef, useState, useContext, useEffect } from 'react';
+import Modal from '@material-ui/core/Modal';
+import StateContext from '../../context/context';
+import TableStateProps from '../right/TableStateProps';
+
+function UseStateModal() {
+
+  const [open, setOpen] = useState(false);
+
+  // choose state source
+
+  // state table
+
+  const body = (
+    <div className="useState-position">
+      <div className="useState-header">
+        <span>Choose State Source</span>
+        <button style={{ padding: '1px', float: 'right' }} onClick={() => setOpen(false)}>X</button>
+      </div>
+      <div className="useState-window">
+        <div className="useState-dropdown">
+          <button >Choose Stateful Component</button>
+          <div>
+            <a href="#">component 1</a>
+            <a href="#">component 2</a>
+          </div>
+        </div>
+        <div className="useState-stateDisplay">
+          <TableStateProps selectHandler={() => console.log('selectHandler')} deleteHandler={() => console.log('deleteHandler')} isThemeLight={true}/>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Use State</button>
+      <Modal
+        open={open}
+      >
+        {body}
+      </Modal>
+    </div>
+  )
+}
+
+export default UseStateModal;

app/src/containers/CustomizationPanel.tsx

@@ -29,6 +29,7 @@ import ProjectManager from '../components/right/ProjectManager';
 import StateContext from '../context/context';
 import FormSelector from '../components/form/Selector';
 import { config } from 'ace-builds';
+import UseStateModal from '../components/bottom/UseStateModal';
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
@@ -545,6 +546,9 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                     />
                   </FormControl>
                 </div>
+                <div>
+                  <UseStateModal />
+                </div>
               </div>
               <div className={classes.configRow}>
                 <div

app/src/public/styles/style.css

@@ -608,3 +608,41 @@ a.nav_link:hover {
   right: 30px ;
   z-index: 999;
 }
+
+/* UseStateModal Styling */
+
+.useState-position {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  align-items:flex-start;
+  top: 30%;
+  left: 30%;
+
+}
+
+.useState-header {
+  font-size: 35px;
+  background-color: #003366;
+  color: rgb(241, 240, 240);
+  width: 600px;
+  border: 3px;
+  border-style: solid;
+  border-color: black;
+  font-family: 'Open Sans', sans-serif;
+  border-radius: 15px 15px 0px 0px;
+}
+
+.useState-window {
+  width: 600px;
+  height: 300px;
+  resize: none;
+  white-space: pre-line;
+  font-size: 18px;
+  border: 3px;
+  border-style: solid;
+  border-color: black;
+  border-radius: 0px 0px 15px 15px;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: rgb(241, 240, 240);;
+}