From cdc9d4865ed36ecfa2a644aec53a1cd3a453c60a Mon Sep 17 00:00:00 2001
From: LeoSirius <851958789@qq.com>
Date: Thu, 18 Apr 2019 18:18:11 +0800
Subject: [PATCH 1/3] change the mechanism of saving txt file, use md file's
 way of saving

---
 .../src/components/file-view/file-toolbar.js  | 21 +++---
 .../src/components/file-view/file-view.js     |  5 +-
 frontend/src/view-file-text.js                | 65 +++++++++++++++++--
 3 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index f9bf4becc3..7d06f6b2f0 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -10,6 +10,7 @@ import ShareDialog from '../dialog/share-dialog';
 const propTypes = { 
   isLocked: PropTypes.bool.isRequired,
   lockedByMe: PropTypes.bool.isRequired,
+  onSaveChangedContent: PropTypes.func.isRequired,
   toggleLockFile: PropTypes.func.isRequired,
   toggleCommentPanel: PropTypes.func.isRequired
 };
@@ -38,7 +39,6 @@ class FileToolbar extends React.Component {
 
   render() {
     const { isLocked, lockedByMe } = this.props; 
-
     let showLockUnlockBtn = false;
     let lockUnlockText, lockUnlockIcon;
     if (canLockUnlockFile) {
@@ -94,14 +94,17 @@ class FileToolbar extends React.Component {
               href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`}
             />
           )}
-          {(canEditFile && !err) && (
-            <IconButton
-              id="edit"
-              icon="fa fa-edit"
-              text={gettext('Edit')}
-              tag="a"
-              href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(fileEnc)}`}
-            />
+          {(canEditFile && !err) && 
+          (<IconButton 
+            text={gettext('Save')} 
+            id={'saveButton'} 
+            icon={'fa fa-save'}  
+            // button imported in this file does not have functionalities of 
+            // disabled, isActive as button imported in markdowneditor has
+            //disabled={isContentChanged} 
+            //isActive={!isContentChanged}
+            onClick={this.props.onSaveChangedContent} 
+          />
           )}
           {canDownloadFile && (
             <IconButton
diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
index bab8e58bed..5b1a0f30a5 100644
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -10,6 +10,7 @@ import CommentPanel from './comment-panel';
 import '../../css/file-view.css';
 
 const propTypes = {
+  onSaveChangedContent: PropTypes.func.isRequired,
   content: PropTypes.object.isRequired
 };
 
@@ -17,6 +18,7 @@ const { isStarred, isLocked, lockedByMe,
   repoID, filePath, enableWatermark, userNickName
 } = window.app.pageOptions;
 
+
 class FileView extends React.Component {
 
   constructor(props) {
@@ -25,7 +27,7 @@ class FileView extends React.Component {
       isStarred: isStarred,
       isLocked: isLocked,
       lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
+      isCommentPanelOpen: false,
     };
   }
 
@@ -81,6 +83,7 @@ class FileView extends React.Component {
           <FileToolbar 
             isLocked={this.state.isLocked}
             lockedByMe={this.state.lockedByMe}
+            onSaveChangedContent={this.props.onSaveChangedContent}
             toggleLockFile={this.toggleLockFile}
             toggleCommentPanel={this.toggleCommentPanel}
           />
diff --git a/frontend/src/view-file-text.js b/frontend/src/view-file-text.js
index 3f697e7b17..cc54f4396a 100644
--- a/frontend/src/view-file-text.js
+++ b/frontend/src/view-file-text.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import toaster from './components/toast';
 import { Utils } from './utils/utils';
+import { gettext } from './utils/constants';
 import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
+import { seafileAPI } from './utils/seafile-api';
+
 
 import CodeMirror from 'react-codemirror';
 import 'codemirror/mode/javascript/javascript';
@@ -20,7 +25,7 @@ import 'codemirror/lib/codemirror.css';
 import './css/text-file-view.css';
 
 const {
-  err, fileExt, fileContent
+  err, fileExt, fileContent, repoID, filePath, fileName
 } = window.app.pageOptions;
 
 const options = {
@@ -30,18 +35,65 @@ const options = {
   theme: 'default',
   textWrapping: true,
   lineWrapping: true,
-  readOnly: true,
-  cursorBlinkRate: -1 // hide the cursor
+  readOnly: false,          // set false to let user edit direclty
+  //cursorBlinkRate: -1 to hide the cursor. The default blink rate is 530ms.
 };
 
 class ViewFileText extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      content: fileContent
+    };
+    this.onSaveChangedContent=this.onSaveChangedContent.bind(this);
+  }
+
+
+  updateContent = (newContent) => {
+    this.setState({
+      content: newContent
+    });
+  }
+
+  onSaveChangedContent () {
+    let dirPath = '/';
+    return (
+      seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
+        const uploadLink = res.data;
+        return seafileAPI.updateFile(
+          uploadLink,
+          filePath,
+          fileName,
+          this.state.content
+        ).then(() => {
+          toaster.success(gettext('Successfully saved'), {
+            duration: 3
+          });
+        })
+      })
+    );
+  }
+
   render() {
     return (
-      <FileView content={<FileContent />} />
+      <FileView 
+        content={
+          <FileContent
+            content={this.state.content}
+            updateContent={this.updateContent}
+          />
+        }
+        onSaveChangedContent={this.onSaveChangedContent}
+      />
     );
   }
 }
 
+const propTypes = {
+  updateContent: PropTypes.func.isRequired,
+  content: PropTypes.string.isRequired,
+};
+
 class FileContent extends React.Component {
   render() {
     if (err) {
@@ -51,14 +103,17 @@ class FileContent extends React.Component {
       <div className="file-view-content flex-1 text-file-view">
         <CodeMirror
           ref="code-mirror-editor"
-          value={fileContent}
+          value={this.props.content}
           options={options}
+          onChange={this.props.updateContent}
         />
       </div>
     );
   }
 }
 
+FileContent.propTypes = propTypes;
+
 ReactDOM.render (
   <ViewFileText />,
   document.getElementById('wrapper')

From fad00989f1e8cb55a01aac21a401c870e1842caf Mon Sep 17 00:00:00 2001
From: LeoSirius <851958789@qq.com>
Date: Fri, 19 Apr 2019 11:57:07 +0800
Subject: [PATCH 2/3] optimize save button's status

---
 .../src/components/file-view/file-toolbar.js  | 31 ++++++++++++-------
 .../src/components/file-view/file-view.js     |  6 +++-
 frontend/src/view-file-text.js                | 16 ++++++++--
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 7d06f6b2f0..ae644458f9 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -11,6 +11,8 @@ const propTypes = {
   isLocked: PropTypes.bool.isRequired,
   lockedByMe: PropTypes.bool.isRequired,
   onSaveChangedContent: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isContentChangedButNotSaved: PropTypes.bool.isRequired,
   toggleLockFile: PropTypes.func.isRequired,
   toggleCommentPanel: PropTypes.func.isRequired
 };
@@ -95,17 +97,24 @@ class FileToolbar extends React.Component {
             />
           )}
           {(canEditFile && !err) && 
-          (<IconButton 
-            text={gettext('Save')} 
-            id={'saveButton'} 
-            icon={'fa fa-save'}  
-            // button imported in this file does not have functionalities of 
-            // disabled, isActive as button imported in markdowneditor has
-            //disabled={isContentChanged} 
-            //isActive={!isContentChanged}
-            onClick={this.props.onSaveChangedContent} 
-          />
-          )}
+            ( this.props.isSaving ? 
+              <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
+                <i className={'fa fa-spin fa-spinner'}/></button> :
+              (
+                this.props.isContentChangedButNotSaved ?
+                  <IconButton
+                    text={gettext('Save')}
+                    id={'saveButton'}
+                    icon={'fa fa-save'}
+                    // button imported in this file does not have functionalities of
+                    // isActive as button imported in markdowneditor has
+                    //isActive={!isContentChanged}
+                    onClick={this.props.onSaveChangedContent}
+                  /> :
+                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'} disabled>
+                    <i className={'fa fa-save'}/></button>
+              )
+            )}
           {canDownloadFile && (
             <IconButton
               id="download-file"
diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
index 5b1a0f30a5..254d5b0a7c 100644
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -11,7 +11,9 @@ import '../../css/file-view.css';
 
 const propTypes = {
   onSaveChangedContent: PropTypes.func.isRequired,
-  content: PropTypes.object.isRequired
+  content: PropTypes.object.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isContentChangedButNotSaved: PropTypes.bool.isRequired,
 };
 
 const { isStarred, isLocked, lockedByMe,
@@ -84,6 +86,8 @@ class FileView extends React.Component {
             isLocked={this.state.isLocked}
             lockedByMe={this.state.lockedByMe}
             onSaveChangedContent={this.props.onSaveChangedContent}
+            isSaving={this.props.isSaving}
+            isContentChangedButNotSaved={this.props.isContentChangedButNotSaved}
             toggleLockFile={this.toggleLockFile}
             toggleCommentPanel={this.toggleCommentPanel}
           />
diff --git a/frontend/src/view-file-text.js b/frontend/src/view-file-text.js
index cc54f4396a..a45ffd5009 100644
--- a/frontend/src/view-file-text.js
+++ b/frontend/src/view-file-text.js
@@ -43,7 +43,9 @@ class ViewFileText extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      content: fileContent
+      content: fileContent,
+      isContentChangedButNotSaved: false,
+      isSaving: false,
     };
     this.onSaveChangedContent=this.onSaveChangedContent.bind(this);
   }
@@ -51,7 +53,8 @@ class ViewFileText extends React.Component {
 
   updateContent = (newContent) => {
     this.setState({
-      content: newContent
+      isContentChangedButNotSaved: true,
+      content: newContent,
     });
   }
 
@@ -60,6 +63,9 @@ class ViewFileText extends React.Component {
     return (
       seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
         const uploadLink = res.data;
+        this.setState({
+          isSaving: true
+        });
         return seafileAPI.updateFile(
           uploadLink,
           filePath,
@@ -69,6 +75,10 @@ class ViewFileText extends React.Component {
           toaster.success(gettext('Successfully saved'), {
             duration: 3
           });
+          this.setState({
+            isSaving: false,
+            isContentChangedButNotSaved: false
+          });
         })
       })
     );
@@ -83,6 +93,8 @@ class ViewFileText extends React.Component {
             updateContent={this.updateContent}
           />
         }
+        isSaving={this.state.isSaving}
+        isContentChangedButNotSaved={this.state.isContentChangedButNotSaved}
         onSaveChangedContent={this.onSaveChangedContent}
       />
     );

From 001235945fb57b9ca718258566fad3b6129e7f40 Mon Sep 17 00:00:00 2001
From: LeoSirius <851958789@qq.com>
Date: Fri, 19 Apr 2019 18:30:28 +0800
Subject: [PATCH 3/3] optimize code detail

---
 frontend/src/view-file-text.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/view-file-text.js b/frontend/src/view-file-text.js
index a45ffd5009..53269eb401 100644
--- a/frontend/src/view-file-text.js
+++ b/frontend/src/view-file-text.js
@@ -8,7 +8,6 @@ import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
 import { seafileAPI } from './utils/seafile-api';
 
-
 import CodeMirror from 'react-codemirror';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/css/css';
@@ -35,8 +34,7 @@ const options = {
   theme: 'default',
   textWrapping: true,
   lineWrapping: true,
-  readOnly: false,          // set false to let user edit direclty
-  //cursorBlinkRate: -1 to hide the cursor. The default blink rate is 530ms.
+  readOnly: false,          // set false to let user edit directly
 };
 
 class ViewFileText extends React.Component {
@@ -79,7 +77,7 @@ class ViewFileText extends React.Component {
             isSaving: false,
             isContentChangedButNotSaved: false
           });
-        })
+        });
       })
     );
   }