Modern Admin Web

.node-version

@@ -0,0 +1 @@
+16.7.0

apps/admin-web/package.json

@@ -10,12 +10,16 @@
     "graphql-tag": "^2.10.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.7.0",
+    "react-burger-menu": "^3.0.8",
+    "react-chartjs-2": "^4.3.1",
     "react-csv": "^2.0.3",
     "react-dom": "^16.7.0",
     "react-highlight-words": "^0.16.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.1",
-    "styled-components": "^4.1.3"
+    "rimraf": "^3.0.2",
+    "styled-components": "^4.1.3",
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "types:generate": "graphql-codegen --config codegen.yml",
@@ -34,7 +38,8 @@
     "@graphql-codegen/typescript-react-apollo": "^1.8.1",
     "@types/jest": "^24.0.18",
     "@types/node": "^12.7.12",
-    "@types/react": "^16.7.20",
+    "@types/react": "^18.0.17",
+    "@types/react-burger-menu": "^2.8.3",
     "@types/react-dom": "^16.0.11",
     "@types/react-highlight-words": "^0.16.0",
     "@types/react-router-dom": "^5.1.0",
@@ -49,8 +54,7 @@
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^1.7.0",
     "jest-watch-typeahead": "^0.4.0",
-    "prettier": "^1.18.2",
-    "typescript": "^3.2.4"
+    "prettier": "^1.18.2"
   },
   "browserslist": [
     ">0.2%",

apps/admin-web/src/App.tsx

@@ -1,42 +1,46 @@
 import React, { useEffect } from "react";
-import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
-import { Layout, Menu, PageHeader, Spin } from "antd";
-
-import { ToolList } from "./Tools";
-import { Events } from "./screens/Events";
-import { Membership } from "./screens/Membership";
-import { RedemptionCodes } from "./screens/RedemptionCodes";
+import { Spin } from "antd";
+import { BrowserRouter } from "react-router-dom";
+import styled, { AnyStyledComponent } from "styled-components";
 import { config } from "./config";
 import "./static/css/App.css";
-
 import { useAuth0 } from "./utils/react-auth0-wrapper";
+import Sidebar from "./screens/Dashboard/Sidebar";
+import Main from "./screens/Dashboard/Main";
 
-const { Header, Content, Footer, Sider } = Layout;
-
-const NotFound: React.FC<{}> = (): JSX.Element => {
-  return <h1>You are lost!</h1>;
-};
-
-const MainContent: React.SFC<{}> = (): JSX.Element => {
-  return (
-    <Switch>
-      <Route exact={true} path="/" component={ToolList} />
-      <Route path="/events" component={Events} />
-      <Route path="/membership" component={Membership} />
-      <Route path="/redemption" component={RedemptionCodes} />
-      <Route component={NotFound} />
-    </Switch>
-  );
-};
+const Grid: AnyStyledComponent = styled.div`
+  height: 100vh;
+  display: grid;
+  width: 100vw;
+  margin: auto;
+  grid-template-columns: repeat(16, 1fr);
+  grid-template-rows: auto;
+  grid-template-areas: "m m c c c c c c c c c c c c c c";
+  @media (max-width:  1530px) {
+    grid-template-columns: 1fr
+    grid-template-areas: 
+            "m"
+            "c";
+    grid-template-rows: 0px auto;
+
+  }
+`;
+const Content: AnyStyledComponent = styled.div`
+  grid-area: c;
+`;
+const Menu: AnyStyledComponent = styled.div`
+  grid-area: m;
+  @media (max-width: 1530px) {
+    grid-area: m;
+  }
+`;
 
-const App: React.SFC<{}> = (): JSX.Element => {
+const App: React.FC<{}> = (): JSX.Element => {
   const {
     loading,
     isAuthenticated,
     getTokenSilently,
     loginWithRedirect,
-    logout,
-    user,
   } = useAuth0();
 
   useEffect(() => {
@@ -62,68 +66,24 @@ const App: React.SFC<{}> = (): JSX.Element => {
     }
   }, [loading, isAuthenticated, getTokenSilently]);
 
-  const onLogoutClick: () => void = (): void => {
-    logout({ returnTo: config.REDIRECT_PAGE_URI });
-  };
-
   if (loading || !isAuthenticated) {
     return <Spin size="large" className="load-page" tip="Loading..." />;
   }
 
   return (
-    <BrowserRouter>
-      <Layout>
-        <Sider
-          breakpoint="md"
-          collapsedWidth="0"
-          onBreakpoint={undefined}
-          onCollapse={undefined}
-        >
-          <div className="logo" />
-          <Menu theme="dark" mode="inline" defaultSelectedKeys={["events"]}>
-            <Menu.Item key="events">
-              <Link to="/events">
-                <span className="nav-text">Events</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="membership">
-              <Link to="/membership">
-                <span className="nav-text">Membership Tool</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="redemption">
-              <Link to="/redemption">
-                <span className="nav-text">Redemption Codes</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item onClick={onLogoutClick} key="signOut">
-              <span className="nav-text">Sign Out</span>
-            </Menu.Item>
-          </Menu>
-        </Sider>
-        <Layout>
-          <Header style={{ background: "#fff", padding: 0 }}>
-            <PageHeader
-              backIcon={false}
-              title={`Hello, ${user.name}. Welcome to your Admin Dashboard`}
-            />
-          </Header>
-          <Content style={{ margin: "24px 16px 0" }}>
-            <MainContent />
-            <Footer style={{ textAlign: "center" }}>S&T ACM 2019</Footer>
+    <div>
+      <BrowserRouter>
+        <Grid>
+          <Content>
+            <Main />
           </Content>
-        </Layout>
-      </Layout>
-    </BrowserRouter>
+          <Menu>
+            <Sidebar />
+          </Menu>
+        </Grid>
+      </BrowserRouter>
+    </div>
   );
 };
 
-/*
- * Future Routes
-        <Route exact={true} path="/membership" component={Membership} />
-        <Route exact={true} path="/sigs" component={Sigs} />
-        <Route exact={true} path="/sponsors" component={Sponsors} />
-        <Route exact={true} path="/products" component={Products} />
-*/
-
 export { App };

apps/admin-web/src/Tools.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const ToolList: React.SFC<{}> = (): JSX.Element => {
+const ToolList: React.FC<{}> = (): JSX.Element => {
   return (
     <div>
       <h2>Tools:</h2>

apps/admin-web/src/generated/graphql.tsx

@@ -3,6 +3,8 @@ import * as ApolloReactCommon from '@apollo/react-common';
 import * as ApolloReactHooks from '@apollo/react-hooks';
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -428,6 +430,21 @@ export type UserUpdateInput = {
   email?: Maybe<Scalars['String']>;
 };
 
+export type GetCurrentEventsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetCurrentEventsQuery = (
+  { __typename?: 'Query' }
+  & { currentEvents: Array<(
+    { __typename?: 'Event' }
+    & Pick<Event, 'id' | 'dateCreated' | 'dateHosted' | 'dateExpire' | 'eventTitle' | 'description' | 'location' | 'flierLink' | 'eventLink'>
+    & { hostSig: (
+      { __typename?: 'Sig' }
+      & Pick<Sig, 'name'>
+    ) }
+  )> }
+);
+
 export type SigsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -563,9 +580,9 @@ export type DeleteMemberMutation = (
 );
 
 export type CreateCodeMutationVariables = Exact<{
-  groups?: Maybe<Array<Scalars['String']>>;
-  permissions?: Maybe<Array<Scalars['String']>>;
-  products?: Maybe<Array<Scalars['String']>>;
+  groups?: Maybe<Array<Scalars['String']> | Scalars['String']>;
+  permissions?: Maybe<Array<Scalars['String']> | Scalars['String']>;
+  products?: Maybe<Array<Scalars['String']> | Scalars['String']>;
 }>;
 
 
@@ -621,6 +638,49 @@ export type GetProductsQuery = (
 );
 
 
+export const GetCurrentEventsDocument = gql`
+    query getCurrentEvents {
+  currentEvents {
+    id
+    dateCreated
+    dateHosted
+    dateExpire
+    hostSig {
+      name
+    }
+    eventTitle
+    description
+    location
+    flierLink
+    eventLink
+  }
+}
+    `;
+
+/**
+ * __useGetCurrentEventsQuery__
+ *
+ * To run a query within a React component, call `useGetCurrentEventsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetCurrentEventsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetCurrentEventsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetCurrentEventsQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>) {
+        return ApolloReactHooks.useQuery<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>(GetCurrentEventsDocument, baseOptions);
+      }
+export function useGetCurrentEventsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>) {
+          return ApolloReactHooks.useLazyQuery<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>(GetCurrentEventsDocument, baseOptions);
+        }
+export type GetCurrentEventsQueryHookResult = ReturnType<typeof useGetCurrentEventsQuery>;
+export type GetCurrentEventsLazyQueryHookResult = ReturnType<typeof useGetCurrentEventsLazyQuery>;
+export type GetCurrentEventsQueryResult = ApolloReactCommon.QueryResult<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>;
 export const SigsDocument = gql`
     query sigs {
   sigs {

apps/admin-web/src/screens/Dashboard/Main.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Upcoming } from "../Events/Upcoming";
+import { Previous } from "../Events/Previous";
+import { Membership } from "../Membership";
+import { ToolList } from "../../tools/Tools";
+import { RedemptionCodes } from "../RedemptionCodes";
+
+const NotFound: React.FC<{}> = (): JSX.Element => {
+  return <h1>You are lost!</h1>;
+};
+
+const Main: React.FC<{}> = (): JSX.Element => {
+  return (
+    <Switch>
+      <Route exact={true} path="/" component={ToolList} />
+      <Route path="/events/upcoming" component={Upcoming} />
+      <Route path="/events/previous" component={Previous} />
+      <Route path="/membership" component={Membership} />
+      <Route path="/redemption" component={RedemptionCodes} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+};
+
+export default Main;

apps/admin-web/src/screens/Dashboard/Option.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+import { useAuth0 } from "../../utils/react-auth0-wrapper";
+
+const Dropdown = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  left: 0;
+  right: 0;
+  box-shadow: 0 0 5px gray;
+  background-color: white;
+  border-radius: 8px;
+  font-size: 17px;
+  color: black;
+  margin-top: 0.5em;
+  z-index: 1000;
+  text-align: center;
+  a {
+    background-color: white;
+    color: black;
+    font-weight: bold;
+    width: 100%;
+    padding: 0.3em 0;
+  }
+`;
+
+const Profile = styled.a`
+  border-radius: 8px 8px 0 0;
+`;
+
+const LogoutBtn = styled.a`
+  border-radius: 0 0 8px 8px;
+`;
+
+const Options: React.FC<{}> = (): JSX.Element => {
+  const { logout } = useAuth0();
+
+  const logoutClick = () => {
+    logout({ returnTo: window.location.origin });
+  };
+
+  return (
+    <Dropdown>
+      <Profile href={`https://profile.mstacm.org/`}>Profile</Profile>
+      <LogoutBtn onClick={logoutClick}>Log Out</LogoutBtn>
+    </Dropdown>
+  );
+};
+
+export { Options };