Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carolyn/navbar update #88

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import "bootstrap/dist/css/bootstrap.min.css";
import { CssBaseline } from "@mui/material";
import React, { useState, useReducer, useEffect } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Welcome from "./components/pages/Welcome";
import Signup from "./components/pages/Signup";
import Welcome from "./components/auth/WelcomePage";
import Signup from "./components/auth/SignupPage";
import PrivateRoute from "./components/auth/PrivateRoute";
import Default from "./components/pages/Default";
import CreateModulePage from "./components/pages/CreateModulePage";
import NotFound from "./components/pages/NotFound";
import NotAuthorized from "./components/pages/NotAuthorized";
import MyAccount from "./components/pages/MyAccount";
import MyAccount from "./components/pages/MyAccountPage";
import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
import AuthContext from "./contexts/AuthContext";
import { getLocalStorageObj } from "./utils/LocalStorageUtils";
Expand All @@ -27,9 +27,9 @@ import ManageUserPage from "./components/pages/ManageUserPage";
import MakeHelpRequestPage from "./components/pages/MakeHelpRequestPage";
import ViewHelpRequestsPage from "./components/pages/ViewHelpRequestsPage";
import HelpRequestPage from "./components/pages/HelpRequestPage";
import CreatePasswordPage from "./components/pages/CreatePasswordPage";
import CreatePasswordPage from "./components/auth/CreatePasswordPage";
import ForgotPasswordPage from "./components/auth/forgot_password/ForgotPasswordPage";
import CourseUnitsPage from "./components/pages/courses/CourseUnitsPage";
import CourseViewingPage from "./components/course_viewing/CourseViewingPage";

const App = (): React.ReactElement => {
const currentUser: AuthenticatedUser | null =
Expand Down Expand Up @@ -132,8 +132,8 @@ const App = (): React.ReactElement => {
/>
<PrivateRoute
exact
path={Routes.COURSES_PAGE}
component={CourseUnitsPage}
path={Routes.COURSE_PAGE}
component={CourseViewingPage}
allowedRoles={["Administrator", "Facilitator", "Learner"]}
/>
<Route exact path="*" component={NotFound} />
Expand Down
7 changes: 2 additions & 5 deletions frontend/src/components/auth/Logout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useContext } from "react";

import { Button } from "@mui/material";
import authAPIClient from "../../APIClients/AuthAPIClient";
import AuthContext from "../../contexts/AuthContext";

Expand All @@ -13,11 +14,7 @@ const Logout = (): React.ReactElement => {
}
};

return (
<button type="button" className="btn btn-primary" onClick={onLogOutClick}>
Log Out
</button>
);
return <Button onClick={onLogOutClick}>Log Out</Button>;
};

export default Logout;
9 changes: 3 additions & 6 deletions frontend/src/components/auth/MyAccountButton.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import React from "react";
import { useHistory } from "react-router-dom";
import { Button } from "@mui/material";
import * as Routes from "../../constants/Routes";

const MyAccountButton = (): React.ReactElement => {
const history = useHistory();
return (
<button
className="btn btn-primary"
type="button"
onClick={() => history.push(Routes.MY_ACCOUNT_PAGE)}
>
<Button onClick={() => history.push(Routes.MY_ACCOUNT_PAGE)}>
My Account
</button>
</Button>
);
};

Expand Down
18 changes: 15 additions & 3 deletions frontend/src/components/auth/PrivateRoute.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";

import { Box } from "@mui/material";
import AuthContext from "../../contexts/AuthContext";
import {
CREATE_PASSWORD_PAGE,
NOT_AUTHORIZED_PAGE,
WELCOME_PAGE,
} from "../../constants/Routes";
import { Role } from "../../types/AuthTypes";
import Navbar from "../common/navbar/Navbar";

