Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { Activity } from '@/activities/types/Activity';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { TimelineItemsContainer } from './TimelineItemsContainer';
+
+const StyledMainContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  border-top: ${({ theme }) =>
+    useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  justify-content: center;
+`;
+
+const StyledTimelineEmptyContainer = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+`;
+
+const StyledEmptyTimelineTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.xxl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+const StyledEmptyTimelineSubTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.extraLight};
+  font-size: ${({ theme }) => theme.font.size.xxl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
+  const { records: activityTargets, loading } = useFindManyRecords({
+    objectNameSingular: 'activityTarget',
+    filter: {
+      [entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
+    },
+  });
+
+  const { records: activities } = useFindManyRecords({
+    skip: !activityTargets?.length,
+    objectNameSingular: 'activity',
+    filter: {
+      id: {
+        in: activityTargets?.map((activityTarget) => activityTarget.activityId),
+      },
+    },
+    orderBy: {
+      createdAt: 'AscNullsFirst',
+    },
+  });
+
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  if (loading || entity.type === 'Custom') {
+    return <></>;
+  }
+
+  if (!activities.length) {
+    return (
+      <StyledTimelineEmptyContainer>
+        <StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
+        <StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
+        <ActivityCreateButton
+          onNoteClick={() =>
+            openCreateActivity({
+              type: 'Note',
+              targetableEntities: [entity],
+            })
+          }
+          onTaskClick={() =>
+            openCreateActivity({
+              type: 'Task',
+              targetableEntities: [entity],
+            })
+          }
+        />
+      </StyledTimelineEmptyContainer>
+    );
+  }
+
+  return (
+    <StyledMainContainer>
+      <TimelineItemsContainer activities={activities as Activity[]} />
+    </StyledMainContainer>
+  );
+};