Skip to content

Commit 02dbe24

Browse files
djhidjhi
committed
Improve notifications for offline mutations
1 parent 8384ca3 commit 02dbe24

File tree

13 files changed

+206
-78
lines changed

13 files changed

+206
-78
lines changed

‎examples/simple/src/i18n/en.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,14 @@ export const messages = {
2323
},
2424
notifications: {
2525
created: 'Post created |||| %{smart_count} posts created',
26+
pending_create:
27+
'Post will be created when your device will be online |||| %{smart_count} posts will be created when your device will be online',
2628
updated: 'Post updated |||| %{smart_count} posts updated',
29+
pending_update:
30+
'Post will be updated when your device will be online |||| %{smart_count} posts will be updated when your device will be online',
2731
deleted: 'Post deleted |||| %{smart_count} posts deleted',
32+
pending_delete:
33+
'Post will be deleted when your device will be online |||| %{smart_count} posts will be deleted when your device will be online',
2834
},
2935
},
3036
comments: {

‎examples/simple/src/i18n/fr.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,16 @@ export default {
3939
},
4040
notifications: {
4141
created: 'Article créé |||| %{smart_count} articles créés',
42+
pending_create:
43+
"L'Article créé quand votre appareil sera connecté |||| %{smart_count} articles seront créés quand votre appareil sera connecté",
4244
updated:
4345
'Article mis à jour |||| %{smart_count} articles mis à jour',
46+
pending_update:
47+
"L'article sera mis à jour quand votre appareil sera connecté |||| %{smart_count} articles seront mis à jour quand votre appareil sera connecté",
4448
deleted:
4549
'Article supprimé |||| %{smart_count} articles supprimés',
50+
pending_delete:
51+
"L'article sera supprimé quand votre appareil sera connecté |||| %{smart_count} articles seront supprimés quand votre appareil sera connecté",
4652
},
4753
},
4854
comments: {

‎packages/ra-core/src/controller/button/useDeleteWithConfirmController.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useUnselect } from '../../controller';
1111
import { useRedirect, RedirectionSideEffect } from '../../routing';
1212
import { useNotify } from '../../notification';
1313
import { RaRecord, MutationMode, DeleteParams } from '../../types';
14-
import { useResourceContext } from '../../core';
14+
import { useIsOffine, useResourceContext } from '../../core';
1515
import { useTranslate } from '../../i18n';
1616

