merging in dev changes

Author: liamroh

app/src/components/App.tsx

@@ -35,33 +35,37 @@ export const App = (): JSX.Element => {
     console.log('state.isLoggedIn', state.isLoggedIn)
     // console.log('cookies.get in App', Cookies.get())
     // if user is a guest, see if a project exists in localforage and retrieve it
-    // if (!state.isLoggedIn) {
-    //   localforage.getItem('guestProject').then((project) => {
-    //     // if project exists, use dispatch to set initial state to that project
-    //     if (project) {
-    //       dispatch(setInitialState(project));
-    //     }
-    //   });
-    // } else {
-    //   // otherwise if a user is logged in, use a fetch request to load user's projects from DB
+    // v17 May not currently work yet
+    if (!state.isLoggedIn) {
+      console.log('not state.islogged in')
+      localforage.getItem('guestProject').then((project) => {
+        // if project exists, use dispatch to set initial state to that project
+        console.log('guestProject', project)
+        if (project) {
+          dispatch(setInitialState(project));
+          console.log('project', project)
+        }
+      });
+    } else {
+      // otherwise if a user is logged in, use a fetch request to load user's projects from DB
 
-    //   let userId;
-    //   if (Cookies.get('ssid')) {
-    //     userId = Cookies.get('ssid');
-    //   } else {
-    //     userId = window.localStorage.getItem('ssid');
-    //   }
-    //   also load user's last project, which was saved in localforage on logout
-    //   localforage.getItem(userId).then((project) => {
-    //     if (project) {
-    //       dispatch(setInitialState(project));
-    //     } else {
-    //       console.log(
-    //         'No user project found in localforage, setting initial state blank'
-    //       );
-    //     }
-    //   });
-    // }
+      let userId;
+      if (Cookies.get('ssid')) {
+        userId = Cookies.get('ssid');
+      } else {
+        userId = window.localStorage.getItem('ssid');
+      }
+      //also load user's last project, which was saved in localforage on logout
+      localforage.getItem(userId).then((project) => {
+        if (project) {
+          dispatch(setInitialState(project));
+        } else {
+          console.log(
+            'No user project found in localforage, setting initial state blank'
+          );
+        }
+      });
+    }
   }, []);
   // useEffect(() => {
   //   // provide config properties to legacy projects so new edits can be auto saved

app/src/components/left/ComponentDrag.tsx

@@ -37,6 +37,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
           direction="row"
           justifyContent="center"
           alignItems="center"
