Add task to action bar (#1153)

- add task to action bar

front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -37,7 +37,7 @@ export function useOpenCreateActivityDrawer() {
 
   return function openCreateActivityDrawer(
     type: ActivityType,
-    entity?: CommentableEntity,
+    entities?: CommentableEntity[],
   ) {
     const now = new Date().toISOString();
 
@@ -52,23 +52,19 @@ export function useOpenCreateActivityDrawer() {
           type: type,
           activityTargets: {
             createMany: {
-              data: entity
-                ? [
-                    {
-                      commentableId: entity.id,
-                      commentableType: entity.type,
-                      companyId:
-                        entity.type === CommentableType.Company
-                          ? entity.id
-                          : null,
-                      personId:
-                        entity.type === CommentableType.Person
-                          ? entity.id
-                          : null,
-                      id: v4(),
-                      createdAt: now,
-                    },
-                  ]
+              data: entities
+                ? entities.map((entity) => ({
+                    commentableId: entity.id,
+                    commentableType: entity.type,
+                    companyId:
+                      entity.type === CommentableType.Company
+                        ? entity.id
+                        : null,
+                    personId:
+                      entity.type === CommentableType.Person ? entity.id : null,
+                    id: v4(),
+                    createdAt: now,
+                  }))
                 : [],
               skipDuplicates: true,
             },
@@ -85,7 +81,7 @@ export function useOpenCreateActivityDrawer() {
       onCompleted(data) {
         setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
         setViewableActivityId(data.createOneActivity.id);
-        setCommentableEntityArray(entity ? [entity] : []);
+        setCommentableEntityArray(entities ?? []);
         openRightDrawer(RightDrawerPages.CreateActivity);
       },
     });

front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -1,41 +1,19 @@
-import { getOperationName } from '@apollo/client/utilities/graphql/getFromAST';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { v4 } from 'uuid';
+import { useRecoilValue } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
-import { GET_COMPANIES } from '@/companies/queries';
-import { GET_PEOPLE } from '@/people/queries';
-import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import {
-  ActivityType,
-  CommentableType,
-  useCreateActivityMutation,
-} from '~/generated/graphql';
+import { ActivityType, CommentableType } from '~/generated/graphql';
 
-import { GET_ACTIVITIES_BY_TARGETS, GET_ACTIVITY } from '../queries';
-import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
-import { viewableActivityIdState } from '../states/viewableActivityIdState';
 import { CommentableEntity } from '../types/CommentableEntity';
 
+import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
+
 export function useOpenCreateActivityDrawerForSelectedRowIds() {
-  const { openRightDrawer } = useRightDrawer();
-  const [createActivityMutation] = useCreateActivityMutation();
-  const currentUser = useRecoilValue(currentUserState);
-  const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
-
-  const setHotkeyScope = useSetHotkeyScope();
-
-  const [, setCommentableEntityArray] = useRecoilState(
-    commentableEntityArrayState,
-  );
-
   const selectedEntityIds = useRecoilValue(selectedRowIdsSelector);
 
+  const openCreateActivityDrawer = useOpenCreateActivityDrawer();
+
   return function openCreateCommentDrawerForSelectedRowIds(
+    type: ActivityType,
     entityType: CommentableType,
   ) {
     const commentableEntityArray: CommentableEntity[] = selectedEntityIds.map(
@@ -44,45 +22,6 @@ export function useOpenCreateActivityDrawerForSelectedRowIds() {
         id,
       }),
     );
-    const now = new Date().toISOString();
-
-    createActivityMutation({
-      variables: {
-        data: {
-          id: v4(),
-          createdAt: now,
-          updatedAt: now,
-          author: { connect: { id: currentUser?.id ?? '' } },
-          type: ActivityType.Note,
-          activityTargets: {
-            createMany: {
-              data: commentableEntityArray.map((entity) => ({
-                commentableId: entity.id,
-                commentableType: entity.type,
-                id: v4(),
-                createdAt: new Date().toISOString(),
-                companyId:
-                  entity.type === CommentableType.Company ? entity.id : null,
-                personId:
-                  entity.type === CommentableType.Person ? entity.id : null,
-              })),
-              skipDuplicates: true,
-            },
-          },
-        },
-      },
-      refetchQueries: [
-        getOperationName(GET_COMPANIES) ?? '',
-        getOperationName(GET_PEOPLE) ?? '',
-        getOperationName(GET_ACTIVITY) ?? '',
-        getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? '',
-      ],
-      onCompleted(data) {
-        setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-        setViewableActivityId(data.createOneActivity.id);
-        setCommentableEntityArray(commentableEntityArray);
-        openRightDrawer(RightDrawerPages.CreateActivity);
-      },
-    });
+    openCreateActivityDrawer(type, commentableEntityArray);
   };
 }

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -121,8 +121,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
         <StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
         <StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
         <ActivityCreateButton
-          onNoteClick={() => openCreateActivity(ActivityType.Note, entity)}
-          onTaskClick={() => openCreateActivity(ActivityType.Task, entity)}
+          onNoteClick={() => openCreateActivity(ActivityType.Note, [entity])}
+          onTaskClick={() => openCreateActivity(ActivityType.Task, [entity])}
         />
       </StyledTimelineEmptyContainer>
     );
@@ -132,8 +132,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
     <StyledMainContainer>
       <StyledTopActionBar>
         <ActivityCreateButton
-          onNoteClick={() => openCreateActivity(ActivityType.Note, entity)}
-          onTaskClick={() => openCreateActivity(ActivityType.Task, entity)}
+          onNoteClick={() => openCreateActivity(ActivityType.Note, [entity])}
+          onTaskClick={() => openCreateActivity(ActivityType.Task, [entity])}
         />
       </StyledTopActionBar>
       <StyledTimelineContainer>

front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx

@@ -1,14 +1,24 @@
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
-import { CommentableType } from '~/generated/graphql';
+import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
+import { ActivityType, CommentableType } from '~/generated/graphql';
 
 export function TableActionBarButtonCreateActivityCompany() {
   const openCreateActivityRightDrawer =
     useOpenCreateActivityDrawerForSelectedRowIds();
 
-  async function handleButtonClick() {
-    openCreateActivityRightDrawer(CommentableType.Company);
+  async function handleButtonClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.Company);
   }
 
-  return <TableActionBarButtonToggleComments onClick={handleButtonClick} />;
+  return (
+    <>
+      <TableActionBarButtonToggleComments
+        onClick={() => handleButtonClick(ActivityType.Note)}
+      />
+      <TableActionBarButtonToggleTasks
+        onClick={() => handleButtonClick(ActivityType.Task)}
+      />
+    </>
+  );
 }

front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx

@@ -1,14 +1,24 @@
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
-import { CommentableType } from '~/generated/graphql';
+import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
+import { ActivityType, CommentableType } from '~/generated/graphql';
 
 export function TableActionBarButtonCreateActivityPeople() {
   const openCreateActivityRightDrawer =
     useOpenCreateActivityDrawerForSelectedRowIds();
 
-  async function handleButtonClick() {
-    openCreateActivityRightDrawer(CommentableType.Person);
+  async function handleButtonClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.Person);
   }
 
-  return <TableActionBarButtonToggleComments onClick={handleButtonClick} />;
+  return (
+    <>
+      <TableActionBarButtonToggleComments
+        onClick={() => handleButtonClick(ActivityType.Note)}
+      />
+      <TableActionBarButtonToggleTasks
+        onClick={() => handleButtonClick(ActivityType.Task)}
+      />
+    </>
+  );
 }

