Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 8x 14x 14x 14x 6x 5x 5x 5x 6x | import { useMutation, useQueryClient } from "@tanstack/react-query";
import Button from "components/Button";
import { DoneAllIcon } from "components/Icons";
import Snackbar from "components/Snackbar";
import { messageFilterToRequest } from "features/messages/constants";
import { listNotificationsQueryKey, messageThreadsListKey, pingQueryKey } from "features/queryKeys";
import { useTranslation } from "i18n";
import { MESSAGES } from "i18n/namespaces";
import { MessageFilterType } from "routes";
import { service } from "service";
export type MarkAllReadType = Exclude<MessageFilterType, "archived">;
const labelKeyByType: Record<MarkAllReadType, string> = {
all: "mark_all_read_button_text",
unread: "mark_all_read_button_text",
chats: "mark_all_read_button_text_chats",
hosting: "mark_all_read_button_text_hosting",
surfing: "mark_all_read_button_text_surfing",
"public-trips": "mark_all_read_button_text_public_trips",
};
export default function MarkAllReadButton({ type }: { type: MarkAllReadType }) {
const { t } = useTranslation(MESSAGES);
const queryClient = useQueryClient();
const markAll = useMutation({
mutationFn: () => service.conversations.markAllThreadsSeen(messageFilterToRequest(type)),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: messageThreadsListKey() });
// Invalidate ping to update badge counts in tabs
queryClient.invalidateQueries({ queryKey: [pingQueryKey] });
// MarkAllThreadsSeen also marks the chat notifications seen server-side, so the feed's
// seen state goes stale otherwise (the single-thread views invalidate this too).
queryClient.invalidateQueries({ queryKey: [listNotificationsQueryKey] });
},
});
return (
<>
{markAll.error && <Snackbar severity="error">{markAll.error.message}</Snackbar>}
<Button
onClick={() => markAll.mutate()}
loading={markAll.isPending}
variant="text"
size="small"
startIcon={<DoneAllIcon sx={{ fontSize: "0.875rem" }} />}
sx={{
textTransform: "none",
color: "var(--mui-palette-text-secondary)",
fontSize: "0.875rem",
paddingX: 1,
paddingY: 0.5,
"&:hover": {
backgroundColor: "var(--mui-palette-action-hover)",
color: "var(--mui-palette-text-primary)",
},
}}
>
{t(labelKeyByType[type])}
</Button>
</>
);
}
|