vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-15 19:47:57 +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 84d42c73a0
commit 1c65e4e3fc
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 { useSelector } from 'react-redux';
import { activeInstance, fetchAccount } from '../../../redux/clientSlice'; import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
import { useMutation, useQuery, useQueryClient } from 'react-query'; 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 ActionChooser, { ActionType } from '../action-chooser';
import ActionDispatcher from '../action-dispatcher'; import ActionDispatcher from '../action-dispatcher';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@ -36,7 +36,7 @@ import SearchIcon from '@material-ui/icons/Search';
import { AddLabelButton } from './add-label-button'; import { AddLabelButton } from './add-label-button';
// Load fromNow pluggin // Load fromNow pluggin
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import {LabelsCell} from './labels-cell'; import { LabelsCell } from './labels-cell';
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) { function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@ -335,23 +335,28 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
event.stopPropagation(); event.stopPropagation();
}; };
}; };
9
const starredMultation = useMutation<void, ErrorInfo, number>( const starredMultation = useMutation<void, ErrorInfo, number>(
(id: number) => { (id: number) => {
const map = mapsInfo.find((m) => m.id == id); const map = mapsInfo.find((m) => m.id == id);
if(!map){ const starred = !(map?.starred);
console.error(`Map ${id} could not be found.`);
console.error(`MapsInfo ${mapsInfo} list`);
}
console.debug(`Starred value map?.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: () => { onSuccess: () => {
queryClient.invalidateQueries('maps'); queryClient.invalidateQueries('maps');
}, },
onError: (error) => { onError: (error) => {
queryClient.invalidateQueries('maps');
console.error(error); console.error(error);
}, },
} }
@ -413,7 +418,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</Tooltip> </Tooltip>
)} )}
{selected.length > 0 && <AddLabelButton/>} {selected.length > 0 && <AddLabelButton />}
</div> </div>
<div className={classes.toolbarListActions}> <div className={classes.toolbarListActions}>
@ -543,7 +548,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</TableCell> </TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<LabelsCell labels={row.labels} /> <LabelsCell labels={row.labels} />
</TableCell> </TableCell>
<TableCell className={classes.bodyCell}> <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 const { sessionExpired } = clientSlice.actions;
export default clientSlice.reducer; export default clientSlice.reducer;'