Favorites Drag and Drop Implementation (#8979)
Adds drag and drop functionality for favorites management, allowing users to: - Move favorites between folders - Move favorites from folders to orphan section - Move orphan favorites into folders Known Issues: Drop detection at folder boundaries requires spacing workaround
This commit is contained in:
nitin
@ -25,7 +25,7 @@ export const initialFavorites = [
|
||||
person: { id: '1', name: 'John Doe' },
|
||||
company: { id: '2', name: 'ABC Corp' },
|
||||
workspaceMemberId: '1',
|
||||
favoriteFolderId: undefined,
|
||||
favoriteFolderId: '1',
|
||||
},
|
||||
{
|
||||
__typename: 'Favorite',
|
||||
@ -40,7 +40,7 @@ export const initialFavorites = [
|
||||
person: { id: '3', name: 'Jane Doe' },
|
||||
company: { id: '4', name: 'Company Test' },
|
||||
workspaceMemberId: '1',
|
||||
favoriteFolderId: undefined,
|
||||
favoriteFolderId: '1',
|
||||
|
||||
},
|
||||
{
|
||||
@ -54,7 +54,7 @@ export const initialFavorites = [
|
||||
link: 'example.com',
|
||||
recordId: '1',
|
||||
workspaceMemberId: '1',
|
||||
favoriteFolderId: undefined,
|
||||
favoriteFolderId: '1',
|
||||
},
|
||||
];
|
||||
|
||||
@ -69,7 +69,7 @@ export const sortedFavorites = [
|
||||
link: '/object/person/1',
|
||||
objectNameSingular: 'person',
|
||||
workspaceMemberId: '1',
|
||||
favoriteFolderId: undefined,
|
||||
favoriteFolderId: '1',
|
||||
__typename: 'Favorite',
|
||||
},
|
||||
{
|
||||
@ -82,7 +82,7 @@ export const sortedFavorites = [
|
||||
link: '/object/person/3',
|
||||
objectNameSingular: 'person',
|
||||
workspaceMemberId: '1',
|
||||
favoriteFolderId: undefined,
|
||||
favoriteFolderId: '1',
|
||||
__typename: 'Favorite',
|
||||
},
|
||||
{
|
||||
@ -94,12 +94,298 @@ export const sortedFavorites = [
|
||||
link: 'example.com',
|
||||
recordId: '1',
|
||||
avatarType: 'squared',
|
||||
favoriteFolderId: undefined,
|
||||
favoriteFolderId: '1',
|
||||
workspaceMemberId: '1',
|
||||
__typename: 'Favorite',
|
||||
},
|
||||
];
|
||||
|
||||
const UPDATE_ONE_FAVORITE_MUTATION = gql`
|
||||
mutation UpdateOneFavorite(
|
||||
$idToUpdate: ID!
|
||||
$input: FavoriteUpdateInput!
|
||||
) {
|
||||
updateFavorite(id: $idToUpdate, data: $input) {
|
||||
__typename
|
||||
company {
|
||||
__typename
|
||||
accountOwnerId
|
||||
address {
|
||||
addressStreet1
|
||||
addressStreet2
|
||||
addressCity
|
||||
addressState
|
||||
addressCountry
|
||||
addressPostcode
|
||||
addressLat
|
||||
addressLng
|
||||
}
|
||||
annualRecurringRevenue {
|
||||
amountMicros
|
||||
currencyCode
|
||||
}
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
domainName {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
employees
|
||||
id
|
||||
idealCustomerProfile
|
||||
introVideo {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
linkedinLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
name
|
||||
position
|
||||
tagline
|
||||
updatedAt
|
||||
visaSponsorship
|
||||
workPolicy
|
||||
xLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
}
|
||||
companyId
|
||||
createdAt
|
||||
deletedAt
|
||||
favoriteFolder {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
position
|
||||
updatedAt
|
||||
}
|
||||
favoriteFolderId
|
||||
id
|
||||
note {
|
||||
__typename
|
||||
body
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
id
|
||||
position
|
||||
title
|
||||
updatedAt
|
||||
}
|
||||
noteId
|
||||
opportunity {
|
||||
__typename
|
||||
amount {
|
||||
amountMicros
|
||||
currencyCode
|
||||
}
|
||||
closeDate
|
||||
companyId
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
pointOfContactId
|
||||
position
|
||||
stage
|
||||
updatedAt
|
||||
}
|
||||
opportunityId
|
||||
person {
|
||||
__typename
|
||||
avatarUrl
|
||||
city
|
||||
companyId
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
emails {
|
||||
primaryEmail
|
||||
additionalEmails
|
||||
}
|
||||
id
|
||||
intro
|
||||
jobTitle
|
||||
linkedinLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
name {
|
||||
firstName
|
||||
lastName
|
||||
}
|
||||
performanceRating
|
||||
phones {
|
||||
primaryPhoneNumber
|
||||
primaryPhoneCountryCode
|
||||
additionalPhones
|
||||
}
|
||||
position
|
||||
updatedAt
|
||||
whatsapp {
|
||||
primaryPhoneNumber
|
||||
primaryPhoneCountryCode
|
||||
additionalPhones
|
||||
}
|
||||
workPreference
|
||||
xLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
}
|
||||
personId
|
||||
position
|
||||
rocket {
|
||||
__typename
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
position
|
||||
updatedAt
|
||||
}
|
||||
rocketId
|
||||
task {
|
||||
__typename
|
||||
assigneeId
|
||||
body
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
dueAt
|
||||
id
|
||||
position
|
||||
status
|
||||
title
|
||||
updatedAt
|
||||
}
|
||||
taskId
|
||||
updatedAt
|
||||
view {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
icon
|
||||
id
|
||||
isCompact
|
||||
kanbanFieldMetadataId
|
||||
key
|
||||
name
|
||||
objectMetadataId
|
||||
position
|
||||
type
|
||||
updatedAt
|
||||
}
|
||||
viewId
|
||||
workflow {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
id
|
||||
lastPublishedVersionId
|
||||
name
|
||||
position
|
||||
statuses
|
||||
updatedAt
|
||||
}
|
||||
workflowId
|
||||
workflowRun {
|
||||
__typename
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
endedAt
|
||||
id
|
||||
name
|
||||
output
|
||||
position
|
||||
startedAt
|
||||
status
|
||||
updatedAt
|
||||
workflowId
|
||||
workflowVersionId
|
||||
}
|
||||
workflowRunId
|
||||
workflowVersion {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
position
|
||||
status
|
||||
steps
|
||||
trigger
|
||||
updatedAt
|
||||
workflowId
|
||||
}
|
||||
workflowVersionId
|
||||
workspaceMember {
|
||||
__typename
|
||||
avatarUrl
|
||||
colorScheme
|
||||
createdAt
|
||||
dateFormat
|
||||
deletedAt
|
||||
id
|
||||
locale
|
||||
name {
|
||||
firstName
|
||||
lastName
|
||||
}
|
||||
timeFormat
|
||||
timeZone
|
||||
updatedAt
|
||||
userEmail
|
||||
userId
|
||||
}
|
||||
workspaceMemberId
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const mocks = [
|
||||
{
|
||||
request: {
|
||||
@ -388,7 +674,7 @@ export const mocks = [
|
||||
variables: {
|
||||
input: {
|
||||
personId: favoriteTargetObjectId,
|
||||
position: 3,
|
||||
position: 1,
|
||||
workspaceMemberId: '1',
|
||||
favoriteFolderId: undefined,
|
||||
id: mockId,
|
||||
@ -430,291 +716,7 @@ export const mocks = [
|
||||
},
|
||||
{
|
||||
request: {
|
||||
query: gql`
|
||||
mutation UpdateOneFavorite(
|
||||
$idToUpdate: ID!
|
||||
$input: FavoriteUpdateInput!
|
||||
) {
|
||||
updateFavorite(id: $idToUpdate, data: $input) {
|
||||
__typename
|
||||
company {
|
||||
__typename
|
||||
accountOwnerId
|
||||
address {
|
||||
addressStreet1
|
||||
addressStreet2
|
||||
addressCity
|
||||
addressState
|
||||
addressCountry
|
||||
addressPostcode
|
||||
addressLat
|
||||
addressLng
|
||||
}
|
||||
annualRecurringRevenue {
|
||||
amountMicros
|
||||
currencyCode
|
||||
}
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
domainName {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
employees
|
||||
id
|
||||
idealCustomerProfile
|
||||
introVideo {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
linkedinLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
name
|
||||
position
|
||||
tagline
|
||||
updatedAt
|
||||
visaSponsorship
|
||||
workPolicy
|
||||
xLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
}
|
||||
companyId
|
||||
createdAt
|
||||
deletedAt
|
||||
favoriteFolder {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
position
|
||||
updatedAt
|
||||
}
|
||||
favoriteFolderId
|
||||
id
|
||||
note {
|
||||
__typename
|
||||
body
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
id
|
||||
position
|
||||
title
|
||||
updatedAt
|
||||
}
|
||||
noteId
|
||||
opportunity {
|
||||
__typename
|
||||
amount {
|
||||
amountMicros
|
||||
currencyCode
|
||||
}
|
||||
closeDate
|
||||
companyId
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
pointOfContactId
|
||||
position
|
||||
stage
|
||||
updatedAt
|
||||
}
|
||||
opportunityId
|
||||
person {
|
||||
__typename
|
||||
avatarUrl
|
||||
city
|
||||
companyId
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
emails {
|
||||
primaryEmail
|
||||
additionalEmails
|
||||
}
|
||||
id
|
||||
intro
|
||||
jobTitle
|
||||
linkedinLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
name {
|
||||
firstName
|
||||
lastName
|
||||
}
|
||||
performanceRating
|
||||
phones {
|
||||
primaryPhoneNumber
|
||||
primaryPhoneCountryCode
|
||||
additionalPhones
|
||||
}
|
||||
position
|
||||
updatedAt
|
||||
whatsapp {
|
||||
primaryPhoneNumber
|
||||
primaryPhoneCountryCode
|
||||
additionalPhones
|
||||
}
|
||||
workPreference
|
||||
xLink {
|
||||
primaryLinkUrl
|
||||
primaryLinkLabel
|
||||
secondaryLinks
|
||||
}
|
||||
}
|
||||
personId
|
||||
position
|
||||
rocket {
|
||||
__typename
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
position
|
||||
updatedAt
|
||||
}
|
||||
rocketId
|
||||
task {
|
||||
__typename
|
||||
assigneeId
|
||||
body
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
dueAt
|
||||
id
|
||||
position
|
||||
status
|
||||
title
|
||||
updatedAt
|
||||
}
|
||||
taskId
|
||||
updatedAt
|
||||
view {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
icon
|
||||
id
|
||||
isCompact
|
||||
kanbanFieldMetadataId
|
||||
key
|
||||
name
|
||||
objectMetadataId
|
||||
position
|
||||
type
|
||||
updatedAt
|
||||
}
|
||||
viewId
|
||||
workflow {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
id
|
||||
lastPublishedVersionId
|
||||
name
|
||||
position
|
||||
statuses
|
||||
updatedAt
|
||||
}
|
||||
workflowId
|
||||
workflowRun {
|
||||
__typename
|
||||
createdAt
|
||||
createdBy {
|
||||
source
|
||||
workspaceMemberId
|
||||
name
|
||||
}
|
||||
deletedAt
|
||||
endedAt
|
||||
id
|
||||
name
|
||||
output
|
||||
position
|
||||
startedAt
|
||||
status
|
||||
updatedAt
|
||||
workflowId
|
||||
workflowVersionId
|
||||
}
|
||||
workflowRunId
|
||||
workflowVersion {
|
||||
__typename
|
||||
createdAt
|
||||
deletedAt
|
||||
id
|
||||
name
|
||||
position
|
||||
status
|
||||
steps
|
||||
trigger
|
||||
updatedAt
|
||||
workflowId
|
||||
}
|
||||
workflowVersionId
|
||||
workspaceMember {
|
||||
__typename
|
||||
avatarUrl
|
||||
colorScheme
|
||||
createdAt
|
||||
dateFormat
|
||||
deletedAt
|
||||
id
|
||||
locale
|
||||
name {
|
||||
firstName
|
||||
lastName
|
||||
}
|
||||
timeFormat
|
||||
timeZone
|
||||
updatedAt
|
||||
userEmail
|
||||
userId
|
||||
}
|
||||
workspaceMemberId
|
||||
}
|
||||
}
|
||||
`,
|
||||
query: UPDATE_ONE_FAVORITE_MUTATION,
|
||||
variables: {
|
||||
idToUpdate: '1',
|
||||
input: {
|
||||
@ -726,12 +728,60 @@ export const mocks = [
|
||||
data: {
|
||||
updateFavorite: {
|
||||
__typename: 'Favorite',
|
||||
id: favoriteId,
|
||||
id: favoriteId,
|
||||
position: 2,
|
||||
},
|
||||
},
|
||||
})),
|
||||
},
|
||||
|
||||
// Mock for folder move
|
||||
{
|
||||
request: {
|
||||
query: UPDATE_ONE_FAVORITE_MUTATION,
|
||||
variables: {
|
||||
idToUpdate: '1',
|
||||
input: {
|
||||
position: 0,
|
||||
favoriteFolderId: '2',
|
||||
},
|
||||
},
|
||||
},
|
||||
result: jest.fn(() => ({
|
||||
data: {
|
||||
updateFavorite: {
|
||||
__typename: 'Favorite',
|
||||
id: favoriteId,
|
||||
position: 0,
|
||||
favoriteFolderId: '2',
|
||||
},
|
||||
},
|
||||
})),
|
||||
},
|
||||
|
||||
// Mock for orphan favorites
|
||||
{
|
||||
request: {
|
||||
query: UPDATE_ONE_FAVORITE_MUTATION,
|
||||
variables: {
|
||||
idToUpdate: '1',
|
||||
input: {
|
||||
position: 0,
|
||||
favoriteFolderId: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
result: jest.fn(() => ({
|
||||
data: {
|
||||
updateFavorite: {
|
||||
__typename: 'Favorite',
|
||||
id: favoriteId,
|
||||
position: 0,
|
||||
favoriteFolderId: null,
|
||||
},
|
||||
},
|
||||
})),
|
||||
},
|
||||
];
|
||||
|
||||
export const mockWorkspaceMember = {
|
||||
|
||||
@ -0,0 +1,174 @@
|
||||
import { DropResult, ResponderProvided } from '@hello-pangea/dnd';
|
||||
import { renderHook, waitFor } from '@testing-library/react';
|
||||
import { act } from 'react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { FAVORITE_DROPPABLE_IDS } from '@/favorites/constants/FavoriteDroppableIds';
|
||||
import { useHandleFavoriteDragAndDrop } from '@/favorites/hooks/useHandleFavoriteDragAndDrop';
|
||||
import { createFolderDroppableId } from '@/favorites/utils/createFolderDroppableId';
|
||||
import { createFolderHeaderDroppableId } from '@/favorites/utils/createFolderHeaderDroppableId';
|
||||
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
||||
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
|
||||
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
|
||||
|
||||
import {
|
||||
initialFavorites,
|
||||
mockWorkspaceMember,
|
||||
mocks,
|
||||
} from '../__mocks__/useFavorites';
|
||||
|
||||
jest.mock('@/object-record/hooks/useFindManyRecords', () => ({
|
||||
useFindManyRecords: () => ({ records: initialFavorites }),
|
||||
}));
|
||||
|
||||
const Wrapper = getJestMetadataAndApolloMocksWrapper({
|
||||
apolloMocks: mocks,
|
||||
});
|
||||
|
||||
describe('useHandleFavoriteDragAndDrop', () => {
|
||||
const mockResponderProvided: ResponderProvided = {
|
||||
announce: jest.fn(),
|
||||
};
|
||||
|
||||
const setupHook = () => {
|
||||
return renderHook(
|
||||
() => {
|
||||
const setCurrentWorkspaceMember = useSetRecoilState(
|
||||
currentWorkspaceMemberState,
|
||||
);
|
||||
const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
|
||||
|
||||
setCurrentWorkspaceMember(mockWorkspaceMember);
|
||||
setMetadataItems(generatedMockObjectMetadataItems);
|
||||
|
||||
return {
|
||||
hook: useHandleFavoriteDragAndDrop(),
|
||||
};
|
||||
},
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
};
|
||||
|
||||
it('should not update when destination is null', () => {
|
||||
const { result } = setupHook();
|
||||
|
||||
act(() => {
|
||||
result.current.hook.handleFavoriteDragAndDrop(
|
||||
{
|
||||
source: { index: 0, droppableId: createFolderDroppableId('1') },
|
||||
destination: null,
|
||||
draggableId: '1',
|
||||
} as DropResult,
|
||||
mockResponderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
expect(mocks[2].result).not.toHaveBeenCalled();
|
||||
expect(mocks[3].result).not.toHaveBeenCalled();
|
||||
expect(mocks[4].result).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not update when destination is same as source', () => {
|
||||
const { result } = setupHook();
|
||||
const folderOneId = createFolderDroppableId('1');
|
||||
|
||||
act(() => {
|
||||
result.current.hook.handleFavoriteDragAndDrop(
|
||||
{
|
||||
source: { index: 0, droppableId: folderOneId },
|
||||
destination: { index: 0, droppableId: folderOneId },
|
||||
draggableId: '1',
|
||||
} as DropResult,
|
||||
mockResponderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
expect(mocks[2].result).not.toHaveBeenCalled();
|
||||
expect(mocks[3].result).not.toHaveBeenCalled();
|
||||
expect(mocks[4].result).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should reorder within same folder', async () => {
|
||||
const { result } = setupHook();
|
||||
const folderOneId = createFolderDroppableId('1');
|
||||
|
||||
act(() => {
|
||||
result.current.hook.handleFavoriteDragAndDrop(
|
||||
{
|
||||
source: { index: 0, droppableId: folderOneId },
|
||||
destination: { index: 2, droppableId: folderOneId },
|
||||
draggableId: '1',
|
||||
} as DropResult,
|
||||
mockResponderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mocks[2].result).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should move to another folder', async () => {
|
||||
const { result } = setupHook();
|
||||
|
||||
act(() => {
|
||||
result.current.hook.handleFavoriteDragAndDrop(
|
||||
{
|
||||
source: { index: 0, droppableId: createFolderDroppableId('1') },
|
||||
destination: { index: 0, droppableId: createFolderDroppableId('2') },
|
||||
draggableId: '1',
|
||||
} as DropResult,
|
||||
mockResponderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mocks[3].result).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should move to orphan favorites', async () => {
|
||||
const { result } = setupHook();
|
||||
|
||||
act(() => {
|
||||
result.current.hook.handleFavoriteDragAndDrop(
|
||||
{
|
||||
source: { index: 0, droppableId: createFolderDroppableId('1') },
|
||||
destination: {
|
||||
index: 0,
|
||||
droppableId: FAVORITE_DROPPABLE_IDS.ORPHAN_FAVORITES,
|
||||
},
|
||||
draggableId: '1',
|
||||
} as DropResult,
|
||||
mockResponderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mocks[4].result).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle dropping into folder header', async () => {
|
||||
const { result } = setupHook();
|
||||
|
||||
act(() => {
|
||||
result.current.hook.handleFavoriteDragAndDrop(
|
||||
{
|
||||
source: { index: 0, droppableId: createFolderDroppableId('1') },
|
||||
destination: {
|
||||
index: 0,
|
||||
droppableId: createFolderHeaderDroppableId('2'),
|
||||
},
|
||||
draggableId: '1',
|
||||
} as DropResult,
|
||||
mockResponderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mocks[3].result).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,67 +0,0 @@
|
||||
import { DropResult, ResponderProvided } from '@hello-pangea/dnd';
|
||||
import { renderHook, waitFor } from '@testing-library/react';
|
||||
import { act } from 'react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { useReorderFavorite } from '@/favorites/hooks/useReorderFavorite';
|
||||
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
||||
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
|
||||
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
|
||||
import {
|
||||
initialFavorites,
|
||||
mockWorkspaceMember,
|
||||
mocks,
|
||||
} from '../__mocks__/useFavorites';
|
||||
|
||||
jest.mock('@/object-record/hooks/useFindManyRecords', () => ({
|
||||
useFindManyRecords: () => ({ records: initialFavorites }),
|
||||
}));
|
||||
|
||||
const Wrapper = getJestMetadataAndApolloMocksWrapper({
|
||||
apolloMocks: mocks,
|
||||
});
|
||||
|
||||
describe('useReorderFavorite', () => {
|
||||
it('should handle reordering favorites successfully', async () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const setCurrentWorkspaceMember = useSetRecoilState(
|
||||
currentWorkspaceMemberState,
|
||||
);
|
||||
setCurrentWorkspaceMember(mockWorkspaceMember);
|
||||
|
||||
const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
|
||||
setMetadataItems(generatedMockObjectMetadataItems);
|
||||
|
||||
return useReorderFavorite();
|
||||
},
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const dragAndDropResult: DropResult = {
|
||||
source: { index: 0, droppableId: 'droppableId' },
|
||||
destination: { index: 2, droppableId: 'droppableId' },
|
||||
combine: null,
|
||||
mode: 'FLUID',
|
||||
draggableId: '1',
|
||||
type: 'type',
|
||||
reason: 'DROP',
|
||||
};
|
||||
|
||||
const responderProvided: ResponderProvided = {
|
||||
announce: () => {},
|
||||
};
|
||||
|
||||
result.current.handleReorderFavorite(
|
||||
dragAndDropResult,
|
||||
responderProvided,
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mocks[2].result).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,119 @@
|
||||
import { FAVORITE_DROPPABLE_IDS } from '@/favorites/constants/FavoriteDroppableIds';
|
||||
import { useSortedFavorites } from '@/favorites/hooks/useSortedFavorites';
|
||||
import { activeFavoriteFolderIdState } from '@/favorites/states/activeFavoriteFolderIdState';
|
||||
import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
|
||||
import { validateAndExtractFolderId } from '@/favorites/utils/validateAndExtractFolderId';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { OnDragEndResponder } from '@hello-pangea/dnd';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { usePrefetchedFavoritesData } from './usePrefetchedFavoritesData';
|
||||
|
||||
export const useHandleFavoriteDragAndDrop = () => {
|
||||
const { favorites } = usePrefetchedFavoritesData();
|
||||
const { favoritesSorted } = useSortedFavorites();
|
||||
const { updateOneRecord: updateOneFavorite } = useUpdateOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Favorite,
|
||||
});
|
||||
const setActiveFavoriteFolderId = useSetRecoilState(
|
||||
activeFavoriteFolderIdState,
|
||||
);
|
||||
|
||||
const handleFavoriteDragAndDrop: OnDragEndResponder = (result) => {
|
||||
const { destination, source, draggableId } = result;
|
||||
|
||||
if (!destination) return;
|
||||
|
||||
if (
|
||||
destination.droppableId === source.droppableId &&
|
||||
destination.index === source.index
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const draggedFavorite = favorites.find((f) => f.id === draggableId);
|
||||
if (!draggedFavorite) return;
|
||||
|
||||
const destinationFolderId = validateAndExtractFolderId(
|
||||
destination.droppableId,
|
||||
);
|
||||
const sourceFolderId = validateAndExtractFolderId(source.droppableId);
|
||||
|
||||
if (
|
||||
destination.droppableId.startsWith(
|
||||
FAVORITE_DROPPABLE_IDS.FOLDER_HEADER_PREFIX,
|
||||
)
|
||||
) {
|
||||
if (destinationFolderId === null)
|
||||
throw new Error('Invalid folder header ID');
|
||||
|
||||
const folderFavorites = favoritesSorted.filter(
|
||||
(favorite) => favorite.favoriteFolderId === destinationFolderId,
|
||||
);
|
||||
|
||||
const newPosition =
|
||||
folderFavorites.length === 0
|
||||
? 0
|
||||
: folderFavorites[folderFavorites.length - 1].position + 1;
|
||||
|
||||
updateOneFavorite({
|
||||
idToUpdate: draggableId,
|
||||
updateOneRecordInput: {
|
||||
favoriteFolderId: destinationFolderId,
|
||||
position: newPosition,
|
||||
},
|
||||
});
|
||||
|
||||
setActiveFavoriteFolderId(destinationFolderId);
|
||||
return;
|
||||
}
|
||||
|
||||
if (destination.droppableId !== source.droppableId) {
|
||||
const destinationFavorites = favoritesSorted.filter(
|
||||
(favorite) => favorite.favoriteFolderId === destinationFolderId,
|
||||
);
|
||||
|
||||
let newPosition;
|
||||
if (destinationFavorites.length === 0) {
|
||||
newPosition = 0;
|
||||
} else if (destination.index === 0) {
|
||||
newPosition = destinationFavorites[0].position / 2;
|
||||
} else if (destination.index >= destinationFavorites.length) {
|
||||
newPosition =
|
||||
destinationFavorites[destinationFavorites.length - 1].position + 1;
|
||||
} else {
|
||||
newPosition = calculateNewPosition({
|
||||
destinationIndex: destination.index,
|
||||
sourceIndex: -1,
|
||||
items: destinationFavorites,
|
||||
});
|
||||
}
|
||||
|
||||
updateOneFavorite({
|
||||
idToUpdate: draggableId,
|
||||
updateOneRecordInput: {
|
||||
favoriteFolderId: destinationFolderId,
|
||||
position: newPosition,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const favoritesInSameList = favoritesSorted.filter(
|
||||
(favorite) => favorite.favoriteFolderId === sourceFolderId,
|
||||
);
|
||||
|
||||
const newPosition = calculateNewPosition({
|
||||
destinationIndex: destination.index,
|
||||
sourceIndex: source.index,
|
||||
items: favoritesInSameList,
|
||||
});
|
||||
|
||||
updateOneFavorite({
|
||||
idToUpdate: draggableId,
|
||||
updateOneRecordInput: { position: newPosition },
|
||||
});
|
||||
};
|
||||
|
||||
return { handleFavoriteDragAndDrop };
|
||||
};
|
||||
@ -1,41 +0,0 @@
|
||||
import { useSortedFavorites } from '@/favorites/hooks/useSortedFavorites';
|
||||
import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { OnDragEndResponder } from '@hello-pangea/dnd';
|
||||
import { usePrefetchedFavoritesData } from './usePrefetchedFavoritesData';
|
||||
|
||||
export const useReorderFavorite = () => {
|
||||
const { favorites } = usePrefetchedFavoritesData();
|
||||
const { favoritesSorted } = useSortedFavorites();
|
||||
const { updateOneRecord: updateOneFavorite } = useUpdateOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Favorite,
|
||||
});
|
||||
|
||||
const handleReorderFavorite: OnDragEndResponder = (result) => {
|
||||
if (!result.destination) return;
|
||||
|
||||
const draggedFavoriteId = result.draggableId;
|
||||
const draggedFavorite = favorites.find((f) => f.id === draggedFavoriteId);
|
||||
|
||||
if (!draggedFavorite) return;
|
||||
|
||||
const inSameFolderFavorites = favoritesSorted.filter(
|
||||
(fav) => fav.favoriteFolderId === draggedFavorite.favoriteFolderId,
|
||||
);
|
||||
if (!inSameFolderFavorites.length) return;
|
||||
|
||||
const newPosition = calculateNewPosition({
|
||||
destinationIndex: result.destination.index,
|
||||
sourceIndex: result.source.index,
|
||||
items: inSameFolderFavorites,
|
||||
});
|
||||
|
||||
updateOneFavorite({
|
||||
idToUpdate: draggedFavoriteId,
|
||||
updateOneRecordInput: { position: newPosition },
|
||||
});
|
||||
};
|
||||
|
||||
return { handleReorderFavorite };
|
||||
};
|
||||
Reference in New Issue
Block a user