chore: made code more readable and resolved all review comments

FleetAdmiralJakob · Nov 5, 2024 · 2106446 · 2106446
1 parent 90da0d6
commit 2106446
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 59 deletions.
diff --git a/convex/messages.ts b/convex/messages.ts
@@ -204,6 +204,7 @@ export const editMessage = mutation({
     await message.patch({
       content: args.newContent.trim(),
       modified: true,
+      modifiedAt: Date.now().toString(),
     });
   },
 });
diff --git a/convex/schema.ts b/convex/schema.ts
@@ -39,6 +39,7 @@ const schema = defineEntSchema({
     .field("content", v.string())
     .field("deleted", v.boolean(), { default: false })
     .field("modified", v.boolean(), { default: false })
+    .field("modifiedAt", v.optional(v.string()))
     .edge("privateChat")
     .edge("user")
     .edges("readBy", {

diff --git a/src/app/(internal-sites)/chats/[chatId]/page.tsx b/src/app/(internal-sites)/chats/[chatId]/page.tsx
@@ -193,58 +193,57 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
     api.messages.editMessage,
   ).withOptimisticUpdate((localStore, args) => {
     const chatId: Id<"privateChats"> = params.chatId as Id<"privateChats">;
-    const newContent = args.newContent;
+    const { newContent, messageId } = args;
 
     const existingMessages = localStore.getQuery(api.messages.getMessages, {
       chatId,
     });
     const existingChats = localStore.getQuery(api.chats.getChats);
     // If we've loaded the api.messages.getMessages and api.chats.getChats query, push an optimistic message
     // onto the lists.
-    if (existingMessages && existingChats) {
+    if (!existingMessages || !existingChats) return;
+
+    localStore.setQuery(
+      api.messages.getMessages,
+      { chatId },
+      existingMessages.map((message) => {
+        if (message.type === "message" && message._id === messageId) {
+          return {
+            ...message,
+            content: newContent,
+            modified: true,
+            modifiedAt: Date.now().toString(),
+          };
+        } else {
+          return message;
+        }
+      }),
+    );
+
+    const lastMessage = existingChats.find(
+      (chat) => chat._id === chatId,
+    )?.lastMessage;
+
+    if (lastMessage?._id === messageId && lastMessage.type === "message") {
       localStore.setQuery(
-        api.messages.getMessages,
-        { chatId },
-        existingMessages.map((message) => {
-          if (message.type === "message" && message._id === args.messageId) {
+        api.chats.getChats,
+        {},
+        existingChats.map((chat) => {
+          if (chat._id === chatId) {
             return {
-              ...message,
-              content: newContent,
-              modified: true,
+              ...chat,
+              lastMessage: {
+                ...lastMessage,
+                content: newContent,
+                modified: true,
+                modifiedAt: Date.now().toString(),
+              },
             };
           } else {
-            return message;
+            return chat;
           }
         }),
       );
-
-      const lastMessage = existingChats?.find(
-        (chat) => chat._id === chatId,
-      )?.lastMessage;
-
-      if (
-        lastMessage?._id === args.messageId &&
-        lastMessage.type === "message"
-      ) {
-        localStore.setQuery(
-          api.chats.getChats,
-          {},
-          existingChats.map((chat) => {
-            if (chat._id === chatId) {
-              return {
-                ...chat,
-                lastMessage: {
-                  ...lastMessage,
-                  newContent,
-                  modified: true,
-                },
-              };
-            } else {
-              return chat;
-            }
-          }),
-        );
-      }
     }
   });
 
@@ -310,26 +309,25 @@ export default function Page(props: { params: Promise<{ chatId: string }> }) {
   async function onTextMessageFormSubmit(
     values: z.infer<typeof textMessageSchema>,
   ) {
+    const trimmedMessage = values.message.trim();
+    if (!trimmedMessage) return;
+
     if (editingMessageId) {
       const message = messages.data?.find((message) => {
         return message._id === editingMessageId;
       });
 
-      if (
-        !(
-          message?.type === "message" &&
-          message.content === values.message.trim()
-        )
-      ) {
+      if (message?.type === "message" && message.content !== trimmedMessage) {
         void editMessage({
-          newContent: values.message,
+          newContent: trimmedMessage,
           messageId: editingMessageId,
         });
       }
       setEditingMessageId(null);
     } else {
-      void sendMessage({ content: values.message, chatId: params.chatId });
+      void sendMessage({ content: trimmedMessage, chatId: params.chatId });
     }
+
     textMessageForm.reset();
     setInputValue("");
     scrollToBottom();

diff --git a/src/components/message.tsx b/src/components/message.tsx
@@ -25,15 +25,23 @@ import { type Id } from "../../convex/_generated/dataModel";
 
 dayjs.extend(relativeTime);
 
+type Message = NonNullable<
+  FunctionReturnType<typeof api.messages.getMessages>
+>[number];
+
+const ModifiedLabel = ({ message }: { message: Message }) => (
+  <div className="mr-2 text-[75%] font-bold text-secondary-foreground">
+    {message.type === "message" && message.modified ? "Modified" : null}
+  </div>
+);
+
 export const Message = ({
   message,
   selectedMessageId,
   setSelectedMessageId,
   setEditingMessageId,
 }: {
-  message: NonNullable<
-    FunctionReturnType<typeof api.messages.getMessages>
-  >[number];
+  message: Message;
   selectedMessageId: string | null;
   setSelectedMessageId: React.Dispatch<React.SetStateAction<string | null>>;
   setEditingMessageId: React.Dispatch<
@@ -203,11 +211,7 @@ export const Message = ({
                 message.type == "rejectedRequest",
             })}
           >
-            <div className="mr-2 text-[75%] font-bold text-secondary-foreground">
-              {message.type == "message" && message.modified
-                ? "Modified"
-                : null}
-            </div>
+            <ModifiedLabel message={message} />
             <div
               onContextMenu={(e) => {
                 e.preventDefault();
@@ -342,11 +346,7 @@ export const Message = ({
                 message.type == "rejectedRequest",
             })}
           >
-            <div className="mr-2 text-[75%] font-bold text-secondary-foreground">
-              {message.type == "message" && message.modified
-                ? "Modified"
-                : null}
-            </div>
+            <ModifiedLabel message={message} />
             <div
               ref={refs.setReference}
               onContextMenu={(e) => {