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/components/CommentThreadEditor.tsx
+++ b/front/src/modules/activities/components/CommentThreadEditor.tsx
@ -21,6 +21,8 @@ import { debounce } from '~/utils/debounce';
 import { CommentThreadActionBar } from '../right-drawer/components/CommentThreadActionBar';
 import { CommentForDrawer } from '../types/CommentForDrawer';

+import { CommentThreadTitle } from './CommentThreadTitle';
+
 import '@blocknote/core/style.css';

 const StyledContainer = styled.div`
@ -54,29 +56,6 @@ const StyledTopContainer = styled.div`
  padding: 24px 24px 24px 48px;
 `;

-const StyledEditableTitleInput = styled.input`
-  background: transparent;
-
-  border: none;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex: 1 0 0;
-
-  flex-direction: column;
-  font-family: Inter;
-  font-size: ${({ theme }) => theme.font.size.xl};
-  font-style: normal;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  justify-content: center;
-
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
-  outline: none;
-  width: calc(100% - ${({ theme }) => theme.spacing(2)});
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-  }
-`;
-
 const StyledTopActionsContainer = styled.div`
  align-items: center;
  display: flex;
@ -86,7 +65,10 @@ const StyledTopActionsContainer = styled.div`
 `;

 type OwnProps = {
-  commentThread: Pick<CommentThread, 'id' | 'title' | 'body' | 'type'> & {
+  commentThread: Pick<
+    CommentThread,
+    'id' | 'title' | 'body' | 'type' | 'completedAt'
+  > & {
    comments?: Array<CommentForDrawer> | null;
  } & {
    commentThreadTargets?: Array<
@ -106,6 +88,9 @@ export function CommentThreadEditor({
    useState<boolean>(false);

  const [title, setTitle] = useState<string | null>(commentThread.title ?? '');
+  const [completedAt, setCompletedAt] = useState<string | null>(
+    commentThread.completedAt ?? '',
+  );

  const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();

@ -123,6 +108,23 @@ export function CommentThreadEditor({
    },
    [commentThread, updateCommentThreadMutation],
  );
+
+  const handleActivityCompletionChange = useCallback(
+    (value: boolean) => {
+      updateCommentThreadMutation({
+        variables: {
+          id: commentThread.id,
+          completedAt: value ? new Date().toISOString() : null,
+        },
+        refetchQueries: [
+          getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+        ],
+      });
+      setCompletedAt(value ? new Date().toISOString() : null);
+    },
+    [commentThread, updateCommentThreadMutation],
+  );
+
  const debouncedUpdateTitle = debounce(updateTitle, 200);

  function updateTitleFromBody(body: string) {
@ -145,16 +147,16 @@ export function CommentThreadEditor({
            <CommentThreadTypeDropdown commentThread={commentThread} />
            <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
          </StyledTopActionsContainer>
-          <StyledEditableTitleInput
-            autoComplete="off"
-            autoFocus
-            placeholder={`${commentThread.type} title (optional)`}
-            onChange={(event) => {
+          <CommentThreadTitle
+            title={title ?? ''}
+            completed={!!completedAt}
+            type={commentThread.type}
+            onTitleChange={(newTitle) => {
+              setTitle(newTitle);
              setHasUserManuallySetTitle(true);
-              setTitle(event.target.value);
-              debouncedUpdateTitle(event.target.value);
+              debouncedUpdateTitle(newTitle);
            }}
-            value={title ?? ''}
+            onCompletionChange={handleActivityCompletionChange}
          />
          <PropertyBox>
            <PropertyBoxItem
--- a/front/src/modules/activities/components/CommentThreadTitle.tsx
+++ b/front/src/modules/activities/components/CommentThreadTitle.tsx
@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+
+import {
+  Checkbox,
+  CheckboxShape,
+  CheckboxSize,
+} from '@/ui/input/components/Checkbox';
+import { ActivityType } from '~/generated/graphql';
+
+const StyledEditableTitleInput = styled.input<{
+  completed: boolean;
+  value: string;
+}>`
+  background: transparent;
+
+  border: none;
+  color: ${({ theme, value }) =>
+    value ? theme.font.color.primary : theme.font.color.light};
+  display: flex;
+
+  flex-direction: column;
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  outline: none;
+  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCheckboxContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
+type OwnProps = {
+  title: string;
+  type: ActivityType;
+  completed: boolean;
+  onTitleChange: (title: string) => void;
+  onCompletionChange: (value: boolean) => void;
+};
+
+export function CommentThreadTitle({
+  title,
+  completed,
+  type,
+  onTitleChange,
+  onCompletionChange,
+}: OwnProps) {
+  return (
+    <StyledContainer>
+      {type === ActivityType.Task && (
+        <StyledCheckboxContainer onClick={() => onCompletionChange(!completed)}>
+          <Checkbox
+            size={CheckboxSize.Large}
+            shape={CheckboxShape.Rounded}
+            checked={completed}
+          />
+        </StyledCheckboxContainer>
+      )}
+      <StyledEditableTitleInput
+        autoComplete="off"
+        autoFocus
+        placeholder={`${type} title (optional)`}
+        onChange={(event) => onTitleChange(event.target.value)}
+        value={title}
+        completed={completed}
+      />
+    </StyledContainer>
+  );
+}
--- a/front/src/modules/activities/queries/select.ts
+++ b/front/src/modules/activities/queries/select.ts
@ -18,6 +18,7 @@ export const GET_COMMENT_THREADS_BY_TARGETS = gql`
      title
      body
      type
+      completedAt
      author {
        id
        firstName
@ -54,6 +55,7 @@ export const GET_COMMENT_THREAD = gql`
      body
      title
      type
+      completedAt
      author {
        id
        firstName
--- a/front/src/modules/activities/queries/update.ts
+++ b/front/src/modules/activities/queries/update.ts
@ -68,15 +68,22 @@ export const UPDATE_COMMENT_THREAD = gql`
    $body: String
    $title: String
    $type: ActivityType
+    $completedAt: DateTime
  ) {
    updateOneCommentThread(
      where: { id: $id }
-      data: { body: $body, title: $title, type: $type }
+      data: {
+        body: $body
+        title: $title
+        type: $type
+        completedAt: $completedAt
+      }
    ) {
      id
      body
      title
      type
+      completedAt
    }
  }
 `;
--- 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>
+  );
+}