+
+ );
+};
+
+interface PreviewCardProps {
+ course: Class;
+}
+
+export default PreviewCard;
\ No newline at end of file
diff --git a/client/src/modules/Results/Components/Results.tsx b/client/src/modules/Results/Components/Results.tsx
index 11ca38db..b1e70fb9 100644
--- a/client/src/modules/Results/Components/Results.tsx
+++ b/client/src/modules/Results/Components/Results.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect, useState } from 'react';
import axios from 'axios';
import Navbar from '../../Globals/Navbar';
-import ResultsDisplay from './ResultsDisplay.jsx';
+import ResultsDisplay from './ResultsDisplay.js';
import styles from '../Styles/Results.module.css';
@@ -25,57 +25,39 @@ type ResultsLists = {
* Results Component
* Used to render the results page. Uses Navbar and ResultsDisplay components directly.
*/
-export class Results extends Component
+
+
+
+
+ {course.classSub.toUpperCase() +
+ ' ' +
+ course.classNum +
+ ', ' +
+ offered}
+
+ Top Review
}
+
+
+ {numReviews !== 0 && (
+ null}
+ isPreview={true}
+ isProfile={false}
+ />
+ )}
+
+ {numReviews !== 0 && numReviews > 1 && (
+
+ See {numReviews} more review{numReviews > 1 ? 's' : ''}
+
+ )}
+
+ {numReviews === 0 && (
+ <>
+ 
+
+
+ No reviews yet! Why not be the first?
+
+
+ )}
+ {(numReviews === 0 || numReviews === 1) && (
+
+ View course page
+
+ )}
+
-
- );
- }
+ useEffect(() => {
+ setCourseList([]);
+ setLoading(true);
+ updateResults();
+ }, [match, history])
+
+ const userInput = match.params.input.split('+').join(' ');
+ return (
+
+
+ );
}
+
+export default Results;
\ No newline at end of file
diff --git a/client/src/modules/Results/Components/ResultsDisplay.jsx b/client/src/modules/Results/Components/ResultsDisplay.jsx
deleted file mode 100644
index f4b7b384..00000000
--- a/client/src/modules/Results/Components/ResultsDisplay.jsx
+++ /dev/null
@@ -1,410 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import FilteredResult from './FilteredResult.tsx';
-import PreviewCard from './PreviewCard.jsx';
-import FilterPopup from './FilterPopup';
-import Loading from '../../Globals/Loading';
-
-import FilterIcon from '../../../assets/icons/filtericon.svg';
-
-import styles from '../Styles/Results.module.css';
-
-/*
- ResultsDisplay Component.a
-
- Used by Results component, renders filters,
- list of class objects (results), and PreviewCard.
-
- Props: courses - is a list of class objects
- loading - bool, true if back-end has no returned from search yet
-
-*/
-
-export default class ResultsDisplay extends Component {
- constructor(props) {
- super(props);
- this.state = {
- courseList: this.props.courses,
- cardCourse: this.props.courses[0],
- activeCard: 0,
- selected: props.type === 'major' ? 'rating' : 'relevance',
- filters: {
- Fall: true,
- Spring: true,
- 1000: true,
- 2000: true,
- 3000: true,
- 4000: true,
- '5000+': true
- },
- filterMap: this.getInitialFilterMap(), // key value pair name:checked
- filteredItems: this.props.courses,
- fullscreen: false,
- transformGauges: false,
- showFilterPopup: false
- };
- this.previewHandler = this.previewHandler.bind(this);
- this.sortBy = this.sortBy.bind(this);
- this.getSubjectOptions = this.getSubjectOptions.bind(this);
- this.renderCheckboxes = this.renderCheckboxes.bind(this);
- this.filterClasses = this.filterClasses.bind(this);
- this.getInitialFilterMap = this.getInitialFilterMap.bind(this);
- this.sort = this.sort.bind(this);
- this.setShowFilterPopup = this.setShowFilterPopup.bind(this);
- this.scrollReviews = this.scrollReviews.bind(this);
- this.toggleFullscreen = this.toggleFullscreen.bind(this);
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (
- prevProps !== this.props ||
- prevState.courseList.length !== this.state.courseList.length
- ) {
- this.setState(
- {
- courseList: this.props.courses,
- relevantCourseList: this.props.courses,
- cardCourse: this.props.courses[0]
- },
- () => this.filterClasses()
- );
- }
- if (prevProps.userInput !== this.props.userInput) {
- this.setState({ filterMap: this.getInitialFilterMap() }, () =>
- this.filterClasses()
- );
- }
- }
-
- getInitialFilterMap() {
- return new Map([
- [
- 'levels',
- new Map([
- ['1000', true],
- ['2000', true],
- ['3000', true],
- ['4000', true],
- ['5000+', true]
- ])
- ],
- [
- 'semesters',
- new Map([
- ['Fall', true],
- ['Spring', true]
- ])
- ],
- ['subjects', []]
- ]);
- }
-
- /**
- * Handles selecting different sort filters
- */
- handleSelect = (event) => {
- let opt = event.target.value;
- this.setState({ selected: opt }, () => this.sort());
- };
-
- /**
- * Helper function to sort()
- */
- sortBy(courseList, sortByField, fieldDefault, increasing) {
- courseList = courseList.sort((a, b) => {
- let first = Number(b[sortByField]) || fieldDefault;
- let second = Number(a[sortByField]) || fieldDefault;
-
- if (first === second) {
- return a.classNum - b.classNum;
- } else {
- if (increasing) {
- return first - second;
- } else {
- return second - first;
- }
- }
- });
- this.setState({
- filteredItems: courseList,
- cardCourse: courseList[0],
- activeCard: 0
- });
- }
-
- /**
- * Sorts list of class results by category selected in this.state.selected
- */
- sort() {
- let availableClasses;
- if (this.state.filteredItems.length === 0) {
- availableClasses = this.state.courseList;
- } else {
- availableClasses = this.state.filteredItems;
- }
-
- if (this.state.selected === 'relevance') {
- this.sortBy(availableClasses, 'score', 0, true);
- } else if (this.state.selected === 'rating') {
- this.sortBy(availableClasses, 'classRating', 0, true);
- } else if (this.state.selected === 'diff') {
- this.sortBy(
- availableClasses,
- 'classDifficulty',
- Number.MAX_SAFE_INTEGER,
- false
- );
- } else if (this.state.selected === 'work') {
- this.sortBy(
- availableClasses,
- 'classWorkload',
- Number.MAX_SAFE_INTEGER,
- false
- );
- }
- }
-
- filterClasses() {
- let semesters = Array.from(
- this.state.filterMap.get('semesters').keys()
- ).filter((semester) => this.state.filterMap.get('semesters').get(semester));
-
- let filteredItems = this.state.courseList.filter((course) =>
- semesters.some((semester) =>
- course.classSems.some((element) =>
- element.includes(semester.slice(0, 2).toUpperCase())
- )
- )
- );
-
- let levels = Array.from(this.state.filterMap.get('levels').keys()).filter(
- (level) => this.state.filterMap.get('levels').get(level)
- );
- filteredItems = filteredItems.filter((course) =>
- levels.some((level) =>
- level === '5000+'
- ? course.classNum.slice(0, 1) >= '5'
- : course.classNum.slice(0, 1) === level.slice(0, 1)
- )
- );
-
- let subjectsObjects = this.state.filterMap.get('subjects');
- if (subjectsObjects && subjectsObjects.length > 0) {
- filteredItems = filteredItems.filter((course) =>
- subjectsObjects.some(
- (subjectObject) =>
- course.classSub.toUpperCase() === subjectObject.value
- )
- );
- }
-
- this.setState({ filteredItems: filteredItems }, () => this.sort());
- }
-
- /**
- * Updates the list of filtered items when filters are checked/unchecked
- */
- checkboxOnChange = (e) => {
- const group = e.target.getAttribute('group');
- const name = e.target.name;
- const checked = e.target.checked;
-
- let newFilterMap = this.state.filterMap;
-
- newFilterMap.get(group).set(name, checked);
-
- this.setState({ filterMap: newFilterMap }, () => this.filterClasses());
- };
-
- /**
- * Updates the displayed PreviewCard to the correct [course]
- * if the course's [index] in the list of FilteredResult components is clicked
- */
- previewHandler(course, index) {
- this.setState({
- cardCourse: course,
- activeCard: index
- });
- this.setState({ transformGauges: false });
- }
-
- computeHeight() {
- return (
- window.innerWidth ||
- document.documentElement.clientWidth ||
- document.body.clientWidth
- );
- }
-
- /**
- * Displays the filtered items as FilteredResult components if there are any
- * The original list as FilteredResult components otherwise
- */
- renderResults() {
- const items = this.state.filteredItems.length
- ? this.state.filteredItems
- : this.state.courseList;
-
- return items.map((result, index) => (
-
-
- ));
- }
-
- renderCheckboxes(group) {
- let groupList = Array.from(this.state.filterMap.get(group).keys());
- return groupList.map((name, index) => (
-
-
-
- ));
- }
-
- getSubjectOptions(inputValue, callback) {
- console.log();
- }
-
- setShowFilterPopup() {
- this.setState({ showFilterPopup: !this.state.showFilterPopup });
- }
-
- scrollReviews(e) {
- const currentScrollY = e.target.scrollTop;
- if (currentScrollY > 80) {
- this.setState({ transformGauges: true });
- } else {
- this.setState({ transformGauges: false });
- }
- }
-
- toggleFullscreen() {
- this.setState({ fullscreen: false });
- }
-
- render() {
- return (
-
-
- );
- }
-}
-
-ResultsDisplay.propTypes = {
- courses: PropTypes.array.isRequired,
- loading: PropTypes.bool.isRequired,
- type: PropTypes.string.isRequired,
- userInput: PropTypes.string.isRequired
-};
diff --git a/client/src/modules/Results/Components/ResultsDisplay.tsx b/client/src/modules/Results/Components/ResultsDisplay.tsx
new file mode 100644
index 00000000..f94564c3
--- /dev/null
+++ b/client/src/modules/Results/Components/ResultsDisplay.tsx
@@ -0,0 +1,411 @@
+import React, { useEffect, useState } from 'react';
+
+import FilteredResult from './FilteredResult';
+import PreviewCard from './PreviewCard';
+import FilterPopup from './FilterPopup';
+import Loading from '../../Globals/Loading';
+
+import FilterIcon from '../../../assets/icons/filtericon.svg';
+
+import styles from '../Styles/Results.module.css';
+import { Class } from 'common';
+import Bear from '/surprised_bear.svg';
+
+/*
+ ResultsDisplay Component.a
+
+ Used by Results component, renders filters,
+ list of class objects (results), and PreviewCard.
+
+ Props: courses - is a list of class objects
+ loading - bool, true if back-end has no returned from search yet
+
+*/
+
+export const ResultsDisplay = ({
+ courses,
+ loading,
+ type,
+ userInput
+}: ResultsDisplayProps) => {
+ const [courseList, setCourseList] = useState(courses);
+ const [filteredItems, setFilteredItems] = useState(courses);
+ const [cardCourse, setCardCourse] = useState(courses[0]);
+ const [activeCard, setActiveCard] = useStateSearch Results
- {/* Case where results are still being loaded */} - {this.props.loading === true &&
- 
-
- )}
- {/* Case where results are returned (non-empty) */}
- {this.state.courseList.length !== 0 && this.props.loading !== true && (
-
- Sorry! No classes match your search.
-
-
- )}
-
-
-
- Filter
-
-
- Semester
- {this.renderCheckboxes('semesters')}
-
-
- Level
- {this.renderCheckboxes('levels')}
-
-
-
- We found{' '}
-
- {this.state.filteredItems.length === 0
- ? this.state.courseList.length
- : this.state.filteredItems.length}
- {' '}
- courses for "{this.props.userInput}
- "
-
-
-
-
- {this.state.showFilterPopup && (
-
-
-
-
-
-
-
-
-
-
-
-
- - {this.renderResults()}
-
-
+
+ ));
+ }
+ };
+
+ const renderCheckboxes = (group: string) => {
+ let groupList = Array.from(
+ (filterMap.get(group) as Map
+
+
+ ));
+ };
+
+ return (
+ <>
+ {loading &&
+ {/* Case where results are returned, even if zero */}
+ {!loading && (
+
+
+ );
+};
+
+interface ResultsDisplayProps {
+ courses: Array
+ {/* Case where no results returned */}
+
+ )}
+
+ {courseList.length !== 0 && setSearchListViewEnabled(!searchListViewEnabled)}*/}
+ {/*>*/}
+ {/* {searchListViewEnabled ? 'Hide' : 'View'} Search Results*/}
+ {/**/}
+
+
+ {filteredItems.length === 0 && (
+ Search Results
} + {/*
+ {courseList.length !== 0 && (
+
+
+
+ )}
+
+ {filteredItems.length !== 0 && (
+ Filter
+
+
+ Semester
+ {renderCheckboxes('semesters')}
+
+
+ Level
+ {renderCheckboxes('levels')}
+
+ {searchListViewEnabled && (
+ <>
+
+ )}
+ {filteredItems.length === 0 && courseList.length !== 0 && (
+
+ We found {filteredItems.length} courses for
+ "
+ {userInput}
+ "
+
+
+
+ setShowFilterPopup(!showFilterPopup)
+ }
+ />
+ )}
+
+
+
+ {showFilterPopup && (
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ - {renderResults()}
+ {searchListViewEnabled && (
+ <>
+
+ )}
+
+
+ setShowFilterPopup(!showFilterPopup)
+ }
+ />
+ )}
+
+
+ )}
+
+
+
+ {showFilterPopup && (
+
+
+
+ )}
+
+ {filteredItems.length !== 0 && (
+
+ No classes found. Try another search
+ {courseList.length !== 0 ? " or switch up the filters!" : "!"}
+
+
+
+ )}
+
+
+