website: Implement random course picker button (#3735)

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

@@ -16,6 +16,7 @@ import { ElasticSearchResult } from 'types/vendor/elastic-search';
 import { ModuleInformation } from 'types/modules';
 
 import ModuleFinderSidebar from 'views/modules/ModuleFinderSidebar';
+import ModuleRandomButton from 'views/modules/ModuleRandomButton';
 import ModuleSearchBox from 'views/modules/ModuleSearchBox';
 import ModuleFinderNoHits from 'views/errors/ModuleFinderNoHits';
 import ModuleFinderApiError from 'views/errors/ModuleFinderApiError';
@@ -65,6 +66,8 @@ const ModuleFinderContainer: React.FC = () => (
 
           <ModuleSearchBox id="q" />
 
+          <ModuleRandomButton />
+
           <div>
             <HitsStats
               component={({ hitsCount }: HitsStatsDisplayProps) => (

website/src/views/modules/ModuleRandomButton.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { Shuffle } from 'react-feather';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import type { State } from 'types/state';
+import { modulePage } from 'views/routes/paths';
+
+const ModuleRandomButton: React.FC = () => {
+  const modules = useSelector((state: State) => state.moduleBank).moduleList;
+  const history = useHistory();
+
+  const handleClick = () => {
+    const randomMod = modules[Math.floor(Math.random() * modules.length)];
+    history.push(modulePage(randomMod.moduleCode));
+  };
+
+  return (
+    <button
+      type="button"
+      className={classNames('btn', 'btn-outline-primary', 'btn-block', 'btn-svg')}
+      onClick={handleClick}
+    >
+      <Shuffle className="svg" />
+      Random Course
+    </button>
+  );
+};
+
+export default ModuleRandomButton;