diff --git a/src/components/search/SearchBar/searchBar.tsx b/src/components/search/SearchBar/searchBar.tsx index b931d00a..0f61a1c1 100644 --- 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) { - 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 ( - UTD Trends + UTD TRENDS + - - { +/** + * 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 ( <> - Results - UTD Trends + + {'Results - ' + buildPageTitle(courses, professors) + 'UTD TRENDS'} + +