Fix sync statuses on the fe (#7117)

Follows #6685
This commit is contained in:
Raphaël Bosi
2024-09-18 18:46:39 +02:00
committed by GitHub
parent 02618b3e6a
commit 1d56ace2af
12 changed files with 245 additions and 47 deletions

View File

@ -1,8 +1,9 @@
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus';
import { Status } from '@/ui/display/status/components/Status';
import styled from '@emotion/styled';
import { useMemo } from 'react';
const StyledRowRightContainer = styled.div`
align-items: center;
@ -15,39 +16,26 @@ export const SettingsAccountsConnectedAccountsRowRightContainer = ({
}: {
account: ConnectedAccount;
}) => {
const mCSyncStatus = account.messageChannels[0]?.syncStatus;
const cCSyncStatus = account.calendarChannels[0]?.syncStatus;
const messageChannelSyncStatus = account.messageChannels[0]?.syncStatus;
const calendarChannelSyncStatus = account.calendarChannels[0]?.syncStatus;
const status = useMemo(() => {
if (mCSyncStatus === 'ACTIVE' && cCSyncStatus === 'ACTIVE') {
return 'Synced';
} else if (mCSyncStatus === 'NOT_SYNCED' && cCSyncStatus === 'NOT_SYNCED') {
return 'Not synced';
} else if (mCSyncStatus === 'ONGOING' || cCSyncStatus === 'ONGOING') {
return 'Importing';
} else if (
mCSyncStatus === 'FAILED' ||
mCSyncStatus === 'FAILED_INSUFFICIENT_PERMISSIONS' ||
cCSyncStatus === 'FAILED' ||
cCSyncStatus === 'FAILED_INSUFFICIENT_PERMISSIONS'
) {
return 'Failed';
}
return '';
}, [mCSyncStatus, cCSyncStatus]);
const status = computeSyncStatus(
messageChannelSyncStatus,
calendarChannelSyncStatus,
);
return (
<StyledRowRightContainer>
{status === 'Failed' && (
{status === SyncStatus.FAILED && (
<Status color="red" text="Sync failed" weight="medium" />
)}
{status === 'Synced' && (
{status === SyncStatus.SYNCED && (
<Status color="green" text="Synced" weight="medium" />
)}
{status === 'Not synced' && (
{status === SyncStatus.NOT_SYNCED && (
<Status color="orange" text="Not synced" weight="medium" />
)}
{status === 'Importing' && (
{status === SyncStatus.IMPORTING && (
<Status
color="turquoise"
text="Importing"