website: Implement random course picker button (#4039)

* website: Implement random course picker button (#3735)

* feat: add searchkit compatiblity

* feat: add tooltip

* feat: make random course button more subtle

* feat: move module random button to bottom of filter list

* revert: module divider styles

* feat: change button to secondary

---------

Co-authored-by: leslie yip <[email protected]>
Co-authored-by: Jonathan Loh <[email protected]>

Author: 3 people

website/src/views/components/searchkit/RandomPicker.tsx

@@ -0,0 +1,45 @@
+import {
+  PageSizeAccessor,
+  PaginationAccessor,
+  SearchkitComponent,
+  SearchkitComponentProps,
+} from 'searchkit';
+import { ModuleCode } from 'types/modules';
+
+export type RandomPickerProps = {
+  getRandomModuleCode: () => Promise<ModuleCode>;
+};
+
+interface SearchkitRandomPickerProps extends SearchkitComponentProps {
+  buttonComponent: React.ElementType<RandomPickerProps>;
+}
+
+type State = Record<string, never>;
+
+export default class RandomPicker extends SearchkitComponent<SearchkitRandomPickerProps, State> {
+  paginationAccessor() {
+    return this.accessor as PaginationAccessor;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  override defineAccessor() {
+    return new PaginationAccessor('p');
+  }
+
+  getRandomModuleCode = async (): Promise<ModuleCode> => {
+    const sizeAccessor = this.searchkit.getAccessorByType(PageSizeAccessor) as PageSizeAccessor;
+    const totalPages = Math.ceil(this.searchkit.getHitsCount() / sizeAccessor.getSize());
+    const randomPage = Math.floor(Math.random() * totalPages);
+
+    this.paginationAccessor().state = this.paginationAccessor().state.setValue(randomPage);
+    const { hits } = (await this.searchkit.performSearch()).results.hits;
+    const randomHit = hits[Math.floor(Math.random() * hits.length)];
+    /* eslint-disable no-underscore-dangle */
+    return randomHit._source.moduleCode;
+  };
+
+  override render() {
+    const { buttonComponent: Button } = this.props;
+    return <Button getRandomModuleCode={this.getRandomModuleCode} />;
+  }
+}

website/src/views/modules/ModuleFinderSidebar.scss

@@ -1,6 +1,9 @@
 @import "~styles/utils/modules-entry";
 
 .moduleFilters {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   user-select: none;
 
   .filterHeader {
@@ -23,6 +26,7 @@
 
   @include media-breakpoint-up(md) {
     max-width: 16rem;
+    padding-right: 0.5rem;
   }
 
   @include media-breakpoint-down(sm) {

website/src/views/modules/ModuleFinderSidebar.tsx

@@ -17,15 +17,18 @@ import SideMenu, { OPEN_MENU_LABEL } from 'views/components/SideMenu';
 import FilterContainer from 'views/components/filters/FilterContainer';
 import CheckboxItem from 'views/components/filters/CheckboxItem';
 import DropdownListFilters from 'views/components/filters/DropdownListFilters';
+import RandomPicker from 'views/components/searchkit/RandomPicker';
 
 import { getSemesterTimetableLessons } from 'selectors/timetables';
 import { getSemesterModules } from 'utils/timetables';
 import { getModuleSemesterData } from 'utils/modules';
 import { notNull } from 'types/utils';
 
 import config from 'config';
-import styles from './ModuleFinderSidebar.scss';
 import ChecklistFilter, { FilterItem } from '../components/filters/ChecklistFilter';
+import ModuleRandomButton from './ModuleRandomButton';
+
+import styles from './ModuleFinderSidebar.scss';
 
 const RESET_FILTER_OPTIONS = { filter: true };
 
@@ -217,6 +220,8 @@ const ModuleFinderSidebar: React.FC = () => {
           containerComponent={FilterContainer}
           itemComponent={CheckboxItem}
         />
+
+        <RandomPicker buttonComponent={ModuleRandomButton} />
       </div>
     </SideMenu>
   );

website/src/views/modules/ModuleRandomButton.scss

@@ -0,0 +1,11 @@
+@import '~styles/utils/modules-entry';
+
+.moduleRandomButton {
+  composes: btn btn-secondary btn-svg from global;
+  flex-grow: 1;
+  margin-bottom: 2rem;
+  
+  @include media-breakpoint-down(md) {
+    margin: 0 1rem;
+  }
+}

website/src/views/modules/ModuleRandomButton.tsx

@@ -0,0 +1,31 @@
+import { Shuffle } from 'react-feather';
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+
+import { openNotification } from 'actions/app';
+import { RandomPickerProps } from 'views/components/searchkit/RandomPicker';
+import { modulePage } from 'views/routes/paths';
+
+import styles from './ModuleRandomButton.scss';
+
+const ModuleRandomButton: React.FC<RandomPickerProps> = ({ getRandomModuleCode }) => {
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  const handleClick = () => {
+    getRandomModuleCode()
+      .then((moduleCode) => history.push(modulePage(moduleCode)))
+      .catch(() => {
+        dispatch(openNotification('Failed to fetch a random course.'));
+      });
+  };
+
+  return (
+    <button type="button" className={styles.moduleRandomButton} onClick={handleClick}>
+      <Shuffle className="svg svg-small" />
+      Random Course
+    </button>
+  );
+};
+
+export default ModuleRandomButton;