#2709 used global event listener for sidebar and hompepage

package.json

@@ -51,6 +51,7 @@
  "@types/react-dom": "17.0.1"
  },
  "dependencies": {
+ "mitt": "^3.0.1",
  "react-hook-form-persist": "^3.0.0",
  "typescript": "^4.1.5"
  },

src/frontend/src/app/AppAuthenticated.tsx

@@ -27,9 +27,10 @@ import { Container, IconButton, useTheme } from '@mui/material';
 import ErrorPage from '../pages/ErrorPage';
 import { Role, isGuest } from 'shared';
 import Calendar from '../pages/CalendarPage/Calendar';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import ArrowCircleRightTwoToneIcon from '@mui/icons-material/ArrowCircleRightTwoTone';
 import HiddenContentMargin from '../components/HiddenContentMargin';
+import emitter from './EventBus';
 
 interface AppAuthenticatedProps {
  userId: string;
@@ -42,7 +43,23 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
  const theme = useTheme();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [moveContent, setMoveContent] = useState(false);
- const [onMemberHomepage, setOnMemberHomePage] = useState(false);
+ const [onMemberHomePage, setOnMemberHomePage] = useState(() => {
+ const savedState = localStorage.getItem('memberHomePage');
+ return savedState ? JSON.parse(savedState) : false;
+ });
+
+ useEffect(() => {
+ const handleMemberHomePage = (value: boolean) => {
+ setOnMemberHomePage(value);
+ localStorage.setItem('memberHomePage', JSON.stringify(value));
+ };
+
+ emitter.on('memberHomePage', handleMemberHomePage as (event: unknown) => void);
+
+ return () => {
+ emitter.off('memberHomePage', handleMemberHomePage as (event: unknown) => void);
+ };
+ }, []);
 
  if (isLoading || !userSettingsData) return <LoadingIndicator />;
 
@@ -63,11 +80,11 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
  height: '100vh',
  position: 'fixed',
  width: 15,
- borderRight: onMemberHomepage ? 2 : 0,
+ borderRight: onMemberHomePage ? 2 : 0,
  borderRightColor: theme.palette.background.paper
  }}
  />
- {onMemberHomepage && (
+ {onMemberHomePage && (
  <>
  <IconButton
  onClick={() => {
@@ -108,11 +125,7 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
  <Route path={routes.CREDITS} component={Credits} />
  <Route path={routes.FINANCE} component={Finance} />
  <Route path={routes.CALENDAR} component={Calendar} />
- <Route
- exact
- path={routes.HOME}
- render={() => <Home onMemberHomePage={onMemberHomepage} setOnMemberHomePage={setOnMemberHomePage} />}
- />
+ <Route exact path={routes.HOME} component={Home} />
  <Route path="*" component={PageNotFound} />
  </Switch>
  </Container>

src/frontend/src/app/EventBus.ts

@@ -0,0 +1,4 @@
+// eventBus.js
+import mitt from 'mitt';
+const emitter = mitt();
+export default emitter;

src/frontend/src/pages/HomePage/GuestHomePage.tsx

@@ -3,13 +3,19 @@ import PageLayout from '../../components/PageLayout';
 import { AuthenticatedUser } from 'shared';
 import ImageWithButton from './components/ImageWithButton';
 import React from 'react';
+import emitter from '../../app/EventBus';
 
 interface GuestHomePageProps {
  user: AuthenticatedUser;
  setOnMemberHomePage: (e: boolean) => void;
 }
 
 const GuestHomePage = ({ user, setOnMemberHomePage }: GuestHomePageProps) => {
+ const handleClick = () => {
+ emitter.emit('memberHomePage', true);
+ setOnMemberHomePage(true);
+ };
+
  return (
  <PageLayout title="Home" hidePageTitle>
  <Typography variant="h3" textAlign="center" sx={{ mt: 2, pt: 3 }}>
@@ -27,9 +33,7 @@ const GuestHomePage = ({ user, setOnMemberHomePage }: GuestHomePageProps) => {
  title="Explore Our Work as a Guest"
  imageSrc={`/Guest.png`}
  buttonText="FinishLine"
- onClick={() => {
- setOnMemberHomePage(true);
- }}
+ onClick={handleClick}
  />
  </Box>
  </Box>

src/frontend/src/pages/HomePage/Home.tsx

@@ -7,14 +7,11 @@ import { useCurrentUser } from '../../hooks/users.hooks';
 import { isGuest } from 'shared';
 import GuestHomePage from './GuestHomePage';
 import MemberHomePage from './MemberHomePage';
+import { useHistoryState } from '../../hooks/misc.hooks';
 
-interface HomeProps {
- onMemberHomePage: boolean;
- setOnMemberHomePage: (value: boolean) => void;
-}
-
-const Home = ({ onMemberHomePage, setOnMemberHomePage }: HomeProps) => {
+const Home = () => {
  const user = useCurrentUser();
+ const [onMemberHomePage, setOnMemberHomePage] = useHistoryState('', false);
 
  return isGuest(user.role) && !onMemberHomePage ? (
  <GuestHomePage user={user} setOnMemberHomePage={setOnMemberHomePage} />

src/frontend/src/utils/routes.ts

@@ -4,7 +4,7 @@
  */
 
 /**************** General Section ****************/
-const HOME = `/`;
+const HOME = `/home`;
 const LOGIN = `/login`;
 const INFO = `/info`;
 const GANTT = `/gantt`;

yarn.lock

@@ -10224,6 +10224,7 @@ __metadata:
  eslint-config-prettier: ^8.5.0
  eslint-config-react-app: ^7.0.1
  eslint-plugin-prettier: ^4.2.1
+ mitt: ^3.0.1
  prettier: ^2.0.5
  react-hook-form-persist: ^3.0.0
  rimraf: ^3.0.2
@@ -14377,6 +14378,13 @@ __metadata:
  languageName: node
  linkType: hard
 
+"mitt@npm:^3.0.1":
+ version: 3.0.1
+ resolution: "mitt@npm:3.0.1"
+ checksum: b55a489ac9c2949ab166b7f060601d3b6d893a852515ae9eca4e11df01c013876df777ea109317622b5c1c60e8aae252558e33c8c94e14124db38f64a39614b1
+ languageName: node
+ linkType: hard
+
 "mixin-deep@npm:^1.2.0":
  version: 1.3.2
  resolution: "mixin-deep@npm:1.3.2"