From 2e8b12178b527d907ef23c26736e92fc70891fdb Mon Sep 17 00:00:00 2001 From: Michelle Li Date: Mon, 13 Nov 2023 22:27:52 -0500 Subject: [PATCH] remove unnecessary functions --- .../SearchBar/Components/SearchBar.tsx | 129 +++++++----------- .../{SearchBar.css => SearchBar.module.css} | 20 ++- 2 files changed, 57 insertions(+), 92 deletions(-) rename client/src/modules/SearchBar/Styles/{SearchBar.css => SearchBar.module.css} (84%) diff --git a/client/src/modules/SearchBar/Components/SearchBar.tsx b/client/src/modules/SearchBar/Components/SearchBar.tsx index ff26d20b9..91b81c418 100644 --- a/client/src/modules/SearchBar/Components/SearchBar.tsx +++ b/client/src/modules/SearchBar/Components/SearchBar.tsx @@ -1,17 +1,15 @@ import React, { useState, useEffect } from 'react' -import PropTypes from 'prop-types' - -import ProfileDropdown from '../../Globals/ProfileDropdown' import { Redirect } from 'react-router' import axios from 'axios' import { Session } from '../../../session-store' -import '../Styles/SearchBar.css' +import styles from '../Styles/SearchBar.module.css' import Course from './Course' import SubjectResult from './SubjectResult' import ProfessorResult from './ProfessorResult' import { Class, Subject, Professor } from 'common' +import ProfileDropdown from '../../Globals/ProfileDropdown' type SearchBarProps = { isInNavbar: boolean @@ -28,9 +26,8 @@ export const SearchBar = ({ userInput, imgSrc, signOut, - isLoggedIn + isLoggedIn, }: SearchBarProps) => { - const [dropdown, setDropdown] = useState(true) const [index, setIndex] = useState(0) const [enter, setEnter] = useState<0 | 1>(0) const [mouse, setMouse] = useState<0 | 1>(0) @@ -42,20 +39,14 @@ export const SearchBar = ({ const DEBOUNCE_TIME = 200 useEffect(() => { - if ( - query.toLowerCase() !== '' - ) { + if (query.toLowerCase() !== '') { setTimeout(() => { axios - .post( - `/v2/getClassesByQuery`, - { query: query }, - ) + .post(`http://localhost:8080/v2/getClassesByQuery`, { query: query }) .then((response) => { const queryCourseList = response.data.result if (queryCourseList.length !== 0) { - setCourses(queryCourseList.sort(sortCourses)) - + setCourses(queryCourseList) } else { setCourses([]) } @@ -63,10 +54,7 @@ export const SearchBar = ({ .catch((e) => console.log('Getting courses failed!')) axios - .post( - `/v2/getSubjectsByQuery`, - { query: query }, - ) + .post(`http://localhost:8080/v2/getSubjectsByQuery`, { query: query }) .then((response) => { const subjectList = response.data.result if (subjectList && subjectList.length !== 0) { @@ -79,10 +67,9 @@ export const SearchBar = ({ .catch((e) => console.log('Getting subjects failed!')) axios - .post( - `/v2/getProfessorsByQuery`, - { query: query }, - ) + .post(`http://localhost:8080/v2/getProfessorsByQuery`, { + query: query, + }) .then((response) => { const professorList = response.data.result if (professorList && professorList.length !== 0) { @@ -97,29 +84,6 @@ export const SearchBar = ({ } }, [query]) - /** - * Compares classes based on score, then class number, then alphabetically by - * subject. - * @param {Class} a - * @param {Class} b - * @returns -1, 0, or 1 - */ - const sortCourses = (a: Class, b: Class) => { - const sortByAlphabet = (a: Class, b: Class) => { - const aSub = a.classSub.toLowerCase() - const bSub = b.classSub.toLowerCase() - if (aSub < bSub) { - return -1 - } else if (aSub > bSub) { - return 1 - } else { - return 0 - } - } - - return sortByAlphabet(a, b) //|| b.score - a.score || a.classNum - b.classNum || - } - const text = window.innerWidth >= 840 ? 'Search by any keyword e.g. “FWS”, “ECON” or “CS 2110”' @@ -194,7 +158,6 @@ export const SearchBar = ({ } const setInitState = () => { - setDropdown(true) setIndex(0) setEnter(0) setMouse(0) @@ -232,13 +195,15 @@ export const SearchBar = ({ } href={`/results/keyword/${query.split(' ').join('+')}`} > -

{'Search: "' + query + '"'}

+

{'Search: "' + query + '"'}

) results.push(exact_search) - let subjectList = subjects.slice(0, 3).map((subject, i) => ( + let subjectList: JSX.Element[] = [] + + subjectList = subjects.slice(0, 3).map((subject, i) => ( //create a new class "button" that will set the selected class to this class when it is clicked. ( + professorList = professors.slice(0, 3).map((professor, i) => ( //create a new class "button" that will set the selected class to this class when it is clicked. ( - //create a new class "button" that will set the selected class to this class when it is clicked. - - //the prop "active" will pass through a bool indicating if the index affected through arrow movement is equal to - //the index matching with the course - //the prop "enter" will pass through the value of the enter state - //the prop "mouse" will pass through the value of the mouse state - )) - ) + let coursesList: JSX.Element[] = [] + + coursesList = courses.slice(0, 5).map((course, i) => ( + //create a new class "button" that will set the selected class to this class when it is clicked. + + //the prop "active" will pass through a bool indicating if the index affected through arrow movement is equal to + //the index matching with the course + //the prop "enter" will pass through the value of the enter state + //the prop "mouse" will pass through the value of the mouse state + )) + results.push(coursesList) return results } else { @@ -315,19 +283,18 @@ export const SearchBar = ({ return (
setMouse(1)} diff --git a/client/src/modules/SearchBar/Styles/SearchBar.css b/client/src/modules/SearchBar/Styles/SearchBar.module.css similarity index 84% rename from client/src/modules/SearchBar/Styles/SearchBar.css rename to client/src/modules/SearchBar/Styles/SearchBar.module.css index 56e44e01d..07e308f50 100644 --- a/client/src/modules/SearchBar/Styles/SearchBar.css +++ b/client/src/modules/SearchBar/Styles/SearchBar.module.css @@ -5,11 +5,11 @@ height: 42px; } - .searchbar-in-navbar { + .searchbarInNavbar { height: 42px; } - .search-text { + .searchText { padding-left: 45px; } } @@ -19,11 +19,11 @@ height: 40px; } - .searchbar-in-navbar { + .searchbarInNavbar { height: 52px; } - .search-text { + .searchText { padding-left: 40px; } } @@ -40,12 +40,12 @@ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1); } -.searchbar-in-navbar { +.searchbarInNavbar { border: 1.24929px solid #ececec; box-shadow: none; } -.search-text { +.searchText { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; font-weight: var(--regular-weight); @@ -68,7 +68,7 @@ z-index: 1002; } -.search-text::placeholder { +.searchText::placeholder { color: #c9c9c9; font-weight: var(--regular-weight); } @@ -78,18 +78,16 @@ cursor: pointer; max-height: 300px; overflow-y: auto; - position: absolute; width: 100%; z-index: 1001; border-radius: 0 0 10px 10px; - margin-top: -5px; } /* Selects all 'output' class objects that are decendents - of 'contrasting-result-background' class . + of 'contrastingResultBackground' class . Used to add background contrasting color to searchbar search results */ -.contrasting-result-background .output { +.contrastingResultBackground .output { border-style: solid; border-color: #6ba7ec; border-width: 0 1px 1px 1px;