ページ同時編集時のコンフリクト解消に関する仕様

ゴール

• ユーザーAが「編集」を行っている間に、ユーザーBが「編集」（HackMDでも可）を行いページを更新し、その後、ユーザーAがページ更新を行なった際に、フロントエンドでエラーを表示せず、コンフリクトを手動で解消できるようにする

現状(2021/10/06)の状態

• 別のユーザーが更新したページを更新しようとすると、以下のようなエラーを表示している。

• サーバーサイド(routes/pages.js の api.update)で、revisionId が get した時に取得したものとサーバーサイドのDBに保存されているものが一致しているかを見てエラーメッセージを戻している

仕様検討

サーバーサイド仕様

revisionId が edit ページに get した時に取得したものとサーバーサイドのDBに保存されているものが一致しているかを見てエラーメッセージを戻している

上記のエラーメッセージをフロントエンドに戻している箇所で、もしコンフリクトしている場合は、以下の操作を行う。

3つの revision

• DBに保存されている最新の1つ前のrevision(派生元)
• DBに保存されている最新のrevision
• フロントエンドから送信されてきたrevision

と、各 revision の author フィールドから、各 revision に username を追加した連想配列をフロントエンドへ送る。

usernameを追加する理由は、ページ更新者をフロントエンドで表示したいため。

フロントエンド仕様

コンフリクトが発生した場合に「コンフリクト解消」をユーザーが選べるようにする

• サーバーサイドからコンフリクトした際の response があった場合、ページ更新を行ったページ下部に PageStatusAlert.jsx を表示
• PageStatusAlert.jsx に「resolve conflict」ボタンを入れて、クリックしたら modal を表示

3つの revision をモーダルに表示する

• modal は ExpandOrContractButton がついてるものを使用する
• 3つの revision とは、DB に保存されている最新の revision, 派生元, フロントエンドで送信を行なった revision

3つの revision が表示されているモーダルからユーザーがコンフリクト解消を行える

• 1

  • react の state を使い、特定の revision を選ぶと、3つの revision が横並びになっている下に、選んだ revision が全文表示される(ユーザーが編集ができる textarea)
  • ※ コンフリクトしている箇所に関して、行数を表示するなどの、UIやUXを高める仕様は一旦77877ストーリーでは行わない

• 2

  • 編集された内容とコンフリクトの相手となった revision の Id を request に含めて post できる（updateが行える）
    • この結果もうコンフリクトが起こらない場合、コンフリクトの相手 = DB 上にあった page の最新 revision
    • ※ この場合、何度コンフリクトが発生しても繰り返し解決していくことで問題なく解消が行える