improved search interactions

Author: ricokahler

src/client/routes/catalog/catalog.tsx

@@ -16,7 +16,7 @@ import { Loading } from 'components/loading';
 import { CourseDetail } from './components/course-detail';
 import { Course } from './components/course';
 
-const INPUT_DEBOUNCE_TIME = 250;
+const INPUT_DEBOUNCE_TIME = 100;
 
 const Container = styled(View)`
   flex: 1 1 auto;
@@ -117,6 +117,7 @@ export class Catalog extends React.PureComponent<CatalogProps, CatalogState> {
   search$ = new Subject<string>();
   searchSubscription: Subscription | undefined;
   searching = false;
+  bigSearchRef = React.createRef<HTMLInputElement>();
 
   constructor(props: CatalogProps) {
     super(props);
@@ -138,6 +139,9 @@ export class Catalog extends React.PureComponent<CatalogProps, CatalogState> {
         }),
       )
       .subscribe(this.props.onSearch);
+    const bigSearchElement = this.bigSearchRef.current;
+    if (!bigSearchElement) return;
+    bigSearchElement.focus();
   }
 
   componentWillUnmount() {
@@ -146,6 +150,18 @@ export class Catalog extends React.PureComponent<CatalogProps, CatalogState> {
     }
   }
 
+  componentDidUpdate(previousProps: CatalogProps) {
+    const lastPath = previousProps.location.pathname;
+    const currentPath = this.props.location.pathname;
+
+    if (lastPath !== '/catalog' && currentPath === '/catalog') {
+      const bigSearchElement = this.bigSearchRef.current;
+      if (!bigSearchElement) return;
+      bigSearchElement.focus();
+      bigSearchElement.select();
+    }
+  }
+
   get noSearch() {
     return this.props.totalMatches <= 0 && this.state.searchValue === '';
   }
@@ -188,7 +204,21 @@ export class Catalog extends React.PureComponent<CatalogProps, CatalogState> {
     if (!subjectCode) return null;
     if (!courseNumber) return null;
 
-    return <CourseDetail subjectCode={subjectCode} courseNumber={courseNumber} />;
+    return (
+      <CourseDetail
+        subjectCode={subjectCode}
+        courseNumber={courseNumber}
+        open={this.courseSelected}
+      />
+    );
+  };
+
+  handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const firstResult = this.props.searchResults[0];
+    if (!firstResult) return;
+    this.handleCourseClick(firstResult);
+    e.currentTarget.blur();
   };
 
   render() {
@@ -202,6 +232,8 @@ export class Catalog extends React.PureComponent<CatalogProps, CatalogState> {
                 placeholder="Search for a course..."
                 value={this.state.searchValue}
                 onChange={this.handleSearch}
+                innerRef={this.bigSearchRef}
+                onKeyPress={this.handleKeyPress}
               />
               <ClearSearch onClick={this.handleClearSearch}>Clear Search</ClearSearch>
             </SearchRow>

src/client/routes/catalog/components/course-detail/course-detail.tsx

@@ -63,6 +63,7 @@ const EditPrerequisites = styled(ActionableText)`
 `;
 
 interface CourseDetailProps {
+  open: boolean;
   course: Model.Course.Model;
   overrideApplied: boolean;
   prerequisitesContainConcurrent: boolean;
@@ -80,6 +81,19 @@ export class CourseDetail extends React.PureComponent<CourseDetailProps, CourseD
     };
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Backspace') return;
+    if (!this.props.open) return;
+    history.goBack();
+  };
+
   handleBackClick = () => {
     history.goBack();
   };

src/client/routes/catalog/components/course-detail/index.ts

@@ -4,12 +4,13 @@ import { CourseDetail } from './course-detail';
 import { history } from 'client/history';
 
 interface CourseDetailContainerProps {
+  open: boolean;
   subjectCode: string;
   courseNumber: string;
 }
 
 const Container = Model.store.connect({
-  mapStateToProps: (state, { subjectCode, courseNumber }: CourseDetailContainerProps) => {
+  mapStateToProps: (state, { subjectCode, courseNumber, open }: CourseDetailContainerProps) => {
     const { user, prerequisiteOverrides, catalog } = state;
     if (!user) throw new Error('user required');
 
@@ -19,6 +20,7 @@ const Container = Model.store.connect({
       history.replace('/catalog');
 
       return {
+        open: false,
         course: {
           id: '',
           name: '',
@@ -33,6 +35,7 @@ const Container = Model.store.connect({
     }
 
     return {
+      open,
       course,
       overrideApplied: !!Model.Course.getPrerequisiteOverrideType(
         course,

src/client/routes/catalog/components/course.tsx

@@ -52,16 +52,26 @@ interface CourseProps {
 }
 interface CourseState {
   showMore: boolean;
+  focused: boolean;
 }
 
 export class Course extends React.PureComponent<CourseProps, CourseState> {
   constructor(props: CourseProps) {
     super(props);
     this.state = {
       showMore: false,
+      focused: false,
     };
   }
 
+  componentDidMount() {
+    document.addEventListener('keypress', this.handleKeyPress);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keypress', this.handleKeyPress);
+  }
+
   get description() {
     return this.props.course.description || '';
   }
@@ -99,6 +109,21 @@ export class Course extends React.PureComponent<CourseProps, CourseState> {
     }));
   };
 
+  handleKeyPress = (e: KeyboardEvent) => {
+    const key = e.key;
+    if (key !== 'Enter') return;
+    if (!this.state.focused) return;
+    this.props.onClick();
+  };
+
+  handleFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  handleBlur = () => {
+    this.setState({ focused: false });
+  };
+
   handleClick = (e: React.MouseEvent<Element>) => {
     const target = e.target;
     if (!target) return;
@@ -112,7 +137,12 @@ export class Course extends React.PureComponent<CourseProps, CourseState> {
   render() {
     const { course } = this.props;
     return (
-      <Root onClick={this.handleClick}>
+      <Root
+        onClick={this.handleClick}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        tabIndex={0}
+      >
         <Summary>
           <SimpleName>{Model.Course.getSimpleName(course)}</SimpleName>
           <FullName>{course.name}</FullName>