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>