[WIP] Random Course Picker

website/src/views/modules/ModuleFinderContainer/ModuleFinderContainer.tsx

@@ -15,6 +15,7 @@ import classnames from 'classnames';
 import { ElasticSearchResult } from 'types/vendor/elastic-search';
 import { ModuleInformation } from 'types/modules';
 
+import ModuleRandomPickerButton from 'views/modules/ModuleRandomPickerButton';
 import ModuleFinderSidebar from 'views/modules/ModuleFinderSidebar';
 import ModuleSearchBox from 'views/modules/ModuleSearchBox';
 import ModuleFinderNoHits from 'views/errors/ModuleFinderNoHits';
@@ -65,6 +66,10 @@ const ModuleFinderContainer: React.FC = () => (
 
           <ModuleSearchBox id="q" />
 
+          <ModuleRandomPickerButton tooltipTitle="Random module">
+            Discover a Random Module
+          </ModuleRandomPickerButton>
+
           <div>
             <HitsStats
               component={({ hitsCount }: HitsStatsDisplayProps) => (

website/src/views/modules/ModuleRandomPickerButton.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { modulePage } from 'views/routes/paths';
+import Tooltip from 'views/components/Tooltip';
+import styles from './ModuleFinderPagerButton.scss';
+
+type Props = {
+  readonly tooltipTitle?: string;
+  readonly disabled?: boolean;
+  readonly active?: boolean;
+  readonly children: React.ReactNode;
+};
+
+const ModuleRandomPickerButton: React.FC<Props> = ({
+  tooltipTitle,
+  disabled,
+  active,
+  children,
+}) => {
+
+  const rng = Math.floor(Math.random() * 100);
+  const history = useHistory();
+  const button = (
+    <button
+      type="button"
+      className={classnames('btn', styles.pagerButton, {
+        [styles.active]: active,
+      })}
+      disabled={disabled}
+      onClick={() => history.push(modulePage('CS1010'))}
+    >
+      {children}
+    </button>
+  );
+  return (
+    <div>
+      {tooltipTitle ? (
+        <Tooltip content={tooltipTitle} delay={[800, 0]} touch="hold">
+          {button}
+        </Tooltip>
+      ) : (
+        button
+      )}
+    </div>
+  );
+};
+
+export default ModuleRandomPickerButton;

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+