Cosmetic refactoring on context menu (#1209)

* Cosmetic refactoring on context menu * Fix lint * Fix lint * Fix lint * Fix lint * Fix lint * Fix lint
2023-08-15 02:34:23 +02:00
parent 444d9a9ca1
commit e3dc3b3e4a
30 changed files with 196 additions and 210 deletions
--- a/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx
+++ b/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx
@ -5,7 +5,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
-import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState';
+import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';

 import { GET_PEOPLE } from '../queries';

-export function useContextMenuEntries() {
+export function usePersonTableContextMenuEntries() {
  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);

  const openCreateActivityRightDrawer =
@ -55,27 +55,28 @@ export function useContextMenuEntries() {
    });
  }

-  return () => {
-    setContextMenuEntries([
-      <ContextMenuEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Note)}
-        key="note"
-      />,
-      <ContextMenuEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Task)}
-        key="task"
-      />,
-      <ContextMenuEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={handleDeleteClick}
-        key="delete"
-      />,
-    ]);
+  return {
+    setContextMenuEntries: () =>
+      setContextMenuEntries([
+        <ContextMenuEntry
+          label="Note"
+          icon={<IconNotes size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Note)}
+          key="note"
+        />,
+        <ContextMenuEntry
+          label="Task"
+          icon={<IconCheckbox size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Task)}
+          key="task"
+        />,
+        <ContextMenuEntry
+          label="Delete"
+          icon={<IconTrash size={16} />}
+          accent="danger"
+          onClick={handleDeleteClick}
+          key="delete"
+        />,
+      ]),
  };
 }
--- a/front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
+++ b/front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
-import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
+import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';
 import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';

 import { GET_PEOPLE } from '../queries';

-export function useActionBarEntries() {
+export function usePersonTableActionBarEntries() {
  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);

  const openCreateActivityRightDrawer =
@ -55,27 +55,28 @@ export function useActionBarEntries() {
    });
  }

-  return () => {
-    setActionBarEntries([
-      <ActionBarEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Note)}
-        key="note"
-      />,
-      <ActionBarEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Task)}
-        key="task"
-      />,
-      <ActionBarEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={handleDeleteClick}
-        key="delte"
-      />,
-    ]);
+  return {
+    setActionBarEntries: () =>
+      setActionBarEntries([
+        <ActionBarEntry
+          label="Note"
+          icon={<IconNotes size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Note)}
+          key="note"
+        />,
+        <ActionBarEntry
+          label="Task"
+          icon={<IconCheckbox size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Task)}
+          key="task"
+        />,
+        <ActionBarEntry
+          label="Delete"
+          icon={<IconTrash size={16} />}
+          type="danger"
+          onClick={handleDeleteClick}
+          key="delete"
+        />,
+      ]),
  };
 }
--- a/front/src/modules/people/table/components/PeopleTable.tsx
+++ b/front/src/modules/people/table/components/PeopleTable.tsx
@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';

 import { peopleViewFields } from '@/people/constants/peopleViewFields';
-import { useActionBarEntries } from '@/people/hooks/useActionBarEntries';
-import { useContextMenuEntries } from '@/people/hooks/useContextMenuEntries';
+import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
+import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -53,8 +53,8 @@ export function PeopleTable() {
    return { AND: filters.map(turnFilterIntoWhereClause) };
  }, [filters]) as any;

-  const setContextMenu = useContextMenuEntries();
-  const setActionBar = useActionBarEntries();
+  const { setContextMenuEntries } = usePersonTableContextMenuEntries();
+  const { setActionBarEntries } = usePersonTableActionBarEntries();

  return (
    <>
@ -64,8 +64,8 @@ export function PeopleTable() {
        orderBy={orderBy.length ? orderBy : defaultOrderBy}
        whereFilters={whereFilters}
        filterDefinitionArray={peopleFilters}
-        setContextMenu={setContextMenu}
-        setActionBar={setActionBar}
+        setContextMenuEntries={setContextMenuEntries}
+        setActionBarEntries={setActionBarEntries}
      />
      <EntityTable
        viewName="All People"