vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-12-23 04:03:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

feature: Optimistic update for starred:

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-03-02 18:02:08 -08:00
parent 368b520748
commit 0921fc41e3
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/webapp/src/components/maps-page/maps-list/index.tsx
View File

@ -4,7 +4,7 @@ import { useStyles } from './styled';
import { useSelector } from 'react-redux';
import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import Client, {ErrorInfo, Label, MapInfo} from '../../../classes/client';
import Client, { ErrorInfo, Label, MapInfo } from '../../../classes/client';
import ActionChooser, { ActionType } from '../action-chooser';
import ActionDispatcher from '../action-dispatcher';
import dayjs from 'dayjs';
@ -36,7 +36,7 @@ import SearchIcon from '@material-ui/icons/Search';
import { AddLabelButton } from './add-label-button';
// Load fromNow pluggin
import relativeTime from 'dayjs/plugin/relativeTime';
import {LabelsCell} from './labels-cell';
import { LabelsCell } from './labels-cell';
dayjs.extend(relativeTime);
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@ -335,23 +335,28 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
event.stopPropagation();
};
};
9
const starredMultation = useMutation<void, ErrorInfo, number>(
(id: number) => {
const map = mapsInfo.find((m) => m.id == id);
if(!map){
console.error(`Map ${id} could not be found.`);
console.error(`MapsInfo ${mapsInfo} list`);
}
console.debug(`Starred value map?.starred: ${map?.starred}`);
const starred = !(map?.starred);
return client.updateStarred(id, !(map?.starred));
// Follow a optimistic update approach ...
queryClient.setQueryData<MapInfo[]>('maps', mapsInfo => {
if (map) {
map.starred = !map.starred;
}
return mapsInfo || [];
});
return client.updateStarred(id, starred);
},
{
onSuccess: () => {
queryClient.invalidateQueries('maps');
},
onError: (error) => {
queryClient.invalidateQueries('maps');
console.error(error);
},
}
@ -413,7 +418,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</Tooltip>
)}
{selected.length > 0 && <AddLabelButton/>}
{selected.length > 0 && <AddLabelButton />}
</div>
<div className={classes.toolbarListActions}>
@ -543,7 +548,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</TableCell>
<TableCell className={classes.bodyCell}>
<LabelsCell labels={row.labels} />
<LabelsCell labels={row.labels} />
</TableCell>
<TableCell className={classes.bodyCell}>

2
packages/webapp/src/redux/clientSlice.ts
View File

@ -70,4 +70,4 @@ export const activeInstanceStatus = (state: any): ClientStatus => {
};
export const { sessionExpired } = clientSlice.actions;
export default clientSlice.reducer;
export default clientSlice.reducer;'