fix:fixed chat date separator issue on day's first message

TERITORI · Jun 6, 2024 · a552325 · a552325
1 parent 9188562
commit a552325
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/packages/screens/Mini/Conversation/components/Conversations.tsx b/packages/screens/Mini/Conversation/components/Conversations.tsx
@@ -121,6 +121,35 @@ export const Conversations = ({
     );
   }
 
+  const renderDateSeparator = (separatorDate: string) => {
+    return (
+      <View
+        style={{
+          position: "relative",
+          flexDirection: "row",
+          justifyContent: "center",
+          marginTop: layout.spacing_x2,
+        }}
+      >
+        <Separator style={{ position: "absolute", top: 10 }} />
+        <BrandText
+          style={[
+            fontSemibold14,
+            {
+              backgroundColor: neutral00,
+              zIndex: 10,
+              paddingHorizontal: layout.spacing_x2,
+              textAlign: "center",
+              marginBottom: layout.spacing_x3,
+            },
+          ]}
+        >
+          {moment(separatorDate).format("YYYY, MMM DD")}
+        </BrandText>
+      </View>
+    );
+  };
+
   return (
     <>
       <View
@@ -138,9 +167,10 @@ export const Conversations = ({
               index < messages.length - 1 ? messages[index + 1] : undefined;
 
             const separatorDate = previousMessage
-              ? moment(item.timestamp).format("DD/MM/YYYY") !==
-                  moment(previousMessage.timestamp).format("DD/MM/YYYY") &&
-                item.timestamp
+              ? moment(item.timestamp).format("DD/MM/YYYY") ===
+                moment(previousMessage.timestamp).format("DD/MM/YYYY")
+                ? false
+                : item?.timestamp
               : item.timestamp;
 
             if (item.type === "group-join") {
@@ -155,31 +185,9 @@ export const Conversations = ({
               : undefined;
             return (
               <>
-                {!!separatorDate && (
-                  <View
-                    style={{
-                      position: "relative",
-                      flexDirection: "row",
-                      justifyContent: "center",
-                    }}
-                  >
-                    <Separator style={{ position: "absolute", top: 10 }} />
-                    <BrandText
-                      style={[
-                        fontSemibold14,
-                        {
-                          backgroundColor: neutral00,
-                          zIndex: 10,
-                          paddingHorizontal: layout.spacing_x2,
-                          textAlign: "center",
-                          marginBottom: layout.spacing_x3,
-                        },
-                      ]}
-                    >
-                      {moment(separatorDate).format("YYYY, MMM DD")}
-                    </BrandText>
-                  </View>
-                )}
+                {!!separatorDate &&
+                  !previousMessage &&
+                  renderDateSeparator(separatorDate)}
                 {item.type === "accept-contact" && !previousMessage && (
                   <View style={{ marginBottom: layout.spacing_x5 }}>
                     <View
@@ -242,6 +250,9 @@ export const Conversations = ({
                     }
                   />
                 )}
+                {!!separatorDate &&
+                  previousMessage &&
+                  renderDateSeparator(separatorDate)}
               </>
             );
           }}