Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
4.6 kB · 136 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137import { Button } from '@luke-ui/react/button';import { Cluster } from '@luke-ui/react/cluster';import { Heading } from '@luke-ui/react/heading';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';import { useId, useState } from 'react';import { Dialog, DialogTrigger } from 'react-aria-components/Dialog';import { Modal, ModalOverlay } from 'react-aria-components/Modal';import { DEFAULT_SETTINGS } from '../api/schemas.js';import { settingsApi } from '../api/settings-api.js';import { settingsQueryKey } from '../api/settings-query.js';import * as styles from '../styles/settings.css.js';import { SettingsRow, SettingsSection, SettingsStatus } from './settings-section.js';
const CLEAR_MUTATION_KEY = [...settingsQueryKey, 'clear'] as const;
type ClearSavedSettingsSectionProps = { onCleared: () => void;};
export function ClearSavedSettingsSection({ onCleared }: ClearSavedSettingsSectionProps) { const queryClient = useQueryClient(); const descriptionId = useId(); const [isOpen, setIsOpen] = useState(false); const isOtherMutationPending = useIsMutating({ mutationKey: settingsQueryKey, predicate: (mutation) => mutation.options.mutationKey?.[1] !== 'clear', }) > 0; const isPending = useIsMutating({ exact: true, mutationKey: CLEAR_MUTATION_KEY }) > 0; const mutation = useMutation({ mutationFn: () => settingsApi.clearLocalSettings(), mutationKey: CLEAR_MUTATION_KEY, onSuccess: () => { queryClient.setQueryData(settingsQueryKey, structuredClone(DEFAULT_SETTINGS)); onCleared(); }, }); const error = mutation.error instanceof Error ? mutation.error.message : undefined; const pendingMessage = isPending ? 'Clearing…' : null; const clearedMessage = mutation.isSuccess ? 'Saved settings cleared' : null;
async function clearSettings() { if (!isOpen || isPending || isOtherMutationPending) return;
mutation.reset(); try { await mutation.mutateAsync(); setIsOpen(false); } catch { // Keep the confirmation open so the same action can be retried. } }
function changeOpen(next: boolean) { if (isPending) return; setIsOpen(next); if (next) { mutation.reset(); } }
return ( <> <SettingsSection title="Browser data"> <SettingsRow hint="Remove your profile and preferences from this browser." label="Saved settings" > <DialogTrigger isOpen={isOpen} onOpenChange={changeOpen}> <Button isDisabled={isOtherMutationPending} tone="critical"> Clear saved settings </Button> <ModalOverlay className={styles.dialogOverlay} isDismissable={!isPending} isKeyboardDismissDisabled={isPending} > <Modal className={styles.dialogModal}> <Dialog aria-describedby={descriptionId} aria-label="Clear saved settings?" className={styles.dialog} role="alertdialog" > <Stack gap="space.16"> <Heading level={2} shouldDisableTrim typography="heading3"> Clear saved settings? </Heading> <Text color="secondary" elementType="p" id={descriptionId}> Your profile and preferences will be removed from this browser. This cannot be undone. </Text> <Stack gap={error || isPending || isOtherMutationPending ? 'space.8' : '0'}> <Text color={error ? 'danger' : 'secondary'} elementType="p" fontWeight="body" role={error ? 'alert' : 'status'} shouldDisableTrim typography="label" > {error ?? (isOtherMutationPending ? 'Saving…' : pendingMessage)} </Text> <Cluster gap="space.8" justifyContent="flex-end"> <Button isDisabled={isPending} onPress={() => changeOpen(false)} prominence="low" > Cancel </Button> <Button isPending={isPending} onPress={() => void clearSettings()} prominence="high" tone="critical" > Clear settings </Button> </Cluster> </Stack> </Stack> </Dialog> </Modal> </ModalOverlay> </DialogTrigger> </SettingsRow> </SettingsSection> <SettingsStatus tone={mutation.isSuccess ? 'success' : undefined}> {isOtherMutationPending ? 'Saving…' : clearedMessage} </SettingsStatus> </> );}