Skip to content

Commit

Permalink
Merge pull request #33 from graasp/28/fixEditItem
Browse files Browse the repository at this point in the history 
28/fix edit item
  • Loading branch information
@pyphilia
pyphilia authored Jul 23, 2021
2 parents 0fafee6 + 14532a3 commit f92e9f6
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/config/keys.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { hashItemsIds } from '../utils/item';

export const ITEMS_KEY = 'items';
export const OWN_ITEMS_KEY = [ITEMS_KEY, 'own'];
export const buildItemKey = (id: UUID) => [ITEMS_KEY, id];
export const buildItemKey = (id?: UUID) => [ITEMS_KEY, id];
export const buildItemsKey = (ids: UUID[]) => [ITEMS_KEY, hashItemsIds(ids)];
export const buildItemChildrenKey = (id: UUID) => [ITEMS_KEY, id, 'children'];
export const SHARED_ITEMS_KEY = 'shared';
Expand Down
63 changes: 38 additions & 25 deletions src/mutations/item.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { List, Record, Map } from 'immutable';
import { List, Record } from 'immutable';
import { QueryClient } from 'react-query';
import * as Api from '../api';
import {
Expand All @@ -22,7 +22,7 @@ import {
OWN_ITEMS_KEY,
} from '../config/keys';
import { buildPath, getDirectParentId } from '../utils/item';
import { Item, QueryClientConfig, UUID } from '../types';
import { Item, ITEM_KEYS, QueryClientConfig, UUID } from '../types';

const {
POST_ITEM,
Expand Down Expand Up @@ -113,25 +113,32 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {

queryClient.setMutationDefaults(EDIT_ITEM, {
mutationFn: (item) => Api.editItem(item.id, item, queryConfig),
// newItem contains only changed value
onMutate: async (newItem) => {
// newItem contains only changed values
onMutate: async (newItem: Partial<Item>) => {
const itemKey = buildItemKey(newItem.id);

// invalidate key
await queryClient.cancelQueries(itemKey);

// build full item with new values
const prevItem = queryClient.getQueryData(itemKey) as Record<Item>;
const newFullItem = prevItem.merge(newItem);

const previousItems = {
parent: await mutateParentChildren({
childPath: newItem.path,
childPath: prevItem.get(ITEM_KEYS.PATH),
value: (old: List<Item>) => {
if (!old || old.isEmpty()) {
return old;
}
const idx = old.findIndex(({ id }) => id === newItem.id);
return old.set(idx, newItem);
// todo: remove toJS when moving to List<Map<Item>>
return old.set(idx, newFullItem.toJS());
},
}),
item: await (async () => {
const itemKey = buildItemKey(newItem.id);
await queryClient.cancelQueries(itemKey);
const prevValue = queryClient.getQueryData(itemKey) as Record<Item>;
queryClient.setQueryData(itemKey, prevValue.merge(Map(newItem)));
return prevValue;
queryClient.setQueryData(itemKey, newFullItem);
return prevItem;
})(),
};

Expand All @@ -141,14 +148,20 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
notifier?.({ type: editItemRoutine.SUCCESS });
},
onError: (error, newItem, context) => {
const parentKey = getKeyForParentId(getDirectParentId(newItem.path));
const { item: prevItem } = context;
const parentKey = getKeyForParentId(
getDirectParentId(prevItem.get(ITEM_KEYS.PATH)),
);
queryClient.setQueryData(parentKey, context.parent);
const itemKey = buildItemKey(newItem.id);
queryClient.setQueryData(itemKey, context.item);
notifier?.({ type: editItemRoutine.FAILURE, payload: { error } });
},
onSettled: (newItem) => {
const parentKey = getKeyForParentId(getDirectParentId(newItem.path));
onSettled: (newItem, _error, _variables, context) => {
const { item: prevItem } = context;
const parentKey = getKeyForParentId(
getDirectParentId(prevItem.get(ITEM_KEYS.PATH)),
);
queryClient.invalidateQueries(parentKey);

const itemKey = buildItemKey(newItem.id);
Expand All @@ -164,7 +177,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
const itemKey = buildItemKey(itemId);
const itemData = queryClient.getQueryData(itemKey) as Record<Item>;
const parentKey = getKeyForParentId(
getDirectParentId(itemData.get('path')),
getDirectParentId(itemData.get(ITEM_KEYS.PATH)),
);
const parentData = queryClient.getQueryData(parentKey);
const previousItems = {
Expand All @@ -185,7 +198,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
const itemKey = buildItemKey(itemId);
queryClient.setQueryData(itemKey, context.item);
const parentKey = getKeyForParentId(
getDirectParentId(itemData.get('path')),
getDirectParentId(itemData.get(ITEM_KEYS.PATH)),
);
queryClient.setQueryData(parentKey, context.parent);
}
Expand All @@ -199,7 +212,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
queryClient.invalidateQueries(itemKey);

const parentKey = getKeyForParentId(
getDirectParentId(itemData.get('path')),
getDirectParentId(itemData.get(ITEM_KEYS.PATH)),
);
queryClient.invalidateQueries(parentKey);
}
Expand All @@ -214,7 +227,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
// get path from first item
const itemKey = buildItemKey(itemIds[0]);
const item = queryClient.getQueryData(itemKey) as Record<Item>;
const itemPath = item?.get('path');
const itemPath = item?.get(ITEM_KEYS.PATH);

const previousItems = {
...(Boolean(itemPath) && {
Expand All @@ -236,7 +249,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
notifier?.({ type: deleteItemRoutine.SUCCESS });
},
onError: (error, itemIds: UUID[], context) => {
const itemPath = context[itemIds[0]]?.get('path');
const itemPath = context[itemIds[0]]?.get(ITEM_KEYS.PATH);

if (itemPath) {
const parentKey = getKeyForParentId(getDirectParentId(itemPath));
Expand All @@ -251,7 +264,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
notifier?.({ type: deleteItemsRoutine.FAILURE, payload: { error } });
},
onSettled: (itemIds: UUID[], _error, _variables, context) => {
const itemPath = context[itemIds[0]]?.get('path');
const itemPath = context[itemIds[0]]?.get(ITEM_KEYS.PATH);

itemIds.forEach((id) => {
const itemKey = buildItemKey(id);
Expand Down Expand Up @@ -300,7 +313,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {

// remove item in original folder
originalParent: await mutateParentChildren({
childPath: itemData.get('path'),
childPath: itemData.get(ITEM_KEYS.PATH),
value: (old: List<Item>) => old?.filter(({ id }) => id !== itemId),
}),

Expand All @@ -309,9 +322,9 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
id: itemId,
value: (item: Record<Item>) =>
item.set(
'path',
ITEM_KEYS.PATH,
buildPath({
prefix: itemData.get('path'),
prefix: itemData.get(ITEM_KEYS.PATH),
ids: [itemId],
}),
),
Expand All @@ -334,7 +347,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
const itemData = context.item;
if (itemData) {
const parentKey = getKeyForParentId(
getDirectParentId(itemData.get('path')),
getDirectParentId(itemData.get(ITEM_KEYS.PATH)),
);
queryClient.setQueryData(parentKey, context.originalParent);
}
Expand All @@ -351,7 +364,7 @@ export default (queryClient: QueryClient, queryConfig: QueryClientConfig) => {
const itemData = queryClient.getQueryData(id) as Record<Item>;
if (itemData) {
const parentKey = getKeyForParentId(
getDirectParentId(itemData.get('path')),
getDirectParentId(itemData.get(ITEM_KEYS.PATH)),
);
queryClient.invalidateQueries(parentKey);
}
Expand Down
4 changes: 2 additions & 2 deletions src/queryClient.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ export default (config: Partial<QueryClientConfig>) => {
enableWebsocket: config?.enableWebsocket || false,
notifier: config?.notifier,
// time until data in cache considered stale if cache not invalidated
staleTime: config?.staleTime ?? STALE_TIME_MILLISECONDS,
staleTime: config?.staleTime || STALE_TIME_MILLISECONDS,
// time before cache labeled as inactive to be garbage collected
cacheTime: config?.cacheTime ?? CACHE_TIME_MILLISECONDS,
cacheTime: config?.cacheTime || CACHE_TIME_MILLISECONDS,
retry,
};

Expand Down
6 changes: 5 additions & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,14 @@ export type QueryClientConfig = {

export type UUID = string;

export const enum ITEM_KEYS {
PATH = 'path',
}

export type Item = {
id: UUID;
name: string;
path: string;
[ITEM_KEYS.PATH]: string;
type: string;
description: string;
extra: {};
Expand Down

0 comments on commit f92e9f6

Please sign in to comment.