sigdotcom · henrievjen · Apr 20, 2020 · Apr 30, 2020 · May 27, 2020 · May 27, 2020
diff --git a/apps/admin-web/package.json b/apps/admin-web/package.json
@@ -7,14 +7,21 @@
     "@auth0/auth0-spa-js": "^1.2.2",
     "@types/react-csv": "^1.1.2",
     "antd": "^4.1.3",
+    "chart.js": "^2.9.3",
+    "graphql": "^14",
     "graphql-tag": "^2.10.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.7.0",
+    "react-apollo": "^3.1.3",
+    "react-burger-menu": "^2.6.13",
+    "react-chartjs-2": "^2.9.0",
     "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",
+    "react-use": "^15.1.0",
+    "serialize-javascript": "^2.1.2",
     "styled-components": "^4.1.3"
   },
   "scripts": {
@@ -35,6 +42,7 @@
     "@types/jest": "^24.0.18",
     "@types/node": "^12.7.12",
     "@types/react": "^16.7.20",
+    "@types/react-burger-menu": "^2.6.1",
     "@types/react-dom": "^16.0.11",
     "@types/react-highlight-words": "^0.16.0",
     "@types/react-router-dom": "^5.1.0",

diff --git a/apps/admin-web/public/index.html b/apps/admin-web/public/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/apps/admin-web/src/App.tsx b/apps/admin-web/src/App.tsx
@@ -1,129 +1,87 @@
 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 {
-    loading,
-    isAuthenticated,
-    getTokenSilently,
-    loginWithRedirect,
-    logout,
-    user,
-  } = useAuth0();
+	const {
+		loading,
+		isAuthenticated,
+		getTokenSilently,
+		loginWithRedirect,
+	} = useAuth0();
 
-  useEffect(() => {
-    if (loading) {
-      return;
-    }
+	useEffect(() => {
+		if (loading) {
+			return;
+		}
 
-    if (!isAuthenticated) {
-      const fn: any = async (): Promise<void> => {
-        await loginWithRedirect({
-          appState: { targetUrl: window.location.href },
-        });
-      };
+		if (!isAuthenticated) {
+			const fn: any = async (): Promise<void> => {
+				await loginWithRedirect({
+					appState: { targetUrl: window.location.href },
+				});
+			};
 
-      fn();
-    } else {
-      const setToken: () => void = async (): Promise<void> => {
-        const token: string = (await getTokenSilently()) || "";
-        localStorage.setItem(config.ACCESS_TOKEN_KEY, token);
-      };
+			fn();
+		} else {
+			const setToken: () => void = async (): Promise<void> => {
+				const token: string = (await getTokenSilently()) || "";
+				localStorage.setItem(config.ACCESS_TOKEN_KEY, token);
+			};
 
-      setToken();
-    }
-  }, [loading, isAuthenticated, getTokenSilently]);
+			setToken();
+		}
+	}, [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..." />;
+	}
 
-  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>
-          </Content>
-        </Layout>
-      </Layout>
-    </BrowserRouter>
-  );
+	return (
+		<BrowserRouter>
+			<Grid>
+				<Content>
+					<Main />
+				</Content>
+				<Menu>
+					<Sidebar />
+				</Menu>
+			</Grid>
+		</BrowserRouter>
+	);
 };
 
-/*
- * 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 };
diff --git a/apps/admin-web/src/Tools.tsx b/apps/admin-web/src/Tools.tsx
diff --git a/apps/admin-web/src/generated/graphql.tsx b/apps/admin-web/src/generated/graphql.tsx
@@ -428,6 +428,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; }>;
 
 
@@ -621,6 +636,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 {

diff --git a/apps/admin-web/src/screens/Dashboard/Main.tsx b/apps/admin-web/src/screens/Dashboard/Main.tsx
@@ -0,0 +1,30 @@
+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 { Officers } from "../Permissions/Officers";
+import { Groups } from "../Permissions/Groups";
+import { RedemptionCodes } from "../Permissions/RedemptionCodes";
+
+const NotFound: React.FC<{}> = (): JSX.Element => {
+  return <h1>You are lost!</h1>;
+};
+
+const Main: React.SFC<{}> = (): 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="/permissions/officers" component={Officers} />
+      <Route path="/permissions/groups" component={Groups} />
+      <Route path="/permissions/redemption" component={RedemptionCodes} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+};
+
+export default Main;