add sidebar update. Todupdate(sidebar): Initial changes to sidebar

Todo: Address remaining bugs and refine functionality.
o: still needs some work

Author: martins5225

app/src/components/left/ComponentDrag.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import Grid from '@mui/material/Grid';
 import ComponentPanelItem from '../right/ComponentPanelItem';
+import Grid from '@mui/material/Grid';
+import React from 'react';
+import { RootState } from '../../redux/store';
 import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
-import { RootState } from '../../redux/store';
 // 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 classes = useStyles();
@@ -108,7 +108,7 @@ const useStyles = makeStyles({
     wordWrap: 'break-word'
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: '#fff'
   },
   darkThemeFontColor: {
     color: '#fff'

app/src/components/left/ComponentsContainer.tsx

@@ -1,7 +1,82 @@
+import ComponentPanelItem from '../right/ComponentPanelItem';
+import Grid from '@mui/material/Grid';
 import React from 'react';
+import { RootState } from '../../redux/store';
+import makeStyles from '@mui/styles/makeStyles';
+import { useSelector } from 'react-redux';
 
 const ComponentsContainer = () => {
-  return <div>ComponentsContainer</div>;
+  const classes = useStyles();
+  const state = useSelector((store: RootState) => store.appState);
+  const isDarkMode = useSelector(
+    (store: RootState) => store.darkMode.isDarkMode
+  );
+  const isFocus = (targetId: Number) => {
+    return state.canvasFocus.componentId === targetId ? true : false;
+  };
+  return (
+    <div>
+      <div className={classes.panelWrapper}>
+        <div className={classes.panelWrapperList}>
+          <h4
+            className={
+              !isDarkMode
+                ? classes.lightThemeFontColor
+                : classes.darkThemeFontColor
+            }
+          >
+            Reusable Components
+          </h4>
+          <Grid
+            container
+            direction="row"
+            justifyContent="center"
+            alignItems="center"
+          >
+            {state.components
+              .filter((comp) => !state.rootComponents.includes(comp.id))
+              .map((comp) => {
+                return (
+                  <ComponentPanelItem
+                    isFocus={isFocus(comp.id)}
+                    key={`comp-${comp.id}`}
+                    name={comp.name}
+                    id={comp.id}
+                    root={false}
+                  />
+                );
+              })}
+          </Grid>
+        </div>
+      </div>
+    </div>
+  );
 };
 
+const useStyles = makeStyles({
+  panelWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexGrow: 1,
+    overflow: 'auto'
+  },
+  panelWrapperList: {
+    minHeight: '120px',
+    marginLeft: '-15px',
+    marginRight: '-15px',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    wordWrap: 'break-word'
+  },
+  lightThemeFontColor: {
+    color: '#fff'
+  },
+  darkThemeFontColor: {
+    color: '#fff'
+  }
+});
+
 export default ComponentsContainer;

app/src/components/left/ContentArea.tsx

@@ -6,34 +6,32 @@ import RoomsContainer from './RoomsContainer';
 import TreeContainer from './TreeContainer';
 
 interface TabPanelProps {
-  value: number;
+  activeTab: number;
   index: number;
 }
 
-const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
-  return <Box hidden={value !== index}>{value === index && children}</Box>;
+const TabPanel: React.FC<TabPanelProps> = ({ children, activeTab, index }) => {
+  return (
+    <Box hidden={activeTab !== index}>{activeTab === index && children}</Box>
+  );
 };
 
-const ContentArea: React.FC<{ value: number | null }> = ({ value }) => {
-  if (value === null) {
-    return null;
-  }
+const panels = [
+  <ElementsContainer />,
+  <ComponentsContainer />,
+  <TreeContainer />,
+  <RoomsContainer />
+];
 
+const ContentArea: React.FC<{ activeTab: number | null }> = ({ activeTab }) => {
   return (
     <div className="left-container">
       <div className="column left">
-        <TabPanel value={value} index={0}>
-          <ElementsContainer />
-        </TabPanel>
-        <TabPanel value={value} index={1}>
-          <ComponentsContainer />
-        </TabPanel>
-        <TabPanel value={value} index={2}>
-          <TreeContainer />
-        </TabPanel>
-        <TabPanel value={value} index={3}>
-          <RoomsContainer />
-        </TabPanel>
+        {panels.map((panel, idx) => (
+          <TabPanel key={idx} activeTab={activeTab} index={idx}>
+            {panel}
+          </TabPanel>
+        ))}
       </div>
     </div>
   );

app/src/components/left/ElementsContainer.tsx

@@ -48,7 +48,7 @@ const ElementsContainer = (props): JSX.Element => {
         textAlign: 'center'
       }}
     >
-      <h4>Drag and Drop</h4>
+      {' '}
       <DragDropPanel />
       <div id={'CompBottomHalf'}>
         <ComponentDrag isThemeLight={props.isThemeLight} />

app/src/components/left/Sidebar.tsx

@@ -7,20 +7,24 @@ import PeopleIcon from '@mui/icons-material/People';
 import React from 'react';
 
 interface SidebarProps {
-  value: number | null;
-  setValue: React.Dispatch<React.SetStateAction<number | null>>;
+  activeTab: number | null;
+  setActiveTab: (value: number | null) => void;
 }
+const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
+  const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    if (activeTab === newValue) {
+      setActiveTab(null);
+    } else {
+      setActiveTab(newValue);
+    }
+  };
 
-const Sidebar: React.FC<SidebarProps> = ({ value, setValue }) => {
-  console.log('sidebar value', value);
   return (
     <Tabs
       orientation="vertical"
       variant="scrollable"
-      value={value}
-      onChange={(_, newValue) => {
-        setValue(value === newValue ? null : newValue);
-      }}
+      value={activeTab}
+      onChange={handleTabChange}
       TabIndicatorProps={{
         style: {
           backgroundColor: '#4A4A4A'

app/src/components/top/NavBarButtons.tsx

@@ -344,7 +344,7 @@ function navbarDropDown(props) {
           </svg>
         </button>
       )}
-      <input
+      {/* <input
         type="text"
         style={{
           margin: '3px 5%',
@@ -356,7 +356,7 @@ function navbarDropDown(props) {
         onChange={(e) => setRoomCode(e.target.value)}
       ></input>
       <button onClick={() => joinRoom()}>Join Room</button>
-      <p>In Room: {joinedRoom}</p>
+      <p>In Room: {joinedRoom}</p> */}
       <MarketplaceButton />
       <LoginButton />
       <StyledMenu // Dropdown menu connected to Manage Project Button

app/src/containers/LeftContainer.tsx

@@ -5,12 +5,12 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import Sidebar from '../components/left/Sidebar';
 
 function App() {
-  const [value, setValue] = useState<number | null>(5);
+  const [activeTab, setActiveTab] = useState<number | null>(null);
 
   return (
     <div style={{ display: 'flex' }}>
-      <Sidebar value={value} setValue={setValue} />
-      <ContentArea value={value} />
+      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
+      <ContentArea activeTab={activeTab} />
     </div>
   );
 }