From 0cf498651c9f2b4ac1fd10be9f2eac408f67554a Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Mon, 3 Apr 2023 14:23:50 +0530
Subject: [PATCH] feat: shortcuts (#674)

* feat: added shortcut for page and view

* fix: shortcut for view

* fix: onclick method for views and pages
---
 .../components/command-palette/command-pallette.tsx | 13 +++++++++++++
 .../components/command-palette/shortcuts-modal.tsx  |  2 ++
 apps/app/components/ui/empty-state.tsx              |  4 ++++
 .../projects/[projectId]/pages/index.tsx            |  5 ++++-
 .../projects/[projectId]/views/index.tsx            | 10 ++++++++--
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index dd715260c..fd32e7ce1 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -51,6 +51,8 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateModuleModal } from "components/modules";
 import { CreateProjectModal } from "components/project";
 import { CreateUpdateViewModal } from "components/views";
+import { CreateUpdatePageModal } from "components/pages";
+
 import { Spinner } from "components/ui";
 // helpers
 import {
@@ -76,6 +78,7 @@ export const CommandPalette: React.FC = () => {
   const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
   const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
 
   const [searchTerm, setSearchTerm] = React.useState<string>("");
   const [results, setResults] = useState<IWorkspaceSearchResults>({
@@ -193,6 +196,12 @@ export const CommandPalette: React.FC = () => {
         } else if (e.key.toLowerCase() === "p") {
           e.preventDefault();
           setIsProjectModalOpen(true);
+        } else if (e.key.toLowerCase() === "v") {
+          e.preventDefault();
+          setIsCreateViewModalOpen(true);
+        } else if (e.key.toLowerCase() === "d") {
+          e.preventDefault();
+          setIsCreateUpdatePageModalOpen(true);
         } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "b") {
           e.preventDefault();
           toggleCollapsed();
@@ -323,6 +332,10 @@ export const CommandPalette: React.FC = () => {
             handleClose={() => setIsCreateViewModalOpen(false)}
             isOpen={isCreateViewModalOpen}
           />
+          <CreateUpdatePageModal
+            isOpen={isCreateUpdatePageModalOpen}
+            handleClose={() => setIsCreateUpdatePageModalOpen(false)}
+          />
         </>
       )}
       {issueId && issueDetails && (
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index 0cdb051f6..9c5309138 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -33,6 +33,8 @@ const shortcuts = [
       { keys: "C", description: "To create issue" },
       { keys: "Q", description: "To create cycle" },
       { keys: "M", description: "To create module" },
+      { keys: "V", description: "To create view" },
+      { keys: "D", description: "To create page" },
       { keys: "Delete", description: "To bulk delete issues" },
       { keys: "H", description: "To open shortcuts guide" },
       {
diff --git a/apps/app/components/ui/empty-state.tsx b/apps/app/components/ui/empty-state.tsx
index 108c9c133..5c1b7eb8b 100644
--- a/apps/app/components/ui/empty-state.tsx
+++ b/apps/app/components/ui/empty-state.tsx
@@ -27,6 +27,10 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
         return "P";
       case "issue":
         return "C";
+      case "view":
+        return "V";
+      case "page":
+        return "D"
       default:
         return null;
     }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index ca12e9143..b70ad37a3 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -167,7 +167,10 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
         right={
           <PrimaryButton
             className="flex items-center gap-2"
-            onClick={() => setCreateUpdatePageModal(true)}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "d" });
+              document.dispatchEvent(e);
+            }}
           >
             <PlusIcon className="w-4 h-4" />
             Create Page
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 1ba31d5fa..3c1b0e398 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -67,7 +67,14 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
       }
       right={
         <div className="flex items-center gap-2">
-          <PrimaryButton type="button" className="flex items-center gap-2" onClick={() => setIsCreateViewModalOpen(true)}>
+          <PrimaryButton
+            type="button"
+            className="flex items-center gap-2"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "v" });
+              document.dispatchEvent(e);
+            }}
+          >
             <PlusIcon className="w-4 h-4" />
             Create View
           </PrimaryButton>
@@ -100,7 +107,6 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
             title="Create New View"
             description="Views aid in saving your issues by applying various filters and grouping options."
             imgURL={emptyView}
-            action={() => setIsCreateViewModalOpen(true)}
           />
         )
       ) : (