Merge pull request #5 from oslabs-beta/c2

Author: rfvisuals

app/src/components/bottom/UseStateModal.tsx

@@ -0,0 +1,60 @@
+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';
+
+// TODO: typescript interface or type check
+function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
+  const [open, setOpen] = useState(false);
+
+  // TODO: choose state source
+  const componentProviderId = 1; // for now set to App
+
+  // selectHandler function to pass into TableStateProps
+  // get id of selected component
+  // access the ChildElement
+
+  // return the selected state's ID back so the value of it can be updated in the customizationpanel.  to the assign the value of selected state to attribute tied to useState button (currently just text)
+  // attribute to change as parameter for UseStateModal
+  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={(table) => {
+              console.log('table.row.id',table.row.id);
+              updateAttributeWithState(attributeToChange, componentProviderId, table.row.id)
+            }}
+            deleteHandler={() => func()}
+            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 => {
@@ -203,6 +204,22 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     return isLinked;
   };
 
+  // function to pass into UseStateModal to use state to update attribute
+  const updateAttributeWithState = (attributeName, componentProviderId, statePropsId) => {
+
+    // get the stateProps of the componentProvider    
+    const currentComponent = state.components[componentProviderId - 1];
+    const currentComponentProps = currentComponent.stateProps;
+    const newInput = currentComponentProps[statePropsId - 1].value;
+
+    if (attributeName === 'compText') setCompText(newInput);
+    if (attributeName === 'compLink') setCompLink(newInput);
+
+    // TODO: set something to signify that state was used
+    // so it can be handled in generateCode
+
+  }
+
   // dispatch to 'UPDATE CSS' called when save button is clicked,
   // passing in style object constructed from all changed input values
   const handleSave = (): Object => {
@@ -298,7 +315,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
           key={'not delete'}
           button
           onClick={closeModal}
-          ƒ
           style={{
             border: '1px solid #3f51b5',
             marginBottom: '2%',
@@ -517,7 +533,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
               </div>
             </div>
             <div>
-
               <div className={classes.configRow}>
                 <div
                   className={
@@ -545,6 +560,12 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                     />
                   </FormControl>
                 </div>
+                <div>
+                  <UseStateModal 
+                  updateAttributeWithState={updateAttributeWithState} 
+                  attributeToChange="compText" 
+                  childId={state.canvasFocus.childId}/>
+                </div>
               </div>
               <div className={classes.configRow}>
                 <div
@@ -573,6 +594,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                     />
                   </FormControl>
                 </div>
+                <div>
+                  <UseStateModal 
+                  updateAttributeWithState={updateAttributeWithState} attributeToChange="compLink" 
+                  childId={state.canvasFocus.childId}/>
+                </div>
               </div>
               <div className={classes.configRow}>
                 <div

app/src/interfaces/Interfaces.ts

@@ -36,7 +36,7 @@ export interface Component {
   isPage: boolean;
   past: any[];
   future: any[];
-  stateProps: StateProp[]; // state: [ { key: value, type }, {key: value, type}, {key: value, type} ]
+  stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
   annotations?: string;
   useStateCodes: string[];
 }

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);;
+}