pl-fe: improve mute expiration handling
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
@ -108,6 +108,7 @@ interface IAccount {
|
||||
note?: string;
|
||||
items?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
muteExpiresAt?: string | null;
|
||||
}
|
||||
|
||||
const Account = ({
|
||||
@ -135,6 +136,7 @@ const Account = ({
|
||||
note,
|
||||
items,
|
||||
disabled,
|
||||
muteExpiresAt,
|
||||
}: IAccount) => {
|
||||
const overflowRef = useRef<HTMLDivElement>(null);
|
||||
const actionRef = useRef<HTMLDivElement>(null);
|
||||
@ -381,11 +383,11 @@ const Account = ({
|
||||
</>
|
||||
)}
|
||||
|
||||
{actionType === 'muting' && account.mute_expires_at ? (
|
||||
{actionType === 'muting' && muteExpiresAt ? (
|
||||
<>
|
||||
<Text tag='span' theme='muted' size='sm'>·</Text>
|
||||
|
||||
<Text theme='muted' size='sm'><RelativeTimestamp timestamp={account.mute_expires_at} futureDate /></Text>
|
||||
<Text theme='muted' size='sm'><RelativeTimestamp timestamp={muteExpiresAt} futureDate /></Text>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
|
||||
@ -1,17 +1,5 @@
|
||||
import type { Account as BaseAccount } from 'pl-api';
|
||||
import type { Account } from 'pl-api';
|
||||
|
||||
const normalizeAccount = (account: BaseAccount) => {
|
||||
const missingAvatar: string = require('pl-fe/assets/images/avatar-missing.png');
|
||||
const missingHeader: string = require('pl-fe/assets/images/header-missing.png');
|
||||
|
||||
return {
|
||||
mute_expires_at: null,
|
||||
...account,
|
||||
avatar: account.avatar || account.avatar_static || missingAvatar,
|
||||
header: account.header || account.header_static || missingHeader,
|
||||
};
|
||||
};
|
||||
|
||||
type Account = ReturnType<typeof normalizeAccount>;
|
||||
const normalizeAccount = (account: Account) => account;
|
||||
|
||||
export { normalizeAccount, type Account };
|
||||
|
||||
@ -35,8 +35,8 @@ const MutesPage: React.FC = () => {
|
||||
<FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />
|
||||
}
|
||||
>
|
||||
{data.map((accountId) =>
|
||||
<AccountContainer key={accountId} id={accountId} actionType='muting' />,
|
||||
{data.map(([accountId, muteExpiresAt]) =>
|
||||
<AccountContainer key={accountId} id={accountId} actionType='muting' muteExpiresAt={muteExpiresAt} />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
</Stack>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { makePaginatedResponseQuery } from '../utils/make-paginated-response-query';
|
||||
import { minifyAccountList } from '../utils/minify-list';
|
||||
import { minifyAccountList, minifyMutedAccountList } from '../utils/minify-list';
|
||||
|
||||
const useBlocks = makePaginatedResponseQuery(
|
||||
['accountsLists', 'blocked'],
|
||||
@ -8,7 +8,7 @@ const useBlocks = makePaginatedResponseQuery(
|
||||
|
||||
const useMutes = makePaginatedResponseQuery(
|
||||
['accountsLists', 'muted'],
|
||||
(client) => client.filtering.getMutes({ with_relationships: true }).then(minifyAccountList),
|
||||
(client) => client.filtering.getMutes({ with_relationships: true }).then(minifyMutedAccountList),
|
||||
);
|
||||
|
||||
export { useBlocks, useMutes };
|
||||
|
||||
@ -3,7 +3,7 @@ import { store } from 'pl-fe/store';
|
||||
|
||||
import { queryClient } from '../client';
|
||||
|
||||
import type { Account, AdminAccount, AdminReport, PaginatedResponse, Status } from 'pl-api';
|
||||
import type { Account, AdminAccount, AdminReport, MutedAccount, PaginatedResponse, Status } from 'pl-api';
|
||||
|
||||
const minifyList = <T1, T2>({ previous, next, items, ...response }: PaginatedResponse<T1>, minifier: (value: T1) => T2, importer?: (items: Array<T1>) => void): PaginatedResponse<T2> => {
|
||||
importer?.(items);
|
||||
@ -26,6 +26,11 @@ const minifyAccountList = (response: PaginatedResponse<Account>): PaginatedRespo
|
||||
store.dispatch(importEntities({ accounts }) as any);
|
||||
});
|
||||
|
||||
const minifyMutedAccountList = (response: PaginatedResponse<MutedAccount>): PaginatedResponse<[string, string | null]> =>
|
||||
minifyList(response, (account) => [account.id, account.mute_expires_at], (accounts) => {
|
||||
store.dispatch(importEntities({ accounts }) as any);
|
||||
});
|
||||
|
||||
const minifyAdminAccount = ({ account, ...adminAccount }: AdminAccount) => {
|
||||
store.dispatch(importEntities({ accounts: [account] }) as any);
|
||||
queryClient.setQueryData(['admin', 'accounts', adminAccount.id], adminAccount);
|
||||
@ -70,4 +75,4 @@ const minifyAdminReportList = (response: PaginatedResponse<AdminReport>) =>
|
||||
}
|
||||
});
|
||||
|
||||
export { minifyList, minifyAccountList, minifyStatusList, minifyAdminAccount, minifyAdminAccountList, minifyAdminReport, minifyAdminReportList };
|
||||
export { minifyList, minifyAccountList, minifyMutedAccountList, minifyStatusList, minifyAdminAccount, minifyAdminAccountList, minifyAdminReport, minifyAdminReportList };
|
||||
|
||||
Reference in New Issue
Block a user