Merge pull request #94 from back4app/add-cloud-code-page

Track cloud code events

Author: paivaric

src/components/B4ACodeTree/B4ACodeTree.react.js

@@ -9,6 +9,19 @@ import B4ATreeActions   from 'components/B4ACodeTree/B4ATreeActions';
 import 'jstree/dist/themes/default/style.css'
 import 'components/B4ACodeTree/B4AJsTree.css'
 
+const cloudFolderPlaceholder = "// The first deployed file must be named main.js and must be placed on the root of the cloud folder.\n" +
+  "// The example below shows you how a cloud code function looks like.\n\n" +
+  "/*\n* Parse.Cloud.define(\"hello\", function(request, response){\n" +
+  "* \tresponse.success(\"Hello world!\");\n" +
+  "* });\n*/\n" +
+  "\n// If you have set a function in another cloud code file, called \"test.js\" (for example)\n" +
+  "// you need to refer it in your main.js, as you can see below:\n" +
+  "\n/* require(\"./test.js\"); */"
+
+const publicFolderPlaceholder = "// Public folder can be used to deploy public static content as html, images, css, etc.\n" +
+  "\n" +
+  "// You have to setup a custom domain or subdomain at Back4App to access the public static content"
+
 export default class B4ACodeTree extends React.Component {
   constructor(props){
     super(props);
@@ -72,6 +85,9 @@ export default class B4ACodeTree extends React.Component {
         selectedFile = selected.text
         nodeId = selected.id
         extension = B4ATreeActions.getExtension(selectedFile)
+      } else {
+        if (selected.text === 'cloud') source = cloudFolderPlaceholder
+        else if (selected.text === 'public') source = publicFolderPlaceholder
       }
     }
     this.setState({ source, selectedFile, nodeId, extension, isImage })

src/components/B4ACodeTree/B4ATreeActions.js

@@ -159,6 +159,7 @@ const customMenu = node => {
 
 // Return the jstree config
 const getConfig = (files) => {
+  if (files[0] && files[0].state) files[0].state.selected = true
   return {
     plugins: ['contextmenu', 'dnd', 'sort', 'types', 'unique', 'changed'],
     core: {

src/dashboard/Data/CloudCode/B4ACloudCode.react.js

@@ -62,6 +62,7 @@ class B4ACloudCode extends CloudCode {
   }
 
   async componentWillMount() {
+    back4AppNavigation && back4AppNavigation.atCloudCodePageEvent()
     await this.fetchSource()
     // define the parameters to show unsaved changes warning modal
     const unbindHook = this.props.router.setRouteLeaveHook(this.props.route, nextLocation => {
@@ -101,10 +102,11 @@ class B4ACloudCode extends CloudCode {
       if (file.children && file.children.length > 0) {
         currentFile.children = [];
         // If is a folder, call formatFiles recursively
-        this.formatFiles(file.children, currentFile.children);
+        currentFile.children = this.formatFiles(file.children, currentFile.children);
       } else {
         currentFile.data = file.data;
       }
+      return currentFile
     })
   }
 
@@ -136,6 +138,7 @@ class B4ACloudCode extends CloudCode {
         data: { tree },
         withCredentials: true
       })
+      back4AppNavigation && back4AppNavigation.deployCloudCodeEvent()
       await this.fetchSource()
       // force jstree component to upload
       await updateTreeContent(this.state.files)
@@ -193,14 +196,14 @@ class B4ACloudCode extends CloudCode {
     let alertTips = null;
 
     let alertTipsMessage = <div>
-      <p><b>•</b> Using the Cloud Code tool you can deploy and run your Node.js functions on the Back4App cloud via SDK or calling the <a href="https://www.back4app.com/docs/platform/command-line-tool/how-to-use" target="_blank">REST API</a></p>
-      <p><b>•</b> To upload your code you should first click on <b>ADD</b> button and choose what files and folders you want to upload.</p>
-      <p><b>•</b> The first file MUST BE called <b>main.js</b> and any other file or folder MUST BE referenced more in this file.</p>
-      <p><b>•</b> After ADD and REMOVE all files you want, click on the <b>DEPLOY</b> button and commit your operation;</p>
+      <p><b>•</b> To deploy your Cloud Code Functions you can use the Dashboard bellow or the <a href="https://www.back4app.com/docs/platform/command-line-tool/parse-server-setup" target="_blank">Back4App CLI.</a></p>
+      <p><b>•</b> To upload your code you should first click on ADD button and choose what files you want to upload.</p>
+      <p><b>•</b> The first file MUST BE called main.js and any other file or folder MUST BE referenced more in this file.</p>
+      <p><b>•</b> After ADD and REMOVE all files you want, click on the DEPLOY button and commit your operation;</p>
     </div>
 
     let alertWhatIsMessage = <div>
-      <p>To make long short, Cloud code isn’t anything else than a script that runs on the server side instead of the device that is running your app. It is more commonly used on Apps that need of a little more of complexity to its execution but isn’t mandatory.</p>
+      <p>Cloud code functions is a tool that lets you run a NodeJS function in Back4App Cloud. Back4App executes your code only when you call the function via API or via SDK. It is also possible to create functions that are triggered by your app events. When you update your Cloud Code Functions, it becomes available to all mobile/web/IoT environments instantly. You don’t have to wait for a new release of your application. This lets you change app behavior on the fly and add new features faster.</p>
     </div>
 
     // Show loading page before fetch data