Merge pull request #7 from oslabs-beta/rwc2

Merging RWC2 Branch to Dev-46

Author: crlim

app/src/components/bottom/UseStateModal.tsx

@@ -5,41 +5,39 @@ import TableStateProps from '../right/TableStateProps';
 
 // TODO: typescript interface or type check
 function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
+  const [state, dispatch] = useContext(StateContext);
   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
+  // make buttons to choose which component to get state from
+  const [componentProviderId, setComponentProviderId] = useState(1) // for now set to App
+  const components = [];
+  for (let i = 0; i < state.components.length; i ++) {
+    components.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
+  }
 
   // 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
+  // attribute to change as parameter for 
   const body = (
     <div className="useState-position">
       <div className="useState-header">
         <span>Choose State Source</span>
         <button
-          style={{ padding: '1px', float: 'right' }}
+          style={{ margin: '5px 5px' ,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>
+          {components}
         </div>
         <div className="useState-stateDisplay">
           <TableStateProps
+            providerId = {componentProviderId}
             selectHandler={(table) => {
-              console.log('table.row.id',table.row.id);
-              updateAttributeWithState(attributeToChange, componentProviderId, table.row.id)
+              updateAttributeWithState(attributeToChange, componentProviderId, table.row.id);
+              setOpen(false);
             }}
             deleteHandler={() => func()}
             isThemeLight={true}
@@ -51,7 +49,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
 
   return (
     <div>
-      <button onClick={() => setOpen(true)}>Use State</button>
+      <button className="useState-btn" onClick={() => setOpen(true)}>USE STATE</button>
       <Modal open={open}>{body}</Modal>
     </div>
   );

app/src/components/right/TableStateProps.tsx

@@ -66,6 +66,7 @@ const getColumns = (props) => {
   ];
 };
 
+//, providerId=1
 const TableStateProps = (props) => {
   const classes = useStyles();
   const [state] = useContext(StateContext);
@@ -80,7 +81,14 @@ const TableStateProps = (props) => {
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
 
-  const rows = currentComponent.stateProps.slice();
+  // rows to show are either from current component or from a given provider
+  let rows = [];
+  if (!props.providerId) {
+    rows = currentComponent.stateProps.slice();
+  } else {
+    const providerComponent = state.components[props.providerId - 1];
+    rows = providerComponent.stateProps.slice();
+  }
 
   const { selectHandler } : StatePropsPanelProps = props;
 

app/src/containers/CustomizationPanel.tsx

@@ -50,6 +50,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [deleteComponentError, setDeleteComponentError] = useState(false);
   const { style } = useContext(styleContext);
   const [modal, setModal] = useState(null);
+  const [useContextObj, setUseContextObj] = useState({});
 
   const resetFields = () => {
     const childrenArray = state.components[0].children;
@@ -212,12 +213,32 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     const currentComponentProps = currentComponent.stateProps;
     const newInput = currentComponentProps[statePropsId - 1].value;
 
-    if (attributeName === 'compText') setCompText(newInput);
-    if (attributeName === 'compLink') setCompLink(newInput);
+    if (attributeName === 'compText') {
+      const newContextObj = useContextObj;
+      if (!newContextObj[componentProviderId]) {
+        newContextObj[componentProviderId] = {};
+      }
+      newContextObj[componentProviderId].compText = statePropsId;
+
+      setCompText(newInput);
+      setUseContextObj(newContextObj);
+    }
+    if (attributeName === 'compLink') {
+      const newContextObj = useContextObj;
+      if (!newContextObj[componentProviderId]) {
+        newContextObj[componentProviderId] = {};
+      }
+      newContextObj[componentProviderId].compLink = statePropsId;
+
+      setCompLink(newInput);
+      setUseContextObj(newContextObj);
+    }
 
     // TODO: set something to signify that state was used
     // so it can be handled in generateCode
 
+    // update use context object
+
   }
 
   // dispatch to 'UPDATE CSS' called when save button is clicked,
@@ -237,6 +258,15 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     if (compLink !== '') attributesObj.compLink = compLink;
     if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
 
+    // dispatch to update useContext
+    // type: 'UPDATE USE CONTEXT'
+    // payload: useContext object
+
+    dispatch({
+      type: 'UPDATE USE CONTEXT',
+      payload: { useContextObj: useContextObj}
+    })
+
     dispatch({
       type: 'UPDATE CSS',
       payload: { style: styleObj }

app/src/helperFunctions/generateCode.ts

@@ -26,6 +26,8 @@ const generateUnformattedCode = (
   const currentComponent = components.find(elem => elem.id === componentId);
   // find the unique components that we need to import into this component file
   let imports: any = [];
+  let providers: string = '';
+  let context: string = '';
   let links: boolean = false;
 
   const isRoot = rootComponents.includes(componentId);
@@ -47,14 +49,14 @@ const generateUnformattedCode = (
         // check if imports array include the referenced component, if not, add its name to the imports array (e.g. the name/tag of the component/element)
         if (!imports.includes(referencedComponent.name))
           imports.push(referencedComponent.name);
-          child['name'] = referencedComponent.name;
-          return child;
+        child['name'] = referencedComponent.name;
+        return child;
       } else if (child.type === 'HTML Element') {
         const referencedHTML = HTMLTypes.find(elem => elem.id === child.typeId);
         child['tag'] = referencedHTML.tag;
         if (
           referencedHTML.tag === 'div' ||
-          referencedHTML.tag === 'separator' || 
+          referencedHTML.tag === 'separator' ||
           referencedHTML.tag === 'form' ||
           referencedHTML.tag === 'ul' ||
           referencedHTML.tag === 'ol' ||
@@ -67,15 +69,16 @@ const generateUnformattedCode = (
           child.children = getEnrichedChildren(child);
         }
         // when we see a Switch or LinkTo, import React Router
-        if (referencedHTML.tag === 'Switch' || referencedHTML.tag === 'LinkTo') importReactRouter = true;
+        if (referencedHTML.tag === 'Switch' || referencedHTML.tag === 'LinkTo')
+          importReactRouter = true;
         return child;
       } else if (child.type === 'Route Link') {
         links = true;
         child.name = components.find(
           (comp: Component) => comp.id === child.typeId
-          ).name;
-          return child;
-        }
+        ).name;
+        return child;
+      }
       });
       return enrichedChildren;
   };
@@ -225,7 +228,26 @@ const generateUnformattedCode = (
 
     return state; 
   }
-
+  // check for context
+  if (currentComponent.useContext) {
+    
+    for (const providerId of Object.keys(currentComponent.useContext)) {
+      const attributesAndStateIds = currentComponent.useContext[String(providerId)]; //currently just from App
+      const providerComponent = components[providerId - 1];
+      providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
+
+      for (const stateId of Object.values(attributesAndStateIds)) {
+        context +=
+          'const ' +
+          providerComponent.stateProps[stateId - 1].key +
+          ' = ' +
+          providerComponent.name.toLowerCase() +
+          'Context.' +
+          providerComponent.stateProps[stateId - 1].key +
+          ';\n';
+      }
+    }
+  }
 
   // create final component code. component code differs between classic react, next.js, gatsby.js
   // classic react code
@@ -236,6 +258,8 @@ const generateUnformattedCode = (
     ${classBased ? `import React, { Component } from 'react';` : ''}
     ${!stateful && !classBased ? `import React, { createContext, useContext } from 'react';` : ''}
     ${importsMapped}
+    ${providers}
+    ${context}
     ${
       classBased
         ? `class ${currentComponent.name} extends Component {`

app/src/interfaces/Interfaces.ts

@@ -39,6 +39,10 @@ export interface Component {
   stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
   annotations?: string;
   useStateCodes: string[];
+  useContext?: object // structure --> {providerId: {attribute: stateId, ....}, ...}
+  // example:
+  // {1: {compText: 1, compLink: 2}}
+  // {1: {compText: 1}, 2: {compLink: 1}, ....}
 }
 
 export interface StateProp {

app/src/public/styles/style.css

@@ -609,16 +609,30 @@ a.nav_link:hover {
   z-index: 999;
 }
 
+.useState-btn {
+  color: rgb(241, 240, 240);
+  background-color: #0099E6;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.useState-btn {
+  color: rgb(241, 240, 240);
+  background-color: #0099E6;
+  border: 1px solid #186BB4;
+  border-radius: 3;
+  box-shadow: "0 0px 0px 2px #1a1a1a";
+  padding: 2px 2px 2px 2px;
+}
+
 /* UseStateModal Styling */
 
 .useState-position {
   display: flex;
   flex-direction: column;
   position: fixed;
-  align-items:flex-start;
+  align-items: center;
   top: 30%;
   left: 30%;
-
 }
 
 .useState-header {
@@ -633,16 +647,23 @@ a.nav_link:hover {
   border-radius: 15px 15px 0px 0px;
 }
 
+.useState-dropdown {
+  align-self: flex-start;
+}
+
 .useState-window {
   width: 600px;
-  height: 300px;
+  height: 400px;
   resize: none;
   white-space: pre-line;
   font-size: 18px;
-  border: 3px;
+  border: 2px;
   border-style: solid;
   border-color: black;
   border-radius: 0px 0px 15px 15px;
   font-family: Arial, Helvetica, sans-serif;
-  background-color: rgb(241, 240, 240);;
+  background-color: rgb(241, 240, 240);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

app/src/reducers/componentReducer.ts

@@ -450,7 +450,27 @@ const reducer = (state: State, action: Action) => {
       }
       return { ...state };
     }
+    case 'UPDATE USE CONTEXT': {
+      const { useContextObj } = action.payload;
 
+      const components = [...state.components];
+      const component = findComponent(
+        components,
+        state.canvasFocus.componentId
+      );
+      component.useContext = useContextObj;
+
+      component.code = generateCode(
+        components,
+        state.canvasFocus.componentId,
+        [...state.rootComponents],
+        state.projectType,
+        state.HTMLTypes
+      );
+
+      return {...state, components }
+
+    }
     case 'UPDATE CSS': {
       const { style } = action.payload;
       const components = [...state.components];