81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
|
import React, { useCallback } from 'react';
|
||
|
|
import { Box, Button, color, Spinner, Text } from 'folds';
|
||
|
|
import { MatrixError } from 'matrix-js-sdk';
|
||
|
|
import { SequenceCard } from '../../../components/sequence-card';
|
||
|
|
import { SequenceCardStyle } from '../../room-settings/styles.css';
|
||
|
|
import { SettingTile } from '../../../components/setting-tile';
|
||
|
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||
|
|
import { useRoom } from '../../../hooks/useRoom';
|
||
|
|
import { StateEvent } from '../../../../types/matrix/room';
|
||
|
|
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||
|
|
import { useStateEvent } from '../../../hooks/useStateEvent';
|
||
|
|
import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
|
||
|
|
import { RetentionContent, RETENTION_PRESETS } from '../../../utils/retention';
|
||
|
|
|
||
|
|
type RoomRetentionProps = {
|
||
|
|
permissions: RoomPermissionsAPI;
|
||
|
|
};
|
||
|
|
export function RoomRetention({ permissions }: RoomRetentionProps) {
|
||
|
|
const mx = useMatrixClient();
|
||
|
|
const room = useRoom();
|
||
|
|
|
||
|
|
const canEdit = permissions.stateEvent(StateEvent.RoomRetention, mx.getSafeUserId());
|
||
|
|
|
||
|
|
const event = useStateEvent(room, StateEvent.RoomRetention);
|
||
|
|
const currentMs = event?.getContent<RetentionContent>().max_lifetime ?? 0;
|
||
|
|
|
||
|
|
const [submitState, submit] = useAsyncCallback(
|
||
|
|
useCallback(
|
||
|
|
async (ms: number) => {
|
||
|
|
const content: RetentionContent = ms > 0 ? { max_lifetime: ms } : {};
|
||
|
|
// Lotus custom-state convention: cast the type key (RoomRetention isn't a
|
||
|
|
// typed key in the SDK's StateEvents map).
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
await mx.sendStateEvent(room.roomId, StateEvent.RoomRetention as any, content);
|
||
|
|
},
|
||
|
|
[mx, room.roomId],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
const submitting = submitState.status === AsyncStatus.Loading;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SequenceCard
|
||
|
|
className={SequenceCardStyle}
|
||
|
|
variant="SurfaceVariant"
|
||
|
|
direction="Column"
|
||
|
|
gap="400"
|
||
|
|
>
|
||
|
|
<SettingTile
|
||
|
|
title="Message Retention"
|
||
|
|
description="Messages older than this window disappear from the timeline. Each member can opt in to permanently delete their own expired messages in Settings → General; full server-side deletion also requires homeserver retention to be configured."
|
||
|
|
>
|
||
|
|
<Box gap="200" alignItems="Center" style={{ flexWrap: 'wrap' }}>
|
||
|
|
{RETENTION_PRESETS.map((preset) => {
|
||
|
|
const active = currentMs === preset.ms;
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
key={preset.label}
|
||
|
|
type="button"
|
||
|
|
size="300"
|
||
|
|
variant={active ? 'Primary' : 'Secondary'}
|
||
|
|
fill={active ? 'Solid' : 'Soft'}
|
||
|
|
radii="300"
|
||
|
|
disabled={!canEdit || submitting}
|
||
|
|
onClick={() => submit(preset.ms)}
|
||
|
|
>
|
||
|
|
<Text size="B300">{preset.label}</Text>
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{submitting && <Spinner size="100" variant="Secondary" />}
|
||
|
|
</Box>
|
||
|
|
{submitState.status === AsyncStatus.Error && (
|
||
|
|
<Text style={{ color: color.Critical.Main }} size="T200">
|
||
|
|
{(submitState.error as MatrixError).message}
|
||
|
|
</Text>
|
||
|
|
)}
|
||
|
|
</SettingTile>
|
||
|
|
</SequenceCard>
|
||
|
|
);
|
||
|
|
}
|