306 implement multi relation picker for person and try to factorize relation picker (#319)

* Removed useless folder

* First working version

* Refactored MultipleEntitySelect and splitted into 2 components

* Added TODO

* Removed useless Query

* Fixed refetch

* Fixed naming

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/comments/components/CommentThread.tsx

@@ -0,0 +1,96 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+import { v4 } from 'uuid';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
+import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput';
+import { logError } from '@/utils/logs/logError';
+import { isDefined } from '@/utils/type-guards/isDefined';
+import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
+import { useCreateCommentMutation } from '~/generated/graphql';
+
+import { CommentThreadItem } from './CommentThreadItem';
+import { CommentThreadRelationPicker } from './CommentThreadRelationPicker';
+
+type OwnProps = {
+  commentThread: CommentThreadForDrawer;
+};
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+
+  flex-direction: column;
+
+  gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
+  padding: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledThreadItemListContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+
+  flex-direction: column-reverse;
+  gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
+  max-height: 400px;
+  overflow: auto;
+
+  width: 100%;
+`;
+
+export function CommentThread({ commentThread }: OwnProps) {
+  const [createCommentMutation] = useCreateCommentMutation();
+  const currentUser = useRecoilValue(currentUserState);
+
+  function handleSendComment(commentText: string) {
+    if (!isNonEmptyString(commentText)) {
+      return;
+    }
+
+    if (!isDefined(currentUser)) {
+      logError(
+        'In handleSendComment, currentUser is not defined, this should not happen.',
+      );
+      return;
+    }
+
+    createCommentMutation({
+      variables: {
+        commentId: v4(),
+        authorId: currentUser.id,
+        commentThreadId: commentThread.id,
+        commentText,
+        createdAt: new Date().toISOString(),
+      },
+      // TODO: find a way to have this configuration dynamic and typed
+      // Also it cannot refetch queries than are not in the cache
+      refetchQueries: [
+        'GetCommentThreadsByTargets',
+        'GetCompanies',
+        'GetPeople',
+      ],
+      onError: (error) => {
+        logError(
+          `In handleSendComment, createCommentMutation onError, error: ${error}`,
+        );
+      },
+    });
+  }
+
+  return (
+    <StyledContainer>
+      <StyledThreadItemListContainer>
+        {commentThread.comments?.map((comment) => (
+          <CommentThreadItem key={comment.id} comment={comment} />
+        ))}
+      </StyledThreadItemListContainer>
+      <CommentThreadRelationPicker commentThread={commentThread} />
+      <AutosizeTextInput onValidate={handleSendComment} />
+    </StyledContainer>
+  );
+}