gave our usestatemodal the functionality to dynamically pass state into an html element's attribute.

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

Author: chrisjtang

app/src/components/bottom/UseStateModal.tsx

@@ -3,30 +3,47 @@ import Modal from '@material-ui/core/Modal';
 import StateContext from '../../context/context';
 import TableStateProps from '../right/TableStateProps';
 
-function UseStateModal() {
-
+// TODO: typescript interface or type check
+function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
   const [open, setOpen] = useState(false);
 
-  // choose state source
+  // TODO: choose state source
+  const componentProviderId = 1; // for now set to App
 
-  // state table
+  // 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>
+        <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>
+          <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}/>
+          <TableStateProps
+            selectHandler={(table) => {
+              console.log('table.row.id',table.row.id);
+              updateAttributeWithState(attributeToChange, componentProviderId, table.row.id)
+            }}
+            deleteHandler={() => func()}
+            isThemeLight={true}
+          />
         </div>
       </div>
     </div>
@@ -35,13 +52,9 @@ function UseStateModal() {
   return (
     <div>
       <button onClick={() => setOpen(true)}>Use State</button>
-      <Modal
-        open={open}
-      >
-        {body}
-      </Modal>
+      <Modal open={open}>{body}</Modal>
     </div>
-  )
+  );
 }
 
 export default UseStateModal;

app/src/containers/CustomizationPanel.tsx

@@ -204,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 => {
@@ -299,7 +315,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
           key={'not delete'}
           button
           onClick={closeModal}
-          ƒ
           style={{
             border: '1px solid #3f51b5',
             marginBottom: '2%',
@@ -518,7 +533,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
               </div>
             </div>
             <div>
-
               <div className={classes.configRow}>
                 <div
                   className={
@@ -547,7 +561,10 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                   </FormControl>
                 </div>
                 <div>
-                  <UseStateModal />
+                  <UseStateModal 
+                  updateAttributeWithState={updateAttributeWithState} 
+                  attributeToChange="compText" 
+                  childId={state.canvasFocus.childId}/>
                 </div>
               </div>
               <div className={classes.configRow}>
@@ -577,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[];
 }