sidebar fixed also fixed box sizes for components

Author: dentonwong

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

@@ -19,7 +19,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
     <div className={classes.panelWrapper}>
       {/* Display all root components */}
       {/* Font size for 'index' in root components in .compPanelItem h3 style.css */}
-      <div className={classes.panelWrapperList}>
+      <div className={classes.panelWrapperList} style={{minWidth: "100px"}}>
         {/* Heading just below ADD button */}
         <h4
           className={
@@ -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/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 {