2929 fetch emails from backend and display them in the UI (#3092)

* sending mock data from the resolver * add sql raw query to the resolver * improve query * fix email component css * fix query * css adjustments * create hard limit for mail display * fix display name ellipsis * add service * fetching email on company page is working * graphql generate * move queries into separate files * add types * renaming * add early return * modified according to comments * graphql data generate * fix bug after renaming * fix issue with mock data
2023-12-21 18:21:07 +01:00
parent 7f66eb9459
commit 1b7580476d
15 changed files with 489 additions and 93 deletions
--- a/packages/twenty-front/src/modules/activities/emails/components/Emails.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/Emails.tsx
@ -1,47 +0,0 @@
-import styled from '@emotion/styled';
-
-import {
-  H1Title,
-  H1TitleFontColor,
-} from '@/ui/display/typography/components/H1Title';
-import { Card } from '@/ui/layout/card/components/Card';
-import { Section } from '@/ui/layout/section/components/Section';
-import { mockedEmails as emails } from '~/testing/mock-data/activities';
-
-import { EmailPreview } from './EmailPreview';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(6)};
-  padding: ${({ theme }) => theme.spacing(6, 6, 2)};
-`;
-
-const StyledH1Title = styled(H1Title)`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledEmailCount = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
-`;
-
-export const Emails = () => (
-  <StyledContainer>
-    <Section>
-      <StyledH1Title
-        title={
-          <>
-            Inbox <StyledEmailCount>{emails.length}</StyledEmailCount>
-          </>
-        }
-        fontColor={H1TitleFontColor.Primary}
-      />
-      <Card>
-        {emails.map((email, index) => (
-          <EmailPreview divider={index < emails.length - 1} email={email} />
-        ))}
-      </Card>
-    </Section>
-  </StyledContainer>
-);
--- a/packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/ThreadPreview.tsx
@ -2,10 +2,9 @@ import styled from '@emotion/styled';

 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Avatar } from '@/users/components/Avatar';
+import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';

-import { Email } from '../types/email';
-
 const StyledCardContent = styled(CardContent)`
  align-items: center;
  display: flex;
@ -22,6 +21,7 @@ const StyledHeading = styled.div<{ unread: boolean }>`
  font-weight: ${({ theme, unread }) =>
    unread ? theme.font.weight.medium : theme.font.weight.regular};
  gap: ${({ theme }) => theme.spacing(1)};
+  overflow: hidden;
  width: 160px;

  :before {
@ -39,50 +39,66 @@ const StyledAvatar = styled(Avatar)`
  margin: ${({ theme }) => theme.spacing(0, 1)};
 `;

+const StyledSenderName = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledThreadCount = styled.span`
  color: ${({ theme }) => theme.font.color.tertiary};
 `;

-const StyledSubject = styled.div<{ unread: boolean }>`
+const StyledSubject = styled.span<{ unread: boolean }>`
  color: ${({ theme, unread }) =>
    unread ? theme.font.color.primary : theme.font.color.secondary};
+  white-space: nowrap;
 `;

-const StyledBody = styled.div`
+const StyledBody = styled.span`
  color: ${({ theme }) => theme.font.color.tertiary};
-  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 `;

+const StyledSubjectAndBody = styled.div`
+  display: flex;
+  flex: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const StyledReceivedAt = styled.div`
  font-size: ${({ theme }) => theme.font.size.sm};
  font-weight: ${({ theme }) => theme.font.weight.regular};
  padding: ${({ theme }) => theme.spacing(0, 1)};
 `;

