Moved CollectiveCalendar to own component; Home becomes place for news

src/App/Components/PageLayout/PageLayout.js

@@ -123,6 +123,7 @@ const PageLayout = ({ Header, Sidebar, children}) => {
 
     // 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
     useEffect(()=> {
         if (!mobile){
             setOpenDrawer(authenticated);

src/App/Components/PageLayout/SideBar/PublicSideBar.js

-import ContactMailIcon from "@material-ui/icons/ContactMail";
 import EventIcon from "@material-ui/icons/Event";
-import HelpIcon from "@material-ui/icons/Help";
 import HomeIcon from "@material-ui/icons/Home";
-import InfoIcon from "@material-ui/icons/Info";
 import Drawer from "App/Components/Lists/Drawer/Drawer";
 import React from "react";
-import {useAuth} from "../../../Contexts/Authentication";
 
 
 export default function PublicSideBar(props){
@@ -13,23 +9,16 @@ export default function PublicSideBar(props){
 }
 
 const PublicDrawer = (props) => {
-    const { authenticated } = useAuth();
-    let home_url = authenticated ? "/protected/home" : "/account/login";
     const data = [
         {
             icon: <HomeIcon />,
             primary: "Home",
-            to: home_url
+            to: "/protected/home"
         },
         {
-            icon: <ContactMailIcon />,
-            primary: "Contact",
-            to: "/contact"
-        },
-        {
-            icon: <HelpIcon />,
-            primary: "FAQ",
-            to: "/FAQ"
+            icon: <EventIcon />,
+            primary: "Calendar",
+            to: "/protected/calendar"
         },
     ];
     return (

src/App/Contexts/PageLayout.js

@@ -38,6 +38,8 @@ const PageLayoutProvider = ({ children }) => {
         sidebar = AssociationMemberSideBar;
     } else if (location.pathname.includes("/boardmember")) {
         sidebar = AssociationBoardSideBar;
+    } else if (authenticated) {
+        sidebar = PublicSideBar;
     } else {
         sidebar = EmptySideBar;
     }

src/App/Pages/Association/Home/member.js

@@ -35,18 +35,19 @@ const Member = (props) => {
         <PageContent title={association.name}>
             { association_membership.status === "Pending" &&
             <Container>
+                <ConfirmationModal
+                    title={"Cancel Membership Request"}
+                    open={modalOpen}
+                    onCancel={onCancel}
+                    onConfirm={onConfirm}
+                />
                 <Block>
-                    <ConfirmationModal
-                        title={"Cancel Membership Request"}
-                        open={modalOpen}
-                        onCancel={onCancel}
-                        onConfirm={onConfirm}
-                    />
                     <Wrapper>
                         <Typography variant={"h5"}>Membership notice</Typography>
                         <Button color={"secondary"} variant={"outlined"} onClick={onCancelButtonClick}>Cancel Request</Button>
                     </Wrapper>
                     <Divider/>
+                    <br/>
                     <Typography>Your membership has not yet been accepted. Please wait until the board has accepted.</Typography>
                 </Block>
             </Container>

src/App/Pages/Calendar/CollectiveCalendar.js

+import PropTypes from "prop-types";
+import React from "react";
+
+import {AssociationCalendar} from "./Calendar";
+
+const CollectiveCalendar = ({ association_memberships }) => {
+    const association_membership_dict = association_memberships.map(association_membership=>({[association_membership.association.url]: association_membership}));
+
+    return (
+        <AssociationCalendar
+            board={false}
+            association_memberships={association_membership_dict}
+        />
+    );
+};
+
+CollectiveCalendar.propTypes = {
+    association_memberships: PropTypes.array.isRequired
+};
+
+export default CollectiveCalendar;

src/App/Pages/Home/Home.js

 import Container from "@material-ui/core/Container";
 import Typography from "@material-ui/core/Typography";
-import { AssociationCalendar } from "App/Pages/Calendar/Calendar";
-import React, { Component } from "react";
-import { Col, Row } from "reactstrap";
+import React from "react";
 
 import Block from "../../Components/PageLayout/Content/Block";
 
-export class Home extends Component {
+const Home = (props) => {
+    return (
+        <Container>
+            <Block>
+                <Typography variant={"h5"}>Welcome to My SU</Typography>
+                <hr className={"box-title-separator"}/>
+                <Typography>
+                    Hello. This is your home page for My SU.
+                </Typography>
+            </Block>
+            <Block>
+                <Typography variant={"h5"}>News</Typography>
+                <hr className={"box-title-separator"}/>
+                <Typography>
+                    Any news regarding the platform will be placed here.
+                </Typography>
+            </Block>
+        </Container>
+    );
+};
 
-    render() {
-        const {association_memberships} = this.props;
-        const association_membership_dict = association_memberships.map(association_membership=>{return {[association_membership.association.url]: association_membership};});
-        return (
-            <div className={"Home"}>
-                <Container>
-                    <Col className={"mt-0 pt-3"}>
-                        <Row>
-                            <Col sm={"12"}>
-                                <Block>
-                                    <Typography variant={"h5"}>Welcome to SUN</Typography>
-                                    <hr className={"box-title-separator"}/>
-                                    <p>Hello. This is your home page for SUN.</p>
-                                </Block>
-                            </Col>
-                        </Row>
-                    </Col>
-                    <Col>
-                        <Row>
-                            <Col sm={"12"}>
-                                <AssociationCalendar
-                                    board={false}
-                                    association_memberships={association_membership_dict}
-                                />
-                            </Col>
-                        </Row>
-                    </Col>
-                </Container>
-            </div>
-        );
-    }
-}
+export default Home;
\ No newline at end of file

src/App/Routing/Authenticated/Authorized.js

@@ -9,11 +9,12 @@ import {useGet} from "restful-react";
 
 import {useAuth} from "../../Contexts/Authentication";
 import {useLayout} from "../../Contexts/PageLayout";
-import {Home} from "../../Pages/Home/Home";
+import Home from "../../Pages/Home/Home";
 import Settings from "../../Pages/Profile/Settings";
 import SharedProfile from "../../Pages/Profile/SharedProfile";
 import {Associations} from "../../Pages/Search/Associations";
 import AssociationRoutes from "./MyAssociations/Association";
+import CollectiveCalendar from "../../Pages/Calendar/CollectiveCalendar";
 
 
 export const AuthorizedRoutes = (props) => {
@@ -31,11 +32,13 @@ export const AuthorizedRoutes = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(()=>layout.setSunmember(sunmember), [sunmember]);
 
-    if (layout.sunmember) {
-        sunmember = layout.sunmember;
-    } else {
-        refetch();
-        return null;
+    if (sunmember === null) {
+        if (layout.sunmember) {
+            sunmember = layout.sunmember;
+        } else {
+            refetch();
+            return null;
+        }
     }
 
     if (loadingSunMember) {
@@ -104,6 +107,12 @@ export const AuthorizedRoutes = (props) => {
                         association_memberships={sunmember.association_memberships}
                     />}
             />
+            <Route path={url + "/calendar"}
+                render={() =>
+                    <CollectiveCalendar
+                        association_memberships={sunmember.association_memberships}
+                    />}
+            />
             <Route exact path={url + "/associations/add"}
                 render={() =>
                     <Associations