Allow Writing Cloud Code

back4app · Nov 2, 2020 · 2a5c050 · 2a5c050
1 parent e9d3ea7
commit 2a5c050
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 19 deletions.
diff --git a/src/components/SaveButton/SaveButton.example.js b/src/components/SaveButton/SaveButton.example.js
@@ -55,6 +55,9 @@ export const demos = [
         <div style={{padding: 10}}>
           <SaveButton state={SaveButton.States.FAILED} />
         </div>
+        <div style={{padding: 10}}>
+          <SaveButton state={SaveButton.States.WAITING} />
+        </div>
       </div>
     )
   }, {

diff --git a/src/components/SaveButton/SaveButton.react.js b/src/components/SaveButton/SaveButton.react.js
@@ -52,7 +52,7 @@ let SaveButton = ({
   </span>;
 };
 
-SaveButton.States = keyMirror(['SAVING', 'SUCCEEDED', 'FAILED']);
+SaveButton.States = keyMirror(['SAVING', 'SUCCEEDED', 'FAILED', 'WAITING']);
 
 let {...forwardedButtonProps} = Button.propTypes;
 delete forwardedButtonProps.value;

diff --git a/src/dashboard/Data/CloudCode/CloudCode.react.js b/src/dashboard/Data/CloudCode/CloudCode.react.js
@@ -5,14 +5,15 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import CodeSnippet   from 'components/CodeSnippet/CodeSnippet.react';
+import CodeEditor from 'components/CodeEditor/CodeEditor.react';
 import DashboardView from 'dashboard/DashboardView.react';
 import EmptyState    from 'components/EmptyState/EmptyState.react';
 import FileTree      from 'components/FileTree/FileTree.react';
 import history       from 'dashboard/history';
 import React         from 'react';
 import styles        from 'dashboard/Data/CloudCode/CloudCode.scss';
 import Toolbar       from 'components/Toolbar/Toolbar.react';
+import SaveButton from 'components/SaveButton/SaveButton.react';
 
 function getPath(params) {
   const last = params.location.pathname.split('cloud_code/')[1]
@@ -27,7 +28,9 @@ export default class CloudCode extends DashboardView {
 
     this.state = {
       files: undefined,
-      source: undefined
+      source: undefined,
+      saveState: SaveButton.States.WAITING,
+      saveError: '',
     };
   }
 
@@ -56,8 +59,14 @@ export default class CloudCode extends DashboardView {
           history.replace(this.context.generatePath(`cloud_code/${Object.keys(release.files)[0]}`))
         } else {
           // Means we can load /cloud_code/<fileName>
+          this.setState({ source: undefined })
           app.getSource(fileName).then(
-            (source) => this.setState({ source: source }),
+            (source) => {
+              this.setState({ source: source })
+              if (this.editor) {
+                this.editor.value = source;
+              }
+            },
             () => this.setState({ source: undefined })
           );
         }
@@ -87,7 +96,23 @@ export default class CloudCode extends DashboardView {
       </div>
     );
   }
-
+  async getCode() { 
+    if (!this.editor) {
+      return;
+    }
+    this.setState({ saveState: SaveButton.States.SAVING });
+    let fileName = getPath(this.props);
+    try {
+      await this.context.currentApp.saveSource(fileName,this.editor.value);
+      this.setState({ saveState: SaveButton.States.SUCCEEDED });
+      setTimeout(()=> {
+        this.setState({ saveState: SaveButton.States.WAITING });
+      },2000);
+    } catch (e) {
+      this.setState({ saveState: SaveButton.States.FAILED });
+      this.setState({ saveError: e.message || e });
+    }
+  }
   renderContent() {
     let toolbar = null;
     let content = null;
@@ -111,10 +136,20 @@ export default class CloudCode extends DashboardView {
           subsection={fileName} />;
 
         let source = this.state.files[fileName];
-        if (source && source.source) {
+        if ((source && source.source) || this.state.source) {
           content = (
             <div className={styles.content}>
-              <CodeSnippet source={source.source} language='javascript' />
+              <CodeEditor
+                placeHolder={this.state.source || source.source}
+                ref={editor => (this.editor = editor)}
+                fontSize={'14px'}
+              />
+               <SaveButton 
+               state={this.state.saveState}
+               waitingText={this.state.submitText}
+               savingText={this.state.inProgressText}
+               failedText={this.state.saveError}
+               onClick={() => this.getCode(this)}></SaveButton>
             </div>
           );
         }

diff --git a/src/lib/ParseApp.js b/src/lib/ParseApp.js
@@ -117,6 +117,15 @@ export default class ParseApp {
     return this.apiRequest('GET', path, {}, { useMasterKey: true });
   }
 
+  /**
+   * Saves source of a Cloud Code hosted file from api.parse.com
+   * fileName - the name of the file to be fetched
+   * data - the text to save to the cloud file
+   */
+  saveSource(fileName,data) {
+    return this.apiRequest('POST', `scripts/${fileName}`, {data}, { useMasterKey: true });
+  }
+
   /**
    * Fetches source of a Cloud Code hosted file from api.parse.com
    * fileName - the name of the file to be fetched
@@ -127,22 +136,11 @@ export default class ParseApp {
         // No release yet
         return Promise.resolve(null);
       }
-
-      let fileMetaData = release.files[fileName];
-      if (fileMetaData && fileMetaData.source) {
-        return Promise.resolve(fileMetaData.source);
-      }
-
-      let params = {
-        version: fileMetaData.version,
-        checksum: fileMetaData.checksum
-      }
-      return this.apiRequest('GET', `scripts/${fileName}`, params, { useMasterKey: true });
+      return this.apiRequest('GET', `scripts/${fileName}`, {}, { useMasterKey: true });
     }).then((source) => {
       if (this.latestRelease.files) {
         this.latestRelease.files[fileName].source = source;
       }
-
       return Promise.resolve(source);
     });
   }