Skip to content

Commit b1f4b59

Browse files
cristobalchaoterryli0095
authored andcommitted
Rework "hotkeys"
Includes: Fix linter errors
1 parent e8120f2 commit b1f4b59

File tree

8 files changed

+181
-133
lines changed

8 files changed

+181
-133
lines changed

wondrous-app/.env.development

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,4 @@ NEXT_PUBLIC_RPC_URL_ARBITRUM=https://arb1.arbitrum.io/rpc/
55
NEXT_PUBLIC_RPC_URL_BSC=https://bsc-dataseed.binance.org/
66
NEXT_PUBLIC_RPC_URL_BOBA=https://mainnet.boba.network/
77
NEXT_PUBLIC_RPC_URL_RINKEBY=https://rinkeby.infura.io/v3/d828b09eb88d4a3fa4299e29b014bd28
8-
# NEXT_PUBLIC_GRAPHQL_SERVER_URL=https://apistaging.wonderapp.co/graphql
9-
NEXT_PUBLIC_GRAPHQL_SERVER_URL=http://localhost:4000/graphql
8+
NEXT_PUBLIC_GRAPHQL_SERVER_URL=https://apistaging.wonderapp.co/graphql

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function DropdownSelect({
7171
const handleChange = (event) => {
7272
setValue(event.target.value);
7373

74-
onChange && onChange();
74+
onChange && onChange(event.target.value);
7575
};
7676

7777
return (

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

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { parseUserPermissionContext, enableContainerOverflow } from 'utils/helpe
2323
import { useMutation } from '@apollo/client';
2424
import { dedupeColumns, delQuery } from 'utils';
2525
import ConfirmModal from 'components/Common/ConfirmModal';
26+
import { useHotkeys } from 'react-hotkeys-hook';
27+
import { getFirstTask, HOTKEYS, pickHotkeyFunction, TASK_CONTROLS, TASK_ROUTES_FOR_ROUTER } from 'utils/hotkeyHelper';
2628
import { useMe } from '../../Auth/withAuth';
2729
import DndErrorModal from './DndErrorModal';
2830
import TaskColumn from './TaskColumn';
@@ -44,19 +46,22 @@ export const populateOrder = (index, tasks, field) => {
4446
};
4547

4648
function KanbanBoard(props) {
49+
const router = useRouter();
50+
const location = useLocation();
4751
const user = useMe();
4852
const { columns, onLoadMore, hasMore, setColumns } = props;
4953
const [openModal, setOpenModal] = useState(false);
50-
const router = useRouter();
54+
const [taskToConfirm, setTaskToConfirm] = useState<any>(null);
5155
const [updateTaskOrder] = useMutation(UPDATE_TASK_ORDER);
5256
const [dndErrorModal, setDndErrorModal] = useState(false);
5357
const [approveTaskProposal] = useMutation(APPROVE_TASK_PROPOSAL);
5458
const [closeTaskProposal] = useMutation(CLOSE_TASK_PROPOSAL);
55-
const [taskToConfirm, setTaskToConfirm] = useState<any>(null);
5659
// Permissions for Draggable context
5760
const orgBoard = useOrgBoard();
5861
const userBoard = useUserBoard();
5962
const podBoard = usePodBoard();
63+
const taskId = (location?.params?.task || location?.params.taskProposal)?.toString() || taskToConfirm?.id;
64+
6065
const board = orgBoard || userBoard || podBoard;
6166
const isProposalEntity = board?.entityType === ENTITIES_TYPES.PROPOSAL;
6267
const userPermissionsContext =
@@ -77,6 +82,33 @@ function KanbanBoard(props) {
7782
return canEdit && user && task;
7883
};
7984

85+
useHotkeys(
86+
HOTKEYS.ALL_KEYS,
87+
(e) => {
88+
// TODO: update this when the issue from package is fixed.
89+
if (
90+
!TASK_CONTROLS.includes(e.key) ||
91+
!(board?.entityType === ENTITIES_TYPES.TASK || TASK_ROUTES_FOR_ROUTER.includes(router.asPath))
92+
) {
93+
return;
94+
}
95+
96+
if (!taskId && !openModal) {
97+
const currentTaskId = getFirstTask(columns).id;
98+
location.push(`${delQuery(router.asPath)}?task=${currentTaskId}&entity=task&view=grid`);
99+
setOpenModal(true);
100+
return;
101+
}
102+
103+
const newTask = pickHotkeyFunction(e.key, columns, taskId);
104+
105+
if (newTask) {
106+
location.push(`${delQuery(router.asPath)}?task=${newTask}&entity=task&view=grid`);
107+
}
108+
},
109+
[taskId, columns, openModal]
110+
);
111+
80112
// Updates the task status on Backend
81113
// TODO: Aggregate all Task mutations on one Task
82114
// service.
@@ -235,8 +267,6 @@ function KanbanBoard(props) {
235267
}
236268
};
237269

238-
const location = useLocation();
239-
240270
const confirmCardMove = (moveAction) => async (id, status, index, source) => {
241271
const sourceColumn = columns.findIndex((column) => column.status === source.droppableId);
242272
const taskToUpdate = columns[sourceColumn]?.tasks.find((task) => task?.id === id);
@@ -317,7 +347,6 @@ function KanbanBoard(props) {
317347
setOpenModal(false);
318348
};
319349

320-
const taskId = (location?.params?.task || location?.params.taskProposal)?.toString() || taskToConfirm?.id;
321350
return (
322351
<KanbanBoardContainer>
323352
<DndErrorModal open={dndErrorModal} handleClose={() => setDndErrorModal(false)} />
@@ -346,11 +375,9 @@ function KanbanBoard(props) {
346375
key={taskId}
347376
/>
348377
<DragDropContext onDragEnd={onDragEnd}>
349-
{columns.map((column) => {
350-
const { status, section, tasks } = column;
351-
352-
return <TaskColumn key={status} cardsList={tasks} moveCard={moveCard} status={status} section={section} />;
353-
})}
378+
{columns.map(({ status, section, tasks }) => (
379+
<TaskColumn key={status} cardsList={tasks} moveCard={moveCard} status={status} section={section} />
380+
))}
354381
</DragDropContext>
355382
</KanbanBoardContainer>
356383
);

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
import { Badge } from '@mui/material';
21
import React from 'react';
3-
import Link from 'next/link';
4-
import { useHotkey } from 'utils/hooks';
52
import { useHotkeys } from 'react-hotkeys-hook';
63
import { useRouter } from 'next/router';
4+
import Link from 'next/link';
5+
6+
import { Badge } from '@mui/material';
7+
8+
import { useHotkey } from 'utils/hooks';
9+
710
import { SafeImage } from '../Image';
8-
import styles, { ButtonIcon, DaoIconWrapper, NoLogoDAO } from './styles';
911
import SidebarTooltip from '../SidebarMainTooltip';
1012

13+
import styles, { ButtonIcon, DaoIconWrapper, NoLogoDAO } from './styles';
14+
1115
const SideBarMainDaoLink = ({ id, name, username, isActive, thumbnailPicture, profilePicture, index }) => {
1216
const showBadge = useHotkey();
1317
const router = useRouter();
1418
const fixedIndex = (index + 1).toString();
1519

16-
useHotkeys(fixedIndex, () => {
17-
router.push(`/organization/${username}/boards?entity=task`);
18-
});
20+
useHotkeys(
21+
fixedIndex,
22+
() => {
23+
if (showBadge) {
24+
router.push(`/organization/${username}/boards?entity=task`);
25+
}
26+
},
27+
[showBadge]
28+
);
1929

2030
return (
2131
<SidebarTooltip key={id} title={name}>

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,15 @@ import { SafeImage } from '../../Common/Image';
161161
import TaskTemplatePicker from './TaskTemplatePicker';
162162
import GR15DEICreateSelector from '../Initiatives/GR15DEI';
163163

164-
export default function CreateEntityModal(props: ICreateEntityModal) {
165-
const { entityType, handleClose, cancel, existingTask, parentTaskId, formValues, status } = props;
164+
export default function CreateEntityModal({
165+
entityType,
166+
handleClose,
167+
cancel,
168+
existingTask,
169+
parentTaskId,
170+
formValues,
171+
status,
172+
}: ICreateEntityModal) {
166173
const [fileUploadLoading, setFileUploadLoading] = useState(false);
167174
const isSubtask =
168175
parentTaskId !== undefined || (existingTask?.parentTaskId !== undefined && existingTask?.parentTaskId !== null);
@@ -287,8 +294,7 @@ export default function CreateEntityModal(props: ICreateEntityModal) {
287294
form.setFieldValue('labelIds', [...form.values.labelIds, newLabelId])
288295
);
289296

290-
const [createGithubIssue, { data: createGithubIssueData, loading: createGithubIssueLoading }] =
291-
useMutation(CREATE_TASK_GITHUB_ISSUE);
297+
const [createGithubIssue, { loading: createGithubIssueLoading }] = useMutation(CREATE_TASK_GITHUB_ISSUE);
292298

293299
const milestonesData = useGetMilestones(form.values.orgId, form.values.podId);
294300

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -551,7 +551,7 @@ export function CreateEntityPrivacySelect(props) {
551551
...props.components,
552552
};
553553

554-
return <SelectUnstyled {...props} components={components} />;
554+
return <SelectUnstyled {...props} components={components} placeholder="hello" />;
555555
}
556556

557557
export const CreateEntityPrivacySelectRender = styled.div`

wondrous-app/components/ListView/index.tsx

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import { useState, useEffect } from 'react';
2+
import { useHotkeys } from 'react-hotkeys-hook';
3+
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
4+
import { useRouter } from 'next/router';
5+
import { useMutation } from '@apollo/client';
6+
17
import usePrevious, { useOrgBoard, usePodBoard, useUserBoard } from 'utils/hooks';
28
import {
39
TASK_STATUS_TODO,
@@ -11,20 +17,17 @@ import {
1117
BOARD_TYPE,
1218
STATUS_CLOSED,
1319
} from 'utils/constants';
14-
import { useState, useEffect } from 'react';
1520
import { useLocation } from 'utils/useLocation';
16-
import TaskViewModal from 'components/Common/TaskViewModal';
1721
import { delQuery, dedupeColumns } from 'utils';
18-
import { useRouter } from 'next/router';
19-
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
20-
import { useMe } from 'components/Auth/withAuth';
2122
import { parseUserPermissionContext } from 'utils/helpers';
22-
import { useMutation } from '@apollo/client';
23+
import { getFirstTask, HOTKEYS, pickHotkeyFunction, TASK_CONTROLS, TASK_ROUTES_FOR_ROUTER } from 'utils/hotkeyHelper';
24+
import apollo from 'services/apollo';
25+
import { UPDATE_TASK_STATUS, UPDATE_TASK_ORDER } from 'graphql/mutations/task';
2326
import { APPROVE_TASK_PROPOSAL, CLOSE_TASK_PROPOSAL } from 'graphql/mutations/taskProposal';
27+
28+
import { useMe } from 'components/Auth/withAuth';
29+
import TaskViewModal from 'components/Common/TaskViewModal';
2430
import { populateOrder } from 'components/Common/KanbanBoard/kanbanBoard';
25-
import { UPDATE_TASK_STATUS, UPDATE_TASK_ORDER } from 'graphql/mutations/task';
26-
import apollo from 'services/apollo';
27-
import BoardLock from 'components/BoardLock';
2831
import { GET_PER_STATUS_TASK_COUNT_FOR_USER_CREATED_TASK } from 'graphql/queries';
2932
import ItemsContainer from './ItemsContainer';
3033

@@ -55,6 +58,7 @@ export default function ListView({ columns, onLoadMore, hasMore, ...props }: Pro
5558
const [closeTaskProposal] = useMutation(CLOSE_TASK_PROPOSAL);
5659
const [updateTaskOrder] = useMutation(UPDATE_TASK_ORDER);
5760
const [dndErrorModal, setDndErrorModal] = useState(false);
61+
const taskId = (location.params.taskProposal ?? location.params.task)?.toString();
5862

5963
const user = useMe();
6064

@@ -65,6 +69,31 @@ export default function ListView({ columns, onLoadMore, hasMore, ...props }: Pro
6569
}
6670
}, [location]);
6771

72+
useHotkeys(
73+
HOTKEYS.ALL_KEYS,
74+
(e) => {
75+
// TODO: update this when the issue from package is fixed.
76+
if (
77+
!TASK_CONTROLS.includes(e.key) ||
78+
!(props.entityType === ENTITIES_TYPES.TASK || !TASK_ROUTES_FOR_ROUTER.includes(router.asPath))
79+
) {
80+
return;
81+
}
82+
if (!taskId && !isModalOpen) {
83+
const currentTaskId = getFirstTask(columns).id;
84+
location.push(`${delQuery(router.asPath)}?task=${currentTaskId}&entity=task&view=list`);
85+
setOpenModal(true);
86+
return;
87+
}
88+
const newTask = pickHotkeyFunction(e.key, columns, taskId);
89+
90+
if (newTask) {
91+
location.push(`${delQuery(router.asPath)}?task=${newTask}&entity=task&view=list`);
92+
}
93+
},
94+
[taskId, columns, isModalOpen]
95+
);
96+
6897
const handleModalClose = () => {
6998
const style = document.body.getAttribute('style');
7099
const top = style.match(/(?<=top: -)(.*?)(?=px)/);
@@ -268,7 +297,7 @@ export default function ListView({ columns, onLoadMore, hasMore, ...props }: Pro
268297
open={isModalOpen}
269298
handleClose={handleModalClose}
270299
isTaskProposal={!!location.params.taskProposal}
271-
taskId={(location.params.taskProposal ?? location.params.task)?.toString()}
300+
taskId={taskId}
272301
/>
273302
<DragDropContext onDragEnd={onDragEnd} handleClose={() => setDndErrorModal(false)}>
274303
{columns.map((column) => {

0 commit comments

Comments
 (0)