Remove friends function

client/src/App.tsx

@@ -4,7 +4,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import * as Sentry from '@sentry/react';
 import React, { useContext, useEffect, useMemo } from 'react';
-import { Outlet } from 'react-router';
+import { Outlet, useLocation } from 'react-router';
 
 import getCourseInfo from './api/getCourseInfo';
 import getCoursesList from './api/getCoursesList';
@@ -134,6 +134,7 @@ const App: React.FC = () => {
     setAssignedColors,
   } = useContext(CourseContext);
 
+  const location = useLocation();
   const { preferredTheme, isDarkMode, unscheduleClassesByDefault, convertToLocalTimezone } = useGetUserSettingsQuery();
 
   const decodedAssignedColors = useColorsDecoder(assignedColors, preferredTheme);
@@ -569,6 +570,46 @@ const App: React.FC = () => {
     },
   };
 
+  const timetableView = useMemo(() => {
+    const currentPathname = location.pathname;
+    const searchParams = location.search;
+    console.log(currentPathname);
+    if (currentPathname === '/home') {
+      return (
+        <>
+          <TimetableTabs />
+          <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
+          <ICSButton
+            onClick={() => {
+              downloadIcsFile(selectedCourses, createdEvents, selectedClasses, firstDayOfTerm)
+                .then(() => {
+                  /* do nothing */
+                })
+                .catch(() => {
+                  /* do nothing */
+                });
+            }}
+          >
+            save to calendar
+          </ICSButton>
+          <Sponsors />
+          <Footer />
+          <Alerts />
+        </>
+      );
+    } else {
+      return <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />;
+    }
+  }, [
+    location,
+    selectedClasses,
+    createdEvents,
+    selectedCourses,
+    firstDayOfTerm,
+    handleSelectClass,
+    decodedAssignedColors,
+  ]);
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={themeObject}>
@@ -586,16 +627,7 @@ const App: React.FC = () => {
                     handleRemoveCourse={handleRemoveCourse}
                   />
                   <Outlet />
-                  <TimetableTabs />
-                  <Timetable assignedColors={decodedAssignedColors} handleSelectClass={handleSelectClass} />
-                  <ICSButton
-                    onClick={() => downloadIcsFile(selectedCourses, createdEvents, selectedClasses, firstDayOfTerm)}
-                  >
-                    save to calendar
-                  </ICSButton>
-                  <Sponsors />
-                  <Footer />
-                  <Alerts />
+                  {timetableView}
                   <SubcomPromotion />
                   <PromotionPopup
                     imgSrc={T3SelectGif}

client/src/components/controls/Controls.tsx

@@ -1,8 +1,10 @@
 import { Box, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useLocation } from 'react-router';
 
 import { ControlsProps } from '../../interfaces/PropTypes';
+import UserProfile from '../sidebar/friends/UserProfile';
 import Autotimetabler from './Autotimetabler';
 import CourseSelect from './CourseSelect';
 import CustomEvents from './CustomEvent';
@@ -18,6 +20,20 @@ const TermSelectWrapper = styled(Box)`
   align-items: flex-start;
 `;
 
+const FriendTimetableLabelContainer = styled(Box)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: ${({ theme }) => theme.palette.secondary.light};
+  border: 0.75px solid;
+  border-color: ${({ theme }) => theme.palette.text.primary};
+  padding: 10px 0;
+  border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+  font-weight: 700;
+`;
+
 const SelectWrapper = styled(Box)`
   display: flex;
   flex-direction: row;
@@ -52,50 +68,71 @@ const Controls: React.FC<ControlsProps> = ({
   handleSelectCourse,
   handleRemoveCourse,
 }) => {
+  const location = useLocation();
+  const additionalControlsDisplay = useMemo(() => {
+    if (location.pathname !== '/home') {
+      return (
+        <>
+          <TermSelectWrapper>
+            <TermSelect />
+          </TermSelectWrapper>
+          <FriendTimetableLabelContainer>
+            <UserProfile firstName="Sunny" lastName="Chen" overrideCollapse={true} />
+          </FriendTimetableLabelContainer>
+        </>
+      );
+    }
+    return (
+      <>
+        <Grid
+          container
+          direction="row"
+          size={{
+            xs: 12,
+            md: 6.5,
+          }}
+        >
+          <TermSelectWrapper>
+            <TermSelect />
+          </TermSelectWrapper>
+
+          <SelectWrapper minWidth={'296px'}>
+            <CourseSelect
+              assignedColors={assignedColors}
+              handleSelect={handleSelectCourse}
+              handleRemove={handleRemoveCourse}
+            />
+          </SelectWrapper>
+        </Grid>
+        <Grid
+          container
+          direction="row"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+          size={{
+            xs: 12,
+            md: 5.5,
+          }}
+        >
+          <CustomEventsWrapper>
+            <CustomEvents />
+          </CustomEventsWrapper>
+          <AutotimetablerWrapper>
+            <Autotimetabler handleSelectClass={handleSelectClass} />
+          </AutotimetablerWrapper>
+          <HistoryWrapper>
+            <History />
+          </HistoryWrapper>
+        </Grid>
+      </>
+    );
+  }, [location.pathname, assignedColors, handleSelectCourse, handleRemoveCourse, handleSelectClass]);
+
   return (
     <Grid container sx={{ paddingLeft: '66px' }} spacing={2}>
-      <Grid
-        container
-        direction="row"
-        size={{
-          xs: 12,
-          md: 6.5,
-        }}
-      >
-        <TermSelectWrapper>
-          <TermSelect />
-        </TermSelectWrapper>
-
-        <SelectWrapper minWidth={'296px'}>
-          <CourseSelect
-            assignedColors={assignedColors}
-            handleSelect={handleSelectCourse}
-            handleRemove={handleRemoveCourse}
-          />
-        </SelectWrapper>
-      </Grid>
-      <Grid
-        container
-        direction="row"
-        sx={{
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-        size={{
-          xs: 12,
-          md: 5.5,
-        }}
-      >
-        <CustomEventsWrapper>
-          <CustomEvents />
-        </CustomEventsWrapper>
-        <AutotimetablerWrapper>
-          <Autotimetabler handleSelectClass={handleSelectClass} />
-        </AutotimetablerWrapper>
-        <HistoryWrapper>
-          <History />
-        </HistoryWrapper>
-      </Grid>
+      {additionalControlsDisplay}
     </Grid>
   );
 };

client/src/components/sidebar/AddFriendsButton.tsx

@@ -6,6 +6,17 @@ import { useContext, useState } from 'react';
 import { AppContext } from '../../context/AppContext';
 import AddFriendsMenu from './AddFriendsMenu';
 import CustomModal from './CustomModel';
+import PendingInvitesBadge from './PendingInvitesBadge';
+
+const BadgeWrapper = styled('div')`
+  position: relative;
+`;
+
+const BadgePositioner = styled('div')`
+  position: absolute;
+  bottom: 29px;
+  right: 3px;
+`;
 
 const StyledAddButton = styled(IconButton)`
   display: flex;
@@ -17,12 +28,16 @@ const StyledAddButton = styled(IconButton)`
   color: ${({ theme }) => theme.palette.text.primary};
   border: 1px solid;
   border-color: ${({ theme }) => theme.palette.primary.main};
+  width: 100%;
 `;
 
 const StyledAddIcon = styled(AddCircle)`
   color: ${({ theme }) => theme.palette.primary.main};
 `;
 
+// Hardcoded values to be replaced
+const friendInvites = 2;
+
 interface AddFriendsButtonProps {
   friendsListOpen: boolean;
 }
@@ -39,12 +54,18 @@ const AddFriendsButton = ({ friendsListOpen }: AddFriendsButtonProps) => {
 
   return (
     <>
-      <StyledAddButton onClick={toggleModal}>
-        {!sidebarCollapsed && <Typography fontSize={15}>Add Friends</Typography>}
-        <Tooltip title="Add Friends" placement="right">
-          <StyledAddIcon />
-        </Tooltip>
-      </StyledAddButton>
+      <BadgeWrapper>
+        <StyledAddButton onClick={toggleModal}>
+          {!sidebarCollapsed && <Typography fontSize={15}>Add Friends</Typography>}
+            <Tooltip title="Add Friends" placement="right">
+              <StyledAddIcon />
+            </Tooltip>
+        </StyledAddButton>
+
+        <BadgePositioner>
+          <PendingInvitesBadge count={friendInvites} />
+        </BadgePositioner>
+      </BadgeWrapper>
       <CustomModal
         description="Add Friends"
         content={<AddFriendsMenu />}

client/src/components/sidebar/AddFriendsMenu.tsx

@@ -3,6 +3,13 @@ import { Button, ButtonGroup, CircularProgress, Grid, InputBase, Paper, Snackbar
 import { useMemo, useState } from 'react';
 
 import { SettingButton, SettingsItem, SettingsText } from './Settings';
+import PendingInvitesBadge from './PendingInvitesBadge';
+
+const RightContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
 
 const AddFriendText = styled(SettingsText)`
   font-weight: 500;
@@ -54,6 +61,7 @@ enum State {
 // TODO: replace hard code with server implementation
 const code = 'MQ7T2';
 const link = 'http://notangles.devsoc.app/invite?code=MQ7T2';
+const friendInvites = 2;
 
 const AddFriendsMenu = () => {
   const [codeCopyState, setCodeCopyState] = useState<State>(State.Ready);
@@ -101,7 +109,11 @@ const AddFriendsMenu = () => {
     <>
       <SettingButton>
         <AddFriendText>Friend Requests</AddFriendText>
-        <ArrowRight />
+        <RightContainer>
+          <PendingInvitesBadge count={friendInvites}/>
+          <ArrowRight />
+        </RightContainer>
+
       </SettingButton>
       <SettingsItem>
         <MenuSubContainer>

client/src/components/sidebar/CustomModalOpener.tsx

@@ -13,6 +13,7 @@ interface CustomModalOpenerProps {
   content: ReactNode;
   isClickable: boolean;
   isSelected?: boolean;
+  optionalHandleClick?: () => void;
 }
 
 const ShowModalButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== 'isSelected' })<{
@@ -40,6 +41,7 @@ const CustomModalOpener: React.FC<CustomModalOpenerProps> = ({
   content,
   isClickable,
   isSelected = false,
+  optionalHandleClick,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { sidebarCollapsed } = useContext(AppContext);
@@ -48,6 +50,7 @@ const CustomModalOpener: React.FC<CustomModalOpenerProps> = ({
     if (isClickable) {
       setIsOpen(!isOpen);
     }
+    if (optionalHandleClick) optionalHandleClick();
   };
 
   return (