Add "show company / people" view and "Notes" concept (#528)

* Begin adding show view and refactoring threads to become notes * Progress on design * Progress redesign timeline * Dropdown button, design improvement * Open comment thread edit mode in drawer * Autosave local storage and commentThreadcount * Improve display and fix missing key issue * Remove some hardcoded CSS properties * Create button * Split company show into ui/business + fix eslint * Fix font weight * Begin auto-save on edit mode * Save server-side query result to Apollo cache * Fix save behavior * Refetch timeline after creating note * Rename createCommentThreadWithComment * Improve styling * Revert "Improve styling" This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0. * Improve CSS styling * Bring back border radius inadvertently removed * padding adjustment * Improve blocknote design * Improve edit mode display * Remove Comments.tsx * Remove irrelevant comment stories * Removed un-necessary panel component * stop using fragment, move trash icon * Add a basic story for CompanyShow * Add a basic People show view * Fix storybook tests * Add very basic Person story * Refactor PR1 * Refactor part 2 * Refactor part 3 * Refactor part 4 * Fix tests --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2023-07-10 07:25:34 +02:00
parent ca180acf9f
commit 94a913a41f
191 changed files with 5390 additions and 721 deletions
@@ -0,0 +1,84 @@
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { GET_COMMENT_THREADS_BY_TARGETS } from '@/comments/services';
+import { CommentForDrawer } from '@/comments/types/CommentForDrawer';
+import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput';
+import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
+import { CommentThread, useCreateCommentMutation } from '~/generated/graphql';
+
+import { CommentThreadItem } from '../comment/CommentThreadItem';
+
+type OwnProps = {
+  commentThread: Pick<CommentThread, 'id'> & {
+    comments: Array<CommentForDrawer>;
+  };
+};
+
+const StyledThreadItemListContainer = styled.div`
+  align-items: flex-start;
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  gap: ${({ theme }) => theme.spacing(4)};
+
+  justify-content: flex-start;
+  padding: ${({ theme }) => theme.spacing(8)};
+  padding-left: ${({ theme }) => theme.spacing(12)};
+  width: 100%;
+`;
+
+const StyledCommentActionBar = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  padding: 16px 24px 16px 48px;
+  width: calc(${({ theme }) => theme.rightDrawerWidth} - 48px - 24px);
+`;
+
+export function CommentThreadComments({ commentThread }: OwnProps) {
+  const [createCommentMutation] = useCreateCommentMutation();
+  const currentUser = useRecoilValue(currentUserState);
+
+  if (!currentUser) {
+    return <></>;
+  }
+
+  function handleSendComment(commentText: string) {
+    if (!isNonEmptyString(commentText)) {
+      return;
+    }
+
+    createCommentMutation({
+      variables: {
+        commentId: v4(),
+        authorId: currentUser?.id ?? '',
+        commentThreadId: commentThread?.id ?? '',
+        commentText: commentText,
+        createdAt: new Date().toISOString(),
+      },
+      refetchQueries: [getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? ''],
+    });
+  }
+
+  return (
+    <>
+      {commentThread?.comments.length > 0 && (
+        <StyledThreadItemListContainer>
+          {commentThread?.comments?.map((comment, index) => (
+            <CommentThreadItem key={comment.id} comment={comment} />
+          ))}
+        </StyledThreadItemListContainer>
+      )}
+
+      <StyledCommentActionBar>
+        {currentUser && <AutosizeTextInput onValidate={handleSendComment} />}
+      </StyledCommentActionBar>
+    </>
+  );
+}