+          
         >
           {state.components
             .filter((comp) => state.rootComponents.includes(comp.id))
@@ -99,13 +100,6 @@ const useStyles = makeStyles({
   },
   panelWrapperList: {
     minHeight: '120px',
-    marginLeft: '-15px',
-    marginRight: '-15px',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    wordWrap: 'break-word'
   },
   lightThemeFontColor: {
     color: '#fff'

app/src/components/left/ComponentsContainer.tsx

@@ -29,9 +29,8 @@ const ComponentsContainer = () => {
           </h4>
           <Grid
             container
-            direction="row"
-            justifyContent="center"
-            alignItems="center"
+            direction="column"
+            alignContent={"center"}
           >
             {state.components
               .filter((comp) => !state.rootComponents.includes(comp.id))
@@ -63,13 +62,6 @@ const useStyles = makeStyles({
   },
   panelWrapperList: {
     minHeight: '120px',
-    marginLeft: '-15px',
-    marginRight: '-15px',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    wordWrap: 'break-word'
   },
   lightThemeFontColor: {
     color: '#fff'

app/src/components/left/ContentArea.tsx

@@ -33,7 +33,7 @@ const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
     >
       <div className="column left">
         {panels.map((panel, idx) => (
-          <TabPanel activeTab={activeTab} index={idx}>
+          <TabPanel activeTab={activeTab} index={idx} key={idx}>
             {panel}
           </TabPanel>
         ))}

app/src/components/left/DragDropPanel.tsx

@@ -86,7 +86,7 @@ const DragDropPanel = (props): JSX.Element => {
               state.projectType === 'Classic React'
             ) {
               return (
-                <Grid item xs={2} sm={2} md={2}>
+                <Grid item xs={2} sm={2} md={2} key={option.name}>
                   <HTMLItem
                     name={option.name}
                     key={`html-${option.name}`}

app/src/components/left/Sidebar.tsx

@@ -11,28 +11,36 @@ interface SidebarProps {
   toggleVisibility: (state: boolean) => void;
 }
 
+let oldValue = 0;
+
 const Sidebar: React.FC<SidebarProps> = ({
   activeTab,
   setActiveTab,
   toggleVisibility
 }) => {
   const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    if (activeTab === newValue) {
+    setActiveTab(newValue);
+    toggleVisibility(true);// Show the left-container when a different tab is clicked 
+    oldValue = newValue;//setting the oldvalue to match the new tab
+    console.log('oldValue change', oldValue)
+  };
+
+  const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
+    if (activeTab === oldValue) { //if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
+      console.log('handleTabChange null', oldValue)
       setActiveTab(null);
       toggleVisibility(false); // Hide the left-container when the same tab is clicked again
-    } else {
-      setActiveTab(newValue);
-      toggleVisibility(true); // Show the left-container when another tab is activated
     }
-  };
+  }
 
   return (
     <Tabs
       key={activeTab}
       orientation="vertical"
       variant="scrollable"
       value={activeTab}
-      onChange={handleTabChange}
+      onChange = {handleTabChange}
+      onClick = {(e: React.MouseEvent) => handleTabClick(e, oldValue)}
       TabIndicatorProps={{
         style: {
           backgroundColor: '#4A4A4A'
@@ -50,6 +58,7 @@ const Sidebar: React.FC<SidebarProps> = ({
         height: '100vh'
       }}
     >
+      <Tab sx={{position: 'absolute', visibility: "hidden"}} value={null}/>
       <Tab
         sx={{
           color: activeTab === 0 ? '#C6C6C6' : '#4A4A4A',

app/src/components/right/ComponentPanelItem.tsx

@@ -49,9 +49,9 @@ const ComponentPanelItem: React.FC<{
     <Grid
       item
       ref={drag}
-      xs={8}
+      xs= {8}
       style={{
-        display: 'grid',
+        // display: 'grid',
         color: isThemeLight ? 'black' : 'white',
         backgroundColor: 'transparent',
         // border: root
@@ -62,7 +62,9 @@ const ComponentPanelItem: React.FC<{
           : '2px solid white',
         borderRadius: '4px',
         borderColor: '#000000',
-        margin: '5px 0px'
+        margin: '5px 0px',
+        wordBreak: 'break-all',
+        width: '10rem'
       }}
     >
       {isFocus && <div className={classes.focusMark}></div>}  
@@ -82,6 +84,7 @@ const useStyles = makeStyles({
     width: '12px',
     height: '12px',
     borderRadius: '25px',
+    position: 'absolute'//so it doesn't cause the containing box to jiggle when selected due to change in size
   },
   lightTheme: {
     color: 'rgba (0, 0, 0, 0.54)'

app/src/components/top/NavBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
@@ -26,11 +26,14 @@ const NavBar = () => {
   );
 
   const dispatch = useDispatch();
+  const menuButtonRef = useRef(null);
 
   useEffect(()=>{
     setProjectName(state.name)
   }, [state.name])//update the ProjectName after state.name changes due to loading projects
 
+
+
   const buttonContainerStyle = {
     display: 'flex',
     alignItems: 'center',
@@ -129,13 +132,15 @@ const NavBar = () => {
           style={moreVertButtonStyle}
           variant="contained"
           color="primary"
-          onClick={() => setDropMenu((prevDropMenu) => !prevDropMenu)}
+          onClick={() => setDropMenu(!dropMenu)}
+          ref={menuButtonRef}
         >
           <MoreVertIcon style={{ color: 'white' }} />
         </Button>
         <NavBarButtons
           dropMenu={dropMenu}
           setDropMenu={setDropMenu}
+          menuButtonRef={menuButtonRef}
           style={{ color: 'white' }}
         />
       </div>

app/src/components/top/NavBarButtons.tsx

@@ -302,8 +302,9 @@ function navbarDropDown(props) {
       const handleClick = (event) => {
         if (event.type === "click" &&
           (dropdownRef.current &&
-          !dropdownRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
+          !dropdownRef.current.contains(event.target) && !props.menuButtonRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
         ) {
+          //menuButtonRef is to ensure that handleClose does not get invoked when the user clicks on the menu dropdown button
           handleClose();
         }
       };
@@ -388,10 +389,11 @@ function navbarDropDown(props) {
             width="16"
             height="16"
             fill="currentColor"
-            className="bi bi-book"
+            className="bi bi-bag-check"
             viewBox="0 0 16 16"
           >
-            <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
+            <path fillRule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+            <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
           </svg>
         </button>
       </Link>

app/src/containers/LeftContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import ContentArea from '../components/left/ContentArea';
 import { BrowserRouter as Router } from 'react-router-dom';

app/src/public/styles/style.css

@@ -477,13 +477,14 @@ RIGHT COLUMN
   display: flex;
   justify-content: center;
   align-content: center;
-  word-wrap: break-word;
+      
 }
 
 .compPanelItem h3 {
   font-size: 1em;
   letter-spacing: 0.75px;
   padding: 5px 10px;
+  
 }
 
 .compPanelItem:hover {