type PrivateRouteProps = {
component: React.FC;
Expand All @@ -17,7 +18,7 @@ type PrivateRouteProps = {
};

const PrivateRoute: React.FC<PrivateRouteProps> = ({
component,
component: Component,
exact,
path,
allowedRoles,
Expand All @@ -31,8 +32,19 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({
) {
return <Redirect to={CREATE_PASSWORD_PAGE} />;
}

const NavbarWrappedComponent: React.FC<PrivateRouteProps> = () => {
return (
<Box sx={{ height: "100vh", display: "flex", flexFlow: "column" }}>
<Navbar />
<Box sx={{ height: "100%", flexGrow: 1 }}>
<Component />
</Box>
</Box>
);
};
return allowedRoles.includes(authenticatedUser.role) ? (
<Route path={path} exact={exact} component={component} />
<Route path={path} exact={exact} component={NavbarWrappedComponent} />
) : (
<Redirect to={NOT_AUTHORIZED_PAGE} />
);
Expand Down
7 changes: 2 additions & 5 deletions frontend/src/components/auth/RefreshCredentials.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useContext } from "react";

import { Button } from "@mui/material";
import authAPIClient from "../../APIClients/AuthAPIClient";
import AuthContext from "../../contexts/AuthContext";

Expand All @@ -13,11 +14,7 @@ const RefreshCredentials = (): React.ReactElement => {
}
};

return (
<button type="button" className="btn btn-primary" onClick={onRefreshClick}>
Refresh Credentials
</button>
);
return <Button onClick={onRefreshClick}>Refresh Credentials</Button>;
};

export default RefreshCredentials;
11 changes: 2 additions & 9 deletions frontend/src/components/auth/ResetPassword.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useContext } from "react";

import { Button } from "@mui/material";
import authAPIClient from "../../APIClients/AuthAPIClient";
import AuthContext from "../../contexts/AuthContext";

Expand All @@ -13,15 +14,7 @@ const ResetPassword = (): React.ReactElement => {
await authAPIClient.resetPassword(authenticatedUser.email);
};

return (
<button
type="button"
className="btn btn-primary"
onClick={onResetPasswordClick}
>
Reset Password
</button>
);
return <Button onClick={onResetPasswordClick}>Reset Password</Button>;
};

export default ResetPassword;
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ import { HOME_PAGE, WELCOME_PAGE } from "../../constants/Routes";
import AuthContext from "../../contexts/AuthContext";
import { AuthenticatedUser } from "../../types/AuthTypes";
import logo from "../assets/logoColoured.png";
import { getSignUpPath, getSignUpPrompt } from "./Welcome";
import Login from "../auth/Login";
import { getSignUpPath, getSignUpPrompt } from "./WelcomePage";
import Login from "./Login";

