From 135ad5441d5dc2553cc49e1b2dd69eb64a6b1265 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 24 Jan 2022 15:00:51 -0800
Subject: [PATCH] adding modal and stuff

---
 components/Modals/ShortcutHelpModal.tsx | 44 +++++++++++++++++++++++++
 pages/teams/[teamid].tsx                | 33 +++++++++++--------
 2 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 components/Modals/ShortcutHelpModal.tsx

diff --git a/components/Modals/ShortcutHelpModal.tsx b/components/Modals/ShortcutHelpModal.tsx
new file mode 100644
index 0000000..94686d6
--- /dev/null
+++ b/components/Modals/ShortcutHelpModal.tsx
@@ -0,0 +1,44 @@
+import { Modal } from "antd";
+import { useState } from "react";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
+
+export default function ShortcutHelpModal() {
+  const [visible, setVisible] = useState<boolean>(true);
+
+  function handleToggleModal() {
+    setVisible((pv) => !pv);
+  }
+
+  const keyMap: KeyMap = {
+    SHOW_HELP_MODAL: "/",
+  };
+  const handlers = { SHOW_HELP_MODAL: handleToggleModal };
+
+  return (
+    <>
+      {/* fixed help on bottom left */}
+      <span
+        onClick={handleToggleModal}
+        className="hover:cursor-pointer fixed bottom-10 right-10 bg-gray-200 bg-opacity-80 py-2 px-3 rounded text-gray-500 flex flex-row items-center space-x-2"
+      >
+        <span>Help</span>
+
+        <button
+          className={`right-1 rounded-lg py-1 px-2 ml-1 
+           shadow-md text-center text-gray-500 text-sm font-bold`}
+        >
+          /
+        </button>
+      </span>
+
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
+
+      <Modal
+        title="Help"
+        visible={visible}
+        onCancel={handleToggleModal}
+        onOk={handleToggleModal}
+      ></Modal>
+    </>
+  );
+}
diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx
index 0133007..f36da46 100644
--- a/pages/teams/[teamid].tsx
+++ b/pages/teams/[teamid].tsx
@@ -20,6 +20,7 @@ import UserService from "../../services/userService";
 import Announcements from "../../components/Dashboard/Announcements";
 import Links from "../../components/Dashboard/Links";
 import Office from "../../components/Dashboard/Office";
+import ShortcutHelpModal from "../../components/Modals/ShortcutHelpModal";
 
 // User has switched back to the tab
 const onFocus = () => {
@@ -82,25 +83,29 @@ function TeamDashboard() {
   }, []);
 
   return (
-    <div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
-      <Header />
+    <>
+      <ShortcutHelpModal />
 
-      <div className="flex flex-row items-start space-x-5 h-[56rem]">
-        <div className="flex flex-col max-w-sm space-y-5 h-full">
-          <Office />
+      <div className="container mx-auto py-10 px-10 flex flex-col space-y-5">
+        <Header />
 
-          <TeamVoiceLine />
+        <div className="flex flex-row items-start space-x-5 h-[56rem]">
+          <div className="flex flex-col max-w-sm space-y-5 h-full">
+            <Office />
+
+            <TeamVoiceLine />
+          </div>
+
+          <div className="flex flex-col space-y-5 flex-1 h-full">
+            <Announcements />
+
+            <Rooms />
+          </div>
         </div>
 
-        <div className="flex flex-col space-y-5 flex-1 h-full">
-          <Announcements />
-
-          <Rooms />
-        </div>
+        <Links />
       </div>
-
-      <Links />
-    </div>
+    </>
   );
 }