Add search function to classes page

webclient/src/Classes.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useReducer } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Label, Button, Container, Dropdown, Form, Header, Icon, Segment, Table } from 'semantic-ui-react';
+import { Label, Button, Container, Dropdown, Form, Header, Icon, Input, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment-timezone';
 import { apiUrl, isAdmin, getInstructor, BasicTable, requester, useIsMobile } from './utils.js';
 import { NotFound } from './Misc.js';
@@ -305,6 +305,7 @@ export function ClassFeed(props) {
 export function Classes(props) {
 	const [classes, setClasses] = useState(classesCache);
 	const [courses, setCourses] = useState(false);
+	const [search, setSearch] = useState('');
 	const [sortByCourse, setSortByCourse] = useState(sortCache);
 	const [tagFilter, setTagFilter] = useState(tagFilterCache);
 	const { token, user, refreshUser } = props;
@@ -334,6 +335,8 @@ export function Classes(props) {
 	const byDate = (a, b) => a.datetime > b.datetime ? 1 : -1;
 	const classesByTag = (x) => tagFilter ? x.course_data.tags.includes(tagFilter) : true;
 	const coursesByTag = (x) => tagFilter ? x.tags.includes(tagFilter) : true;
+	const classesBySearch = (x) => search ? x.course_data.name.toLowerCase().includes(search.toLowerCase()) : true;
+	const coursesBySearch = (x) => search ? x.name.toLowerCase().includes(search.toLowerCase()) : true;
 
 	return (
 		<Container>
@@ -368,6 +371,21 @@ export function Classes(props) {
 				>
 					Sort by date
 				</Button>
+
+				<Input focus icon='search'
+					placeholder='Search...'
+					value={search}
+					onChange={(event) => setSearch(event.target.value)}
+					aria-label='search products'
+					style={{ margin: '0.5rem 0.5rem 0.5rem 0' }}
+				/>
+
+				{!!search.length &&
+					<Button
+						content='Clear'
+						onClick={() => setSearch('')}
+					/>
+				}
 			</p>
 
 			<p>Filter by tag:</p>
@@ -413,14 +431,14 @@ export function Classes(props) {
 			{classes.length && courses.length ?
 				sortByCourse ?
 					<NewClassTable
-						classes={classes.filter(classesByTag)}
+						classes={classes.filter(classesByTag).filter(classesBySearch)}
-						courses={courses.filter(coursesByTag)}
+						courses={courses.filter(coursesByTag).filter(coursesBySearch)}
 						token={token}
 						user={user}
 						refreshUser={refreshUser}
 					/>
 				:
-					<ClassTable classes={classes.slice().filter(classesByTag).sort(byDate)} />
+					<ClassTable classes={classes.slice().filter(classesByTag).filter(classesBySearch).sort(byDate)} />
 			:
 				<p>Loading...</p>
 			}