Merge branch 'develop' into move-academic-session-select

components/common/ExpandableSearchGrid/expandableSearchGrid.tsx

@@ -12,6 +12,7 @@ import { SearchTermCard } from '../SearchTermCard/searchTermCard';
 type ExpandableSearchGridProps = {
   onChange: (searchTerms: SearchQuery[]) => void;
   studentTotals: number[];
+  relatedQuery: SearchQuery | undefined;
   averageData: number[];
 };
 
@@ -23,6 +24,7 @@ type ExpandableSearchGridProps = {
 export const ExpandableSearchGrid = ({
   onChange,
   studentTotals,
+  relatedQuery,
   averageData,
 }: ExpandableSearchGridProps) => {
   const router = useRouter();
@@ -56,6 +58,12 @@ export const ExpandableSearchGrid = ({
     }
   }
 
+  useEffect(() => {
+    if (searchTerms.length < 3 && typeof relatedQuery !== 'undefined') {
+      addSearchTerm(relatedQuery);
+    }
+  }, [relatedQuery]);
+
   function deleteSearchTerm(searchTermIndex: number) {
     //console.log('deleteSearchTerm called on ' + searchTermIndex);
     setSearchTerms(

components/common/RelatedClasses/README.md

@@ -0,0 +1,5 @@
+### Related Classes Example
+
+```ts
+<RelatedClasses />
+```

components/common/RelatedClasses/relatedClasses.tsx

@@ -0,0 +1,68 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+
+import { RelatedTermCard } from '../RelatedTermCard/relatedTermCard';
+
+type SearchQuery = {
+  prefix?: string;
+  number?: string;
+  professorName?: string;
+  sectionNumber?: string;
+};
+
+type RelatedClassesProps = {
+  displayData: SearchQuery[];
+  addNew: (query: SearchQuery) => void;
+  disabled: boolean;
+};
+
+/**
+ * This component returns a bar that will allow users to add and remove search terms (up to 3 max)
+ * using the SearchBar component. The currently selected search terms are represented by
+ * SearchTermCard components, and are displayed from left to right in this grid.
+ */
+export const RelatedClasses = ({
+  displayData,
+  addNew,
+  disabled,
+}: RelatedClassesProps) => {
+  function addSearchTerm(index: number) {
+    addNew(displayData[index]);
+  }
+
+  return (
+    <div className="grid grid-flow-column auto-cols-fr justify-center">
+      <div className="p-4 rounded-none">
+        <Typography className="leading-tight text-lg text-dark">
+          Related Queries
+        </Typography>
+      </div>
+      {displayData.map((option: SearchQuery, index: number) => (
+        <RelatedTermCard
+          primaryText={searchQueryLabel(option)}
+          key={index}
+          index={index}
+          onAddButtonClicked={addSearchTerm}
+          disabled={disabled}
+        />
+      ))}
+    </div>
+  );
+};
+
+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/RelatedTermCard/README.md

@@ -0,0 +1 @@
+### Related Term Card Example

components/common/RelatedTermCard/relatedTermCard.tsx

@@ -0,0 +1,57 @@
+import { AddCircle } from '@mui/icons-material';
+import { IconButton, Tooltip, Typography } from '@mui/material';
+import Card from '@mui/material/Card';
+import * as React from 'react';
+
+/**
+ * Props type used by the SearchTermCard component
+ */
+type RelatedTermCardProps = {
+  primaryText: string;
+  index: number;
+  onAddButtonClicked: (index: number) => void;
+  disabled: boolean;
+};
+
+/**
+ * This component returns a custom Card that shows the search term and a colored circle
+ * next to it representing the corresponding data's color
+ *
+ */
+export const RelatedTermCard = (props: RelatedTermCardProps) => {
+  function handleAddClick() {
+    props.onAddButtonClicked(props.index);
+  }
+
+  return (
+    <Card
+      className="bg-primary-light p-2 flex flex-row justify-between items-center rounded-none"
+      variant="outlined"
+    >
+      <div className="float-left flex align-middle place-items-center">
+        <Typography className="leading-tight text-lg text-gray-600 dark:text-gray-200">
+          {props.primaryText}
+        </Typography>
+      </div>
+      <div className="float-right">
+        <Tooltip
+          title={
+            props.disabled
+              ? 'Remove a search term to add this query'
+              : 'Add query to search'
+          }
+        >
+          <span>
+            <IconButton
+              aria-label="add query"
+              onClick={handleAddClick}
+              disabled={props.disabled}
+            >
+              <AddCircle />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </div>
+    </Card>
+  );
+};

components/common/SearchBar/searchBar.tsx

@@ -1,19 +1,12 @@
 import { Search } from '@mui/icons-material';
-import {
-  Autocomplete,
-  Box,
-  InputAdornment,
-  InputBase,
-  Paper,
-} from '@mui/material';
+import { Autocomplete, InputAdornment, InputBase, Paper } from '@mui/material';
 import Popper from '@mui/material/Popper';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 import * as React from 'react';
 import { useEffect } from 'react';
 
 import SearchQuery from '../../../modules/SearchQuery/SearchQuery';
-import searchQueryEqual from '../../../modules/searchQueryEqual/searchQueryEqual';
 import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel';
 // import { searchAutocomplete } from '../../autocomplete';
 
@@ -48,7 +41,10 @@ export const SearchBar = (props: SearchProps) => {
     })
       .then((response) => response.json())
       .then((data) => {
-        setOptions(data.output);
+        if (data.message !== 'success') {
+          throw new Error(data.message);
+        }
+        setOptions(data.data);
       })
       .catch((error) => {
         if (error instanceof DOMException) {

components/common/SearchTermCard/searchTermCard.tsx

@@ -48,9 +48,11 @@ export const SearchTermCard = (props: SearchTermCardProps) => {
         </div>
       </div>
       <div className="float-right">
-        <IconButton aria-label="play/pause" onClick={handleCloseClick}>
-          <Close />
-        </IconButton>
+        <Tooltip title="Remove query">
+          <IconButton aria-label="remove query" onClick={handleCloseClick}>
+            <Close />
+          </IconButton>
+        </Tooltip>
       </div>
     </Card>
   );

components/common/SplashPageSearchBar/splashPageSearchBar.tsx

@@ -37,7 +37,10 @@ export const SplashPageSearchBar = (props: SearchProps) => {
     })
       .then((response) => response.json())
       .then((data) => {
-        setOptions(data.output);
+        if (data.message !== 'success') {
+          throw new Error(data.message);
+        }
+        setOptions(data.data);
       })
       .catch((error) => {
         if (error instanceof DOMException) {

components/navigation/topMenu/topMenu.tsx

@@ -1,5 +1,5 @@
 import { Share } from '@mui/icons-material';
-import { IconButton, Snackbar } from '@mui/material';
+import { IconButton, Snackbar, Tooltip } from '@mui/material';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
@@ -54,23 +54,25 @@ export function TopMenu() {
               </h1>
             </div>
           </Link>
-          <IconButton
-            className="w-12"
-            size="large"
-            onClick={() => {
-              let url = window.location.href;
-              if (
-                router.query &&
-                Object.keys(router.query).length === 0 &&
-                Object.getPrototypeOf(router.query) === Object.prototype
-              ) {
-                url = 'https://trends.utdnebula.com/';
-              }
-              shareLink(url);
-            }}
-          >
-            <Share className="fill-light-always text-3xl mr-1" />
-          </IconButton>
+          <Tooltip title="Share link with search queries">
+            <IconButton
+              className="w-12"
+              size="large"
+              onClick={() => {
+                let url = window.location.href;
+                if (
+                  router.query &&
+                  Object.keys(router.query).length === 0 &&
+                  Object.getPrototypeOf(router.query) === Object.prototype
+                ) {
+                  url = 'https://trends.utdnebula.com/';
+                }
+                shareLink(url);
+              }}
+            >
+              <Share className="fill-light-always text-3xl mr-1" />
+            </IconButton>
+          </Tooltip>
         </div>
       </div>
       <Snackbar