Merge branch 'develop' into prefetch-dashboard

components/common/ExpandableSearchGrid/expandableSearchGrid.tsx

@@ -5,13 +5,9 @@ import { CardContent } from '@mui/material';
 import { SearchBar } from '../SearchBar/searchBar';
 import React from 'react';
 import { useRouter } from 'next/router';
-
-type SearchQuery = {
-  prefix?: string;
-  number?: string;
-  professorName?: string;
-  sectionNumber?: string;
-};
+import SearchQuery from '../../../modules/SearchQuery/SearchQuery';
+import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 type ExpandableSearchGridProps = {
   onChange: Function;
@@ -80,7 +76,7 @@ export const ExpandableSearchGrid = ({
           secondaryText={studentTotalFormatter(studentTotals[index])}
           key={index}
           index={index}
-          legendColor={colors[index]}
+          legendColor={searchQueryColors[index]}
           onCloseButtonClicked={deleteSearchTerm}
         />
       ))}
@@ -107,23 +103,6 @@ function studentTotalFormatter(total: number) {
   return total.toLocaleString('en-US') + ' grades';
 }
 
-function searchQueryLabel(query: SearchQuery): string {
-  let result = '';
-  if (query.prefix !== undefined) {
-    result += query.prefix;
-  }
-  if (query.number !== undefined) {
-    result += ' ' + query.number;
-  }
-  if (query.sectionNumber !== undefined) {
-    result += '.' + query.sectionNumber;
-  }
-  if (query.professorName !== undefined) {
-    result += ' ' + query.professorName;
-  }
-  return result.trim();
-}
-
 function parseURIEncodedSearchTerms(
   encodedSearchTerms: string | string[] | undefined,
 ): SearchQuery[] {
@@ -194,5 +173,3 @@ function parseURIEncodedSearchTerm(encodedSearchTerm: string): SearchQuery {
     return { professorName: encodedSearchTerm.trim() };
   }
 }
-
-const colors = ['#eb5757', '#2d9cdb', '#499F68'];

components/common/ProfessorCard/CardContents.tsx

