Changes App + contexts to ts.

src/contexts.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// we might make more contexts...
+// eslint-disable-next-line import/prefer-default-export
+export interface UserContextValues {
+  userId: string;
+  userRoles: string[];
+}
+
+export const UserContext = React.createContext<UserContextValues | null>(null);

src/pages/App/index.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import { hot } from 'react-hot-loader/root';
+
+import {
+  SignInPage,
+  SignUpPage,
+  PointsPage,
+  InducteePointsPage,
+  ResumePage,
+  EventsPage,
+  CalendarPage,
+  EventEditPage,
+  EventDetailsPage,
+  EventSignInPage,
+  EventRsvpPage,
+} from '@Pages';
+import { Loading } from '@SharedComponents';
+import { UserContext, UserContextValues } from '@Contexts';
+import * as ROUTES from '@Constants/routes';
+import { getRolesFromClaims } from '@Services/claims';
+import {
+  InducteeRoutingPermission,
+  OfficerRoutingPermission,
+} from '@HOCs/RoutingPermissions';
+import ApiConfigStore from '@Services/ApiConfigStore';
+
+function App(): JSX.Element {
+  const [userClaims, setUserClaims] = useState<UserContextValues | null>(null);
+  const [userToken, setUserToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged(async user => {
+      if (user) {
+        const tokenResult = await user.getIdTokenResult();
+        const { claims, token } = tokenResult;
+
+        setUserClaims({
+          userId: claims.user_id,
+          userRoles: getRolesFromClaims(claims),
+        });
+        setUserToken(token);
+        setIsLoading(false);
+      } else {
+        setUserClaims(null);
+        setUserToken(null);
+        setIsLoading(false);
+      }
+    });
+  }, []);
+
+  // eslint-disable-next-line camelcase
+  const setClaims = (claims: { user_id: string }) => {
+    ApiConfigStore.setToken(userToken || '');
+
+    setUserClaims({
+      userId: claims.user_id,
+      userRoles: getRolesFromClaims(claims),
+    });
+  };
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <UserContext.Provider value={userClaims}>
+      <BrowserRouter>
+        <Switch>
+          <Route
+            exact
+            path={ROUTES.SIGN_IN}
+            render={() => <SignInPage setClaims={setClaims} />}
+          />
+          <Route exact path={ROUTES.SIGN_UP} render={() => <SignUpPage />} />
+          <Route
+            exact
+            path={ROUTES.EVENT_SIGN_IN}
+            render={props => <EventSignInPage {...props} />}
+          />
+          <Route
+            exact
+            path={ROUTES.EVENT_RSVP}
+            render={props => <EventRsvpPage {...props} />}
+          />
+          <Route
+            exact
+            path={ROUTES.HOME}
+            render={props => InducteeRoutingPermission(EventsPage)(props)}
+          />
+          <Route
+            exact
+            path={ROUTES.POINTS}
+            render={props => InducteeRoutingPermission(PointsPage)(props)}
+          />
+          <Route
+            exact
+            path={ROUTES.RESUME}
+            render={props => InducteeRoutingPermission(ResumePage)(props)}
+          />
+          <Route
+            exact
+            path={ROUTES.INDUCTEES}
+            render={props =>
+              OfficerRoutingPermission(InducteePointsPage)(props)
+            }
+          />
+          <Route
+            exact
+            path={ROUTES.CALENDAR}
+            render={props => InducteeRoutingPermission(CalendarPage)(props)}
+          />
+          <Route
+            exact
+            path={ROUTES.EVENT_DETAILS}
+            render={props => InducteeRoutingPermission(EventDetailsPage)(props)}
+          />
+          <Route
+            exact
+            path={ROUTES.EVENT_EDIT}
+            render={props => OfficerRoutingPermission(EventEditPage)(props)}
+          />
+          {/* <Route
+              exact
+              path={ROUTES.PROFILE}
+              render={props => InducteeRoutingPermission(ProfilePage)(props)}
+            />
+            <Route
+              exact
+              path={ROUTES.PROFILE_EDIT}
+              render={props => InducteeRoutingPermission(ProfileEditPage)(props)}
+            /> */}
+          <Route render={() => <Redirect to={ROUTES.HOME} />} />
+        </Switch>
+      </BrowserRouter>
+    </UserContext.Provider>
+  );
+}
+
+export default process.env.NODE_ENV === 'development' ? hot(App) : App;