feat: Show "edited" with timestamp for edited messages (#124)

equinor · Sep 1, 2023 · b9a4bf1 · b9a4bf1
1 parent df654f1
commit b9a4bf1
Showing 1 changed file with 78 additions and 58 deletions.
diff --git a/src/Components/SideSheet/Comments/Components/ClusteredMessages.tsx b/src/Components/SideSheet/Comments/Components/ClusteredMessages.tsx
@@ -1,5 +1,5 @@
 import React, {
- FC, SetStateAction, Dispatch,
+    FC, SetStateAction, Dispatch,
 } from "react"
 import { Typography } from "@equinor/eds-core-react"
 import styled from "styled-components"
@@ -37,69 +37,88 @@ interface ClusteredMessagesProps {
 }
 
 const ClusteredMessages: FC<ClusteredMessagesProps> = ({
- comments, reviewComments, setReviewComments,
+    comments, reviewComments, setReviewComments,
 }) => {
     const currentUser: any = useCurrentUser()
     const isCurrentUser = (userId: string) => currentUser?._info.localAccountId === userId
     type Cluster = {
-    userId: string;
-    meta: {
-        commenterName: string | null | undefined;
-        createdDate: string;
+        userId: string;
+        meta: {
+            commenterName: string | null | undefined;
+            createdDate: string;
+        };
+        messages: {
+            text: string | undefined;
+            isEdited: boolean | undefined;
+            id: string;
+            modifiedDate?: string;
+        }[];
     };
-    messages: {
-        text: string | undefined;
-        isEdited: boolean | undefined;
-        id: string;
-    }[];
-};
 
-const generateMessageCluster = (postedComments: ReviewComment[]): Cluster[] => {
-    const clusters: Cluster[] = []
-    const strToDate = (dateString: string): Date => new Date(dateString)
-    const diffInMinutes = (date1: Date, date2: Date): number => (date2.getTime() - date1.getTime()) / 1000 / 60
+    const generateMessageCluster = (postedComments: ReviewComment[]): Cluster[] => {
+        const clusters: Cluster[] = []
+        const strToDate = (dateString: string): Date => new Date(dateString)
+        const diffInMinutes = (date1: Date, date2: Date): number => (date2.getTime() - date1.getTime()) / 1000 / 60
 
-    postedComments.forEach((comment) => {
-        if (!comment.userId || !comment.createdDate) return
+        postedComments.forEach((comment) => {
+            if (!comment.userId || !comment.createdDate) return
 
-        const { userId } = comment
-        const createdDate = strToDate(comment.createdDate)
+            const { userId } = comment
+            const createdDate = strToDate(comment.createdDate)
 
-        if (clusters.length === 0
-            || clusters[clusters.length - 1].userId !== userId
-            || diffInMinutes(strToDate(clusters[clusters.length - 1].meta.createdDate), createdDate) > 5) {
-            clusters.push({
-                userId,
-                meta: {
-                    commenterName: comment.commenterName,
-                    createdDate: comment.createdDate,
-                },
-                messages: [{ text: comment.text || undefined, isEdited: comment.isEdited, id: comment.id || "" }],
-            })
-        } else {
-            clusters[clusters.length - 1].messages.push({ text: comment.text || undefined, isEdited: comment.isEdited, id: comment.id || "" })
-        }
-    })
+            if (clusters.length === 0
+                || clusters[clusters.length - 1].userId !== userId
+                || diffInMinutes(strToDate(clusters[clusters.length - 1].meta.createdDate), createdDate) > 5) {
+                clusters.push({
+                    userId,
+                    meta: {
+                        commenterName: comment.commenterName,
+                        createdDate: comment.createdDate,
+                    },
+                    messages: [{
+                        text: comment.text || undefined,
+                        isEdited: comment.isEdited,
+                        id: comment.id || "",
+                        modifiedDate: comment.modifiedDate,
+                    }],
+                })
+            } else {
+                clusters[clusters.length - 1].messages.push({
+                    text: comment.text || undefined,
+                    isEdited: comment.isEdited,
+                    id: comment.id || "",
+                    modifiedDate: comment.modifiedDate,
+                })
+            }
+        })
 
-    return clusters
-}
+        return clusters
+    }
 
-        return (
-            <>
-                {generateMessageCluster(comments).map((cluster, index) => (
-                    <Container commentIsByCurrentUser={isCurrentUser(cluster.userId)} key={`${cluster.userId}-${index}`}>
-                        <Header isCurrentUser={!isCurrentUser(cluster.userId)}>
-                            {!isCurrentUser(cluster.userId) && (
-                                <Typography variant="meta">{cluster.meta.commenterName}</Typography>
-                            )}
-                            <TimeStamp>
-                                <Typography variant="meta">{formatDate(cluster.meta.createdDate)}</Typography>
-                            </TimeStamp>
-                        </Header>
-                        <div>
-                            {cluster.messages.map((message, messageIndex) => {
-                                console.log(message)
-                                return (
+    return (
+        <>
+            {generateMessageCluster(comments).map((cluster, index) => (
+                <Container commentIsByCurrentUser={isCurrentUser(cluster.userId)} key={`${cluster.userId}-${index}`}>
+                    <Header isCurrentUser={!isCurrentUser(cluster.userId)}>
+                        {!isCurrentUser(cluster.userId) && (
+                            <Typography variant="meta">{cluster.meta.commenterName}</Typography>
+                        )}
+                        <TimeStamp>
+                            <Typography variant="meta">{formatDate(cluster.meta.createdDate)}</Typography>
+                        </TimeStamp>
+                    </Header>
+                    <div>
+                        {cluster.messages.map((message, messageIndex) => {
+                            console.log(message)
+                            return (
+                                <>
+                                    {message.isEdited && (
+                                        <Typography variant="meta">
+                                            Edited
+                                            {" "}
+                                            {formatDate(message.modifiedDate || "")}
+                                        </Typography>
+                                    )}
                                     <MessageBox
                                         key={`${cluster.userId}-${index}-${messageIndex}`}
                                         isCurrentUser={isCurrentUser(cluster.userId)}
@@ -108,12 +127,13 @@ const generateMessageCluster = (postedComments: ReviewComment[]): Cluster[] => {
                                         setReviewComments={setReviewComments}
                                         userId={cluster.userId}
                                     />
-                                )
-                            })}
-                        </div>
-                    </Container>
+                                </>
+                            )
+                        })}
+                    </div>
+                </Container>
             ))}
-            </>
+        </>
     )
 }