-type EmailPreviewProps = {
+type ThreadPreviewProps = {
  divider?: boolean;
-  email: Email;
+  thread: TimelineThread;
 };

-export const EmailPreview = ({ divider, email }: EmailPreviewProps) => (
+export const ThreadPreview = ({ divider, thread }: ThreadPreviewProps) => (
  <StyledCardContent divider={divider}>
-    <StyledHeading unread={!email.read}>
+    <StyledHeading unread={!thread.read}>
      <StyledAvatar
-        avatarUrl={email.senderPictureUrl}
-        placeholder={email.senderName}
+        avatarUrl={thread.senderPictureUrl}
+        placeholder={thread.senderName}
        type="rounded"
      />
-      {email.senderName}{' '}
-      <StyledThreadCount>{email.numberOfEmailsInThread}</StyledThreadCount>
+      <StyledSenderName>{thread.senderName}</StyledSenderName>
+      <StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
    </StyledHeading>
-    <StyledSubject unread={!email.read}>{email.subject}</StyledSubject>
-    <StyledBody>{email.body}</StyledBody>
+
+    <StyledSubjectAndBody>
+      <StyledSubject unread={!thread.read}>{thread.subject}</StyledSubject>
+      <StyledBody>{thread.body}</StyledBody>
+    </StyledSubjectAndBody>
    <StyledReceivedAt>
-      {formatToHumanReadableDate(email.receivedAt)}
+      {formatToHumanReadableDate(thread.receivedAt)}
    </StyledReceivedAt>
  </StyledCardContent>
 );
--- a/packages/twenty-front/src/modules/activities/emails/components/Threads.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/Threads.tsx
@ -0,0 +1,82 @@
+import { useQuery } from '@apollo/client';
+import styled from '@emotion/styled';
+
+import { ThreadPreview } from '@/activities/emails/components/ThreadPreview';
+import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
+import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import {
+  H1Title,
+  H1TitleFontColor,
+} from '@/ui/display/typography/components/H1Title';
+import { Card } from '@/ui/layout/card/components/Card';
+import { Section } from '@/ui/layout/section/components/Section';
+import { TimelineThread } from '~/generated/graphql';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(6, 6, 2)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledEmailCount = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
+export const Threads = ({ entity }: { entity: ActivityTargetableEntity }) => {
+  const threadQuery =
+    entity.type === 'Person'
+      ? getTimelineThreadsFromPersonId
+      : getTimelineThreadsFromCompanyId;
+
+  const threadQueryVariables =
+    entity.type === 'Person'
+      ? { personId: entity.id }
+      : { companyId: entity.id };
+
+  const threads = useQuery(threadQuery, {
+    variables: threadQueryVariables,
+  });
+
+  if (threads.loading) {
+    return;
+  }
+
+  const timelineThreads: TimelineThread[] =
+    threads.data[
+      entity.type === 'Person'
+        ? 'getTimelineThreadsFromPersonId'
+        : 'getTimelineThreadsFromCompanyId'
+    ];
+
+  return (
+    <StyledContainer>
+      <Section>
+        <StyledH1Title
+          title={
+            <>
+              Inbox{' '}
+              <StyledEmailCount>{timelineThreads.length}</StyledEmailCount>
+            </>
+          }
+          fontColor={H1TitleFontColor.Primary}
+        />
+        <Card>
+          {timelineThreads.map((thread: TimelineThread, index: number) => (
+            <ThreadPreview
+              key={index}
+              divider={index < timelineThreads.length - 1}
+              thread={thread}
+            />
+          ))}
+        </Card>
+      </Section>
+    </StyledContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/activities/emails/components/stories/Emails.stories.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/stories/Emails.stories.tsx
@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Emails } from '../Emails';
-
-const meta: Meta<typeof Emails> = {
-  title: 'Modules/Activity/Emails/Emails',
-  component: Emails,
-};
-
-export default meta;
-type Story = StoryObj<typeof Emails>;
-
-export const Default: Story = {};
--- a/packages/twenty-front/src/modules/activities/emails/components/stories/Threads.stories.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/stories/Threads.stories.tsx
@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Threads } from '../Threads';
+
+const meta: Meta<typeof Threads> = {
+  title: 'Modules/Activity/Emails/Threads',
+  component: Threads,
+};
+
+export default meta;
+type Story = StoryObj<typeof Threads>;
+
+export const Default: Story = {};
--- a/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromCompanyId.ts
+++ b/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromCompanyId.ts
@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const getTimelineThreadsFromCompanyId = gql`
+  query GetTimelineThreadsFromCompanyId($companyId: String!) {
+    getTimelineThreadsFromCompanyId(companyId: $companyId) {
+      body
+      numberOfMessagesInThread
+      read
+      receivedAt
+      senderName
+      senderPictureUrl
+      subject
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromPersonId.ts
+++ b/packages/twenty-front/src/modules/activities/emails/queries/getTimelineThreadsFromPersonId.ts
@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const getTimelineThreadsFromPersonId = gql`
+  query GetTimelineThreadsFromPersonId($personId: String!) {
+    getTimelineThreadsFromPersonId(personId: $personId) {
+      body
+      numberOfMessagesInThread
+      read
+      receivedAt
+      senderName
+      senderPictureUrl
+      subject
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/activities/emails/types/email.ts
+++ b/packages/twenty-front/src/modules/activities/emails/types/email.ts
@ -1,9 +0,0 @@
-export type Email = {
-  body: string;
-  numberOfEmailsInThread: number;
-  read: boolean;
-  receivedAt: Date;
-  senderName: string;
-  senderPictureUrl: string;
-  subject: string;
-};
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@ -1,6 +1,6 @@
 import styled from '@emotion/styled';

-import { Emails } from '@/activities/emails/components/Emails';
+import { Threads } from '@/activities/emails/components/Threads';
 import { Attachments } from '@/activities/files/components/Attachments';
 import { Notes } from '@/activities/notes/components/Notes';
 import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
@ -108,7 +108,7 @@ export const ShowPageRightContainer = ({
      {activeTabId === 'tasks' && <EntityTasks entity={entity} />}
      {activeTabId === 'notes' && <Notes entity={entity} />}
      {activeTabId === 'files' && <Attachments targetableEntity={entity} />}
-      {activeTabId === 'emails' && <Emails />}
+      {activeTabId === 'emails' && <Threads entity={entity} />}
    </StyledShowPageRightContainer>
  );
 };