scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 20:27:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added sync status on the FE (#6730)

Browse Source 
Issue #6685 

How do we make sure we get the latest syncStatus on the frontend?
For now we dont get it unless refreshed.
useInterval() on fetching account details?
This commit is contained in:
nitin
2024-08-27 14:41:24 +05:30
committed by GitHub
parent d61d5857f8
commit 33e455655f
3 changed files with 64 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts
View File

@@ -6,5 +6,6 @@ export type CalendarChannel = {
isContactAutoCreationEnabled?: boolean;
isSyncEnabled?: boolean;
visibility: CalendarChannelVisibility;
syncStatus: string;
__typename: 'CalendarChannel';
};

17
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
View File

@@ -1,22 +1,14 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { IconGoogle } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Status } from '@/ui/display/status/components/Status';
import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
import { SettingsListCard } from '../../components/SettingsListCard';
const StyledRowRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsConnectedAccountsListCard = ({
accounts,
loading,
@@ -37,12 +29,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
isLoading={loading}
RowIcon={IconGoogle}
RowRightComponent={({ item: account }) => (
<StyledRowRightContainer>
{account.authFailedAt && (
<Status color="red" text="Sync failed" weight="medium" />
)}
<SettingsAccountsRowDropdownMenu account={account} />
</StyledRowRightContainer>
<SettingsAccountsConnectedAccountsRowRightContainer account={account} />
)}
hasFooter
footerButtonLabel="Add account"

61
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { Status } from '@/ui/display/status/components/Status';
import styled from '@emotion/styled';
import { useMemo } from 'react';
const StyledRowRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsConnectedAccountsRowRightContainer = ({
account,
}: {
account: ConnectedAccount;
}) => {
const mCSyncStatus = account.messageChannels[0]?.syncStatus;
const cCSyncStatus = 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]);
return (
<StyledRowRightContainer>
{status === 'Failed' && (
<Status color="red" text="Sync failed" weight="medium" />
)}
{status === 'Synced' && (
<Status color="green" text="Synced" weight="medium" />
)}
{status === 'Not synced' && (
<Status color="orange" text="Not synced" weight="medium" />
)}
{status === 'Importing' && (
<Status
color="turquoise"
text="Importing"
weight="medium"
isLoaderVisible
/>
)}
<SettingsAccountsRowDropdownMenu account={account} />
</StyledRowRightContainer>
);
};