Merge pull request #8 from oslabs-beta/huyBranch

Finished documentation for launch

Author: BiancaPicasso

CHANGE_LOG.md

@@ -3,6 +3,17 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 12.0.0 Changes**
+
+-Context Visualizer: You can now visually see what component is consuming which context. As you click on the interactive tree, the component assigned to the context will be revealed.
+-React 18: Updated to React 18
+-Export Feature: Created an exportable context file, integrated with original codebase.
+Ready to go code: Added boilerplate codes to components based on which contexts they are consuming.
+
+**A note to future contributors**
+
+Attempted to implement Facebook and Google OAuth via passport but as of Electron’s current version, neither of them not compatible with electron.
+
 **Version 11.0.0 Changes:**
 
 - Added Next.js functionality

README.md

@@ -30,6 +30,9 @@ How to use
 - **Start a project (only after registration)**: Registered users can create a new project and select whether they want their project to be a Next.js, Gatsby.js, or classic React project. Also, registered users can save projects to return to them at a later time.
 - **Add Components**: Create components on the right panel. Components can be associated with a route, or they can be used within other components.
 - **Delete Components**: Delete components after focusing on them in the right panel. Be careful when deleting components: Upon deletion, all instances of the component will be removed within the application/project.
+- **Context Visualizer**: You can now visually see what component is consuming which context. As you click on the interactive tree, the component assigned to the context will be revealed.
+- **Context Code Preview**: Once contexts have been assigned to the desired components, click ‘Export’ to incorporate context into your existing codebase so you can save it as a file.
+- **Ready to go code**: Added boilerplate codes to components based on which contexts they are consuming.
 - **Add Custom Elements**: Create custom elements or add provided HTML elements into the application. Once the project is exported, the HTML tags generated in the code preview will function as expected. You can specify functionality for custom elements in the code preview. The tutorial on HTML Elements explains more on how to do this.
 - **Delete Custom HTML Elements**: Delete custom HTML elements by clicking on the ‘X’ button adjacent to the element. Be careful when deleting custom elements: All instances of the element will be deleted within the application/project.
 - **Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.js projects have Link components to enable client-side navigation to other routes.
