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

Split back fetch more loader for record table and emails (#3693)

Browse Source 
* Split back fetch more loader

* Rename loader

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-30 14:50:33 +01:00
committed by GitHub
parent 73f6876641
commit 84b6bea2b9
4 changed files with 38 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,34 @@
import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled';
import { grayScale } from '@/ui/theme/constants/colors';
type EmailThreadFetchMoreLoaderProps = {
loading: boolean;
onLastRowVisible: (...args: any[]) => any;
};
const StyledText = styled.div`
align-items: center;
box-shadow: none;
color: ${grayScale.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>
);
};

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

@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
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.constants';
import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
@ -21,7 +22,6 @@ import {
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
import {
GetTimelineThreadsFromPersonIdQueryVariables,
TimelineThread,
@ -146,7 +146,7 @@ export const EmailThreads = ({
))}
</Card>
)}
<FetchMoreLoader
<EmailThreadFetchMoreLoader
loading={isFetchingMoreEmails}
onLastRowVisible={fetchMoreRecords}
/>

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

@ -2,13 +2,13 @@ import React, { useCallback } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState';
import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
const StyledContainer = styled.div`
box-sizing: border-box;
@ -67,7 +67,10 @@ export const RightDrawerEmailThread = () => {
sentAt={message.receivedAt}
/>
))}
<FetchMoreLoader loading={loading} onLastRowVisible={fetchMoreMessages} />
<EmailThreadFetchMoreLoader
loading={loading}
onLastRowVisible={fetchMoreMessages}
/>
</StyledContainer>
);
};