1717
/**
@@ -90,22 +90,29 @@ const useDeleteWithConfirmController = <
9090
const redirect = useRedirect();
9191
const translate = useTranslate();
9292

93+
const isOffline = useIsOffine();
9394
const [deleteOne, { isPending }] = useDelete<RecordType, ErrorType>(
9495
resource,
9596
undefined,
9697
{
9798
onSuccess: () => {
9899
setOpen(false);
99100
notify(
100-
successMessage ??
101-
`resources.${resource}.notifications.deleted`,
101+
successMessage ?? isOffline
102+
? `resources.${resource}.notifications.pending_delete`
103+
: `resources.${resource}.notifications.deleted`,
102104
{
103105
type: 'info',
104106
messageArgs: {
105107
smart_count: 1,
106-
_: translate('ra.notification.deleted', {
107-
smart_count: 1,
108-
}),
108+
_: translate(
109+
isOffline
110+
? 'ra.notification.pending_delete'
111+
: 'ra.notification.deleted',
112+
{
113+
smart_count: 1,
114+
}
115+
),
109116
},
110117
undoable: mutationMode === 'undoable',
111118
}

‎packages/ra-core/src/controller/button/useDeleteWithUndoController.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useUnselect } from '../../controller';
66
import { useRedirect, RedirectionSideEffect } from '../../routing';
77
import { useNotify } from '../../notification';
88
import { RaRecord, DeleteParams } from '../../types';
9-
import { useResourceContext } from '../../core';
9+
import { useIsOffine, useResourceContext } from '../../core';
1010
import { useTranslate } from '../../i18n';
1111

1212
/**
@@ -63,21 +63,29 @@ const useDeleteWithUndoController = <
6363
const unselect = useUnselect(resource);
6464
const redirect = useRedirect();
6565
const translate = useTranslate();
66+
67+
const isOffline = useIsOffine();
6668
const [deleteOne, { isPending }] = useDelete<RecordType, ErrorType>(
6769
resource,
6870
undefined,
6971
{
7072
onSuccess: () => {
7173
notify(
72-
successMessage ??
73-
`resources.${resource}.notifications.deleted`,
74+
successMessage ?? isOffline
75+
? `resources.${resource}.notifications.pending_delete`
76+
: `resources.${resource}.notifications.deleted`,
7477
{
7578
type: 'info',
7679
messageArgs: {
7780
smart_count: 1,
78-
_: translate('ra.notification.deleted', {
79-
smart_count: 1,
80-
}),
81+
_: translate(
82+
isOffline
83+
? 'ra.notification.pending_delete'
84+
: 'ra.notification.deleted',
85+
{
86+
smart_count: 1,
87+
}
88+
),
8189
},
8290
undoable: true,
8391
}

‎packages/ra-core/src/controller/create/useCreateController.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
useResourceContext,
2121
useResourceDefinition,
2222
useGetResourceLabel,
23+
useIsOffine,
2324
} from '../../core';
2425

2526
/**
@@ -87,6 +88,7 @@ export const useCreateController = <
8788
unregisterMutationMiddleware,
8889
} = useMutationMiddlewares();
8990

91+
const isOffline = useIsOffine();
9092
const [create, { isPending: saving }] = useCreate<
9193
RecordType,
9294
MutationOptionsError,
@@ -96,16 +98,26 @@ export const useCreateController = <
9698
if (onSuccess) {
9799
return onSuccess(data, variables, context);
98100
}
99-
notify(`resources.${resource}.notifications.created`, {
100-
type: 'info',
101-
messageArgs: {
102-
smart_count: 1,
103-
_: translate(`ra.notification.created`, {
101+
notify(
102+
isOffline
103+
? `resources.${resource}.notifications.pending_create`
104+
: `resources.${resource}.notifications.created`,
105+
{
106+
type: 'info',
107+
messageArgs: {
104108
smart_count: 1,
105-
}),
106-
},
107-
undoable: mutationMode === 'undoable',
108-
});
109+
_: translate(
110+
isOffline
111+
? 'ra.notification.pending_create'
112+
: 'ra.notification.created',
113+
{
114+
smart_count: 1,
115+
}
116+
),
117+
},
118+
undoable: mutationMode === 'undoable',
119+
}
120+
);
109121
redirect(finalRedirectTo, resource, data.id, data);
110122
},
111123
onError: (error: MutationOptionsError, variables, context) => {

‎packages/ra-core/src/controller/edit/useEditController.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
useResourceContext,
2020
useGetResourceLabel,
2121
useGetRecordRepresentation,
22+
useIsOffine,
2223
} from '../../core';
2324
import {
2425
SaveContextValue,
@@ -153,6 +154,7 @@ export const useEditController = <
153154

154155
const recordCached = { id, previousData: record };
155156

157+
const isOffline = useIsOffine();
156158
const [update, { isPending: saving }] = useUpdate<RecordType, ErrorType>(
157159
resource,
158160
recordCached,
@@ -161,16 +163,26 @@ export const useEditController = <
161163
if (onSuccess) {
162164
return onSuccess(data, variables, context);
163165
}
164-
notify(`resources.${resource}.notifications.updated`, {
165-
type: 'info',
166-
messageArgs: {
167-
smart_count: 1,
168-
_: translate('ra.notification.updated', {
166+
notify(
167+
isOffline
168+
? `resources.${resource}.notifications.pending_update`
169+
: `resources.${resource}.notifications.updated`,
170+
{
171+
type: 'info',
172+
messageArgs: {
169173
smart_count: 1,
170-
}),
171-
},
172-
undoable: mutationMode === 'undoable',
173-
});
174+
_: translate(
175+
isOffline
176+
? 'ra.notification.pending_update'
177+
: 'ra.notification.updated',
178+
{
179+
smart_count: 1,
180+
}
181+
),
182+
},
183+
undoable: mutationMode === 'undoable',
184+
}
185+
);
174186
redirect(redirectTo, resource, data.id, data);
175187
},
176188
onError: (error, variables, context) => {

‎packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
import {
1111
type MutationMode,
1212
useDeleteMany,
13+
useIsOffine,
1314
useListContext,
1415
useNotify,
1516
useRefresh,
@@ -50,22 +51,29 @@ export const BulkDeleteWithConfirmButton = (
5051
const resource = useResourceContext(props);
5152
const refresh = useRefresh();
5253
const translate = useTranslate();
54+
const isOffline = useIsOffine();
5355
const [deleteMany, { isPending }] = useDeleteMany(
5456
resource,
5557
{ ids: selectedIds, meta: mutationMeta },
5658
{
5759
onSuccess: () => {
5860
refresh();
5961
notify(
60-
successMessage ??
61-
`resources.${resource}.notifications.deleted`,
62+
successMessage ?? isOffline
63+
? `resources.${resource}.notifications.pending_delete`
64+
: `resources.${resource}.notifications.deleted`,
6265
{
6366
type: 'info',
6467
messageArgs: {
6568
smart_count: selectedIds.length,
66-
_: translate('ra.notification.deleted', {
67-
smart_count: selectedIds.length,
68-
}),
69+
_: translate(
70+
isOffline
71+
? 'ra.notification.pending_delete'
72+
: 'ra.notification.deleted',
73+
{
74+
smart_count: selectedIds.length,
75+
}
76+
),
6977
},
7078
undoable: mutationMode === 'undoable',
7179
}

‎packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from '@mui/material/styles';
88
import {
99
useDeleteMany,
10+
useIsOffine,
1011
useRefresh,
1112
useNotify,
1213
useResourceContext,
@@ -43,22 +44,29 @@ export const BulkDeleteWithUndoButton = (
4344
const translate = useTranslate();
4445
const [deleteMany, { isPending }] = useDeleteMany();
4546

47+
const isOffline = useIsOffine();
4648
const handleClick = e => {
4749
deleteMany(
4850
resource,
4951
{ ids: selectedIds, meta: mutationMeta },
5052
{
5153
onSuccess: () => {
5254
notify(
53-
successMessage ??
54-
`resources.${resource}.notifications.deleted`,
55+
successMessage ?? isOffline
56+
? `resources.${resource}.notifications.pending_delete`
57+
: `resources.${resource}.notifications.deleted`,
5558
{
5659
type: 'info',
5760
messageArgs: {
5861
smart_count: selectedIds.length,
59-
_: translate('ra.notification.deleted', {
60-
smart_count: selectedIds.length,
61-
}),
62+
_: translate(
63+
isOffline
64+
? 'ra.notification.pending_delete'
65+
: 'ra.notification.deleted',
66+
{
67+
smart_count: selectedIds.length,
68+
}
69+
),
6270
},
6371
undoable: true,
6472
}

‎packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
type MutationMode,
1717
type RaRecord,
1818
type UpdateManyParams,
19+
useIsOffine,
1920
} from 'ra-core';
2021

2122
import { Confirm } from '../layout';
@@ -36,6 +37,7 @@ export const BulkUpdateWithConfirmButton = (
3637
const unselectAll = useUnselectAll(resource);
3738
const [isOpen, setOpen] = useState(false);
3839
const { selectedIds } = useListContext();
40+
const isOffline = useIsOffine();
3941

4042
const {
4143
confirmTitle = 'ra.message.bulk_update_title',
@@ -46,16 +48,26 @@ export const BulkUpdateWithConfirmButton = (
4648
mutationMode = 'pessimistic',
4749
onClick,
4850
onSuccess = () => {
49-
notify(`resources.${resource}.notifications.updated`, {
50-
type: 'info',
51-
messageArgs: {
52-
smart_count: selectedIds.length,
53-
_: translate('ra.notification.updated', {
51+
notify(
52+
isOffline
53+
? `resources.${resource}.notifications.pending_update`
54+
: `resources.${resource}.notifications.updated`,
55+
{
56+
type: 'info',
57+
messageArgs: {
5458
smart_count: selectedIds.length,
55-
}),
56-
},
57-
undoable: mutationMode === 'undoable',
58-
});
59+
_: translate(
60+
isOffline
61+
? 'ra.notification.pending_update'
62+
: 'ra.notification.updated',
63+
{
64+
smart_count: selectedIds.length,
65+
}
66+
),
67+
},
68+
undoable: mutationMode === 'undoable',
69+
}
70+
);
5971
unselectAll();
6072
setOpen(false);
6173
},

0 commit comments

Comments
 (0)