Rework "hotkeys"

Includes: Fix linter errors

wondrous-app/.env.development

@@ -5,5 +5,4 @@ NEXT_PUBLIC_RPC_URL_ARBITRUM=https://arb1.arbitrum.io/rpc/
 NEXT_PUBLIC_RPC_URL_BSC=https://bsc-dataseed.binance.org/
 NEXT_PUBLIC_RPC_URL_BOBA=https://mainnet.boba.network/
 NEXT_PUBLIC_RPC_URL_RINKEBY=https://rinkeby.infura.io/v3/d828b09eb88d4a3fa4299e29b014bd28
-# NEXT_PUBLIC_GRAPHQL_SERVER_URL=https://apistaging.wonderapp.co/graphql
-NEXT_PUBLIC_GRAPHQL_SERVER_URL=http://localhost:4000/graphql
+NEXT_PUBLIC_GRAPHQL_SERVER_URL=https://apistaging.wonderapp.co/graphql

wondrous-app/components/Common/DropdownSelect/DropdownSelect.tsx

@@ -71,7 +71,7 @@ function DropdownSelect({
   const handleChange = (event) => {
     setValue(event.target.value);
 
-    onChange && onChange();
+    onChange && onChange(event.target.value);
   };
 
   return (

wondrous-app/components/Common/KanbanBoard/kanbanBoard.tsx

@@ -22,6 +22,8 @@ import { parseUserPermissionContext, enableContainerOverflow } from 'utils/helpe
 import { useMutation } from '@apollo/client';
 import { dedupeColumns, delQuery } from 'utils';
 import ConfirmModal from 'components/Common/ConfirmModal';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { getFirstTask, HOTKEYS, pickHotkeyFunction, TASK_CONTROLS, TASK_ROUTES_FOR_ROUTER } from 'utils/hotkeyHelper';
 import { useMe } from '../../Auth/withAuth';
 import DndErrorModal from './DndErrorModal';
 import TaskColumn from './TaskColumn';
@@ -43,19 +45,22 @@ export const populateOrder = (index, tasks, field) => {
 };
 
 function KanbanBoard(props) {
+  const router = useRouter();
+  const location = useLocation();
   const user = useMe();
   const { columns, onLoadMore, hasMore, setColumns } = props;
   const [openModal, setOpenModal] = useState(false);
-  const router = useRouter();
+  const [taskToConfirm, setTaskToConfirm] = useState<any>(null);
   const [updateTaskOrder] = useMutation(UPDATE_TASK_ORDER);
   const [dndErrorModal, setDndErrorModal] = useState(false);
   const [approveTaskProposal] = useMutation(APPROVE_TASK_PROPOSAL);
   const [closeTaskProposal] = useMutation(CLOSE_TASK_PROPOSAL);
-  const [taskToConfirm, setTaskToConfirm] = useState<any>(null);
   // Permissions for Draggable context
   const orgBoard = useOrgBoard();
   const userBoard = useUserBoard();
   const podBoard = usePodBoard();
+  const taskId = (location?.params?.task || location?.params.taskProposal)?.toString() || taskToConfirm?.id;
+
   const board = orgBoard || userBoard || podBoard;
   const isProposalEntity = board?.entityType === ENTITIES_TYPES.PROPOSAL;
   const userPermissionsContext =
@@ -76,6 +81,33 @@ function KanbanBoard(props) {
     return canEdit && user && task;
   };
 
+  useHotkeys(
+    HOTKEYS.ALL_KEYS,
+    (e) => {
+      // TODO: update this when the issue from package is fixed.
+      if (
+        !TASK_CONTROLS.includes(e.key) ||
+        !(board?.entityType === ENTITIES_TYPES.TASK || TASK_ROUTES_FOR_ROUTER.includes(router.asPath))
+      ) {
+        return;
+      }
+
+      if (!taskId && !openModal) {
+        const currentTaskId = getFirstTask(columns).id;
+        location.push(`${delQuery(router.asPath)}?task=${currentTaskId}&entity=task&view=grid`);
+        setOpenModal(true);
+        return;
+      }
+
+      const newTask = pickHotkeyFunction(e.key, columns, taskId);
+
+      if (newTask) {
+        location.push(`${delQuery(router.asPath)}?task=${newTask}&entity=task&view=grid`);
+      }
+    },
+    [taskId, columns, openModal]
+  );
+
   // Updates the task status on Backend
   // TODO: Aggregate all Task mutations on one Task
   //       service.
@@ -234,8 +266,6 @@ function KanbanBoard(props) {
     }
   };
 
-  const location = useLocation();
-
   const confirmCardMove = (moveAction) => (id, status, index, source) => {
     const sourceColumn = columns.findIndex((column) => column.status === source.droppableId);
     const taskToUpdate = columns[sourceColumn]?.tasks.find((task) => task?.id === id);
@@ -303,7 +333,6 @@ function KanbanBoard(props) {
     setOpenModal(false);
   };
 
-  const taskId = (location?.params?.task || location?.params.taskProposal)?.toString() || taskToConfirm?.id;
   return (
     <KanbanBoardContainer>
       <DndErrorModal open={dndErrorModal} handleClose={() => setDndErrorModal(false)} />
@@ -332,11 +361,9 @@ function KanbanBoard(props) {
         key={taskId}
       />
       <DragDropContext onDragEnd={onDragEnd}>
-        {columns.map((column) => {
-          const { status, section, tasks } = column;
-
-          return <TaskColumn key={status} cardsList={tasks} moveCard={moveCard} status={status} section={section} />;
-        })}
+        {columns.map(({ status, section, tasks }) => (
+          <TaskColumn key={status} cardsList={tasks} moveCard={moveCard} status={status} section={section} />
+        ))}
       </DragDropContext>
     </KanbanBoardContainer>
   );

wondrous-app/components/Common/SideBarMainDaoLink/index.tsx

@@ -1,21 +1,31 @@
-import { Badge } from '@mui/material';
 import React from 'react';
-import Link from 'next/link';
-import { useHotkey } from 'utils/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+import { Badge } from '@mui/material';
+
+import { useHotkey } from 'utils/hooks';
+
 import { SafeImage } from '../Image';
-import styles, { ButtonIcon, DaoIconWrapper, NoLogoDAO } from './styles';
 import SidebarTooltip from '../SidebarMainTooltip';
 
+import styles, { ButtonIcon, DaoIconWrapper, NoLogoDAO } from './styles';
+
 const SideBarMainDaoLink = ({ id, name, username, isActive, thumbnailPicture, profilePicture, index }) => {
   const showBadge = useHotkey();
   const router = useRouter();
   const fixedIndex = (index + 1).toString();
 
-  useHotkeys(fixedIndex, () => {
-    router.push(`/organization/${username}/boards?entity=task`);
-  });
+  useHotkeys(
+    fixedIndex,
+    () => {
+      if (showBadge) {
+        router.push(`/organization/${username}/boards?entity=task`);
+      }
+    },
+    [showBadge]
+  );
 
   return (
     <SidebarTooltip key={id} title={name}>

wondrous-app/components/CreateEntity/CreateEntityModal/index.tsx

@@ -157,8 +157,15 @@ import TaskTemplatePicker from './TaskTemplatePicker';
 import GR15DEICreateSelector from '../Initiatives/GR15DEI';
 import { SnapshotErrorText } from '../styles';
 
-export default function CreateEntityModal(props: ICreateEntityModal) {
-  const { entityType, handleClose, cancel, existingTask, parentTaskId, formValues, status } = props;
+export default function CreateEntityModal({
+  entityType,
+  handleClose,
+  cancel,
+  existingTask,
+  parentTaskId,
+  formValues,
+  status,
+}: ICreateEntityModal) {
   const [fileUploadLoading, setFileUploadLoading] = useState(false);
   const isSubtask =
     parentTaskId !== undefined || (existingTask?.parentTaskId !== undefined && existingTask?.parentTaskId !== null);
@@ -281,8 +288,7 @@ export default function CreateEntityModal(props: ICreateEntityModal) {
     form.setFieldValue('labelIds', [...form.values.labelIds, newLabelId])
   );
 
-  const [createGithubIssue, { data: createGithubIssueData, loading: createGithubIssueLoading }] =
-    useMutation(CREATE_TASK_GITHUB_ISSUE);
+  const [createGithubIssue, { loading: createGithubIssueLoading }] = useMutation(CREATE_TASK_GITHUB_ISSUE);
 
   const milestonesData = useGetMilestones(form.values.orgId, form.values.podId);
 

wondrous-app/components/CreateEntity/CreateEntityModal/styles.tsx

@@ -551,7 +551,7 @@ export function CreateEntityPrivacySelect(props) {
     ...props.components,
   };
 
-  return <SelectUnstyled {...props} components={components} />;
+  return <SelectUnstyled {...props} components={components} placeholder="hello" />;
 }
 
 export const CreateEntityPrivacySelectRender = styled.div`

wondrous-app/components/ListView/index.tsx

@@ -1,3 +1,9 @@
+import { useState, useEffect } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { useRouter } from 'next/router';
+import { useMutation } from '@apollo/client';
+
 import usePrevious, { useOrgBoard, usePodBoard, useUserBoard } from 'utils/hooks';
 import {
   TASK_STATUS_TODO,
@@ -11,20 +17,18 @@ import {
   BOARD_TYPE,
   STATUS_CLOSED,
 } from 'utils/constants';
-import { useState, useEffect } from 'react';
 import { useLocation } from 'utils/useLocation';
-import TaskViewModal from 'components/Common/TaskViewModal';
 import { delQuery, dedupeColumns } from 'utils';
-import { useRouter } from 'next/router';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { useMe } from 'components/Auth/withAuth';
 import { parseUserPermissionContext } from 'utils/helpers';
-import { useMutation } from '@apollo/client';
+import { getFirstTask, HOTKEYS, pickHotkeyFunction, TASK_CONTROLS, TASK_ROUTES_FOR_ROUTER } from 'utils/hotkeyHelper';
+import apollo from 'services/apollo';
+import { UPDATE_TASK_STATUS, UPDATE_TASK_ORDER } from 'graphql/mutations/task';
 import { APPROVE_TASK_PROPOSAL, CLOSE_TASK_PROPOSAL } from 'graphql/mutations/taskProposal';
+
+import { useMe } from 'components/Auth/withAuth';
+import TaskViewModal from 'components/Common/TaskViewModal';
 import { populateOrder } from 'components/Common/KanbanBoard/kanbanBoard';
-import { UPDATE_TASK_STATUS, UPDATE_TASK_ORDER } from 'graphql/mutations/task';
-import apollo from 'services/apollo';
-import BoardLock from 'components/BoardLock';
+
 import ItemsContainer from './ItemsContainer';
 
 interface Props {
@@ -54,6 +58,7 @@ export default function ListView({ columns, onLoadMore, hasMore, ...props }: Pro
   const [closeTaskProposal] = useMutation(CLOSE_TASK_PROPOSAL);
   const [updateTaskOrder] = useMutation(UPDATE_TASK_ORDER);
   const [dndErrorModal, setDndErrorModal] = useState(false);
+  const taskId = (location.params.taskProposal ?? location.params.task)?.toString();
 
   const user = useMe();
 
@@ -64,6 +69,31 @@ export default function ListView({ columns, onLoadMore, hasMore, ...props }: Pro
     }
   }, [location]);
 
+  useHotkeys(
+    HOTKEYS.ALL_KEYS,
+    (e) => {
+      // TODO: update this when the issue from package is fixed.
+      if (
+        !TASK_CONTROLS.includes(e.key) ||
+        !(props.entityType === ENTITIES_TYPES.TASK || !TASK_ROUTES_FOR_ROUTER.includes(router.asPath))
+      ) {
+        return;
+      }
+      if (!taskId && !isModalOpen) {
+        const currentTaskId = getFirstTask(columns).id;
+        location.push(`${delQuery(router.asPath)}?task=${currentTaskId}&entity=task&view=list`);
+        setOpenModal(true);
+        return;
+      }
+      const newTask = pickHotkeyFunction(e.key, columns, taskId);
+
+      if (newTask) {
+        location.push(`${delQuery(router.asPath)}?task=${newTask}&entity=task&view=list`);
+      }
+    },
+    [taskId, columns, isModalOpen]
+  );
+
   const handleModalClose = () => {
     const style = document.body.getAttribute('style');
     const top = style.match(/(?<=top: -)(.*?)(?=px)/);
@@ -266,7 +296,7 @@ export default function ListView({ columns, onLoadMore, hasMore, ...props }: Pro
         open={isModalOpen}
         handleClose={handleModalClose}
         isTaskProposal={!!location.params.taskProposal}
-        taskId={(location.params.taskProposal ?? location.params.task)?.toString()}
+        taskId={taskId}
       />
       <DragDropContext onDragEnd={onDragEnd} handleClose={() => setDndErrorModal(false)}>
         {columns.map((column) => {