@@ -107,6 +110,8 @@ How to use
 
 [Anthony Torrero](https://www.linkedin.com/in/anthony-torrero-4b8798159/) [@Anthonytorrero](https://github.com/Anthonytorrero)
 
+[Bianca Picasso](linkedin.com/in/bianca-picasso) [@BiancaPicasso](https://github.com/BiancaPicasso)
+
 [Brian Han](https://www.linkedin.com/in/brianjisoohan/) [@brianjshan](https://github.com/brianjshan)
 
 [Bryan Chau](https://www.linkedin.com/in/chaubryan1/) [@bchauu](https://github.com/bchauu)
@@ -139,6 +144,8 @@ How to use
 
 [Fredo Chen](https://www.linkedin.com/in/fredochen/) [@fredosauce](https://github.com/fredosauce)
 
+[Huy Pham](linkedin.com/in/huypham048) [@huypham048](https://github.com/huypham048)
+
 [Jonathan Calvo Ramirez](https://www.linkedin.com/in/jonathan-calvo/) [@jonocr](https://github.com/jonocr)
 
 [Jesse Zuniga](https://linkedin.com/in/jesse-zuniga) [@jzuniga206](https://github.com/jzuniga206)
@@ -149,6 +156,8 @@ How to use
 
 [Katrina Henderson](https://www.linkedin.com/in/katrinahenderson/) [@kchender](https://github.com/kchender)
 
+[Ken Bains](linkedin.com/in/ken-bains) [@ken-Bains](https://github.com/ken-Bains)
+
 [Kevin Park](https://www.linkedin.com/in/xkevinpark/) [@xkevinpark](https://github.com/xkevinpark)
 
 [Khuong Nguyen](https://www.linkedin.com/in/khuong-nguyen/) [@khuongdn16](https://github.com/khuongdn16)
@@ -171,6 +180,8 @@ How to use
 
 [Ron Fu](https://www.linkedin.com/in/ronfu)[@rfvisuals](https://github.com/rfvisuals)
 
+[Salvatore Saluga](linkedin.com/in/salvatore-saluga) [@SalSaluga](https://github.com/SalSaluga)
+
 [Sean Sadykoff](https://www.linkedin.com/in/sean-sadykoff/) [@sean1292](https://github.com/sean1292)
 
 [Shana Hoehn](https://www.linkedin.com/in/shana-hoehn-70297b169/) [@slhoehn](https://github.com/slhoehn)

app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx

@@ -9,6 +9,7 @@ import ComponentTable from './components/ComponentTable';
 import { Button } from '@mui/material';
 import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import * as actions from '../../../redux/actions/actions';
+import StateContext from '../../../context/context';
 
 const AssignContainer = () => {
   const store = useStore();
@@ -20,7 +21,9 @@ const AssignContainer = () => {
   const [contextInput, setContextInput] = React.useState(null);
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
+  const [stateContext, dispatchContext] = useContext(StateContext);
 
+  //fetching data from redux store
   useEffect(() => {
     setState(store.getState().contextSlice);
   }, []);
@@ -32,7 +35,8 @@ const AssignContainer = () => {
       setTableState(targetContext.values);
     }
   };
-  //checks if state is no longer an array, thus an object and will eventually render out the fetched
+
+  //construct data for table displaying component table
   const renderComponentTable = targetComponent => {
     //target Component is main
 
@@ -47,18 +51,30 @@ const AssignContainer = () => {
           listOfContexts.push(context.name);
         }
       });
-      console.log('setting component table with ', listOfContexts);
       setComponentTable(listOfContexts);
     }
   };
 
+  //handling assignment of contexts to components
   const handleAssignment = () => {
+    if (
+      contextInput === '' ||
+      contextInput === null ||
+      componentInput === '' ||
+      componentInput === null
+    )
+      return;
     dispatch(
       actions.addComponentToContext({
         context: contextInput,
         component: componentInput
       })
     );
+    //trigger generateCode(), update code preview tab
+    dispatchContext({
+      type: 'DELETE ELEMENT',
+      payload: 'FAKE_ID'
+    });
 
     setState(store.getState().contextSlice);
     renderComponentTable(componentInput);

app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useStore } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import Divider from '@mui/material/Divider';
@@ -8,44 +8,57 @@ import AddDataForm from './components/AddDataForm';
 import AddContextForm from './components/AddContextForm';
 import * as actions from '../../../redux/actions/actions';
 import { Typography } from '@mui/material';
+import StateContext from '../../../context/context';
 
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
   const store = useStore();
   const [state, setState] = useState([]);
   const [tableState, setTableState] = React.useState(defaultTableData);
   const [contextInput, setContextInput] = React.useState(null);
+  const [stateContext, dispatchContext] = useContext(StateContext);
 
+  //pulling data from redux store
   useEffect(() => {
     setState(store.getState().contextSlice);
   }, []);
 
   const dispatch = useDispatch();
 
+  //update data store when user adds a new context
   const handleClickSelectContext = () => {
     //prevent user from adding duplicate context
     for (let i = 0; i < state.allContext.length; i += 1) {
       if (state.allContext[i].name === contextInput.name) {
         return;
       }
     }
+    setContextInput('');
     dispatch(actions.addContextActionCreator(contextInput));
     setState(store.getState().contextSlice);
   };
 
+  //update data store when user add new key-value pair to context
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
     dispatch(
       actions.addContextValuesActionCreator({ name, inputKey, inputValue })
     );
     setState(store.getState().contextSlice);
   };
 
+  //update data store when user deletes context
   const handleDeleteContextClick = () => {
     dispatch(actions.deleteContext(contextInput));
     setContextInput('');
     setState(store.getState().contextSlice);
+    setTableState(defaultTableData);
+    dispatchContext({
+      type: 'DELETE ELEMENT',
+      payload: 'FAKE_ID'
+    });
   };
 
+  //re-render data table when there's new changes
   const renderTable = targetContext => {
     if (
       targetContext === null ||

app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx

@@ -8,6 +8,7 @@ const DisplayContainer = () => {
   const { allContext } = store.getState().contextSlice;
   const [contextData, setContextData] = useState([]);
 
+  //build data for Google charts, tree rendering
   useEffect(() => {
     transformData(allContext);
   }, []);

app/src/components/main/DemoRender.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import Box from '@material-ui/core/Box';
 import cssRefresher from '../../helperFunctions/cssRefresh';
 import { useSelector } from 'react-redux';
@@ -17,12 +17,12 @@ const DemoRender = (): JSX.Element => {
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
-  // Create React ref to inject transpiled code in inframe 
+  // Create React ref to inject transpiled code in inframe
   const iframe = useRef<any>();
   const demoContainerStyle = {
     width: '100%',
     backgroundColor: '#FBFBFB',
-    border: '2px Solid grey',
+    border: '2px Solid grey'
   };
 
   const html = `
@@ -55,14 +55,19 @@ const DemoRender = (): JSX.Element => {
   `;
 
   //Switch between components when clicking on a link in the live render
-  window.onmessage = (event) => {
-    if(event.data === undefined) return;
-    const component:string = event.data?.split('/').at(-1);
-    const componentId = component && state.components?.find((el) => {
-      return el.name.toLowerCase() === component.toLowerCase();
-    }).id;
-    componentId && dispatch({ type: 'CHANGE FOCUS', payload: {componentId, childId: null}})
-    
+  window.onmessage = event => {
+    if (event.data === undefined) return;
+    const component: string = event.data?.split('/').at(-1);
+    const componentId =
+      component &&
+      state.components?.find(el => {
+        return el.name.toLowerCase() === component.toLowerCase();
+      }).id;
+    componentId &&
+      dispatch({
+        type: 'CHANGE FOCUS',
+        payload: { componentId, childId: null }
+      });
   };
 
   //  This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
@@ -78,28 +83,94 @@ const DemoRender = (): JSX.Element => {
         const classRender = element.attributes.cssClasses;
         const activeLink = element.attributes.compLink;
         let renderedChildren;
-        if (elementType !== 'input' && elementType !== 'img' && elementType !== 'Image' && element.children.length > 0) {
+        if (
+          elementType !== 'input' &&
+          elementType !== 'img' &&
+          elementType !== 'Image' &&
+          element.children.length > 0
+        ) {
           renderedChildren = componentBuilder(element.children);
         }
-        if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
-        else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
-        else if (elementType === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
-        else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(<Box component='a' href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
-        else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
-        else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
-        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>
-        );
+        if (elementType === 'input')
+          componentsToRender.push(
+            <Box
+              component={elementType}
+              className={classRender}
+              style={elementStyle}
+              key={key}
+              id={`rend${childId}`}
+            ></Box>
+          );
+        else if (elementType === 'img')
+          componentsToRender.push(
+            <Box
+              component={elementType}
+              src={activeLink}
+              className={classRender}
+              style={elementStyle}
+              key={key}
+              id={`rend${childId}`}
+            ></Box>
+          );
+        else if (elementType === 'Image')
+          componentsToRender.push(
+            <Box
+              component="img"
+              src={activeLink}
+              className={classRender}
+              style={elementStyle}
+              key={key}
+              id={`rend${childId}`}
+            ></Box>
+          );
+        else if (elementType === 'a' || elementType === 'Link')
+          componentsToRender.push(
+            <Box
+              component="a"
+              href={activeLink}
+              className={classRender}
+              style={elementStyle}
+              key={key}
+              id={`rend${childId}`}
+            >
+              {innerText}
+              {renderedChildren}
+            </Box>
+          );
+        else if (elementType === 'Switch')
+          componentsToRender.push(<Switch>{renderedChildren}</Switch>);
+        else if (elementType === 'Route')
+          componentsToRender.push(
+            <Route exact path={activeLink}>
+              {renderedChildren}
+            </Route>
+          );
+        else
+          componentsToRender.push(
+            <Box
+              component={elementType}
+              className={classRender}
+              style={elementStyle}
+              key={key}
+              id={`rend${childId}`}
+            >
+              {innerText}
+              {renderedChildren}
+            </Box>
+          );
         key += 1;
       }
     }
     return componentsToRender;
   };
 
   let code = '';
-  const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
+  const currComponent = state.components.find(
+    element => element.id === state.canvasFocus.componentId
+  );
 
   componentBuilder(currComponent.children).forEach(element => {
-    try{
+    try {
       code += ReactDOMServer.renderToString(element);
     } catch {
       return;
@@ -108,17 +179,23 @@ const DemoRender = (): JSX.Element => {
 
   useEffect(() => {
     cssRefresher();
-  }, [])
+  }, []);
 
   useEffect(() => {
     iframe.current.contentWindow.postMessage(code, '*');
-  }, [code])
+  }, [code]);
 
   return (
     <div id={'renderFocus'} style={demoContainerStyle}>
-      <iframe ref={iframe} sandbox='allow-scripts' srcDoc={html} width='100%' height='100%' />
+      <iframe
+        ref={iframe}
+        sandbox="allow-scripts"
+        srcDoc={html}
+        width="100%"
+        height="100%"
+      />
     </div>
   );
 };
 
-export default DemoRender;
+export default DemoRender;