️ This Gitlab will be shut down at 2021-12-31 23:59:59.
Students and staff can migrate to gitlab.utwente.nl.
SNT members can migrate to gitlab.snt.utwente.nl.
Contact bestuur@snt.utwente.nl for more information.

Migrate your projects today!
Export your project using the webinterface or use a script.

Commit 218487b5 authored by TJHeeringa's avatar TJHeeringa

Removed PageLayoutContext

parent d2279799
......@@ -22,7 +22,6 @@ import { BrowserRouter as Router } from "react-router-dom";
import AlertHandlerProvider from "./Contexts/AlertHandler";
import API from "./Contexts/API";
import LocaleProvider from "./Contexts/Locale";
import PageLayoutProvider from "./Contexts/PageLayout";
import ThemeProvider from "./Contexts/Theme";
import Routing from "./Routing/Routing";
......@@ -42,9 +41,7 @@ const App = () => {
<ThemeProvider>
<CssBaseline/>
<LocaleProvider>
<PageLayoutProvider>
<Routing/>
</PageLayoutProvider>
<Routing/>
</LocaleProvider>
</ThemeProvider>
</API>
......
......@@ -13,13 +13,19 @@ import MoreVertIcon from "@material-ui/icons/MoreVert";
import { AlertHandler } from "App/Components/AlertHandler";
import clsx from "clsx";
import PropTypes from "prop-types";
import React, {useEffect, useState} from "react";
import React, {useEffect, useMemo, useState} from "react";
import { SizeMe } from "react-sizeme";
import { useAlertHandler } from "../../Contexts/AlertHandler";
import {useAuth} from "../../Contexts/API";
import Burger from "./Burger";
import AvatarMenu from "./Menu/AvatarMenu";
import AssociationHeader from "./Header/Header";
import {useLocation} from "react-router-dom";
import AssociationBoardSideBar from "./SideBar/AssociationBoardSideBar";
import AssociationMemberSideBar from "./SideBar/AssociationMemberSideBar";
import PublicSideBar from "./SideBar/PublicSideBar";
import EmptySideBar from "./SideBar/EmptySideBar";
const drawerWidth = 240;
......@@ -106,10 +112,12 @@ const styles = theme => ({
const useStyles = makeStyles(styles);
const PageLayout = ({ Header, Sidebar, children}) => {
const PageLayout = ({ children }) => {
const theme = useTheme();
const classes = useStyles(theme);
const { authenticated } = useAuth();
const { authenticated, sunmember } = useAuth();
const { pathname } = useLocation();
const alerthandler = useAlertHandler();
const mobile = useMediaQuery(theme.breakpoints.down("xs"));
......@@ -118,6 +126,29 @@ const PageLayout = ({ Header, Sidebar, children}) => {
const handleDrawerClose = () => setOpenDrawer(false);
const toggleDrawer = () => setOpenDrawer(!openDrawer);
let Header;
if (authenticated && sunmember) {
Header = AssociationHeader;
} else {
Header = ()=>null;
}
const includesAssociation = useMemo(()=>pathname.includes("protected/associations/"), [pathname]);
const includesBoardmember = useMemo(()=>pathname.includes("/boardmember"), [pathname]);
const includesMember = useMemo(()=>pathname.includes("/member"), [pathname]);
const includesProfileHandling = useMemo(()=>pathname.includes("/profile/create") || pathname.includes("/profile/merge") || pathname.includes("/memberships/resolve"), [pathname]);
let Sidebar;
if (includesAssociation && includesBoardmember) {
Sidebar = AssociationBoardSideBar;
} else if (includesAssociation && includesMember) {
Sidebar = AssociationMemberSideBar;
} else if (authenticated && !includesProfileHandling) {
Sidebar = PublicSideBar;
} else {
Sidebar = EmptySideBar;
}
// Open the sidebar when logging in, close it when logging out.
// Only on Desktop; on mobile this behavior is disruptive.
// eslint-disable-next-line react-hooks/exhaustive-deps
......@@ -207,9 +238,7 @@ const PageLayout = ({ Header, Sidebar, children}) => {
};
PageLayout.propTypes = {
Header: PropTypes.elementType.isRequired,
Sidebar: PropTypes.elementType.isRequired,
children: PropTypes.node
children: PropTypes.node.isRequired
};
export default PageLayout;
\ No newline at end of file
import {useAuth} from "App/Contexts/API";
import PropTypes from "prop-types";
import React, {createContext, useContext, useMemo} from "react";
import { useLocation } from "react-router-dom";
import AssociationHeader from "../Components/PageLayout/Header/Header";
import AssociationBoardSideBar from "../Components/PageLayout/SideBar/AssociationBoardSideBar";
import AssociationMemberSideBar from "../Components/PageLayout/SideBar/AssociationMemberSideBar";
import EmptySideBar from "../Components/PageLayout/SideBar/EmptySideBar";
import PublicSideBar from "../Components/PageLayout/SideBar/PublicSideBar";
const PageLayoutContext = createContext({
Header: ()=>null,
Sidebar: ()=>null
});
export function useLayout() {
return useContext(PageLayoutContext);
}
const PageLayoutProvider = ({ children }) => {
const { authenticated, sunmember } = useAuth();
const location = useLocation();
let header;
if (authenticated && sunmember) {
header = AssociationHeader;
} else {
header = ()=>null;
}
const includesAssociation = useMemo(()=>location.pathname.includes("protected/associations/"), [location]);
const includesBoardmember = useMemo(()=>location.pathname.includes("/boardmember"), [location]);
const includesMember = useMemo(()=>location.pathname.includes("/member"), [location]);
const includesProfileHandling = useMemo(()=>{
const path = location.pathname;
return path.includes("/profile/create") || path.includes("/profile/merge") || path.includes("/memberships/resolve");
}, [location]);
let sidebar;
if (includesAssociation && includesBoardmember) {
sidebar = AssociationBoardSideBar;
} else if (includesAssociation && includesMember) {
sidebar = AssociationMemberSideBar;
} else if (authenticated && !includesProfileHandling) {
sidebar = PublicSideBar;
} else {
sidebar = EmptySideBar;
}
const contextValue = {
Header: header,
Sidebar: sidebar,
};
return (
<PageLayoutContext.Provider value={contextValue}>
{ children }
</PageLayoutContext.Provider>
);
};
PageLayoutProvider.propTypes = {
children: PropTypes.node
};
export default PageLayoutProvider;
\ No newline at end of file
......@@ -55,22 +55,19 @@ export const AuthorizedRoutes = () => {
}
</Switch>
<Switch>
<Route exact path={url + "/memberships/resolve"}
render={() => (
<ResolveMembership
claimed_memberships={claimed_memberships}
onResolve={refetch}
/>
)}
/>
<Route path={url + "/profile/merge"} exact
render={() =>
<MergeProfiles
url={url}
profiles={sunmember.profiles}
refreshSunmemberMe={refetch}
/>}
/>
<Route exact path={url + "/memberships/resolve"}>
<ResolveMembership
claimed_memberships={claimed_memberships}
onResolve={refetch}
/>
</Route>
<Route path={url + "/profile/merge"} exact>
<MergeProfiles
url={url}
profiles={sunmember.profiles}
refreshSunmemberMe={refetch}
/>
</Route>
{ sunmember.profiles.map((profile, p) => (
<Route key={p} path={url + "/profile/merge/view/" + profile.slug}
render={() =>
......@@ -79,36 +76,32 @@ export const AuthorizedRoutes = () => {
/>}
/>
)) }
<Route exact path={url + "/profile/create"}
render={() =>
<NoProfileYet
url={url}
refreshSunmemberMe={refetch}
/>}
/>
<Route path={url + "/home"}
render={() =>
<Home
association_memberships={sunmember.association_memberships}
/>}
/>
<Route exact path={url + "/profile/create"}>
<NoProfileYet
url={url}
refreshSunmemberMe={refetch}
/>
</Route>
<Route path={url + "/home"}>
<Home
association_memberships={sunmember.association_memberships}
/>
</Route>
<Route path={url + "/associations"}>
<AssociationsRouter
path={url + "/associations"}
/>
</Route>
<Route exact path={url + "/profile/settings"}
render={() =>
<Settings
preferred_profile={sunmember.preferred_profile}
/>}
/>
<Route exact path={url + "/profile/shared"}
render={() =>
<SharedProfile
preferred_profile={sunmember.preferred_profile}
/>}
/>
<Route exact path={url + "/profile/settings"}>
<Settings
preferred_profile={sunmember.preferred_profile}
/>
</Route>
<Route exact path={url + "/profile/shared"}>
<SharedProfile
preferred_profile={sunmember.preferred_profile}
/>
</Route>
</Switch>
</Studies>
);
......
import PrivateRoute from "App/Components/Routes/PrivateRoute";
import { useLayout } from "App/Contexts/PageLayout";
import React from "react";
import {Route, Switch} from "react-router-dom";
......@@ -9,13 +8,11 @@ import { AuthorizedRoutes } from "./Authenticated/Authorized";
import NotAuthorized from "./NotAuthenticated/NotAuthorized";
const Routing = () => {
const layout = useLayout();
return (
<Switch>
<Route path={"/terminal"} render={() => <TerminalRouting path={"/terminal"}/>}/>
<Route path={"/"}>
<PageLayout {...layout}>
<PageLayout>
<PrivateRoute path={"/protected"} component={AuthorizedRoutes}/>
<Route path={"/"} render={() => <NotAuthorized/>}/>
</PageLayout>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment