support resyncing conversations

net/web/src/User/Conversation/Conversation.jsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { ExclamationCircleOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons';
 import { useConversation } from './useConversation.hook';
-import { Button, Input, Checkbox, Modal, Spin } from 'antd'
-import { ConversationWrapper, ConversationButton, EditButton, CloseButton, ListItem, BusySpin } from './Conversation.styled';
+import { Button, Input, Checkbox, Modal, Spin, Tooltip } from 'antd'
+import { ConversationWrapper, ConversationButton, EditButton, CloseButton, ListItem, BusySpin, Offsync } from './Conversation.styled';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import { AddTopic } from './AddTopic/AddTopic';
 import { VirtualList } from 'VirtualList/VirtualList';
@@ -82,6 +82,13 @@ export function Conversation() {
           <Icon />
           <div class="subject">{ subject }</div> 
           <Edit />
+          { state.error && (
+            <Tooltip placement="right" title="sync failed: click to retry">
+              <Offsync onClick={() => {actions.resync()}}>
+                <ExclamationCircleOutlined />
+              </Offsync>
+            </Tooltip>
+          )}
         </div>
         <div class="control">       
           <div class="buttons">

net/web/src/User/Conversation/Conversation.styled.jsx

@@ -103,3 +103,9 @@ export const BusySpin = styled(Spin)`
   left: calc(50% - 16px);
   top: calc(50% - 16px);
 `;
+
+export const Offsync = styled.div`
+  padding-left: 8px;
+  color: #ff8888;
+  cursor: pointer;
+`

net/web/src/User/Conversation/useConversation.hook.js

@@ -36,6 +36,9 @@ export function useConversation() {
     },
     more: () => {
       conversation.actions.addHistory();
+    },
+    resync: () => {
+      conversation.actions.resync();
     }
   };
 
@@ -60,6 +63,7 @@ export function useConversation() {
       cardId: conversation.state.cardId,
       channelId: conversation.state.channelId,
       members: conversation.state.members,
+      error: conversation.state.error,
       topics,
     });
     if (conversation.state.init) {

net/web/src/context/useConversationContext.hook.js

@@ -8,6 +8,7 @@ export function useConversationContext() {
 
   const [state, setState] = useState({
     init: false,
+    error: false,
     loading: false,
     cardId: null,
     channelId: null,
@@ -21,6 +22,7 @@ export function useConversationContext() {
   const EVENT_OPEN = 1;
   const EVENT_MORE = 2;
   const EVENT_UPDATE = 3;
+  const EVENT_RESYNC = 4;
   const events = useRef([]);
 
   const channelView = useRef({
@@ -181,7 +183,7 @@ export function useConversationContext() {
           channelView.current.begin = delta.marker;
         }
       }
-      else if (ev.type == EVENT_UPDATE) {
+      else if (ev.type == EVENT_UPDATE || ev.type == EVENT_RESYNC) {
         let deltaRevision = getChannelRevision();
         if (channelView.current.init && deltaRevision != channelView.current.revision) {
           let delta = await getTopicDelta(channelView.current.revision, null, channelView.current.begin, null);
@@ -197,6 +199,7 @@ export function useConversationContext() {
         let members = getMembers(chan);
         updateState({
           init: true,
+          error: false,
           subject,
           contacts,
           members,
@@ -206,9 +209,10 @@ export function useConversationContext() {
       }
     }
     catch (err) {
-      if (!channelView.current.error) {
-        window.alert("This converstaion failed to update");
-        channelView.current.error = true;
+      console.log(err);
+      updateState({ error: true });
+      if (ev.type == EVENT_RESYNC) {
+        window.alert("failed to syncrhonize conversation");
       }
     }
   }
@@ -248,14 +252,12 @@ export function useConversationContext() {
 
   const actions = {
     setConversationId: (cardId, channelId) => {
-
       view.current += 1;
       updateState({ init: false, loading: true });
       events.current = [{ type: EVENT_OPEN, data: { cardId, channelId }}];
       updateState({ subject: null, cardId, channelId, topics: new Map() });
       topics.current = new Map();
       updateConversation();
-
     },
     addHistory: () => {
       updateState({ loading: true });
@@ -306,6 +308,10 @@ export function useConversationContext() {
       else {
         return await channel.actions.setChannelTopicSubject(channelId, topicId, data);
       }
+    },
+    resync: () => {
+      events.current.push({ type: EVENT_RESYNC });
+      updateConversation();
     }
   }