const Signup = (): React.ReactElement => {
const { authenticatedUser } = useContext(AuthContext);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
import AuthContext from "../../contexts/AuthContext";
import background from "../assets/backgroundImage.png";
import logo from "../assets/logoWhite.png";
import Login from "../auth/Login";
import Login from "./Login";
import { Role } from "../../types/AuthTypes";

export const getSignUpPrompt = (role: Role): string | undefined => {
Expand Down
33 changes: 22 additions & 11 deletions frontend/src/components/common/navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,21 @@ import Typography from "@mui/material/Typography";
import Badge from "@mui/material/Badge";
import NotificationsIcon from "@mui/icons-material/Notifications";
import Button from "@mui/material/Button/Button";
import { Link } from "react-router-dom";
import { useTheme } from "@mui/material";
import NotificationsList from "../../notification/NotificationsList";
import NotificationAPIClient from "../../../APIClients/NotificationAPIClient";
import { useUser } from "../../../hooks/useUser";
import { Notification } from "../../../types/NotificationTypes";
import { useSocket } from "../../../contexts/SocketContext";
import UserButton from "./UserButton";
import { HOME_PAGE } from "../../../constants/Routes";
import eafLogo from "../../assets/logoColoured.png";

export default function Navbar() {
const user = useUser();
const socket = useSocket();
const theme = useTheme();

const NUMBER_OF_NOTIFICATIONS_TO_LOAD = 10;
const [notifications, setNotifications] = useState<Notification[]>([]);
Expand Down Expand Up @@ -78,23 +83,29 @@ export default function Navbar() {

return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" sx={{ bgcolor: `${user.role}.Default` }}>
<Toolbar>
<Typography
variant="h6"
noWrap
component="div"
sx={{ display: { xs: "none", sm: "block" } }}
>
Extend a family
</Typography>
<AppBar
position="sticky"
sx={{
bgcolor: theme.palette.Neutral[100],
borderBottom: "2px solid #EEE",
boxShadow: "none",
}}
>
<Toolbar sx={{ padding: 0, height: "40px" }}>
<Link to={HOME_PAGE}>
<img
src={eafLogo}
alt="Extend-A-Family logo"
style={{ height: "40px" }}
/>
</Link>
<Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: { xs: "none", md: "flex" } }}>
<IconButton
size="large"
aria-label="show new notifications"
color="inherit"
onClick={handleClick}
sx={{ color: theme.palette.Neutral[400] }}
>
<Badge badgeContent={numUnseenNotifications} color="error">
<NotificationsIcon />
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/common/navbar/UserButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { AccountCircle } from "@mui/icons-material";
import { Box, IconButton, Popover } from "@mui/material";
import { Box, IconButton, Popover, useTheme } from "@mui/material";
import RefreshCredentials from "../../auth/RefreshCredentials";
import ResetPassword from "../../auth/ResetPassword";
import Logout from "../../auth/Logout";
Expand All @@ -10,6 +10,7 @@ const UserButton = () => {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
null,
);
const theme = useTheme();

const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
Expand All @@ -27,8 +28,8 @@ const UserButton = () => {
edge="end"
aria-label="account of current user"
aria-haspopup="true"
color="inherit"
onClick={handleClick}
sx={{ color: theme.palette.Neutral[400] }}
>
<AccountCircle />
</IconButton>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import { Box, Button, Typography, useTheme } from "@mui/material";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import UnitSidebar from "../../courses/UnitSidebar";
import { CourseUnit } from "../../../types/CourseTypes";
import CourseAPIClient from "../../../APIClients/CourseAPIClient";
import UnitSidebar from "./UnitSidebar";
import { CourseUnit } from "../../types/CourseTypes";
import CourseAPIClient from "../../APIClients/CourseAPIClient";

export default function CourseUnitsPage() {
const theme = useTheme();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "@mui/material";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import { CourseUnit } from "../../types/CourseTypes";
import { useUser } from "../../hooks/useUser";

interface UnitSideBarProps {
courseUnits: CourseUnit[];
Expand All @@ -20,6 +21,7 @@ interface UnitSideBarProps {

export default function UnitSidebar(props: UnitSideBarProps) {
const theme = useTheme();
const user = useUser();
const { courseUnits, handleClose, open } = props;

const [selectedIndex, setSelectedIndex] = useState(0);
Expand All @@ -35,18 +37,22 @@ export default function UnitSidebar(props: UnitSideBarProps) {
<Drawer
sx={{
width: "20%",
height: "100%",
flexShrink: 0,
"& .MuiDrawer-paper": {
width: "20%",
boxSizing: "border-box",
position: "relative",
},
display: open ? "block" : "none",
}}
variant="persistent"
anchor="left"
open={open}
>
<Box height="100%" sx={{ backgroundColor: theme.palette.Learner.Light }}>
<Box
height="100%"
sx={{ backgroundColor: theme.palette[user.role].Light }}
>
<Box
height="59px"
display="flex"
Expand Down Expand Up @@ -93,10 +99,10 @@ export default function UnitSidebar(props: UnitSideBarProps) {
px: "32px",
backgroundColor:
selectedIndex === index
? theme.palette.Learner.Hover
? theme.palette[user.role].Hover
: "transparent",
"&:hover": {
backgroundColor: theme.palette.Learner.Hover,
backgroundColor: theme.palette[user.role].Hover,
},
}}
onClick={(event) => handleListItemClick(event, index)}
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/pages/Default.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useContext } from "react";
import SampleContext from "../../contexts/SampleContext";
import Navbar from "../common/navbar/Navbar";

const TeamInfoDisplay = () => {
const { teamName, numTerms, members, isActive } = useContext(SampleContext);
Expand All @@ -23,7 +22,6 @@ const TeamInfoDisplay = () => {
const Default = (): React.ReactElement => {
return (
<div style={{ textAlign: "center" }}>
<Navbar />
<h1>Default Page</h1>
<div style={{ height: "2rem" }} />

Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/pages/ViewHelpRequestsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
Checkbox,
} from "@mui/material";
import TablePaginationActions from "@mui/material/TablePagination/TablePaginationActions";
import Navbar from "../common/navbar/Navbar";
import { useFacilitator } from "../../hooks/useUser";
import HelpRequestAPIClient from "../../APIClients/HelpRequestAPIClient";
import { HelpRequest } from "../../types/HelpRequestType";
Expand Down Expand Up @@ -71,7 +70,6 @@ const ViewHelpRequestsPage = (): React.ReactElement => {

return (
<div style={{ textAlign: "center", width: "100%", margin: "0px auto" }}>
<Navbar />
<TableContainer component={Paper}>
<Table aria-label="User grouped by role table">
<TableHead>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/constants/Routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ export const VIEW_HELP_REQUESTS_PAGE = "/help-requests";

export const FORGOT_PASSWORD_PAGE = "/forgot-password";

export const COURSES_PAGE = "/course";
export const COURSE_PAGE = "/course";
Loading