refactor ConflictDiffModal

apps/app/src/client/components/PageEditor/ConflictDiffModal.tsx

@@ -32,22 +32,28 @@ type IRevisionOnConflict = {
   user: IUser
 }
 
-type ConflictDiffModalCoreProps = {
+/**
+ * ConflictDiffModalSubstance - Presentation component (heavy logic, rendered only when isOpen)
+ */
+type ConflictDiffModalSubstanceProps = {
   request: IRevisionOnConflict
   latest: IRevisionOnConflict
+  isModalExpanded: boolean
+  setIsModalExpanded: React.Dispatch<React.SetStateAction<boolean>>
 };
 
 const formatedDate = (date: Date): string => {
   return format(date, 'yyyy/MM/dd HH:mm:ss');
 };
 
-const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): React.JSX.Element => {
-  const { request, latest } = props;
+const ConflictDiffModalSubstance = (props: ConflictDiffModalSubstanceProps): React.JSX.Element => {
+  const {
+    request, latest, isModalExpanded, setIsModalExpanded,
+  } = props;
 
   const [resolvedRevision, setResolvedRevision] = useState<string>('');
   const [isRevisionselected, setIsRevisionSelected] = useState<boolean>(false);
   const [revisionSelectedToggler, setRevisionSelectedToggler] = useState<boolean>(false);
-  const [isModalExpanded, setIsModalExpanded] = useState<boolean>(false);
 
   const { t } = useTranslation();
   const conflictDiffModalStatus = useConflictDiffModalStatus();
@@ -90,11 +96,10 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): React.JSX.Ele
         <span className="material-symbols-outlined">close</span>
       </button>
     </div>
-  ), [closeConflictDiffModal, isModalExpanded]);
+  ), [closeConflictDiffModal, isModalExpanded, setIsModalExpanded]);
 
   return (
-    <Modal isOpen={conflictDiffModalStatus?.isOpened} className={`${styles['conflict-diff-modal']} ${isModalExpanded ? ' grw-modal-expanded' : ''}`} size="xl">
-
+    <>
       <ModalHeader tag="h4" className="d-flex align-items-center" close={headerButtons}>
         <span className="material-symbols-outlined me-1">error</span>{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
@@ -188,11 +193,13 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): React.JSX.Ele
           {t('modal_resolve_conflict.resolve_and_save')}
         </button>
       </ModalFooter>
-    </Modal>
+    </>
   );
 };
 
-
+/**
+ * ConflictDiffModal - Container component (lightweight, always rendered)
+ */
 export const ConflictDiffModal = (): React.JSX.Element => {
   const currentUser = useCurrentUser();
   const currentPage = useCurrentPageData();
@@ -206,23 +213,42 @@ export const ConflictDiffModal = (): React.JSX.Element => {
 
   const isRemotePageDataInappropriate = remoteRevisionId == null || remoteRevisionBody == null || remoteRevisionLastUpdateUser == null;
 
-  if (!conflictDiffModalStatus?.isOpened || currentUser == null || currentPage == null || isRemotePageDataInappropriate) {
-    return <></>;
-  }
+  const [isModalExpanded, setIsModalExpanded] = useState<boolean>(false);
+
+  // Check if all required data is available
+  const isDataReady = conflictDiffModalStatus?.isOpened
+    && currentUser != null
+    && currentPage != null
+    && !isRemotePageDataInappropriate;
 
+  // Prepare data for Substance
   const currentTime: Date = new Date();
-
-  const request: IRevisionOnConflict = {
+  const request: IRevisionOnConflict | null = isDataReady ? {
     revisionBody: conflictDiffModalStatus.requestRevisionBody ?? '',
     createdAt: currentTime,
     user: currentUser,
-  };
+  } : null;
 
-  const latest: IRevisionOnConflict = {
+  const latest: IRevisionOnConflict | null = isDataReady ? {
     revisionBody: remoteRevisionBody,
     createdAt: new Date(remoteRevisionLastUpdatedAt ?? currentTime.toString()),
     user: remoteRevisionLastUpdateUser,
-  };
+  } : null;
 
-  return <ConflictDiffModalCore request={request} latest={latest} />;
+  return (
+    <Modal
+      isOpen={conflictDiffModalStatus?.isOpened ?? false}
+      className={`${styles['conflict-diff-modal']} ${isModalExpanded ? ' grw-modal-expanded' : ''}`}
+      size="xl"
+    >
+      {isDataReady && request != null && latest != null && (
+        <ConflictDiffModalSubstance
+          request={request}
+          latest={latest}
+          isModalExpanded={isModalExpanded}
+          setIsModalExpanded={setIsModalExpanded}
+        />
+      )}
+    </Modal>
+  );
 };