front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenTasks.tsx

@@ -0,0 +1,17 @@
+import { IconCheckbox } from '@/ui/icon/index';
+
+import { EntityTableActionBarButton } from './EntityTableActionBarButton';
+
+type OwnProps = {
+  onClick: () => void;
+};
+
+export function TableActionBarButtonToggleTasks({ onClick }: OwnProps) {
+  return (
+    <EntityTableActionBarButton
+      label="Task"
+      icon={<IconCheckbox size={16} />}
+      onClick={onClick}
+    />
+  );
+}

front/src/sync-hooks/AuthAutoRouter.tsx

@@ -186,14 +186,22 @@ export function AuthAutoRouter() {
             label: 'Create Task',
             type: CommandType.Create,
             icon: <IconCheckbox />,
-            onCommandClick: () => openCreateActivity(ActivityType.Task, entity),
+            onCommandClick: () =>
+              openCreateActivity(
+                ActivityType.Task,
+                entity ? [entity] : undefined,
+              ),
           },
           {
             to: '',
             label: 'Create Note',
             type: CommandType.Create,
             icon: <IconNotes />,
-            onCommandClick: () => openCreateActivity(ActivityType.Note, entity),
+            onCommandClick: () =>
+              openCreateActivity(
+                ActivityType.Note,
+                entity ? [entity] : undefined,
+              ),
           },
         ]);
         break;
@@ -212,14 +220,22 @@ export function AuthAutoRouter() {
             label: 'Create Task',
             type: CommandType.Create,
             icon: <IconCheckbox />,
-            onCommandClick: () => openCreateActivity(ActivityType.Task, entity),
+            onCommandClick: () =>
+              openCreateActivity(
+                ActivityType.Task,
+                entity ? [entity] : undefined,
+              ),
           },
           {
             to: '',
             label: 'Create Note',
             type: CommandType.Create,
             icon: <IconNotes />,
-            onCommandClick: () => openCreateActivity(ActivityType.Note, entity),
+            onCommandClick: () =>
+              openCreateActivity(
+                ActivityType.Note,
+                entity ? [entity] : undefined,
+              ),
           },
         ]);
         break;