Feature/ntgl 820 friend group (#877)

* added Friends Button and styled expanded view of zid and logout button * add or edit group dialog * partial BE added * added all BE * circles in sidebar * styled context menu * deleting groups * dialog now takes in onClose * fixed group interface and edit groups * fixed edit group * fixed prepareData initialisation of groupAdmins * removed console long * added Shared Timetables * friends dialog basic layout * friends tab list added * friend tabs list naming * fetch user info * viewing friends of logged in user * displaying friends * incoming requests * incoming requests template * tooltip for requests * decline friend requests * accept friends * search bar template for add a friend * can unfriend from friends list * can send friend request * can cancel friend request sent * requests added number * BE get all users * search bar implemented to find a friend * adding group uses friends * fixed only showing nonFriends in Add a Friend tab * added text for when tabs are empty * changed background of sending friend request * removed tool tip for adding z in front of zid * fixed update function * working update and add * added badges for friend requests * border for admin * member can leave a group * added validation checks for creating/editing group modal * added input check for editing a group * fixed search query for friends to add to a group * added scrolling if groups overflow * fixed times hidden * fixed right blue padding * moved interfaces * fix(GroupSidebar): build error with theme object not passed to GroupsSidebar.tsx * can add friend by searching zid * cut name and email * disabled shared timetables and changed tool tip to coming soon * in user.service.ts in getUserInfo, added userID property to be returned * fixed pr comments by removing console logs and comments * linting --------- Co-authored-by: Jasmine Tran <[email protected]> Co-authored-by: ray <[email protected]> Co-authored-by: Shaam <[email protected]>
devsoc-unsw · Sep 23, 2024 · ffc84a7 · ffc84a7
1 parent baa8bca
commit ffc84a7
Show file tree

Hide file tree

Showing 27 changed files with 8,487 additions and 8,467 deletions.
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -15,7 +15,7 @@ import Sidebar from './components/sidebar/Sidebar';
 import Sponsors from './components/Sponsors';
 import Timetable from './components/timetable/Timetable';
 import { TimetableTabs } from './components/timetableTabs/TimetableTabs';
-import { contentPadding, darkTheme, leftContentPadding, lightTheme } from './constants/theme';
+import { contentPadding, darkTheme, leftContentPadding, lightTheme, rightContentPadding } from './constants/theme';
 import {
   daysLong,
   getAvailableTermDetails,
@@ -51,7 +51,7 @@ const ContentWrapper = styled(Box)`
   text-align: center;
   padding-top: ${contentPadding}px;
   padding-left: ${leftContentPadding}px;
-  padding-right: ${contentPadding}px;
+  padding-right: ${rightContentPadding}px;
   transition:
     background 0.2s,
     color 0.2s;

diff --git a/client/src/components/sidebar/FriendsButton.tsx b/client/src/components/sidebar/FriendsButton.tsx
@@ -0,0 +1,44 @@
+import { SwitchAccount } from '@mui/icons-material';
+import { IconButton, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import React from 'react';
+
+interface FriendsButtonProps {
+  collapsed: boolean;
+  showGroupsSidebar: boolean;
+  setShowGroupsSidebar: (showGroupsSidebar: boolean) => void;
+}
+
+const StyledFriendsButton = styled(IconButton)<{ isSelected: boolean }>`
+  display: flex;
+  border-radius: 8px;
+  gap: 16px;
+  justify-content: flex-start;
+  padding: 12px 12px 12px 12px;
+  background-color: ${({ isSelected }) => (isSelected ? 'rgb(157, 157, 157, 0.15)' : 'transparent')};
+`;
+
+const IndividualComponentTypography = styled(Typography)<{ collapsed: boolean }>`
+  font-size: 16px;
+`;
+
+const FriendsButton: React.FC<FriendsButtonProps> = ({ collapsed, showGroupsSidebar, setShowGroupsSidebar }) => {
+  return (
+    <>
+      <Tooltip title="Coming Soon: Shared Timetables" placement="right">
+        <StyledFriendsButton
+          color="inherit"
+          // onClick={() => setShowGroupsSidebar(!showGroupsSidebar)} NOTE: uncomment to display groups side bar
+          isSelected={showGroupsSidebar}
+        >
+          <SwitchAccount />
+          <IndividualComponentTypography collapsed={collapsed}>
+            {collapsed ? '' : 'Shared Timetables'}
+          </IndividualComponentTypography>
+        </StyledFriendsButton>
+      </Tooltip>
+    </>
+  );
+};
+
+export default FriendsButton;
diff --git a/client/src/components/sidebar/Sidebar.tsx b/client/src/components/sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { CalendarMonth, Description, Group, Info, Security, Settings as SettingsIcon } from '@mui/icons-material';
+import { CalendarMonth, Description, Info, Security, Settings as SettingsIcon } from '@mui/icons-material';
 import { AppBar, AppBarProps, Divider, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import React, { useEffect, useRef, useState } from 'react';
@@ -10,6 +10,8 @@ import Changelog from './Changelog';
 import CollapseButton from './CollapseButton';
 import CustomModal from './CustomModal';
 import DarkModeButton from './DarkModeButton';
+import FriendsButton from './FriendsButton';
+import GroupsSidebar from './groupsSidebar/GroupsSidebar';
 import Privacy from './Privacy';
 import Settings from './Settings';
 import TermSelect from './TermSelect';
@@ -27,17 +29,28 @@ interface StyledSidebarProps extends AppBarProps {
   collapsed: boolean;
 }
 
-const StyledSidebar = styled(AppBar)<StyledSidebarProps>(({ theme, collapsed }) => ({
-  backgroundColor: theme.palette.background.paper,
-  width: collapsed ? '80px' : '290px',
-  height: '100vh',
+const StyledSidebar = styled(AppBar)<StyledSidebarProps>(({ collapsed }) => ({
+  width: 'fit-content',
   left: 0,
-  color: theme.palette.text.primary,
   transition: 'width 0.2s ease',
   zIndex: 1201,
+  display: 'flex',
+  flexDirection: 'row',
+
   // overriding MUI select component padding when focused (for the term select)
   paddingRight: '0 !important',
-  padding: '10px, 19px, 10px, 19px',
+  padding: '10px, 0px, 10px, 19px',
+}));
+
+const MainSidebar = styled('div')<StyledSidebarProps>(({ theme, collapsed }) => ({
+  backgroundColor: theme.palette.background.paper,
+  height: '100vh',
+  color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  width: collapsed ? '80px' : '290px',
+  overflowY: 'auto',
 }));
 
 const SidebarTitle = styled(Typography)`
@@ -62,7 +75,6 @@ const SideBarContainer = styled('div')`
   display: flex;
   flex-direction: column;
   padding: 20px 16px 20px 16px;
-  height: 100%;
   gap: 16px;
 `;
 
@@ -88,11 +100,30 @@ const SidebarFooterText = styled('div')`
   margin-top: 16px;
 `;
 
+const StyledGroupContainer = styled('div')`
+  height: 100vh;
+  width: 50px;
+  background: ${({ theme }) => theme.palette.primary.main};
+  display: flex;
+  align-items: center;
+  padding: 12px 2px;
+  flex-direction: column;
+  gap: 4px;
+
+  overflow-y: auto;
+  max-height: calc(100vh - 24px);
+
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, and Edge */
+  }
+`;
+
 const Sidebar: React.FC = () => {
   const [currLogo, setCurrLogo] = useState(notanglesLogo);
   const [collapsed, setCollapsed] = useState(true);
+  const [showGroupsSidebar, setShowGroupsSidebar] = useState(false);
   const sideBarRef = useRef<HTMLDivElement>(null);
-  // TODO: dummy logic to be
 
   const handleCollapse = (val: boolean) => {
     setCollapsed(val);
@@ -149,75 +180,85 @@ const Sidebar: React.FC = () => {
 
   return (
     <StyledSidebar ref={sideBarRef} collapsed={collapsed}>
-      <HeaderContainer>
-        <a href="/">
-          <LogoImg
-            src={currLogo}
-            alt="Notangles logo"
-            onMouseOver={() => setCurrLogo(notanglesLogoGif)}
-            onMouseOut={() => setCurrLogo(notanglesLogo)}
-          />
-        </a>
-        {!collapsed && <SidebarTitle variant="h6">Notangles</SidebarTitle>}
-        {!collapsed && (
-          <CollapseButton collapsed={collapsed} onClick={() => handleCollapse(true)} toolTipTitle="Collapse" />
-        )}
-      </HeaderContainer>
-      <Divider />
-      <SideBarContainer>
-        <TermSelect collapsed={collapsed} handleExpand={() => handleCollapse(false)} />
-        <NavComponentsContainer>
-          <CustomModal
-            title="Timetable"
-            toolTipTitle="Timetable"
-            showIcon={<CalendarMonth />}
-            description={'Current Timetable'}
-            content={null}
-            collapsed={collapsed}
-            // currently not clickable since this is our current page
-            isClickable={false}
-            // hardcoded until we move away from single page site
-            isSelected={true}
-          />
-          <CustomModal
-            title="Friends"
-            toolTipTitle="Coming Soon: Friends Timetables"
-            showIcon={<Group />}
-            description={'View Friends Timetables'}
-            content={null}
-            collapsed={collapsed}
-            isClickable={false}
-          />
+      {showGroupsSidebar && (
+        <StyledGroupContainer>
+          <GroupsSidebar />
+        </StyledGroupContainer>
+      )}
+      <MainSidebar collapsed={collapsed}>
+        <div>
+          <HeaderContainer>
+            <a href="/">
+              <LogoImg
+                src={currLogo}
+                alt="Notangles logo"
+                onMouseOver={() => setCurrLogo(notanglesLogoGif)}
+                onMouseOut={() => setCurrLogo(notanglesLogo)}
+              />
+            </a>
+            {!collapsed && (
+              <>
+                <SidebarTitle variant="h6">Notangles</SidebarTitle>
+                <CollapseButton collapsed={collapsed} onClick={() => handleCollapse(true)} toolTipTitle="Collapse" />
+              </>
+            )}
+          </HeaderContainer>
+
           <Divider />
-          {modalData.map((modal, index) => (
-            <>
+
+          <SideBarContainer>
+            <TermSelect collapsed={collapsed} handleExpand={() => handleCollapse(false)} />
+
+            <NavComponentsContainer>
               <CustomModal
-                key={index}
-                title={modal.title}
-                toolTipTitle={modal.toolTipTitle}
-                showIcon={modal.showIcon}
-                description={modal.description}
-                content={modal.content}
+                title="Timetable"
+                toolTipTitle="Timetable"
+                showIcon={<CalendarMonth />}
+                description={'Current Timetable'}
+                content={null}
                 collapsed={collapsed}
-                isClickable={modal.isClickable}
+                // currently not clickable since this is our current page
+                isClickable={false}
+                // hardcoded until we move away from single page site
+                isSelected={true}
               />
-            </>
-          ))}
-        </NavComponentsContainer>
-      </SideBarContainer>
-      <SidebarFooter>
-        {/* TODO: dummy logic - to be replaced */}
-        <DarkModeButton collapsed={collapsed} />
-        <UserAccount collapsed={collapsed} />
-        {!collapsed ? (
-          <SidebarFooterText>
-            <Divider />
-            <span>© DevSoc {new Date().getFullYear()}, v1.0.0</span>
-          </SidebarFooterText>
-        ) : (
-          <CollapseButton collapsed={collapsed} onClick={() => handleCollapse(false)} toolTipTitle="Expand" />
-        )}
-      </SidebarFooter>
+              <FriendsButton
+                collapsed={collapsed}
+                showGroupsSidebar={showGroupsSidebar}
+                setShowGroupsSidebar={setShowGroupsSidebar}
+              />
+              <Divider />
+              {modalData.map((modal, index) => (
+                <>
+                  <CustomModal
+                    key={index}
+                    title={modal.title}
+                    toolTipTitle={modal.toolTipTitle}
+                    showIcon={modal.showIcon}
+                    description={modal.description}
+                    content={modal.content}
+                    collapsed={collapsed}
+                    isClickable={modal.isClickable}
+                  />
+                </>
+              ))}
+            </NavComponentsContainer>
+          </SideBarContainer>
+        </div>
+
+        <SidebarFooter>
+          <DarkModeButton collapsed={collapsed} />
+          <UserAccount collapsed={collapsed} />
+          {!collapsed ? (
+            <SidebarFooterText>
+              <Divider />
+              <span>© DevSoc {new Date().getFullYear()}, v1.0.0</span>
+            </SidebarFooterText>
+          ) : (
+            <CollapseButton collapsed={collapsed} onClick={() => handleCollapse(false)} toolTipTitle="Expand" />
+          )}
+        </SidebarFooter>
+      </MainSidebar>
     </StyledSidebar>
   );
 };