Refactor Checkbox (#932)

* Refactor Checkbox * Complete note completion * Fixes * Fix login
2023-07-25 21:58:57 -07:00
parent 09a019da5d
commit 66585fce9a
17 changed files with 552 additions and 258 deletions
--- a/front/src/modules/activities/timeline/components/Timeline.tsx
+++ b/front/src/modules/activities/timeline/components/Timeline.tsx
@ -1,25 +1,18 @@
 import React from 'react';
-import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';

 import { CommentThreadCreateButton } from '@/activities/components/CommentThreadCreateButton';
-import { useOpenCommentThreadRightDrawer } from '@/activities/hooks/useOpenCommentThreadRightDrawer';
 import { useOpenCreateCommentThreadDrawer } from '@/activities/hooks/useOpenCreateCommentThreadDrawer';
 import { CommentableEntity } from '@/activities/types/CommentableEntity';
 import { CommentThreadForDrawer } from '@/activities/types/CommentThreadForDrawer';
 import { useIsMobile } from '@/ui/hooks/useIsMobile';
-import { IconNotes } from '@/ui/icon/index';
 import {
  ActivityType,
  SortOrder,
  useGetCommentThreadsByTargetsQuery,
 } from '~/generated/graphql';
-import {
-  beautifyExactDate,
-  beautifyPastDateRelativeToNow,
-} from '~/utils/date-utils';

-import { OverflowingTextWithTooltip } from '../../../ui/tooltip/OverflowingTextWithTooltip';
+import { TimelineActivity } from './TimelineActivity';

 const StyledMainContainer = styled.div`
  align-items: flex-start;
@ -72,112 +65,6 @@ const StyledEmptyTimelineSubTitle = styled.div`
  margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;

-const StyledTimelineItemContainer = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  gap: 16px;
-`;
-
-const StyledIconContainer = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  height: 20px;
-  justify-content: center;
-  width: 20px;
-`;
-
-const StyledItemTitleContainer = styled.div`
-  align-content: center;
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  flex: 1 0 0;
-  flex-wrap: wrap;
-  gap: 4px;
-  height: 20px;
-  span {
-    color: ${({ theme }) => theme.font.color.secondary};
-  }
-`;
-
-const StyledItemTitleDate = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-`;
-
-const StyledVerticalLineContainer = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  width: 20px;
-`;
-
-const StyledVerticalLine = styled.div`
-  align-self: stretch;
-  background: ${({ theme }) => theme.border.color.light};
-  flex-shrink: 0;
-  width: 2px;
-`;
-
-const StyledCardContainer = styled.div`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 4px 0px 20px 0px;
-`;
-
-const StyledCard = styled.div`
-  align-items: flex-start;
-  align-self: stretch;
-  background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 400px;
-  padding: 12px;
-`;
-
-const StyledCardTitle = styled.div`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
-
-  width: 100%;
-`;
-
-const StyledCardContent = styled.div`
-  align-self: stretch;
-  color: ${({ theme }) => theme.font.color.secondary};
-
-  width: 100%;
-`;
-
-const StyledTooltip = styled(Tooltip)`
-  background-color: ${({ theme }) => theme.background.primary};
-
-  box-shadow: 0px 2px 4px 3px
-    ${({ theme }) => theme.background.transparent.light};
-
-  box-shadow: 2px 4px 16px 6px
-    ${({ theme }) => theme.background.transparent.light};
-
-  color: ${({ theme }) => theme.font.color.primary};
-
-  opacity: 1;
-  padding: 8px;
-`;
-
 const StyledTopActionBar = styled.div`
  align-items: flex-start;
  align-self: stretch;
@ -208,8 +95,6 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
    },
  });

-  const openCommentThreadRightDrawer = useOpenCommentThreadRightDrawer();
-
  const openCreateCommandThread = useOpenCreateCommentThreadDrawer();

  const commentThreads: CommentThreadForDrawer[] =
@ -235,76 +120,18 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
  return (
    <StyledMainContainer>
      <StyledTopActionBar>
-        <StyledTimelineItemContainer>
-          <CommentThreadCreateButton
-            onNoteClick={() =>
-              openCreateCommandThread(entity, ActivityType.Note)
-            }
-            onTaskClick={() =>
-              openCreateCommandThread(entity, ActivityType.Task)
-            }
-          />
-        </StyledTimelineItemContainer>
+        <CommentThreadCreateButton
+          onNoteClick={() => openCreateCommandThread(entity, ActivityType.Note)}
+          onTaskClick={() => openCreateCommandThread(entity, ActivityType.Task)}
+        />
      </StyledTopActionBar>
      <StyledTimelineContainer>
-        {commentThreads.map((commentThread) => {
-          const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
-            commentThread.createdAt,
-          );
-          const exactCreatedAt = beautifyExactDate(commentThread.createdAt);
-          const body = JSON.parse(commentThread.body ?? '{}')[0]?.content[0]
-            ?.text;
-
-          return (
-            <React.Fragment key={commentThread.id}>
-              <StyledTimelineItemContainer>
-                <StyledIconContainer>
-                  <IconNotes />
-                </StyledIconContainer>
-                <StyledItemTitleContainer>
-                  <span>{commentThread.author.displayName}</span>
-                  created a note
-                </StyledItemTitleContainer>
-                <StyledItemTitleDate id={`id-${commentThread.id}`}>
-                  {beautifiedCreatedAt} ago
-                </StyledItemTitleDate>
-                <StyledTooltip
-                  anchorSelect={`#id-${commentThread.id}`}
-                  content={exactCreatedAt}
-                  clickable
-                  noArrow
-                />
-              </StyledTimelineItemContainer>
-              <StyledTimelineItemContainer>
-                <StyledVerticalLineContainer>
-                  <StyledVerticalLine></StyledVerticalLine>
-                </StyledVerticalLineContainer>
-                <StyledCardContainer>
-                  <StyledCard
-                    onClick={() =>
-                      openCommentThreadRightDrawer(commentThread.id)
-                    }
-                  >
-                    <StyledCardTitle>
-                      <OverflowingTextWithTooltip
-                        text={
-                          commentThread.title
-                            ? commentThread.title
-                            : '(No title)'
-                        }
-                      />
-                    </StyledCardTitle>
-                    <StyledCardContent>
-                      <OverflowingTextWithTooltip
-                        text={body ? body : '(No content)'}
-                      />
-                    </StyledCardContent>
-                  </StyledCard>
-                </StyledCardContainer>
-              </StyledTimelineItemContainer>
-            </React.Fragment>
-          );
-        })}
+        {commentThreads.map((commentThread) => (
+          <TimelineActivity
+            key={commentThread.id}
+            commentThread={commentThread}
+          />
+        ))}
      </StyledTimelineContainer>
    </StyledMainContainer>
  );
