modify collab server

frontend/src/components/dir-view/dir-view.js

@@ -51,6 +51,7 @@ class DirView extends React.Component {
     // eg: http://127.0.0.1:8000/library/repo_id/repo_name/**/**/\
     let location = decodeURIComponent(window.location.href);
     let repoID = this.props.repoID;
+    collabServer.watchRepo(repoID, this.onRepoUpdateEvent);
     seafileAPI.getRepoInfo(repoID).then(res => {
       let repoInfo = new RepoInfo(res.data);
       this.setState({
@@ -70,7 +71,27 @@ class DirView extends React.Component {
       }
     });
   }
-  
+
+  componentWillUnmount() {
+    collabServer.unwatchRepo(this.props.repoID);
+  }
+
+  onRepoUpdateEvent = () => {
+    let repoID = this.props.repoID;
+    let { path, dirID } = this.state;
+    seafileAPI.dirMetaData(repoID, path).then((res) => {
+      if (res.data.id !== dirID) {
+        toaster.notify(
+          <span>
+            {gettext('This folder has been updated. ')}
+            <a href='' >{gettext('Refresh')}</a>
+          </span>,
+          {duration: 3600}
+        );
+      }
+    })
+  }
+
   updateDirentList = (filePath) => {
     let repoID = this.state.repoID;
     this.setState({isDirentListLoading: true});
@@ -83,7 +104,6 @@ class DirView extends React.Component {
         direntList: direntList,
         dirID: res.headers.oid,
       });
-      collabServer.watchRepo(this.state.repoID, this.state.path, this.state.dirID);
     }).catch(() => {
       this.setState({pathExist: false});
     });

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -7,9 +7,6 @@ import ModalPortal from '../modal-portal';
 import CreateFile from '../../components/dialog/create-file-dialog';
 
 import '../../css/tip-for-new-md.css';
-import io from 'socket.io-client';
-import { seafileAPI } from '../../utils/seafile-api';
-import toaster from '../../components/toast';
 
 const propTypes = {
   path: PropTypes.string.isRequired,

frontend/src/repo-wiki-mode.js

@@ -63,6 +63,7 @@ class Wiki extends Component {
   }
 
   componentDidMount() {
+    collabServer.watchRepo(repoID, this.onRepoUpdateEvent);
     seafileAPI.getRepoInfo(repoID).then(res => {
       this.setState({
         libNeedDecrypt: res.data.lib_need_decrypt, 
@@ -82,6 +83,24 @@ class Wiki extends Component {
     });
   }
 
+  componentWillUnmount() {
+    collabServer.unwatchRepo(repoID);
+  }
+
+  onRepoUpdateEvent = () => {
+    let { path, dirID } = this.state;
+    seafileAPI.dirMetaData(repoID, path).then((res) => {
+      if (res.data.id !== dirID) {
+        toaster.notify(
+          <span>
+            {gettext('This folder has been updated. ')}
+            <a href='' >{gettext('Refresh')}</a>
+          </span>,
+          {duration: 3600}
+        );
+      }
+    })
+  }
 
   deleteItemAjaxCallback(path, isDir) {
     let node = this.state.treeData.getNodeByPath(path);
@@ -282,7 +301,6 @@ class Wiki extends Component {
         isDirentListLoading: false,
         dirID: res.headers.oid,
       });
-      collabServer.watchRepo(repoID, this.state.path, this.state.dirID);
     });
   }
 

frontend/src/utils/collab-server.js

@@ -1,14 +1,11 @@
-import React from 'react';
 import io from 'socket.io-client';
-import toaster from '../components/toast';
+import { name, username, contactEmail, seafileCollabServer } from './constants';
-import { seafileAPI } from './seafile-api';
-import { gettext, name, username, contactEmail, seafileCollabServer } from './constants';
 
 const socket = io(seafileCollabServer);
 
 class CollabServer {
 
-  watchRepo(repoID, path, dirID) {
+  watchRepo(repoID, fn) {
     socket.emit('repo_update', {
       request: 'watch_update',
       repo_id: repoID,
@@ -19,23 +16,19 @@ class CollabServer {
       },
     });
 
-    socket.on('repo_update', () => {
+    socket.on('repo_update', fn)
-      seafileAPI.dirMetaData(repoID, path).then((res) => {
-        if (res.data.id !== dirID) {
-          toaster.notify(
-            <span>
-              {gettext('This folder has been updated. ')}
-              <a href='' >{gettext('Refresh')}</a>
-            </span>,
-            {duration: 3600}
-          );
-        }
-      })
-    })
   }
 
-  unwatchRepo() {
+  unwatchRepo(repoID) {
-    socket.off()
+    socket.emit('repo_update', {
+      request: 'unwatch_update',
+      repo_id: repoID,
+      user: {
+        name: name,
+        username: username,
+        contact_email: contactEmail,
+      },
+    });
   }
 }