Skip to content

Commit ffc84a7

Browse files
jasttranJasmine TranRayahhhmedShzmj
authored
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]>
1 parent baa8bca commit ffc84a7

27 files changed

+8487
-8467
lines changed

‎client/pnpm-lock.yaml

Lines changed: 3663 additions & 4245 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Sidebar from './components/sidebar/Sidebar';
1515
import Sponsors from './components/Sponsors';
1616
import Timetable from './components/timetable/Timetable';
1717
import { TimetableTabs } from './components/timetableTabs/TimetableTabs';
18-
import { contentPadding, darkTheme, leftContentPadding, lightTheme } from './constants/theme';
18+
import { contentPadding, darkTheme, leftContentPadding, lightTheme, rightContentPadding } from './constants/theme';
1919
import {
2020
daysLong,
2121
getAvailableTermDetails,
@@ -51,7 +51,7 @@ const ContentWrapper = styled(Box)`
5151
text-align: center;
5252
padding-top: ${contentPadding}px;
5353
padding-left: ${leftContentPadding}px;
54-
padding-right: ${contentPadding}px;
54+
padding-right: ${rightContentPadding}px;
5555
transition:
5656
background 0.2s,
5757
color 0.2s;

‎client/src/components/sidebar/FriendsButton.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { SwitchAccount } from '@mui/icons-material';
2+
import { IconButton, Tooltip, Typography } from '@mui/material';
3+
import { styled } from '@mui/system';
4+
import React from 'react';
5+
6+
interface FriendsButtonProps {
7+
collapsed: boolean;
8+
showGroupsSidebar: boolean;
9+
setShowGroupsSidebar: (showGroupsSidebar: boolean) => void;
10+
}
11+
12+
const StyledFriendsButton = styled(IconButton)<{ isSelected: boolean }>`
13+
display: flex;
14+
border-radius: 8px;
15+
gap: 16px;
16+
justify-content: flex-start;
17+
padding: 12px 12px 12px 12px;
18+
background-color: ${({ isSelected }) => (isSelected ? 'rgb(157, 157, 157, 0.15)' : 'transparent')};
19+
`;
20+
21+
const IndividualComponentTypography = styled(Typography)<{ collapsed: boolean }>`
22+
font-size: 16px;
23+
`;
24+
25+
const FriendsButton: React.FC<FriendsButtonProps> = ({ collapsed, showGroupsSidebar, setShowGroupsSidebar }) => {
26+
return (
27+
<>
28+
<Tooltip title="Coming Soon: Shared Timetables" placement="right">
29+
<StyledFriendsButton
30+
color="inherit"
31+
// onClick={() => setShowGroupsSidebar(!showGroupsSidebar)} NOTE: uncomment to display groups side bar
32+
isSelected={showGroupsSidebar}
33+
>
34+
<SwitchAccount />
35+
<IndividualComponentTypography collapsed={collapsed}>
36+
{collapsed ? '' : 'Shared Timetables'}
37+
</IndividualComponentTypography>
38+
</StyledFriendsButton>
39+
</Tooltip>
40+
</>
41+
);
42+
};
43+
44+
export default FriendsButton;

‎client/src/components/sidebar/Sidebar.tsx

Lines changed: 115 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CalendarMonth, Description, Group, Info, Security, Settings as SettingsIcon } from '@mui/icons-material';
1+
import { CalendarMonth, Description, Info, Security, Settings as SettingsIcon } from '@mui/icons-material';
22
import { AppBar, AppBarProps, Divider, Typography } from '@mui/material';
33
import { styled } from '@mui/system';
44
import React, { useEffect, useRef, useState } from 'react';
@@ -10,6 +10,8 @@ import Changelog from './Changelog';
1010
import CollapseButton from './CollapseButton';
1111
import CustomModal from './CustomModal';
1212
import DarkModeButton from './DarkModeButton';
13+
import FriendsButton from './FriendsButton';
14+
import GroupsSidebar from './groupsSidebar/GroupsSidebar';
1315
import Privacy from './Privacy';
1416
import Settings from './Settings';
1517
import TermSelect from './TermSelect';
@@ -27,17 +29,28 @@ interface StyledSidebarProps extends AppBarProps {
2729
collapsed: boolean;
2830
}
2931

30-
const StyledSidebar = styled(AppBar)<StyledSidebarProps>(({ theme, collapsed }) => ({
31-
backgroundColor: theme.palette.background.paper,
32-
width: collapsed ? '80px' : '290px',
33-
height: '100vh',
32+
const StyledSidebar = styled(AppBar)<StyledSidebarProps>(({ collapsed }) => ({
33+
width: 'fit-content',
3434
left: 0,
35-
color: theme.palette.text.primary,
3635
transition: 'width 0.2s ease',
3736
zIndex: 1201,
37+
display: 'flex',
38+
flexDirection: 'row',
39+
3840
// overriding MUI select component padding when focused (for the term select)
3941
paddingRight: '0 !important',
40-
padding: '10px, 19px, 10px, 19px',
42+
padding: '10px, 0px, 10px, 19px',
43+
}));
44+
45+
const MainSidebar = styled('div')<StyledSidebarProps>(({ theme, collapsed }) => ({
46+
backgroundColor: theme.palette.background.paper,
47+
height: '100vh',
48+
color: theme.palette.text.primary,
49+
display: 'flex',
50+
flexDirection: 'column',
51+
justifyContent: 'space-between',
52+
width: collapsed ? '80px' : '290px',
53+
overflowY: 'auto',
4154
}));
4255

4356
const SidebarTitle = styled(Typography)`
@@ -62,7 +75,6 @@ const SideBarContainer = styled('div')`
6275
display: flex;
6376
flex-direction: column;
6477
padding: 20px 16px 20px 16px;
65-
height: 100%;
6678
gap: 16px;
6779
`;
6880

@@ -88,11 +100,30 @@ const SidebarFooterText = styled('div')`
88100
margin-top: 16px;
89101
`;
90102

103+
const StyledGroupContainer = styled('div')`
104+
height: 100vh;
105+
width: 50px;
106+
background: ${({ theme }) => theme.palette.primary.main};
107+
display: flex;
108+
align-items: center;
109+
padding: 12px 2px;
110+
flex-direction: column;
111+
gap: 4px;
112+
113+
overflow-y: auto;
114+
max-height: calc(100vh - 24px);
115+
116+
scrollbar-width: none; /* Firefox */
117+
&::-webkit-scrollbar {
118+
display: none; /* Chrome, Safari, and Edge */
119+
}
120+
`;
121+
91122
const Sidebar: React.FC = () => {
92123
const [currLogo, setCurrLogo] = useState(notanglesLogo);
93124
const [collapsed, setCollapsed] = useState(true);
125+
const [showGroupsSidebar, setShowGroupsSidebar] = useState(false);
94126
const sideBarRef = useRef<HTMLDivElement>(null);
95-
// TODO: dummy logic to be
96127

97128
const handleCollapse = (val: boolean) => {
98129
setCollapsed(val);
@@ -149,75 +180,85 @@ const Sidebar: React.FC = () => {
149180

150181
return (
151182
<StyledSidebar ref={sideBarRef} collapsed={collapsed}>
152-
<HeaderContainer>
153-
<a href="/">
154-
<LogoImg
155-
src={currLogo}
156-
alt="Notangles logo"
157-
onMouseOver={() => setCurrLogo(notanglesLogoGif)}
158-
onMouseOut={() => setCurrLogo(notanglesLogo)}
159-
/>
160-
</a>
161-
{!collapsed && <SidebarTitle variant="h6">Notangles</SidebarTitle>}
162-
{!collapsed && (
163-
<CollapseButton collapsed={collapsed} onClick={() => handleCollapse(true)} toolTipTitle="Collapse" />
164-
)}
165-
</HeaderContainer>
166-
<Divider />
167-
<SideBarContainer>
168-
<TermSelect collapsed={collapsed} handleExpand={() => handleCollapse(false)} />
169-
<NavComponentsContainer>
170-
<CustomModal
171-
title="Timetable"
172-
toolTipTitle="Timetable"
173-
showIcon={<CalendarMonth />}
174-
description={'Current Timetable'}
175-
content={null}
176-
collapsed={collapsed}
177-
// currently not clickable since this is our current page
178-
isClickable={false}
179-
// hardcoded until we move away from single page site
180-
isSelected={true}
181-
/>
182-
<CustomModal
183-
title="Friends"
184-
toolTipTitle="Coming Soon: Friends Timetables"
185-
showIcon={<Group />}
186-
description={'View Friends Timetables'}
187-
content={null}
188-
collapsed={collapsed}
189-
isClickable={false}
190-
/>
183+
{showGroupsSidebar && (
184+
<StyledGroupContainer>
185+
<GroupsSidebar />
186+
</StyledGroupContainer>
187+
)}
188+
<MainSidebar collapsed={collapsed}>
189+
<div>
190+
<HeaderContainer>
191+
<a href="/">
192+
<LogoImg
193+
src={currLogo}
194+
alt="Notangles logo"
195+
onMouseOver={() => setCurrLogo(notanglesLogoGif)}
196+
onMouseOut={() => setCurrLogo(notanglesLogo)}
197+
/>
198+
</a>
199+
{!collapsed && (
200+
<>
201+
<SidebarTitle variant="h6">Notangles</SidebarTitle>
202+
<CollapseButton collapsed={collapsed} onClick={() => handleCollapse(true)} toolTipTitle="Collapse" />
203+
</>
204+
)}
205+
</HeaderContainer>
206+
191207
<Divider />
192-
{modalData.map((modal, index) => (
193-
<>
208+
209+
<SideBarContainer>
210+
<TermSelect collapsed={collapsed} handleExpand={() => handleCollapse(false)} />
211+
212+
<NavComponentsContainer>
194213
<CustomModal
195-
key={index}
196-
title={modal.title}
197-
toolTipTitle={modal.toolTipTitle}
198-
showIcon={modal.showIcon}
199-
description={modal.description}
200-
content={modal.content}
214+
title="Timetable"
215+
toolTipTitle="Timetable"
216+
showIcon={<CalendarMonth />}
217+
description={'Current Timetable'}
218+
content={null}
201219
collapsed={collapsed}
202-
isClickable={modal.isClickable}
220+
// currently not clickable since this is our current page
221+
isClickable={false}
222+
// hardcoded until we move away from single page site
223+
isSelected={true}
203224
/>
204-
</>
205-
))}
206-
</NavComponentsContainer>
207-
</SideBarContainer>
208-
<SidebarFooter>
209-
{/* TODO: dummy logic - to be replaced */}
210-
<DarkModeButton collapsed={collapsed} />
211-
<UserAccount collapsed={collapsed} />
212-
{!collapsed ? (
213-
<SidebarFooterText>
214-
<Divider />
215-
<span>© DevSoc {new Date().getFullYear()}, v1.0.0</span>
216-
</SidebarFooterText>
217-
) : (
218-
<CollapseButton collapsed={collapsed} onClick={() => handleCollapse(false)} toolTipTitle="Expand" />
219-
)}
220-
</SidebarFooter>
225+
<FriendsButton
226+
collapsed={collapsed}
227+
showGroupsSidebar={showGroupsSidebar}
228+
setShowGroupsSidebar={setShowGroupsSidebar}
229+
/>
230+
<Divider />
231+
{modalData.map((modal, index) => (
232+
<>
233+
<CustomModal
234+
key={index}
235+
title={modal.title}
236+
toolTipTitle={modal.toolTipTitle}
237+
showIcon={modal.showIcon}
238+
description={modal.description}
239+
content={modal.content}
240+
collapsed={collapsed}
241+
isClickable={modal.isClickable}
242+
/>
243+
</>
244+
))}
245+
</NavComponentsContainer>
246+
</SideBarContainer>
247+
</div>
248+
249+
<SidebarFooter>
250+
<DarkModeButton collapsed={collapsed} />
251+
<UserAccount collapsed={collapsed} />
252+
{!collapsed ? (
253+
<SidebarFooterText>
254+
<Divider />
255+
<span>© DevSoc {new Date().getFullYear()}, v1.0.0</span>
256+
</SidebarFooterText>
257+
) : (
258+
<CollapseButton collapsed={collapsed} onClick={() => handleCollapse(false)} toolTipTitle="Expand" />
259+
)}
260+
</SidebarFooter>
261+
</MainSidebar>
221262
</StyledSidebar>
222263
);
223264
};

0 commit comments

Comments
 (0)