Skip to content

Commit de44853

Browse files
MartinCupelaMartinCupela
committed
feat: display reminder deadline after the reminder stops to refresh
1 parent a364279 commit de44853

File tree

15 files changed

+219
-74
lines changed

15 files changed

+219
-74
lines changed

‎src/components/Message/ReminderNotification.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
2-
import { useTranslationContext } from '../../context';
1+
import React, { useMemo } from 'react';
2+
import { useChatContext, useTranslationContext } from '../../context';
33
import { useStateStore } from '../../store';
44
import type { Reminder, ReminderState } from 'stream-chat';
55

@@ -10,22 +10,38 @@ export type ReminderNotificationProps = {
1010
const reminderStateSelector = (state: ReminderState) => ({
1111
timeLeftMs: state.timeLeftMs,
1212
});
13+
1314
export const ReminderNotification = ({ reminder }: ReminderNotificationProps) => {
15+
const { client } = useChatContext();
1416
const { t } = useTranslationContext();
1517
const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};
1618

19+
const isBehindRefreshBoundary = useMemo(() => {
20+
const { stopRefreshBoundaryMs } = client.reminders.timers.config;
21+
const stopRefreshTimeStamp = reminder?.remindAt
22+
? reminder?.remindAt.getTime() + stopRefreshBoundaryMs
23+
: undefined;
24+
return !!stopRefreshTimeStamp && new Date().getTime() > stopRefreshTimeStamp;
25+
}, [client, reminder]);
26+
1727
return (
1828
<p className='str-chat__message-reminder'>
1929
<span>{t<string>('Saved for later')}</span>
20-
{timeLeftMs !== null && (
30+
{reminder?.remindAt && timeLeftMs !== null && (
2131
<>
2232
<span> | </span>
2333
<span>
24-
{t<string>(`Due {{ dueTimeElapsed }}`, {
25-
dueTimeElapsed: t<string>('duration/Message reminder', {
26-
milliseconds: timeLeftMs,
27-
}),
28-
})}
34+
{isBehindRefreshBoundary
35+
? t<string>('Due since {{ dueSince }}', {
36+
dueSince: t<string>(`timestamp/ReminderNotification`, {
37+
timestamp: reminder.remindAt,
38+
}),
39+
})
40+
: t<string>(`Due {{ dueTimeElapsed }}`, {
41+
dueTimeElapsed: t<string>('duration/Message reminder', {
42+
milliseconds: timeLeftMs,
43+
}),
44+
})}
2945
</span>
3046
</>
3147
)}

‎src/components/Message/__tests__/ReminderNotification.test.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { act, render } from '@testing-library/react';
3+
import { Chat } from '../../Chat';
4+
import { ReminderNotification } from '../ReminderNotification';
5+
import { generateUser, getTestClientWithUser } from '../../../mock-builders';
6+
import { generateReminderResponse } from '../../../mock-builders/generator/reminder';
7+
8+
const user = generateUser();
9+
const renderComponent = async ({ client, reminder }) => {
10+
let result;
11+
await act(() => {
12+
result = render(
13+
<Chat client={client}>
14+
<ReminderNotification reminder={reminder} />
15+
</Chat>,
16+
);
17+
});
18+
return result;
19+
};
20+
21+
describe('ReminderNotification', () => {
22+
it('displays text for bookmark notifications', async () => {
23+
const client = await getTestClientWithUser(user);
24+
const reminderResponse = generateReminderResponse();
25+
client.reminders.upsertToState({
26+
data: reminderResponse,
27+
});
28+
const reminder = client.reminders.getFromState(reminderResponse.message_id);
29+
const { container } = await renderComponent({ client, reminder });
30+
expect(container).toMatchSnapshot();
31+
});
32+
it('displays text for bookmark notifications and time due in case of timed reminders', async () => {
33+
const client = await getTestClientWithUser(user);
34+
const reminderResponse = generateReminderResponse({
35+
scheduleOffsetMs: 60 * 1000,
36+
});
37+
client.reminders.upsertToState({
38+
data: reminderResponse,
39+
});
40+
const reminder = client.reminders.getFromState(reminderResponse.message_id);
41+
const { container } = await renderComponent({ client, reminder });
42+
expect(container).toMatchSnapshot();
43+
});
44+
it('displays text for bookmark notifications and reminder deadline if trespassed the refresh boundary', async () => {
45+
const client = await getTestClientWithUser(user);
46+
const reminderResponse = generateReminderResponse({
47+
data: { remind_at: new Date(0).toISOString() },
48+
});
49+
client.reminders.upsertToState({
50+
data: reminderResponse,
51+
});
52+
const reminder = client.reminders.getFromState(reminderResponse.message_id);
53+
const { container } = await renderComponent({ client, reminder });
54+
expect(container).toMatchSnapshot();
55+
});
56+
});

‎src/components/Message/__tests__/__snapshots__/ReminderNotification.test.js.snap‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ReminderNotification displays text for bookmark notifications 1`] = `
4+
<div>
5+
<p
6+
class="str-chat__message-reminder"
7+
>
8+
<span>
9+
Saved for later
10+
</span>
11+
</p>
12+
</div>
13+
`;
14+
15+
exports[`ReminderNotification displays text for bookmark notifications and reminder deadline if trespassed the refresh boundary 1`] = `
16+
<div>
17+
<p
18+
class="str-chat__message-reminder"
19+
>
20+
<span>
21+
Saved for later
22+
</span>
23+
<span>
24+
|
25+
</span>
26+
<span>
27+
Due since 01/01/1970
28+
</span>
29+
</p>
30+
</div>
31+
`;
32+
33+
exports[`ReminderNotification displays text for bookmark notifications and time due in case of timed reminders 1`] = `
34+
<div>
35+
<p
36+
class="str-chat__message-reminder"
37+
>
38+
<span>
39+
Saved for later
40+
</span>
41+
<span>
42+
|
43+
</span>
44+
<span>
45+
Due in a minute
46+
</span>
47+
</p>
48+
</div>
49+
`;

‎src/i18n/de.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"Download attachment {{ name }}": "Anhang {{ name }} herunterladen",
2828
"Drag your files here": "Ziehen Sie Ihre Dateien hierher",
2929
"Drag your files here to add to your post": "Ziehen Sie Ihre Dateien hierher, um sie Ihrem Beitrag hinzuzufügen",
30-
"Due {{ dueTimeElapsed }}": "Due {{ dueTimeElapsed }}",
30+
"Due since {{ dueSince }}": "Fällig seit {{ dueSince }}",
31+
"Due {{ dueTimeElapsed }}": "Fällig {{ dueTimeElapsed }}",
3132
"Edit Message": "Nachricht bearbeiten",
3233
"Edit message request failed": "Anfrage zum Bearbeiten der Nachricht fehlgeschlagen",
3334
"Edited": "Bearbeitet",
@@ -94,12 +95,12 @@
9495
"Question": "Frage",
9596
"Quote": "Zitieren",
9697
"Recording format is not supported and cannot be reproduced": "Aufnahmeformat wird nicht unterstützt und kann nicht wiedergegeben werden",
97-
"Remind Me": "Remind Me",
98-
"Remove reminder": "Remove reminder",
98+
"Remind Me": "Erinnern",
99+
"Remove reminder": "Erinnerung entfernen",
99100
"Reply": "Antworten",
100101
"Reply to Message": "Auf Nachricht antworten",
101-
"Save for later": "Save for later",
102-
"Saved for later": "Saved for later",
102+
"Save for later": "Für später speichern",
103+
"Saved for later": "Für später gespeichert",
103104
"Search": "Suche",
104105
"Searching...": "Suchen...",
105106
"See all options ({{count}})_one": "Alle Optionen anzeigen ({{count}})",
@@ -163,7 +164,7 @@
163164
"aria/Open Reaction Selector": "Reaktionsauswahl öffnen",
164165
"aria/Open Thread": "Thread öffnen",
165166
"aria/Reaction list": "Reaktionsliste",
166-
"aria/Remind Me Options": "aria/Remind Me Options",
167+
"aria/Remind Me Options": "Erinnerungsoptionen",
167168
"aria/Remove attachment": "Anhang entfernen",
168169
"aria/Retry upload": "Upload erneut versuchen",
169170
"aria/Search results": "Suchergebnisse",
@@ -190,6 +191,7 @@
190191
"timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
191192
"timestamp/PollVote": "{{ timestamp | timestampFormatter(format: MMM D [at] HH:mm) }}",
192193
"timestamp/PollVoteTooltip": "{{ timestamp | timestampFormatter(calendar: true) }}",
194+
"timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
193195
"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
194196
"unban-command-args": "[@Benutzername]",
195197
"unban-command-description": "Einen Benutzer entbannen",

‎src/i18n/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"Download attachment {{ name }}": "Download attachment {{ name }}",
2828
"Drag your files here": "Drag your files here",
2929
"Drag your files here to add to your post": "Drag your files here to add to your post",
30+
"Due since {{ dueSince }}": "Due since {{ dueSince }}",
3031
"Due {{ dueTimeElapsed }}": "Due {{ dueTimeElapsed }}",
3132
"Edit Message": "Edit Message",
3233
"Edit message request failed": "Edit message request failed",
@@ -185,6 +186,7 @@
185186
"timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
186187
"timestamp/PollVote": "{{ timestamp | timestampFormatter(format: MMM D [at] HH:mm) }}",
187188
"timestamp/PollVoteTooltip": "{{ timestamp | timestampFormatter(calendar: true) }}",
189+
"timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
188190
"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
189191
"unreadMessagesSeparatorText_one": "1 unread message",
190192
"unreadMessagesSeparatorText_other": "{{count}} unread messages",

‎src/i18n/es.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"Download attachment {{ name }}": "Descargar adjunto {{ name }}",
2828
"Drag your files here": "Arrastra tus archivos aquí",
2929
"Drag your files here to add to your post": "Arrastra tus archivos aquí para agregarlos a tu publicación",
30-
"Due {{ dueTimeElapsed }}": "Due {{ dueTimeElapsed }}",
30+
"Due since {{ dueSince }}": "Vencido desde {{ dueSince }}",
31+
"Due {{ dueTimeElapsed }}": "Vencido {{ dueTimeElapsed }}",
3132
"Edit Message": "Editar mensaje",
3233
"Edit message request failed": "Error al editar la solicitud de mensaje",
3334
"Edited": "Editado",
@@ -94,12 +95,12 @@
9495
"Question": "Pregunta",
9596
"Quote": "Citar",
9697
"Recording format is not supported and cannot be reproduced": "El formato de grabación no es compatible y no se puede reproducir",
97-
"Remind Me": "Remind Me",
98-
"Remove reminder": "Remove reminder",
98+
"Remind Me": "Recordarme",
99+
"Remove reminder": "Eliminar recordatorio",
99100
"Reply": "Responder",
100101
"Reply to Message": "Responder al mensaje",
101-
"Save for later": "Save for later",
102-
"Saved for later": "Saved for later",
102+
"Save for later": "Guardar para más tarde",
103+
"Saved for later": "Guardado para más tarde",
103104
"Search": "Buscar",
104105
"Searching...": "Buscando...",
105106
"See all options ({{count}})_many": "Ver todas las opciones ({{count}})",
@@ -166,7 +167,7 @@
166167
"aria/Open Reaction Selector": "Abrir selector de reacciones",
167168
"aria/Open Thread": "Abrir hilo",
168169
"aria/Reaction list": "Lista de reacciones",
169-
"aria/Remind Me Options": "aria/Remind Me Options",
170+
"aria/Remind Me Options": "Opciones de recordatorio",
170171
"aria/Remove attachment": "Eliminar adjunto",
171172
"aria/Retry upload": "Reintentar carga",
172173
"aria/Search results": "Resultados de búsqueda",
@@ -195,6 +196,7 @@
195196
"timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
196197
"timestamp/PollVote": "{{ timestamp | timestampFormatter(format: MMM D [at] HH:mm) }}",
197198
"timestamp/PollVoteTooltip": "{{ timestamp | timestampFormatter(calendar: true) }}",
199+
"timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
198200
"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
199201
"unban-command-args": "[@usuario]",
200202
"unban-command-description": "Quitar la prohibición a un usuario",

‎src/i18n/fr.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"Download attachment {{ name }}": "Télécharger la pièce jointe {{ name }}",
2828
"Drag your files here": "Glissez vos fichiers ici",
2929
"Drag your files here to add to your post": "Glissez vos fichiers ici pour les ajouter à votre publication",
30-
"Due {{ dueTimeElapsed }}": "Due {{ dueTimeElapsed }}",
30+
"Due since {{ dueSince }}": "Échéance depuis {{ dueSince }}",
31+
"Due {{ dueTimeElapsed }}": "Échéance {{ dueTimeElapsed }}",
3132
"Edit Message": "Éditer un message",
3233
"Edit message request failed": "Échec de la demande de modification du message",
3334
"Edited": "Modifié",
@@ -94,12 +95,12 @@
9495
"Question": "Question",
9596
"Quote": "Citer",
9697
"Recording format is not supported and cannot be reproduced": "Le format d'enregistrement n'est pas pris en charge et ne peut pas être reproduit",
97-
"Remind Me": "Remind Me",
98-
"Remove reminder": "Remove reminder",
98+
"Remind Me": "Me rappeler",
99+
"Remove reminder": "Supprimer le rappel",
99100
"Reply": "Répondre",
100101
"Reply to Message": "Répondre au message",
101-
"Save for later": "Save for later",
102-
"Saved for later": "Saved for later",
102+
"Save for later": "Enregistrer pour plus tard",
103+
"Saved for later": "Enregistré pour plus tard",
103104
"Search": "Rechercher",
104105
"Searching...": "Recherche en cours...",
105106
"See all options ({{count}})_many": "Voir toutes les options ({{count}})",
@@ -166,7 +167,7 @@
166167
"aria/Open Reaction Selector": "Ouvrir le sélecteur de réactions",
167168
"aria/Open Thread": "Ouvrir le fil",
168169
"aria/Reaction list": "Liste des réactions",
169-
"aria/Remind Me Options": "aria/Remind Me Options",
170+
"aria/Remind Me Options": "Options de rappel",
170171
"aria/Remove attachment": "Supprimer la pièce jointe",
171172
"aria/Retry upload": "Réessayer le téléchargement",
172173
"aria/Search results": "Résultats de recherche",
@@ -195,6 +196,7 @@
195196
"timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
196197
"timestamp/PollVote": "{{ timestamp | timestampFormatter(format: MMM D [at] HH:mm) }}",
197198
"timestamp/PollVoteTooltip": "{{ timestamp | timestampFormatter(calendar: true) }}",
199+
"timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
198200
"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
199201
"unban-command-args": "[@nomdutilisateur]",
200202
"unban-command-description": "Débannir un utilisateur",

‎src/i18n/hi.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"Download attachment {{ name }}": "अनुलग्नक {{ name }} डाउनलोड करें",
2828
"Drag your files here": "अपनी फ़ाइलें यहाँ खींचें",
2929
"Drag your files here to add to your post": "अपनी फ़ाइलें यहाँ खींचें और अपने पोस्ट में जोड़ने के लिए",
30-
"Due {{ dueTimeElapsed }}": "Due {{ dueTimeElapsed }}",
30+
"Due since {{ dueSince }}": "{{ dueSince }} से देय",
31+
"Due {{ dueTimeElapsed }}": "{{ dueTimeElapsed }} में देय",
3132
"Edit Message": "मैसेज में बदलाव करे",
3233
"Edit message request failed": "संदेश संपादित करने का अनुरोध विफल रहा",
3334
"Edited": "संपादित",
@@ -95,12 +96,12 @@
9596
"Question": "प्रश्न",
9697
"Quote": "उद्धरण",
9798
"Recording format is not supported and cannot be reproduced": "रेकॉर्डिंग फ़ॉर्मेट समर्थित नहीं है और पुनः उत्पन्न नहीं किया जा सकता",
98-
"Remind Me": "Remind Me",
99-
"Remove reminder": "Remove reminder",
99+
"Remind Me": "मुझे याद दिलाएं",
100+
"Remove reminder": "रिमाइंडर हटाएं",
100101
"Reply": "जवाब दे दो",
101102
"Reply to Message": "संदेश का जवाब दें",
102-
"Save for later": "Save for later",
103-
"Saved for later": "Saved for later",
103+
"Save for later": "बाद के लिए सहेजें",
104+
"Saved for later": "बाद के लिए सहेजा गया",
104105
"Search": "खोज",
105106
"Searching...": "खोज कर...",
106107
"See all options ({{count}})_one": "सभी विकल्प देखें ({{count}})",
@@ -164,7 +165,7 @@
164165
"aria/Open Reaction Selector": "प्रतिक्रिया चयनकर्ता खोलें",
165166
"aria/Open Thread": "थ्रेड खोलें",
166167
"aria/Reaction list": "प्रतिक्रिया सूची",
167-
"aria/Remind Me Options": "aria/Remind Me Options",
168+
"aria/Remind Me Options": "रिमाइंडर विकल्प",
168169
"aria/Remove attachment": "संलग्नक हटाएं",
169170
"aria/Retry upload": "अपलोड पुनः प्रयास करें",
170171
"aria/Search results": "खोज परिणाम",
@@ -191,6 +192,7 @@
191192
"timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
192193
"timestamp/PollVote": "{{ timestamp | timestampFormatter(format: MMM D [at] HH:mm) }}",
193194
"timestamp/PollVoteTooltip": "{{ timestamp | timestampFormatter(calendar: true) }}",
195+
"timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
194196
"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
195197
"unban-command-args": "[@उपयोगकर्तनाम]",
196198
"unban-command-description": "एक उपयोगकर्ता को प्रतिषेध से मुक्त करें",

‎src/i18n/it.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"Download attachment {{ name }}": "Scarica l'allegato {{ name }}",
2828
"Drag your files here": "Trascina i tuoi file qui",
2929
"Drag your files here to add to your post": "Trascina i tuoi file qui per aggiungerli al tuo post",
30-
"Due {{ dueTimeElapsed }}": "Due {{ dueTimeElapsed }}",
30+
"Due since {{ dueSince }}": "Scaduto dal {{ dueSince }}",
31+
"Due {{ dueTimeElapsed }}": "Scadenza {{ dueTimeElapsed }}",
3132
"Edit Message": "Modifica messaggio",
3233
"Edit message request failed": "Richiesta di modifica del messaggio non riuscita",
3334
"Edited": "Modificato",
@@ -94,12 +95,12 @@
9495
"Question": "Domanda",
9596
"Quote": "Citazione",
9697
"Recording format is not supported and cannot be reproduced": "Il formato di registrazione non è supportato e non può essere riprodotto",
97-
"Remind Me": "Remind Me",
98-
"Remove reminder": "Remove reminder",
98+
"Remind Me": "Ricordami",
99+
"Remove reminder": "Rimuovi promemoria",
99100
"Reply": "Rispondi",
100101
"Reply to Message": "Rispondi al messaggio",
101-
"Save for later": "Save for later",
102-
"Saved for later": "Saved for later",
102+
"Save for later": "Salva per dopo",
103+
"Saved for later": "Salvato per dopo",
103104
"Search": "Cerca",
104105
"Searching...": "Ricerca in corso...",
105106
"See all options ({{count}})_many": "Vedi tutte le opzioni ({{count}})",
@@ -166,7 +167,7 @@
166167
"aria/Open Reaction Selector": "Apri il selettore di reazione",
167168
"aria/Open Thread": "Apri discussione",
168169
"aria/Reaction list": "Elenco delle reazioni",
169-
"aria/Remind Me Options": "aria/Remind Me Options",
170+
"aria/Remind Me Options": "Opzioni promemoria",
170171
"aria/Remove attachment": "Rimuovi allegato",
171172
"aria/Retry upload": "Riprova caricamento",
172173
"aria/Search results": "Risultati della ricerca",
@@ -195,6 +196,7 @@
195196
"timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
196197
"timestamp/PollVote": "{{ timestamp | timestampFormatter(format: MMM D [at] HH:mm) }}",
197198
"timestamp/PollVoteTooltip": "{{ timestamp | timestampFormatter(calendar: true) }}",
199+
"timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
198200
"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
199201
"unban-command-args": "[@nomeutente]",
200202
"unban-command-description": "Togliere il divieto a un utente",

0 commit comments

Comments
 (0)