Begin implementing workspace

Cyfurion · Dec 5, 2021 · 9897e83 · 9897e83
1 parent 9fc0fb5
commit 9897e83
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 186 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -113,11 +113,11 @@ body {
 
 #top5-workspace {
   position: absolute;
+  display: grid;
+  place-items: center;
   background-color: #c4c4c4;
-  left: 0%;
-  top: 10%;
   width: 100%;
-  height: 80%;
+  height: 76%;
 }
 
 #top5-statusbar {
@@ -139,7 +139,7 @@ body {
   left: 0%;
   top: 0%;
   width: 100%;
-  height: 10%;
+  height: 50px;
   font-size: 24pt;
   font-weight: bold;
   display: flex;
@@ -206,11 +206,24 @@ body {
 
 #workspace-home,
 #workspace-edit {
-  position: absolute;
-  left: 0%;
-  top: 0%;
-  width: 100%;
-  height: 100%;
+  background-color: #d4d4f5;
+  width: 90%;
+  height: 90%;
+  border: 2px solid black;
+  border-radius: 10px;
+}
+
+#name-bar {
+  width: 35%;
+  height: 5%;
+  font-size: 16pt;
+  margin: 5px;
+}
+
+#list-space {
+  background-color: #2c2f70;
+  width: 90%;
+  height: 60%;
 }
 
 #edit-numbering {

diff --git a/client/src/App.js b/client/src/App.js
@@ -7,7 +7,7 @@ import {
     HomeWrapper,
     LoginScreen,
     RegisterScreen,
-    WorkspaceScreen
+    WorkspaceWrapper
 } from './components'
 
 // This is our application's top-level component.
