Add optimistic rendering on right drawer title (#786)

* Add optimistic rendering on right drawer title

* Fix

* Fix

* Fix

* Fix

* Fix

* Fix

docs/docs/developer/local-setup.mdx

@@ -42,6 +42,7 @@ You also need to have a PosgresSQL database available. If you already have one a
 If you don't, you can provision one through `docker` using the following command:
 
 ```
+cd twenty
 make provision-postgres
 ```
 

front/src/modules/activities/right-drawer/components/CommentThread.tsx

@@ -92,7 +92,7 @@ export function CommentThread({
   showComment = true,
   autoFillTitle = false,
 }: OwnProps) {
-  const { data } = useGetCommentThreadQuery({
+  const { data, loading } = useGetCommentThreadQuery({
     variables: {
       commentThreadId: commentThreadId ?? '',
     },
@@ -101,6 +101,13 @@ export function CommentThread({
   const commentThread = data?.findManyCommentThreads[0];
 
   const [title, setTitle] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!loading) {
+      setTitle(commentThread?.title ?? '');
+    }
+  }, [loading, setTitle, commentThread?.title]);
+
   const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
     useState<boolean>(false);
 
@@ -108,16 +115,27 @@ export function CommentThread({
 
   const debounceUpdateTitle = useMemo(() => {
     function updateTitle(title: string) {
-      updateCommentThreadMutation({
+      if (commentThread) {
-        variables: {
+        updateCommentThreadMutation({
-          id: commentThreadId,
+          variables: {
-          title: title ?? '',
+            id: commentThreadId,
-        },
+            title: title ?? '',
-        refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''],
+          },
-      });
+          refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''],
+          optimisticResponse: {
+            __typename: 'Mutation',
+            updateOneCommentThread: {
+              __typename: 'CommentThread',
+              id: commentThreadId,
+              title: title,
+              type: commentThread.type,
+            },
+          },
+        });
+      }
     }
     return debounce(updateTitle, 200);
-  }, [commentThreadId, updateCommentThreadMutation]);
+  }, [commentThreadId, updateCommentThreadMutation, commentThread]);
 
   function updateTitleFromBody(body: string) {
     const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
@@ -127,12 +145,6 @@ export function CommentThread({
     }
   }
 
-  useEffect(() => {
-    if (commentThread) {
-      setTitle(commentThread?.title ?? '');
-    }
-  }, [commentThread]);
-
   if (!commentThread) {
     return <></>;
   }

front/src/modules/ui/table/components/EntityTable.tsx

@@ -22,7 +22,7 @@ const StyledTable = styled.table`
   width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
 
   th {
-    border: 1px solid ${({ theme }) => theme.background.tertiary};
+    border: 1px solid ${({ theme }) => theme.border.color.light};
     border-collapse: collapse;
     color: ${({ theme }) => theme.font.color.tertiary};
     padding: 0;
@@ -42,7 +42,7 @@ const StyledTable = styled.table`
   }
 
   td {
-    border: 1px solid ${({ theme }) => theme.background.tertiary};
+    border: 1px solid ${({ theme }) => theme.border.color.light};
     border-collapse: collapse;
     color: ${({ theme }) => theme.font.color.primary};
     padding: 0;

server/src/database/seeds/companies.ts

@@ -95,7 +95,7 @@ export const seedCompanies = async (prisma: PrismaClient) => {
     create: {
       id: 'twenty-9d162de6-cfbf-4156-a790-e39854dcd4eb',
       name: 'Claap',
-      domainName: 'claap.com',
+      domainName: 'claap.io',
       workspaceId: 'twenty-7ed9d212-1c25-4d02-bf25-6aeccf7ea419',
       address: '',
     },