UTDNebula · TyHil · Nov 21, 2024 · Oct 31, 2024 · Nov 1, 2024 · Nov 1, 2024
@@ -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}

@@ -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"

@@ -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

@@ -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"