From 946bb65b6aa4d10ab26ca07ae9976d1fa98d13a3 Mon Sep 17 00:00:00 2001
From: Jun Yu <chuajunyu1@gmail.com>
Date: Wed, 20 Mar 2024 16:45:44 +0800
Subject: [PATCH] Add button leading to CS1010S page without randomness

---
 .../ModuleFinderContainer.tsx                 |  5 ++
 .../modules/ModuleRandomPickerButton.tsx      | 50 +++++++++++++++++++
 yarn.lock                                     |  4 ++
 3 files changed, 59 insertions(+)
 create mode 100644 website/src/views/modules/ModuleRandomPickerButton.tsx
 create mode 100644 yarn.lock

diff --git a/website/src/views/modules/ModuleFinderContainer/ModuleFinderContainer.tsx b/website/src/views/modules/ModuleFinderContainer/ModuleFinderContainer.tsx
index 6ae45ceed8..7cc093f523 100644
--- a/website/src/views/modules/ModuleFinderContainer/ModuleFinderContainer.tsx
+++ b/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) => (
diff --git a/website/src/views/modules/ModuleRandomPickerButton.tsx b/website/src/views/modules/ModuleRandomPickerButton.tsx
new file mode 100644
index 0000000000..27afcd472a
--- /dev/null
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000000..fb57ccd13a
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+