Fix browser nav & remove the need to double-ENTER on the searchbar

[AbhiramTadepalli]

Browser Nav:

• More intuitive (normal expectation) browser history behavior: every new search triggers an entry on the history stack
• Dynamic Page titles: in the format "Result - CS 1200, John Cole - UTD TRENDS"

Searchbar ENTER:

• Previous Behavior: Type cs1200, click enter to add the autocomplete suggestion to the searchbar, then click again
• New Behavior: Type cs1200, click enter -> Adds the autocomplete suggestion to the searchbar AND triggers the search without an additional keypress
  • Note: typing cs1200 and then clicking space allows you to add the autocomplete to the searchbar's searchqueries, but does not trigger a new search

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
utd-trends	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 0:57am

[AbhiramTadepalli]

@TyHil could you look over these questions?

[TyHil]

Idk what questions but I like all of these changes. What do you think of the commit I made to do the page title without an extra state?

Also, intentional choice to capitalize UTD TRENDS?

[AbhiramTadepalli]

@TyHil sorry they were unpublished

[AbhiramTadepalli]

What do you think of the commit I made to do the page title without an extra state?

Nice!

intentional choice to capitalize UTD TRENDS?

yes, but what do you think?

---

11e2a2f the link preview says "Results - UTD Trends" and skips over pageTitle

[AbhiramTadepalli]

@TyHil pageTitle for the meta tag is not dynamically updating it sets it as whatever pageTitle was when initialized first (pageTitle = '' or pageTitle = 'test' in commit 9dc3e06)

[TyHil]

@TyHil pageTitle for the meta tag is not dynamically updating it sets it as whatever pageTitle was when initialized first (pageTitle = '' or pageTitle = 'test' in commit 9dc3e06)

yeah i don't think it can be dynamic

re: capitalization

seems good, just needs to be changed in _app and _document to match

will look at questions soon

[TyHil]

• Address inline code comments
• Make og:title tag not dynamic
• Standardize capitalization

[AbhiramTadepalli]

• When I use ENTER to select and search a searchterm, it takes a minute for the results to start loading
  • why
  • Can we get the loading animation earlier?

[AbhiramTadepalli]

alright alright alright.

This PR does:
(1) Dynamic Page titles
(2) More intuitive browser navigation: every new search triggers an entry on the history stack
(3) Clicking enter once selects the topmost autocomplete suggestion AND searches

(4) Dynamic Link Previews:

• getServerSideProps does server-side-rendering (SSR) to build a page title from the search terms. This is passed into Dashboard as the string pageTitle which is assigned to the og:title meta property.
• The page title (what goes in the browser tab and in the browser history stack) is dynamically generated (state-less).
• When router.query.searchTerms changes (search terms change), the new function getSearchTerms(searchTermInput: string | string[] | undefined): { courseSearchTerms: SearchQuery[]; professorSearchTerms: SearchQuery[]; } separates the search terms into courseSearchTerms and professorSearchTerms of type SearchQuery[]
• The new function buildPageTitle( courseSearchTerms: SearchQuery[], professorSearchTerms: SearchQuery[], ): string generates a the page's title by concatenating courses then professors separated by a comma. The string ends with a " - " so that it can be easily used without ternaries in the html:

        <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"
        />```

[AbhiramTadepalli]

2 things to note re: [Feature Request] Search Engine Optimization (SEO)

1. We want dashboard links to be in Google Search (links with searchterms
2. SSR unlocks dynamic meta tags for search engine crawlers

[TyHil]

Great!