- refactored to use multiple states
This commit is contained in:
brendanlaschke
81
front/src/modules/people/hooks/useOpenActionBar.tsx
Normal file
81
front/src/modules/people/hooks/useOpenActionBar.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
|
||||
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
|
||||
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
|
||||
import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
|
||||
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import {
|
||||
ActivityType,
|
||||
CommentableType,
|
||||
useDeleteManyPersonMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { GET_PEOPLE } from '../queries';
|
||||
|
||||
export function useOpenActionBar() {
|
||||
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
|
||||
|
||||
const openCreateActivityRightDrawer =
|
||||
useOpenCreateActivityDrawerForSelectedRowIds();
|
||||
|
||||
async function handleActivityClick(type: ActivityType) {
|
||||
openCreateActivityRightDrawer(type, CommentableType.Person);
|
||||
}
|
||||
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
|
||||
|
||||
const resetRowSelection = useResetTableRowSelection();
|
||||
|
||||
const [deleteManyPerson] = useDeleteManyPersonMutation({
|
||||
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
});
|
||||
|
||||
async function handleDeleteClick() {
|
||||
const rowIdsToDelete = selectedRowIds;
|
||||
|
||||
resetRowSelection();
|
||||
|
||||
await deleteManyPerson({
|
||||
variables: {
|
||||
ids: rowIdsToDelete,
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteManyPerson: {
|
||||
count: rowIdsToDelete.length,
|
||||
},
|
||||
},
|
||||
update: () => {
|
||||
setTableRowIds(
|
||||
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
setActionBarEntries([
|
||||
<ActionBarEntry
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleActivityClick(ActivityType.Note)}
|
||||
/>,
|
||||
<ActionBarEntry
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleActivityClick(ActivityType.Task)}
|
||||
/>,
|
||||
<ActionBarEntry
|
||||
label="Delete"
|
||||
icon={<IconTrash size={16} />}
|
||||
type="danger"
|
||||
onClick={handleDeleteClick}
|
||||
/>,
|
||||
]);
|
||||
};
|
||||
}
|
||||
81
front/src/modules/people/hooks/useOpenContextMenu.tsx
Normal file
81
front/src/modules/people/hooks/useOpenContextMenu.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
|
||||
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
|
||||
import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState';
|
||||
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import {
|
||||
ActivityType,
|
||||
CommentableType,
|
||||
useDeleteManyPersonMutation,
|
||||
} from '~/generated/graphql';
|
||||
|
||||
import { GET_PEOPLE } from '../queries';
|
||||
|
||||
export function useOpenContextMenu() {
|
||||
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
|
||||
|
||||
const openCreateActivityRightDrawer =
|
||||
useOpenCreateActivityDrawerForSelectedRowIds();
|
||||
|
||||
async function handleActivityClick(type: ActivityType) {
|
||||
openCreateActivityRightDrawer(type, CommentableType.Person);
|
||||
}
|
||||
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
|
||||
|
||||
const resetRowSelection = useResetTableRowSelection();
|
||||
|
||||
const [deleteManyPerson] = useDeleteManyPersonMutation({
|
||||
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
});
|
||||
|
||||
async function handleDeleteClick() {
|
||||
const rowIdsToDelete = selectedRowIds;
|
||||
|
||||
resetRowSelection();
|
||||
|
||||
await deleteManyPerson({
|
||||
variables: {
|
||||
ids: rowIdsToDelete,
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteManyPerson: {
|
||||
count: rowIdsToDelete.length,
|
||||
},
|
||||
},
|
||||
update: () => {
|
||||
setTableRowIds(
|
||||
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
setContextMenuEntries([
|
||||
<ContextMenuEntry
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleActivityClick(ActivityType.Note)}
|
||||
/>,
|
||||
<ContextMenuEntry
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleActivityClick(ActivityType.Task)}
|
||||
/>,
|
||||
<ContextMenuEntry
|
||||
label="Delete"
|
||||
icon={<IconTrash size={16} />}
|
||||
type="danger"
|
||||
onClick={handleDeleteClick}
|
||||
/>,
|
||||
]);
|
||||
};
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
|
||||
import { ActivityType, CommentableType } from '~/generated/graphql';
|
||||
|
||||
export function TableActionBarButtonCreateActivityPeople() {
|
||||
const openCreateActivityRightDrawer =
|
||||
useOpenCreateActivityDrawerForSelectedRowIds();
|
||||
|
||||
async function handleButtonClick(type: ActivityType) {
|
||||
openCreateActivityRightDrawer(type, CommentableType.Person);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EntityTableActionBarButton
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Note)}
|
||||
/>
|
||||
<EntityTableActionBarButton
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Task)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { GET_PEOPLE } from '@/people/queries';
|
||||
import { IconTrash } from '@/ui/icon/index';
|
||||
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
|
||||
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
|
||||
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import { useDeleteManyPersonMutation } from '~/generated/graphql';
|
||||
|
||||
export function TableActionBarButtonDeletePeople() {
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
|
||||
|
||||
const resetRowSelection = useResetTableRowSelection();
|
||||
|
||||
const [deleteManyPerson] = useDeleteManyPersonMutation({
|
||||
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
});
|
||||
|
||||
async function handleDeleteClick() {
|
||||
const rowIdsToDelete = selectedRowIds;
|
||||
|
||||
resetRowSelection();
|
||||
|
||||
await deleteManyPerson({
|
||||
variables: {
|
||||
ids: rowIdsToDelete,
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteManyPerson: {
|
||||
count: rowIdsToDelete.length,
|
||||
},
|
||||
},
|
||||
update: () => {
|
||||
setTableRowIds(
|
||||
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<EntityTableActionBarButton
|
||||
label="Delete"
|
||||
icon={<IconTrash size={16} />}
|
||||
type="warning"
|
||||
onClick={handleDeleteClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { GET_PEOPLE } from '@/people/queries';
|
||||
import { IconTrash } from '@/ui/icon/index';
|
||||
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
|
||||
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
|
||||
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
|
||||
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
|
||||
import { useDeleteManyPersonMutation } from '~/generated/graphql';
|
||||
|
||||
export function TableContextMenuEntryDeletePeople() {
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
|
||||
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
|
||||
|
||||
const resetRowSelection = useResetTableRowSelection();
|
||||
|
||||
const [deleteManyPerson] = useDeleteManyPersonMutation({
|
||||
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
|
||||
});
|
||||
|
||||
async function handleDeleteClick() {
|
||||
const rowIdsToDelete = selectedRowIds;
|
||||
|
||||
resetRowSelection();
|
||||
|
||||
await deleteManyPerson({
|
||||
variables: {
|
||||
ids: rowIdsToDelete,
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
deleteManyPerson: {
|
||||
count: rowIdsToDelete.length,
|
||||
},
|
||||
},
|
||||
update: () => {
|
||||
setTableRowIds(
|
||||
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<EntityTableContextMenuEntry
|
||||
label="Delete"
|
||||
icon={<IconTrash size={16} />}
|
||||
type="warning"
|
||||
onClick={handleDeleteClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
|
||||
|
||||
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
|
||||
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
|
||||
import { ActivityType, CommentableType } from '~/generated/graphql';
|
||||
|
||||
export function TableContextMenuEntryCreateActivityPeople() {
|
||||
const openCreateActivityRightDrawer =
|
||||
useOpenCreateActivityDrawerForSelectedRowIds();
|
||||
|
||||
async function handleButtonClick(type: ActivityType) {
|
||||
openCreateActivityRightDrawer(type, CommentableType.Person);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EntityTableContextMenuEntry
|
||||
label="Note"
|
||||
icon={<IconNotes size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Note)}
|
||||
/>
|
||||
<EntityTableContextMenuEntry
|
||||
label="Task"
|
||||
icon={<IconCheckbox size={16} />}
|
||||
onClick={() => handleButtonClick(ActivityType.Task)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user