admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

4488 connect calendar tab to backend (#4624)

Browse Source 
* create states and hooks

* implement fetch more records

* add empty state

* update types

* fix error

* add fetchmoreloader and add scroll to container

* fix visibility in calendarEventFragment

* fix fetchMoreRecords

* update TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE

* add test

* modify empty state subtitle

* replace entity by activityTargetableObject

* create useCustomResolver hook

* refactor

* refactoring

* use generic component

* rename FetchMoreLoader

* remove deprecated states and hooks

* fix typing

* update typing

* update error message

* renaming

* improve typing

* fix bug on contact creation from same company
This commit is contained in:
bosiraphael
2024-03-26 14:50:32 +01:00
committed by GitHub
parent 5c5dcf5cb5
commit fefa37b300
20 changed files with 263 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx
View File

@ -1,34 +0,0 @@
import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
type EmailThreadFetchMoreLoaderProps = {
loading: boolean;
onLastRowVisible: (...args: any[]) => any;
};
const StyledText = styled.div`
align-items: center;
box-shadow: none;
color: ${GRAY_SCALE.gray40};
display: flex;
height: 32px;
margin-left: ${({ theme }) => theme.spacing(8)};
padding-left: ${({ theme }) => theme.spacing(2)};
`;
export const EmailThreadFetchMoreLoader = ({
loading,
onLastRowVisible,
}: EmailThreadFetchMoreLoaderProps) => {
const { ref: tbodyRef } = useInView({
onChange: onLastRowVisible,
});
return (
<div ref={tbodyRef}>
{loading && <StyledText>Loading more...</StyledText>}
</div>
);
};

118
packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
View File

@ -1,22 +1,18 @@
import { useState } from 'react';
import { useQuery } from '@apollo/client';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
import { EmailLoader } from '@/activities/emails/components/EmailLoader';
import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/Messaging';
import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates';
import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import {
H1Title,
H1TitleFontColor,
} from '@/ui/display/typography/components/H1Title';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
@ -26,12 +22,7 @@ import {
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import {
GetTimelineThreadsFromPersonIdQueryVariables,
TimelineThread,
TimelineThreadsWithTotal,
} from '~/generated/graphql';
import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
const StyledContainer = styled.div`
display: flex;
@ -52,98 +43,25 @@ const StyledEmailCount = styled.span`
`;
export const EmailThreads = ({
entity,
targetableObject,
}: {
entity: ActivityTargetableObject;
targetableObject: ActivityTargetableObject;
}) => {
const { enqueueSnackBar } = useSnackBar();
const { emailThreadsPageState } = useEmailThreadStates({
emailThreadScopeId: getScopeIdFromComponentId(entity.id),
});
const [emailThreadsPage, setEmailThreadsPage] = useRecoilState(
emailThreadsPageState,
);
const [isFetchingMoreEmails, setIsFetchingMoreEmails] = useState(false);
const [threadQuery, queryName] =
entity.targetObjectNameSingular === CoreObjectNameSingular.Person
const [query, queryName] =
targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person
? [getTimelineThreadsFromPersonId, 'getTimelineThreadsFromPersonId']
: [getTimelineThreadsFromCompanyId, 'getTimelineThreadsFromCompanyId'];
const threadQueryVariables = {
...(entity.targetObjectNameSingular === CoreObjectNameSingular.Person
? { personId: entity.id }
: { companyId: entity.id }),
page: 1,
pageSize: TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
} as GetTimelineThreadsFromPersonIdQueryVariables;
const { data, firstQueryLoading, isFetchingMore, fetchMoreRecords } =
useCustomResolver<TimelineThreadsWithTotal>(
query,
queryName,
'timelineThreads',
targetableObject,
TIMELINE_THREADS_DEFAULT_PAGE_SIZE,
);
const {
data,
loading: firstQueryLoading,
fetchMore,
} = useQuery(threadQuery, {
variables: threadQueryVariables,
onError: (error) => {
enqueueSnackBar(error.message || 'Error loading email threads', {
variant: 'error',
});
},
});
const fetchMoreRecords = async () => {
if (
emailThreadsPage.hasNextPage &&
!isFetchingMoreEmails &&
!firstQueryLoading
) {
setIsFetchingMoreEmails(true);
await fetchMore({
variables: {
...threadQueryVariables,
page: emailThreadsPage.pageNumber + 1,
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult?.[queryName]?.timelineThreads?.length) {
setEmailThreadsPage((emailThreadsPage) => ({
...emailThreadsPage,
hasNextPage: false,
}));
return {
[queryName]: {
...prev?.[queryName],
timelineThreads: [
...(prev?.[queryName]?.timelineThreads ?? []),
],
},
};
}
return {
[queryName]: {
...prev?.[queryName],
timelineThreads: [
...(prev?.[queryName]?.timelineThreads ?? []),
...(fetchMoreResult?.[queryName]?.timelineThreads ?? []),
],
},
};
},
});
setEmailThreadsPage((emailThreadsPage) => ({
...emailThreadsPage,
pageNumber: emailThreadsPage.pageNumber + 1,
}));
setIsFetchingMoreEmails(false);
}
};
const { totalNumberOfThreads, timelineThreads }: TimelineThreadsWithTotal =
data?.[queryName] ?? [];
const { totalNumberOfThreads, timelineThreads } = data?.[queryName] ?? {};
if (firstQueryLoading) {
return <EmailLoader />;
@ -187,8 +105,8 @@ export const EmailThreads = ({
))}
</Card>
)}
<EmailThreadFetchMoreLoader
loading={isFetchingMoreEmails || firstQueryLoading}
<FetchMoreLoader
loading={isFetchingMore || firstQueryLoading}
onLastRowVisible={fetchMoreRecords}
/>
</Section>

37
packages/twenty-front/src/modules/activities/emails/hooks/internal/__tests__/useEmailThreadStates.test.ts
View File

@ -1,37 +0,0 @@
import { renderHook } from '@testing-library/react';
import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates';
const mockScopeId = 'mockScopeId';
const mockGetEmailThreadsPageState = jest.fn();
jest.mock(
'@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId',
() => ({
useAvailableScopeIdOrThrow: () => mockScopeId,
}),
);
jest.mock(
'@/ui/utilities/state/component-state/utils/extractComponentState',
() => ({
extractComponentState: () => mockGetEmailThreadsPageState,
}),
);
describe('useEmailThreadStates hook', () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('returns the correct scopeId and getEmailThreadsPageState', () => {
const { result } = renderHook(() =>
useEmailThreadStates({ emailThreadScopeId: 'mockEmailThreadScopeId' }),
);
expect(result.current.scopeId).toBe(mockScopeId);
expect(result.current.emailThreadsPageState).toBe(
mockGetEmailThreadsPageState,
);
});
});

25
packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts
View File

@ -1,25 +0,0 @@
import { emailThreadsPageComponentState } from '@/activities/emails/states/emailThreadsPageComponentState';
import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
type useEmailThreadStatesProps = {
emailThreadScopeId?: string;
};
export const useEmailThreadStates = ({
emailThreadScopeId,
}: useEmailThreadStatesProps) => {
const scopeId = useAvailableScopeIdOrThrow(
TabListScopeInternalContext,
emailThreadScopeId,
);
return {
scopeId,
emailThreadsPageState: extractComponentState(
emailThreadsPageComponentState,
scopeId,
),
};
};

4
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
View File

@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import { useRecoilCallback } from 'recoil';
import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
import { EmailLoader } from '@/activities/emails/components/EmailLoader';
import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
@ -62,7 +62,7 @@ export const RightDrawerEmailThread = () => {
sentAt={message.receivedAt}
/>
))}
<EmailThreadFetchMoreLoader
<FetchMoreLoader
loading={loading}
onLastRowVisible={fetchMoreMessages}
/>

12
packages/twenty-front/src/modules/activities/emails/states/emailThreadsPageComponentState.ts
View File

@ -1,12 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export type EmailThreadsPageType = {
pageNumber: number;
hasNextPage: boolean;
};
export const emailThreadsPageComponentState =
createComponentState<EmailThreadsPageType>({
key: 'emailThreadsPageComponentState',
defaultValue: { pageNumber: 1, hasNextPage: true },
});