must set request user name and user image path

packages/app/src/client/services/PageContainer.js

@@ -630,6 +630,7 @@ export default class PageContainer extends Container {
 
       // update remote page data
       const { s2cMessagePageUpdated } = data;
+      console.log('s2cMessagePageUpdated:', s2cMessagePageUpdated);
       if (s2cMessagePageUpdated.pageId === pageContainer.state.pageId) {
         pageContainer.setLatestRemotePageData(s2cMessagePageUpdated);
       }

packages/app/src/components/PageEditor/ConflictDiffModal.tsx

@@ -83,7 +83,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   </div>
                   <div className="ml-3 text-muted">
                     <p className="my-0">updated by {request.userName}</p>
-                    <p className="my-0">{format(parseISO(request.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
+                    <p className="my-0">{request.createdAt}</p>
                   </div>
                 </div>
                 <CodeMirror
@@ -112,7 +112,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   </div>
                   <div className="ml-3 text-muted">
                     <p className="my-0">updated by {origin.userName}</p>
-                    <p className="my-0">{format(parseISO(origin.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
+                    <p className="my-0">{origin.createdAt}</p>
                   </div>
                 </div>
                 <CodeMirror
@@ -141,7 +141,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   </div>
                   <div className="ml-3 text-muted">
                     <p className="my-0">updated by {latest.userName}</p>
-                    <p className="my-0">{format(parseISO(latest.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
+                    <p className="my-0">{latest.createdAt}</p>
                   </div>
                 </div>
                 <CodeMirror

packages/app/src/components/PageStatusAlert.jsx

@@ -63,7 +63,40 @@ class PageStatusAlert extends React.Component {
           <i className="icon-fw icon-reload mr-1"></i>
           {t('Load latest')}
         </button>
-        <button type="button" onClick={() => pageContainer.setState({ isConflictDiffModalOpen: true })} className="btn btn-outline-white">
+        <button
+          type="button"
+          onClick={() => {
+            // create function about following lines
+            // when isconflictingonsave no change
+            pageContainer.setState({
+              isConflictDiffModalOpen: true,
+              revisionsOnConflict: {
+                request: {
+                  revisionId: '',
+                  revisionBody: 'markdownOnEdit',
+                  createdAt: (new Date()).toString(),
+                  userName: 'request.user', // required
+                  userImgPath: 'request user img', // required
+                },
+                origin: {
+                  revisionId: pageContainer.revisionId,
+                  revisionBody: pageContainer.state.markdown,
+                  createdAt: pageContainer.state.updatedAt.toString(),
+                  userName: pageContainer.creator.name,
+                  userImgPath: pageContainer.creator.createdAt,
+                },
+                latest: {
+                  revisionId: pageContainer.remoteRevisionId,
+                  revisionBody: pageContainer.state.remoteRevisionBody,
+                  createdAt: (new Date()).toString(), // retrieve from page container
+                  userName: pageContainer.state.lastUpdateUsername,
+                  userImgPath: 'latest user img path', // retrieve from page container
+                },
+              },
+            });
+          }}
+          className="btn btn-outline-white"
+        >
           <i className="fa fa-fw fa-file-text-o mr-1"></i>
           {t('modal_resolve_conflict.resolve_conflict')}
         </button>
@@ -109,13 +142,23 @@ class PageStatusAlert extends React.Component {
       revisionId, revisionIdHackmdSynced, remoteRevisionId, hasDraftOnHackmd, isHackmdDraftUpdatingInRealtime, isConflictingOnSave,
     } = this.props.pageContainer.state;
 
-    console.log('pageContainer is', this.props.pageContainer.state);
+    console.log('pageContainer is', this.props.pageContainer);
+
+    const pageEditor = this.props.appContainer.getComponentInstance('PageEditor');
+    let markdownOnEdit = '';
+
+    // when page mode is not view
+    if (pageEditor != null) {
+      markdownOnEdit = pageEditor.getMarkdown();
+    }
+
     const isRevisionOutdated = revisionId !== remoteRevisionId;
     const isHackmdDocumentOutdated = revisionIdHackmdSynced !== remoteRevisionId;
+    const isConflictOnEdit = isRevisionOutdated && (markdownOnEdit !== this.props.pageContainer.state.markdown);
 
     let getContentsFunc = null;
     // when conflicting on save
-    if (isConflictingOnSave) {
+    if (isConflictingOnSave || isConflictOnEdit) {
       getContentsFunc = this.getContentsForRevisionOutdated;
     }
     // when remote revision is newer than both

packages/app/src/server/models/vo/s2c-message.js

@@ -9,6 +9,8 @@ class S2cMessagePageUpdated {
   constructor(page, user) {
     const serializedPage = serializePageSecurely(page);
 
+    console.log('pageis', page);
+
     const {
       _id, revision, revisionHackmdSynced, hasDraftOnHackmd,
     } = serializedPage;