@@ -25,7 +25,7 @@ const App = () => {
                         <Route path="/" exact component={HomeWrapper} />
                         <Route path="/register/" exact component={RegisterScreen} />
                         <Route path="/login/" exact component={LoginScreen} />
-                        <Route path="/top5list/:id" exact component={WorkspaceScreen} />
+                        <Route path="/top5list/:id" exact component={WorkspaceWrapper} />
                     </Switch>
                 </GlobalStoreContextProvider>
             </AuthContextProvider>

diff --git a/client/src/components/AppBanner.js b/client/src/components/AppBanner.js
@@ -2,7 +2,6 @@ import { useContext, useState } from 'react';
 import { Link } from 'react-router-dom'
 import AuthContext from '../auth';
 import { GlobalStoreContext } from '../store'
-import EditToolbar from './EditToolbar'
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -74,12 +73,7 @@ export default function AppBanner() {
 
     let editToolbar = "";
     let menu = loggedOutMenu;
-    if (auth.loggedIn) {
-        menu = loggedInMenu;
-        if (store.currentList) {
-            editToolbar = <EditToolbar />;
-        }
-    }
+    if (auth.loggedIn) { menu = loggedInMenu; }
 
     function getAccountMenu(loggedIn) {
         return <AccountCircle />;

diff --git a/client/src/components/EditToolbar.js b/client/src/components/EditToolbar.js
diff --git a/client/src/components/HomeScreen.js b/client/src/components/HomeScreen.js
@@ -1,14 +1,9 @@
 import React, { useContext, useEffect } from 'react';
-import { GlobalStoreContext } from '../store';
+import GlobalStoreContext from '../store';
 import AuthContext from '../auth'
 import DeleteModal from './DeleteModal.js';
 import ListCard from './ListCard.js';
-import { Box, IconButton } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import GroupIcon from '@mui/icons-material/Groups';
-import PersonIcon from '@mui/icons-material/Person';
-import FunctionsIcon from '@mui/icons-material/Functions';
-import SortIcon from '@mui/icons-material/Sort';
+import Toolbar from './Toolbar.js';
 import List from '@mui/material/List';
 /**
     This React component lists all the top5 lists in the UI.
@@ -42,32 +37,7 @@ const HomeScreen = () => {
     }
     return (
         <div id="top5-list-selector">
-            <div id="list-selector-heading">
-                <IconButton aria-label="home">
-                    <HomeIcon />
-                </IconButton>
-                <IconButton aria-label="all">
-                    <GroupIcon />
-                </IconButton>
-                <IconButton aria-label="user">
-                    <PersonIcon />
-                </IconButton>
-                <IconButton aria-label="community">
-                    <FunctionsIcon />
-                </IconButton>
-                <input type="text" id="search-bar" />
-                <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                    <IconButton
-                        size="large"
-                        aria-label="sort by"
-                        aria-haspopup="true"
-                        sx={{ color: 'black' }}
-                    >
-                        <p id="sort-by-text">SORT BY</p>
-                        <SortIcon />
-                    </IconButton>
-                </Box>
-            </div>
+            <Toolbar />
             <div id="list-selector-list">
                 {listCard}
             </div>

diff --git a/client/src/components/HomeWrapper.js b/client/src/components/HomeWrapper.js
@@ -1,13 +1,14 @@
 import { useContext } from 'react'
+
+import AppBanner from './AppBanner'
 import HomeScreen from './HomeScreen'
 import SplashScreen from './SplashScreen'
-import AuthContext from '../auth'
-import AppBanner from './AppBanner'
 import Statusbar from './Statusbar'
 
+import AuthContext from '../auth'
+
 export default function HomeWrapper() {
     const { auth } = useContext(AuthContext);
-    console.log("HomeWrapper auth.loggedIn: " + auth.loggedIn);
 
     if (auth.loggedIn) {
         return (

diff --git a/client/src/components/ListCard.js b/client/src/components/ListCard.js
@@ -1,10 +1,9 @@
-import { useContext, useState } from 'react'
+import { useContext } from 'react'
 import { GlobalStoreContext } from '../store'
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import Stack from '@mui/material/Stack';
-import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 
 /**
@@ -14,7 +13,6 @@ import DeleteIcon from '@mui/icons-material/Delete';
 */
 function ListCard(props) {
     const { store } = useContext(GlobalStoreContext);
-    const [editActive, setEditActive] = useState(false);
     const { listInfo } = props;
 
     function handleOpenList(id) {
@@ -24,15 +22,9 @@ function ListCard(props) {
         store.setOpenedList(null);
     }
 
-    function handleToggleEdit(event) {
+    function handleLoadList(event, id) {
         event.stopPropagation();
-        toggleEdit();
-    }
-
-    function toggleEdit() {
-        let newActive = !editActive;
-        if (newActive) { store.setIsListNameEditActive(); }
-        setEditActive(newActive);
+        store.setCurrentList(id);
     }
 
     async function handleDeleteList(event, id) {
@@ -54,16 +46,12 @@ function ListCard(props) {
             }}
             button
             onClick={() => { handleOpenList(listInfo._id) }}
+            disableRipple={true}
         >
                 <Box sx={{ padding: 0, flexGrow: 1 }}>
                     <b style={{ fontSize:"20pt" }}>{listInfo.name}</b><br />
                     By: {listInfo.ownerName}<br />
-                    <u style={{color:"red", "fontWeight":"bold"}}>Edit</u>
-                </Box>
-                <Box>
-                    <IconButton onClick={handleToggleEdit} aria-label='edit'>
-                        <EditIcon />
-                    </IconButton>
+                    <u style={{color:"red", "fontWeight":"bold"}} onClick={(event) => handleLoadList(event, listInfo._id)}>Edit</u>
                 </Box>
                 <Box>
                     <IconButton onClick={(event) => {
@@ -89,6 +77,7 @@ function ListCard(props) {
                 }}
                 button
                 onClick={() => { handleCloseList() }}
+                disableRipple={true}
             >
                 <Box sx={{ padding: "0", flexGrow: 1 }}>
                     <b style={{ fontSize:"20pt" }}>{listInfo.name}</b><br />
@@ -119,25 +108,6 @@ function ListCard(props) {
             </ListItem>
     }
 
-    // if (editActive) {
-    //     cardElement =
-    //         <TextField
-    //             margin="normal"
-    //             required
-    //             fullWidth
-    //             id={"list-" + listInfo._id}
-    //             label="Top 5 List Name"
-    //             name="name"
-    //             autoComplete="Top 5 List Name"
-    //             className='list-card'
-    //             onKeyPress={handleKeyPress}
-    //             onChange={handleUpdateText}
-    //             defaultValue={listInfo.name}
-    //             inputProps={{style: {fontSize: 48}}}
-    //             InputLabelProps={{style: {fontSize: 24}}}
-    //             autoFocus
-    //         />
-    // }
     return cardElement;
 }
 

diff --git a/client/src/components/Statusbar.js b/client/src/components/Statusbar.js
@@ -8,8 +8,6 @@ import AddIcon from '@mui/icons-material/Add'
 */
 function Statusbar() {
     const { store } = useContext(GlobalStoreContext);
-    let text ="";
-    if (store.currentList) { text = store.currentList.name; }
 
     function handleCreateList() { store.createNewList(); }
 

diff --git a/client/src/components/Toolbar.js b/client/src/components/Toolbar.js
@@ -0,0 +1,39 @@
+import { Box, IconButton } from '@mui/material';
+import HomeIcon from '@mui/icons-material/Home';
+import GroupIcon from '@mui/icons-material/Groups';
+import PersonIcon from '@mui/icons-material/Person';
+import FunctionsIcon from '@mui/icons-material/Functions';
+import SortIcon from '@mui/icons-material/Sort';
+
+function Toolbar() {
+    return (
+        <div id="list-selector-heading">
+            <IconButton aria-label="home">
+                <HomeIcon />
+            </IconButton>
+            <IconButton aria-label="all">
+                <GroupIcon />
+            </IconButton>
+            <IconButton aria-label="user">
+                <PersonIcon />
+            </IconButton>
+            <IconButton aria-label="community">
+                <FunctionsIcon />
+            </IconButton>
+            <input type="text" id="search-bar" />
+            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+                <IconButton
+                    size="large"
+                    aria-label="sort by"
+                    aria-haspopup="true"
+                    sx={{ color: 'black' }}
+                >
+                    <p id="sort-by-text">SORT BY</p>
+                    <SortIcon />
+                </IconButton>
+            </Box>
+        </div>
+    )
+}
+
+export default Toolbar;