linked pages to the link component dropdown menu

Author: calvincao

app/src/components/main/AddLink.tsx

@@ -8,8 +8,8 @@ import { InputLabel } from '@material-ui/core';
 
 
 function AddLink({ id }: AddRoutes) {
-  const [, dispatch] = useContext(StateContext);
-
+  const [state, dispatch] = useContext(StateContext);
+  console.log('AddLink\'s state', state);
   const handleClick = (id) => {
     dispatch({
       type: 'ADD CHILD',
@@ -21,17 +21,26 @@ function AddLink({ id }: AddRoutes) {
     });
   }
 
+  const handlePageSelect = event => {
+    const selectedPageName = event.target.value;
+    console.log('selectedPages State: ', selectedPageName);
+    // dispatch({ type: 'HREF TO', payload: });
+  }
+
+  console.log('state', state);
+  let pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
+  let dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
   return (
     <div style={{ padding: '1px', float: 'right' }}>
       <FormControl size='small'>
-            <Select
-              variant="outlined"
-            >
-              <MenuItem>Classic React</MenuItem>
-              <MenuItem>Gatsby.js</MenuItem>
-              <MenuItem>Next.js</MenuItem>
-            </Select>
-          </FormControl>
+        <InputLabel>Pages</InputLabel>
+        <Select variant="outlined"
+          onChange={handlePageSelect}
+          id="page-select"
+        >
+          {dropDown}
+        </Select>
+      </FormControl>
     </div>
   );
 }

app/src/components/right/ComponentDrag.tsx

@@ -5,9 +5,9 @@ import ComponentPanelItem from './ComponentPanelItem';
 import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
 import { makeStyles } from '@material-ui/core/styles';
 // The component panel section of the left panel displays all components and has the ability to add new components
-const ComponentDrag = ({isThemeLight}): JSX.Element => {
+const ComponentDrag = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
-  const [state, ] = useContext(StateContext);
+  const [state,] = useContext(StateContext);
   const isFocus = (targetId: Number) => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
@@ -18,26 +18,26 @@ const ComponentDrag = ({isThemeLight}): JSX.Element => {
       {/* Font size for 'index' in root components in .compPanelItem h3 style.css */}
       <div className={classes.panelWrapperList}>
         {/* Heading just below ADD button */}
-        <h4 className={ isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root Components'}</h4>
+        <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root Components'}</h4>
         <Grid container direction="row" justify="center" alignItems="center">
           {state.components
             .filter(comp => state.rootComponents.includes(comp.id))
             .map(comp => {
               return (
-                  <ComponentPanelItem
+                <ComponentPanelItem
                   isFocus={isFocus(comp.id)}
                   key={`comp-${comp.id}`}
                   name={comp.name}
                   id={comp.id}
                   root={true}
                   isThemeLight={isThemeLight}
-                  />
-               
+                />
+
               );
             })}
         </Grid>
         {/* Display all reusable components */}
-        <h4 className={ isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Reusable Components</h4>
+        <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Reusable Components</h4>
         <Grid container direction="row" justify="center" alignItems="center">
           {state.components
             .filter(comp => !state.rootComponents.includes(comp.id))
@@ -55,7 +55,7 @@ const ComponentDrag = ({isThemeLight}): JSX.Element => {
             })}
         </Grid>
         {/* Display routing components - (only applies to next.js or gatsby.js which has routing built in) */}
-        {state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'? (
+        {/* {state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'? (
           <React.Fragment>
             <h4>Routing</h4>
             <Grid
@@ -69,7 +69,7 @@ const ComponentDrag = ({isThemeLight}): JSX.Element => {
           </React.Fragment>
         ) : (
           ''
-        )}
+        )} */}
       </div>
     </div>
   );
@@ -78,9 +78,9 @@ const ComponentDrag = ({isThemeLight}): JSX.Element => {
 const useStyles = makeStyles({
   panelWrapper: {
     display: 'flex',
-    flexDirection:'column',
-    alignItems:'center',
-    flexGrow : 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexGrow: 1,
     overflow: 'auto',
   },
   panelWrapperList: {