@@ -31,7 +31,7 @@ export const CardContents: FC<CardContentProps> = (props: CardContentProps) => {
           <Box
             className="h-32 w-32 border-2 border-neutral-400 flex items-center justify-center my-4 md:mt-0 mb-8 text-5xl text-neutral-600 font-bold"
             sx={{
-              backgroundColor: getColorForRating(5 - props.averageDifficulty),
+              backgroundColor: getColorForRating(6 - props.averageDifficulty),
             }}
           >
             {props.averageDifficulty}

components/common/SearchBar/searchBar.tsx

@@ -4,6 +4,9 @@ import { Autocomplete, InputBase, InputAdornment } from '@mui/material';
 import Popper from '@mui/material/Popper';
 import { Box, Paper } from '@mui/material';
 import { useEffect } from 'react';
+import SearchQuery from '../../../modules/SearchQuery/SearchQuery';
+import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel';
+import searchQueryEqual from '../../../modules/searchQueryEqual/searchQueryEqual';
 // import { searchAutocomplete } from '../../autocomplete';
 
 /**
@@ -17,13 +20,6 @@ type SearchProps = {
   disabled?: boolean;
 };
 
-type SearchQuery = {
-  prefix?: string;
-  number?: string;
-  professorName?: string;
-  sectionNumber?: string;
-};
-
 /**
  * This component returns a custom search bar component that makes use of the Material UI autocomplete component
  * Sends a new search value to the parent component when the user selects it from the options list
@@ -141,21 +137,9 @@ export const SearchBar = (props: SearchProps) => {
               </Box>
             </li>
           )}
-          isOptionEqualToValue={(option, value) => {
-            if (option.prefix !== value.prefix) {
-              return false;
-            }
-            if (option.professorName !== value.professorName) {
-              return false;
-            }
-            if (option.number !== value.number) {
-              return false;
-            }
-            if (option.sectionNumber !== value.sectionNumber) {
-              return false;
-            }
-            return true;
-          }}
+          isOptionEqualToValue={(option, value) =>
+            searchQueryEqual(option, value)
+          }
           PopperComponent={(props) => {
             return (
               <Popper {...props} className="rounded-none" placement="bottom" />
@@ -179,20 +163,3 @@ export const SearchBar = (props: SearchProps) => {
 SearchBar.defaultProps = {
   disabled: true,
 };
-
-function searchQueryLabel(query: SearchQuery): string {
-  let result = '';
-  if (query.prefix !== undefined) {
-    result += query.prefix;
-  }
-  if (query.number !== undefined) {
-    result += ' ' + query.number;
-  }
-  if (query.sectionNumber !== undefined) {
-    result += '.' + query.sectionNumber;
-  }
-  if (query.professorName !== undefined) {
-    result += ' ' + query.professorName;
-  }
-  return result.trim();
-}

components/common/SplashPageSearchBar/splashPageSearchBar.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Search } from '@mui/icons-material';
 import { Autocomplete, InputBase, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
+import SearchQuery from '../../../modules/SearchQuery/SearchQuery';
+import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel';
 // import { searchAutocomplete } from '../../autocomplete';
 
 /**
@@ -12,13 +14,6 @@ type SearchProps = {
   disabled?: boolean;
 };
 
-type SearchQuery = {
-  prefix?: string;
-  number?: string;
-  professorName?: string;
-  sectionNumber?: string;
-};
-
 /**
  * This component returns a custom search bar component that makes use of the Material UI autocomplete component
  * Sends a new search value to the parent component when the user selects it from the options list
@@ -121,20 +116,3 @@ export const SplashPageSearchBar = (props: SearchProps) => {
 SplashPageSearchBar.defaultProps = {
   disabled: true,
 };
-
-function searchQueryLabel(query: SearchQuery): string {
-  let result = '';
-  if (query.prefix !== undefined) {
-    result += query.prefix;
-  }
-  if (query.number !== undefined) {
-    result += ' ' + query.number;
-  }
-  if (query.sectionNumber !== undefined) {
-    result += '.' + query.sectionNumber;
-  }
-  if (query.professorName !== undefined) {
-    result += ' ' + query.professorName;
-  }
-  return result.trim();
-}

components/graph/BarGraph/BarGraph.tsx

@@ -1,7 +1,7 @@
 import { useMediaQuery } from '@mui/material';
 import { HorizontalBarGraph } from '../HorizontalBarGraph/HorizontalBarGraph';
 import { VerticalBarGraph } from '../VerticalBarGraph/VerticalBarGraph';
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
 
 /**

components/graph/BoxGraph/BoxGraph.tsx

@@ -1,8 +1,9 @@
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts box-and-whisker graph. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`.
@@ -51,8 +52,8 @@ export function BoxGraph(props: GraphProps) {
       },
       boxPlot: {
         colors: {
-          upper: '#eb5757',
-          lower: '#2d9cdb',
+          upper: searchQueryColors[0],
+          lower: searchQueryColors[1],
         },
       },
     },

components/graph/GraphChoice/GraphChoice.tsx

@@ -6,7 +6,7 @@ import { BarGraph } from '../BarGraph/BarGraph';
 import { LineGraph } from '../LineGraph/LineGraph';
 import { RadarChart } from '../RadarChart/RadarChart';
 import { RadialBarChart } from '../RadialBarChart/RadialBarChart';
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import { VerticalBarGraph } from '../VerticalBarGraph/VerticalBarGraph';
 import { HorizontalBarGraph } from '../HorizontalBarGraph/HorizontalBarGraph';
 import { BoxGraph } from '../BoxGraph/BoxGraph';

components/graph/HorizontalBarGraph/HorizontalBarGraph.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts horizontal bar graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`. This component also gets returned from a BarGraph component on a small screen.
@@ -39,7 +40,7 @@ export function HorizontalBarGraph(props: GraphProps) {
         formatter: xaxisFormatter,
       },
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
       curve: 'smooth',

components/graph/LineGraph/LineGraph.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts line graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`.
@@ -34,7 +35,7 @@ export function LineGraph(props: GraphProps) {
         formatter: props.yaxisFormatter,
       },
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
       curve: 'smooth',

components/graph/RadarChart/RadarChart.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts radar graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`.
@@ -24,7 +25,7 @@ export function RadarChart(props: GraphProps) {
     xaxis: {
       categories: props.xaxisLabels,
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
     },

components/graph/RadialBarChart/RadialBarChart.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts radial bar graph component. Takes in `series` and `title` `GraphProps`. The `data` fields in `series` need to each be arrays with just one entry.
@@ -25,7 +26,7 @@ export function RadialBarChart(props: GraphProps) {
       },
     },
     labels: compiledLabels,
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
     },

components/graph/VerticalBarGraph/VerticalBarGraph.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
-import GraphProps from '../../../modules/GraphProps';
+import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts vertical bar graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`. This component also gets returned from a BarGraph component on a large screen.
@@ -34,7 +35,7 @@ export function VerticalBarGraph(props: GraphProps) {
         formatter: props.yaxisFormatter,
       },
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
       curve: 'smooth',

modules/SearchQuery/SearchQuery.tsx

@@ -0,0 +1,7 @@
+type SearchQuery = {
+  prefix?: string;
+  number?: string;
+  professorName?: string;
+  sectionNumber?: string;
+};
+export default SearchQuery;

modules/searchQueryColors/searchQueryColors.tsx

@@ -0,0 +1,2 @@
+const searchQueryColors = ['#eb5757', '#2d9cdb', '#499F68'];
+export default searchQueryColors;

modules/searchQueryEqual/searchQueryEqual.tsx

@@ -0,0 +1,19 @@
+import SearchQuery from '../SearchQuery/SearchQuery';
+
+function searchQueryEqual(query1: SearchQuery, query2: SearchQuery): boolean {
+  if (query1.prefix !== query2.prefix) {
+    return false;
+  }
+  if (query1.professorName !== query2.professorName) {
+    return false;
+  }
+  if (query1.number !== query2.number) {
+    return false;
+  }
+  if (query1.sectionNumber !== query2.sectionNumber) {
+    return false;
+  }
+  return true;
+}
+
+export default searchQueryEqual;

modules/searchQueryLabel/searchQueryLabel.tsx

@@ -0,0 +1,20 @@
+import SearchQuery from '../SearchQuery/SearchQuery';
+
+function searchQueryLabel(query: SearchQuery): string {
+  let result = '';
+  if (typeof query.prefix !== 'undefined') {
+    result += query.prefix;
+  }
+  if (typeof query.number !== 'undefined') {
+    result += ' ' + query.number;
+  }
+  if (typeof query.sectionNumber !== 'undefined') {
+    result += '.' + query.sectionNumber;
+  }
+  if (typeof query.professorName !== 'undefined') {
+    result += ' ' + query.professorName;
+  }
+  return result.trim();
+}
+
+export default searchQueryLabel;

pages/api/autocomplete.ts

@@ -1,13 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { DirectedGraph } from 'graphology';
 import autocompleteGraph from '../../data/autocomplete_graph.json';
-
-type SearchQuery = {
-  prefix?: string;
-  number?: string;
-  professorName?: string;
-  sectionNumber?: string;
-};
+import SearchQuery from '../../modules/SearchQuery/SearchQuery';
 
 type NodeAttributes = {
   c: string;