implemented stats page for admins

package.json

@@ -43,6 +43,7 @@
     "react-router-dom": "^5.1.5",
     "react-scripts": "^3.4.1",
     "react-select": "^2.3.0",
+    "recharts": "^1.4.2",
     "react-table": "^6.8.6",
     "react-toastify": "^7.0.4",
     "styled-components": "^4.1.3",
@@ -69,6 +70,7 @@
     "@types/react-select": "^2.0.11",
     "@types/react-table": "^6.7.21",
     "@types/react-virtualized-select": "^3.0.7",
+    "@types/recharts": "^1.1.6",
     "@types/rebass__grid": "^6.0.2",
     "@types/styled-components": "^4.1.6",
     "@types/yup": "^0.26.7",

src/App.tsx

@@ -6,7 +6,7 @@ import ErrorPage from './pages/_error';
 import ConfirmAccountPage from './pages/Account/Confirm';
 import CreateAccountPage from './pages/Account/Create';
 import EditAccountPage from './pages/Account/Edit';
-import AdminSearchPage from './pages/Admin/Search';
+import AdminSearchPage from './features/Search/Main';
 import SettingsPage from './pages/Admin/Settings';
 import ConfirmAttendancePage from './pages/Application/Confirm';
 import CreateApplicationPage from './pages/Application/Create';
@@ -259,7 +259,7 @@ class App extends React.Component {
                       AuthVerification: (user: IAccount) =>
                         user.confirmed && user.accountType === UserType.STAFF,
                     }),
-                    { activePage: 'search' }
+                    { activePage: 'stats' }
                   )
                 )}
             />

src/api/hacker.ts

@@ -6,6 +6,7 @@ import {
   HackerStatus,
   IHacker,
   IResumeResponse,
+  ISearchParameter,
   IStatsResponse,
 } from '../config';
 import LocalCache from '../util/LocalCache';
@@ -175,11 +176,22 @@ class HackerAPI {
     return value;
   }
 
-  public async getStats(): Promise<AxiosResponse<APIResponse<IStatsResponse>>> {
-    const key = CACHE_STATS_KEY;
-    const value = await API.getEndpoint(APIRoute.HACKER_STATS).getAll();
-    LocalCache.set(key, value, new Date(Date.now() + 5 * 60 * 1000));
-    return value;
+    public async getStats(
+      parameters: ISearchParameter[],
+      overrideCache?: boolean
+    ): Promise<AxiosResponse<APIResponse<IStatsResponse>>> {
+      const model = 'hacker';
+      const q = JSON.stringify(parameters);
+      const key = `${CACHE_STATS_KEY}-${model}-${q}`;
+      const cached: any = LocalCache.get(key);
+      if (cached && !overrideCache) {
+        return cached as Promise<AxiosResponse<APIResponse<IStatsResponse>>>;
+      }
+      const result = await API.getEndpoint(APIRoute.HACKER_STATS).getAll({
+        params: { model, q },
+      });
+      LocalCache.set(key, result, new Date(Date.now() + 5 * 60 * 1000));
+      return result;
   }
 }
 

src/api/search.ts

@@ -1,23 +1,40 @@
-import { AxiosPromise } from 'axios';
-import { APIRoute, ISearchOptions, ISearchParameter } from '../config';
+import { AxiosPromise, AxiosResponse } from 'axios';
+import {
+  APIRoute,
+  CACHE_SEARCH_TABLE_KEY,
+  ISearchOptions,
+  ISearchParameter,
+} from '../config';
+import LocalCache from '../util/LocalCache';
 import API from './api';
 import APIResponse from './APIResponse';
 class SearchAPI {
   constructor() {
     API.createEntity(APIRoute.SEARCH);
   }
-  public search(
+  public async search(
     model: string,
     parameters: ISearchParameter[],
-    searchOptions: ISearchOptions
-  ): AxiosPromise<APIResponse<any[]>> {
-    return API.getEndpoint(APIRoute.SEARCH).getAll({
+    searchOptions: ISearchOptions,
+    overrideCache?: boolean
+  ): Promise<AxiosResponse<APIResponse<any[]>>> {
+    const q = JSON.stringify(parameters);
+    const key = `${CACHE_SEARCH_TABLE_KEY}-${model}-${q}`;
+    const cached: any = LocalCache.get(key);
+    if (cached && !overrideCache) {
+      return cached as AxiosPromise<APIResponse<any[]>>;
+    }
+    const result: AxiosResponse<APIResponse<any[]>> = await API.getEndpoint(
+      APIRoute.SEARCH
+    ).getAll({
       params: {
-        q: JSON.stringify(parameters),
+        q,
         model,
         ...searchOptions,
       },
     });
+    LocalCache.set(key, result, new Date(Date.now() + 5 * 60 * 1000));
+    return result;
   }
 }
 export const Search = new SearchAPI();

src/config/constants.ts

@@ -8,6 +8,7 @@ export const CACHE_HACKER_KEY = 'hackerInfo';
 export const CACHE_STATS_KEY = 'statsInfo';
 export const CACHE_SPONSOR_KEY = 'sponsorInfo';
 export const CACHE_TRAVEL_KEY = 'travelInfo';
+export const CACHE_SEARCH_TABLE_KEY = 'searchTableInfo';
 export const CACHE_SETTINGS_KEY = 'settingsInfo';
 
 // General information

src/config/statsResponse.ts

@@ -1,19 +1,21 @@
 import { DietaryRestriction, HackerStatus, JobInterest, ShirtSize } from '.';
 
 export interface IStatsResponse {
-  stats: {
-    total: number;
-    status: { [key in HackerStatus]: number };
-    school: { [key: string]: number };
-    degree: { [key: string]: number };
-    gender: { [key: string]: number };
-    travel: { true: number; false: number };
-    ethnicity: { [key: string]: number };
-    jobInterest: { [key in JobInterest]: number };
-    major: { [key: string]: number };
-    graduationYear: { [key: string]: number };
-    dietaryRestriction: { [key in DietaryRestriction & string]: number };
-    ShirtSize: { [key in ShirtSize]: number };
-    age: { [key: string]: number };
-  };
+  stats: IStats;
+}
+
+export interface IStats {
+  total: number;
+  status: { [key in HackerStatus]: number };
+  school: { [key: string]: number };
+  degree: { [key: string]: number };
+  gender: { [key: string]: number };
+  needsBus: { [key: string]: number };
+  ethnicity: { [key: string]: number };
+  jobInterest: { [key in JobInterest]: number };
+  major: { [key: string]: number };
+  graduationYear: { [key: string]: number };
+  dietaryRestrictions: { [key in DietaryRestriction & string]: number };
+  shirtSize: { [key in ShirtSize]: number };
+  age: { [key: string]: number };
 }