From 5fbeb152e532606161eccbe4d3c84be14837e669 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 11 Mar 2024 14:27:02 +0500
Subject: [PATCH] web: update diff content on tab switch

---
 apps/web/src/components/diff-viewer/index.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/diff-viewer/index.tsx b/apps/web/src/components/diff-viewer/index.tsx
index 6bb4b9637..d9a18c456 100644
--- a/apps/web/src/components/diff-viewer/index.tsx
+++ b/apps/web/src/components/diff-viewer/index.tsx
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import { Flex, Text, Button } from "@theme-ui/components";
 import { Loading, ImageDownload, Copy, Restore } from "../icons";
 import ContentToggle from "./content-toggle";
@@ -45,6 +45,13 @@ function DiffViewer(props: DiffViewerProps) {
     content.conflicted
   );
 
+  useLayoutEffect(() => {
+    setConflictedContent((c) => {
+      if (c?.dateEdited === session.content.conflicted?.dateEdited) return c;
+      return session.content.conflicted;
+    });
+  }, [session]);
+
   if (!conflictedContent) return null;
 
   return (
@@ -242,7 +249,8 @@ function DiffViewer(props: DiffViewerProps) {
                     <Editor
                       id={content.id}
                       content={() => content.data}
-                      nonce={0}
+                      session={session}
+                      nonce={content.dateEdited}
                       options={{ readonly: true, headless: true }}
                     />
                   </Flex>
@@ -316,8 +324,9 @@ function DiffViewer(props: DiffViewerProps) {
                   <Flex sx={{ px: 2, overflow: "auto" }}>
                     <Editor
                       id={`${conflictedContent.id}-conflicted`}
+                      session={session}
                       content={() => conflictedContent.data}
-                      nonce={0}
+                      nonce={conflictedContent.dateEdited}
                       options={{ readonly: true, headless: true }}
                     />
                   </Flex>