Merge pull request #328 from UTDNebula/develop

Trends 2.1.1
UTDNebula · Nov 22, 2024 · 79b1796 · 79b1796
2 parents 03661d8 + 6972a70
commit 79b1796
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 66 deletions.
diff --git a/src/components/search/SearchBar/searchBar.tsx b/src/components/search/SearchBar/searchBar.tsx
@@ -28,7 +28,6 @@ interface SearchProps {
  *
  * Styled for the splash page
  */
-let wasEmpty = false; // tracks if the searchbar was empty before the new entry (to create a new browser navigation entry push())
 const SearchBar = ({
   manageQuery,
   onSelect,
@@ -76,25 +75,13 @@ const SearchBar = ({
       } else {
         delete newQuery.searchTerms;
       }
-      if (wasEmpty) {
-        // if the searchbar was cleared before this entry,
-        router.push(
-          {
-            query: router.query,
-          },
-          undefined,
-          { shallow: true },
-        );
-        wasEmpty = false;
-      } //otherwise, just update the current navigation entry query
-      else
-        router.replace(
-          {
-            query: newQuery,
-          },
-          undefined,
-          { shallow: true },
-        );
+      router.push(
+        {
+          query: router.query,
+        },
+        undefined,
+        { shallow: true },
+      );
     }
   }
 
@@ -162,9 +149,6 @@ const SearchBar = ({
 
   //update parent and queries
   function onChange_internal(newValue: SearchQuery[]) {
-    if (newValue.length == 0) {
-      wasEmpty = true; // so that the next search creates a new navigation entry (push())
-    }
     if (manageQuery === 'onChange') {
       updateQueries(newValue);
     }
@@ -183,7 +167,7 @@ const SearchBar = ({
   function updateValue(newValue: SearchQuery[]) {
     if (newValue.length) setErrorTooltip(false); //close the tooltip if there is at least 1 valid search term
     setValue(newValue);
-    onChange_internal(newValue);
+    onSelect_internal(newValue); // clicking enter to select a autocomplete suggestion triggers a new search (it also 'Enters' for the searchbar)
   }
 
   //update parent and queries
@@ -197,15 +181,6 @@ const SearchBar = ({
     }
   }
 
-  //returns results on enter
-  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
-    if (event.key === 'Enter' && inputValue === '') {
-      event.preventDefault();
-      event.stopPropagation();
-      onSelect_internal(value);
-    }
-  }
-
   useEffect(() => {
     fetch('/api/autocomplete');
   }, []);
@@ -258,7 +233,6 @@ const SearchBar = ({
           loadNewOptions(newInputValue);
         }}
         renderInput={(params) => {
-          params.inputProps.onKeyDown = handleKeyDown;
           return (
             <TextField
               {...params}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -103,7 +103,8 @@ function MyApp({ Component, pageProps }: AppProps) {
     <>
       <GoogleAnalytics gaId="G-CC86XR1562" />
       <Head>
-        <title>UTD Trends</title>
+        <title>UTD TRENDS</title>
+        <meta key="og:title" property="og:title" content="UTD TRENDS" />
         <link
           rel="icon"
           type="image/png"

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -9,17 +9,15 @@ function Document() {
       <Head prefix="og: http://ogp.me/ns#">
         <meta
           name="description"
-          content="A data visualization tool built to help students view historical course and section data."
+          content="Choose the perfect classes for you: Nebula Labs's data analytics platform to help you make informed decisions about your coursework with grade and Rate My Professors data."
         />
         <meta
           name="theme-color"
           content={tailwindConfig.theme.extend.colors.royal}
         />
-
-        <meta property="og:title" content="UTD Trends" />
         <meta
           property="og:description"
-          content="A data visualization tool built to help students view historical course and section data."
+          content="Choose the perfect classes for you: Nebula Labs's data analytics platform to help you make informed decisions about your coursework with grade and Rate My Professors data."
         />
         <meta property="og:type" content="website" />
         <meta

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -1,5 +1,5 @@
 import { Card, Grid2 as Grid, useMediaQuery } from '@mui/material';
-import type { NextPage } from 'next';
+import type { NextPage, NextPageContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useRef, useState } from 'react';
@@ -247,7 +247,77 @@ function createColorMap(courses: SearchQuery[]): { [key: string]: string } {
   return colorMap;
 }
 
-export const Dashboard: NextPage = () => {
+/**
+ * Seperates courses and professors from a string of comma-delimited searchTerms or string[] of searchTerms
+ * @param searchTermInput
+ * @returns an array of courseSearchTerms and professorSearchTerms
+ */
+function getSearchTerms(searchTermInput: string | string[] | undefined): {
+  courseSearchTerms: SearchQuery[];
+  professorSearchTerms: SearchQuery[];
+} {
+  let array = searchTermInput ?? [];
+  if (!Array.isArray(array)) {
+    array = array.split(','); // if searchTermsInput is a comma-delimited string, make it an array
+  }
+  const searchTerms = array.map((el) => decodeSearchQueryLabel(el)); // convert an array of strings to an array of SearchQuery's
+
+  const courseSearchTerms: SearchQuery[] = [];
+  const professorSearchTerms: SearchQuery[] = [];
+
+  // split the search terms into professors and courses
+  searchTerms.map((searchTerm) => {
+    if (typeof searchTerm.profLast !== 'undefined') {
+      professorSearchTerms.push(searchTerm);
+    }
+    if (typeof searchTerm.prefix !== 'undefined') {
+      courseSearchTerms.push(searchTerm);
+    }
+  });
+
+  return { courseSearchTerms, professorSearchTerms };
+}
+
+/**
+ *
+ * @param courseSearchTerms
+ * @param professorSearchTerms
+ * @returns an empty string or a comma-delimited list of courses and professors, ending with a " - "
+ */
+function buildPageTitle(
+  courseSearchTerms: SearchQuery[],
+  professorSearchTerms: SearchQuery[],
+): string {
+  let pageTitle = '';
+  courseSearchTerms.map((term) => {
+    pageTitle += searchQueryLabel(term) + ', ';
+  });
+  professorSearchTerms.map((term) => {
+    pageTitle += searchQueryLabel(term) + ', ';
+  });
+  pageTitle = pageTitle.slice(0, -2) + (pageTitle.length > 0 ? ' - ' : '');
+  return pageTitle;
+}
+
+export async function getServerSideProps(
+  context: NextPageContext,
+): Promise<{ props: { pageTitle: string } }> {
+  const { courseSearchTerms, professorSearchTerms } = getSearchTerms(
+    context.query.searchTerms,
+  );
+
+  return {
+    props: {
+      pageTitle: buildPageTitle(courseSearchTerms, professorSearchTerms),
+    },
+  };
+}
+
+export const Dashboard: NextPage<{ pageTitle: string }> = ({
+  pageTitle,
+}: {
+  pageTitle: string;
+}): React.ReactNode => {
   const router = useRouter();
 
   //Searches seperated into courses and professors to create combos
@@ -262,24 +332,9 @@ export const Dashboard: NextPage = () => {
   //On search change, seperate into courses and profs, clear data, and fetch new results
   useEffect(() => {
     if (router.isReady) {
-      let array = router.query.searchTerms ?? [];
-      if (!Array.isArray(array)) {
-        array = array.split(',');
-      }
-      const searchTerms = array.map((el) => decodeSearchQueryLabel(el));
-
-      const courseSearchTerms: SearchQuery[] = [];
-      const professorSearchTerms: SearchQuery[] = [];
-
-      // split the search terms into professors and courses
-      searchTerms.map((searchTerm) => {
-        if (typeof searchTerm.profLast !== 'undefined') {
-          professorSearchTerms.push(searchTerm);
-        }
-        if (typeof searchTerm.prefix !== 'undefined') {
-          courseSearchTerms.push(searchTerm);
-        }
-      });
+      const { courseSearchTerms, professorSearchTerms } = getSearchTerms(
+        router.query.searchTerms,
+      );
       setCourses(courseSearchTerms);
       setProfessors(professorSearchTerms);
 
@@ -836,17 +891,22 @@ export const Dashboard: NextPage = () => {
     );
   }
 
-  /* Final page */
-
   return (
     <>
       <Head>
-        <title>Results - UTD Trends</title>
+        <title>
+          {'Results - ' + buildPageTitle(courses, professors) + 'UTD TRENDS'}
+        </title>
         <link
           rel="canonical"
           href="https://trends.utdnebula.com/dashboard"
           key="canonical"
         />
+        <meta
+          key="og:title"
+          property="og:title"
+          content={'Results - ' + pageTitle + 'UTD TRENDS'}
+        />
         <meta
           property="og:url"
           content="https://trends.utdnebula.com/dashboard"

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -43,14 +43,14 @@ const Home: NextPage = () => {
         />
         <meta property="og:url" content="https://trends.utdnebula.com" />
       </Head>
-      <div className="relative bg-lighten dark:bg-darken h-full w-full flex justify-center items-center p-8">
+      <div className="relative bg-lighten dark:bg-darken h-full w-full flex flex-col items-center gap-4 px-8 py-4">
         <Image
           src={Background}
           alt="gradient background"
           fill
           className="object-cover -z-20"
         />
-        <div className="max-w-xl">
+        <div className="max-w-xl grow flex flex-col justify-center">
           <h2 className="text-sm font-semibold mb-3 text-cornflower-600 dark:text-cornflower-400 tracking-wider">
             POWERED BY {/*eslint-disable-next-line react/jsx-no-target-blank*/}
             <a
@@ -73,7 +73,6 @@ const Home: NextPage = () => {
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={true}
             onSelect={searchOptionChosen}
-            className="mb-3"
             input_className="[&>.MuiInputBase-root]:bg-white [&>.MuiInputBase-root]:dark:bg-haiti"
           />
         </div>
@@ -82,7 +81,7 @@ const Home: NextPage = () => {
           href="https://utdgrades.com/"
           target="_blank"
           rel="noopener"
-          className="absolute bottom-4 bg-white dark:bg-black text-black dark:text-white py-3 px-5 rounded transition hover:scale-[1.01]"
+          className="bg-white dark:bg-black text-black dark:text-white py-3 px-5 rounded transition hover:scale-[1.01]"
         >
           Also check out <b>UTD Grades</b>
         </a>