--- a/front/src/modules/activities/timeline/components/TimelineActivity.tsx
+++ b/front/src/modules/activities/timeline/components/TimelineActivity.tsx
@ -0,0 +1,191 @@
+import { useCallback } from 'react';
+import { Tooltip } from 'react-tooltip';
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+
+import { useOpenCommentThreadRightDrawer } from '@/activities/hooks/useOpenCommentThreadRightDrawer';
+import { GET_COMMENT_THREADS_BY_TARGETS } from '@/activities/queries';
+import { IconNotes } from '@/ui/icon';
+import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
+import {
+  CommentThread,
+  useUpdateCommentThreadMutation,
+} from '~/generated/graphql';
+import {
+  beautifyExactDate,
+  beautifyPastDateRelativeToNow,
+} from '~/utils/date-utils';
+
+import { TimelineActivityTitle } from './TimelineActivityTitle';
+
+const StyledIconContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+`;
+
+const StyledItemTitleContainer = styled.div`
+  align-content: center;
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 20px;
+  span {
+    color: ${({ theme }) => theme.font.color.secondary};
+  }
+`;
+
+const StyledItemTitleDate = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: flex-end;
+`;
+
+const StyledVerticalLineContainer = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  width: 20px;
+`;
+
+const StyledVerticalLine = styled.div`
+  align-self: stretch;
+  background: ${({ theme }) => theme.border.color.light};
+  flex-shrink: 0;
+  width: 2px;
+`;
+
+const StyledCardContainer = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: 4px 0px 20px 0px;
+`;
+
+const StyledCard = styled.div`
+  align-items: flex-start;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  max-width: 400px;
+  padding: ${({ theme }) => theme.spacing(3)};
+  position: relative;
+`;
+
+const StyledCardContent = styled.div`
+  align-self: stretch;
+  color: ${({ theme }) => theme.font.color.secondary};
+
+  width: 100%;
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+
+  box-shadow: 0px 2px 4px 3px
+    ${({ theme }) => theme.background.transparent.light};
+
+  box-shadow: 2px 4px 16px 6px
+    ${({ theme }) => theme.background.transparent.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  opacity: 1;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTimelineItemContainer = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  gap: 16px;
+`;
+
+type OwnProps = {
+  commentThread: Pick<
+    CommentThread,
+    'id' | 'title' | 'body' | 'createdAt' | 'completedAt' | 'type'
+  > & { author: Pick<CommentThread['author'], 'displayName'> };
+};
+
+export function TimelineActivity({ commentThread }: OwnProps) {
+  const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
+    commentThread.createdAt,
+  );
+  const exactCreatedAt = beautifyExactDate(commentThread.createdAt);
+  const body = JSON.parse(commentThread.body ?? '{}')[0]?.content[0]?.text;
+
+  const openCommentThreadRightDrawer = useOpenCommentThreadRightDrawer();
+  const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
+
+  const handleActivityCompletionChange = useCallback(
+    (value: boolean) => {
+      updateCommentThreadMutation({
+        variables: {
+          id: commentThread.id,
+          completedAt: value ? new Date().toISOString() : null,
+        },
+        refetchQueries: [
+          getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+        ],
+      });
+    },
+    [commentThread, updateCommentThreadMutation],
+  );
+
+  return (
+    <>
+      <StyledTimelineItemContainer>
+        <StyledIconContainer>
+          <IconNotes />
+        </StyledIconContainer>
+        <StyledItemTitleContainer>
+          <span>{commentThread.author.displayName}</span>
+          created a note
+        </StyledItemTitleContainer>
+        <StyledItemTitleDate id={`id-${commentThread.id}`}>
+          {beautifiedCreatedAt} ago
+        </StyledItemTitleDate>
+        <StyledTooltip
+          anchorSelect={`#id-${commentThread.id}`}
+          content={exactCreatedAt}
+          clickable
+          noArrow
+        />
+      </StyledTimelineItemContainer>
+      <StyledTimelineItemContainer>
+        <StyledVerticalLineContainer>
+          <StyledVerticalLine></StyledVerticalLine>
+        </StyledVerticalLineContainer>
+        <StyledCardContainer>
+          <StyledCard
+            onClick={() => openCommentThreadRightDrawer(commentThread.id)}
+          >
+            <TimelineActivityTitle
+              title={commentThread.title ?? ''}
+              completed={!!commentThread.completedAt}
+              type={commentThread.type}
+              onCompletionChange={handleActivityCompletionChange}
+            />
+            <StyledCardContent>
+              <OverflowingTextWithTooltip text={body ? body : '(No content)'} />
+            </StyledCardContent>
+          </StyledCard>
+        </StyledCardContainer>
+      </StyledTimelineItemContainer>
+    </>
+  );
+}
--- a/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
+++ b/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx
@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+
+import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
+import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
+import { ActivityType } from '~/generated/graphql';
+
+const StyledTitleContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(2)};
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+
+  width: 100%;
+`;
+
+const StyledTitleText = styled.div<{ completed?: boolean }>`
+  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
+  width: 100%;
+`;
+
+const StyledCheckboxContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
+type OwnProps = {
+  title: string;
+  completed?: boolean;
+  type: ActivityType;
+  onCompletionChange?: (value: boolean) => void;
+};
+
+export function TimelineActivityTitle({
+  title,
+  completed,
+  type,
+  onCompletionChange,
+}: OwnProps) {
+  return (
+    <StyledTitleContainer>
+      {type === ActivityType.Task && (
+        <StyledCheckboxContainer
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onCompletionChange?.(!completed);
+          }}
+        >
+          <Checkbox
+            checked={completed ?? false}
+            shape={CheckboxShape.Rounded}
+          />
+        </StyledCheckboxContainer>
+      )}
+      <StyledTitleText completed={completed}>
+        <OverflowingTextWithTooltip text={title ? title : '(No title)'} />
+      </StyledTitleText>
+    </StyledTitleContainer>
+  );
+}