From d2f40d3592bdf23641ef3545440513513481c644 Mon Sep 17 00:00:00 2001
From: Marcin S <marcin@bytedude.com>
Date: Tue, 22 Sep 2020 16:46:24 +0200
Subject: [PATCH] Add Browser JS to SDK examples

Closes #406
---
 README.md                                     |  2 +-
 .../src/components/CodeExamples/Code.js       | 38 ++++++++++++++-----
 .../components/CodeExamples/CodeExamples.js   | 17 +++++++--
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index f119ce20..fedf8332 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ List of available parameters:
 
 ## Contributing
 
-### Testing you Code
+### Testing Your Code
 
 Before pushing your code you should verify that it will pass our online test
 suite.
diff --git a/packages/webapp/src/components/CodeExamples/Code.js b/packages/webapp/src/components/CodeExamples/Code.js
index 695a4634..9c5d01c2 100644
--- a/packages/webapp/src/components/CodeExamples/Code.js
+++ b/packages/webapp/src/components/CodeExamples/Code.js
@@ -1,3 +1,30 @@
+export const curl = `# upload
+curl -X POST "https://siasky.net/skynet/skyfile" -F file=@src.jpg
+
+# download
+curl "https://siasky.net/[skylink]" -o dst.jpg`;
+
+export const browserjs = `import { SkynetClient } from "skynet-js";
+
+// create a client
+const client = new SkynetClient();
+
+// Assume we have a file from an input form.
+
+async function example() {
+  try {
+    // upload
+    const { skylink } = await client.uploadFile(file);
+	console.log(\`Upload successful, skylink: \${skylink}\`);
+
+    // download
+    await client.downloadFile(skylink);
+	console.log('Download successful');
+  } catch (error) {
+    console.log(error)
+  }
+}`;
+
 export const python = `import siaskynet as skynet
 
 # create a client
@@ -11,12 +38,6 @@ print("Upload successful, skylink: " + skylink)
 client.download_file("./dst.jpg", skylink)
 print("Download successful")`;
 
-export const curl = `# upload
-curl -X POST "https://siasky.net/skynet/skyfile" -F file=@src.jpg
-
-# download
-curl "https://siasky.net/[skylink]" -o dst.jpg`;
-
 export const node = `const { SkynetClient } = require('@nebulous/skynet');
 
 // create a client
@@ -39,6 +60,7 @@ import (
 	skynet "github.com/NebulousLabs/go-skynet"
 )
 
+// create a client
 var client = skynet.New()
 
 func main() {
@@ -56,7 +78,3 @@ func main() {
 	}
 	fmt.Println("Download successful")
 }`;
-
-export const ruby = ``;
-
-export const php = ``;
diff --git a/packages/webapp/src/components/CodeExamples/CodeExamples.js b/packages/webapp/src/components/CodeExamples/CodeExamples.js
index 75c58df6..65753ba9 100644
--- a/packages/webapp/src/components/CodeExamples/CodeExamples.js
+++ b/packages/webapp/src/components/CodeExamples/CodeExamples.js
@@ -25,12 +25,15 @@ export default function CodeExamples() {
           CURL
         </button>
         <button type="button" onClick={() => setActive(2)} className={classNames({ active: active === 2 })}>
-          Python
+          BrowserJS
         </button>
         <button type="button" onClick={() => setActive(3)} className={classNames({ active: active === 3 })}>
-          Node.js
+          Python
         </button>
         <button type="button" onClick={() => setActive(4)} className={classNames({ active: active === 4 })}>
+          Node.js
+        </button>
+        <button type="button" onClick={() => setActive(5)} className={classNames({ active: active === 5 })}>
           Go
         </button>
       </div>
@@ -43,18 +46,24 @@ export default function CodeExamples() {
         )}
 
         {active === 2 && (
+          <SyntaxHighlighter wrapLines showLineNumbers={true} language="javascript" style={Colors}>
+            {interpolateSnippet(snippets.browserjs)}
+          </SyntaxHighlighter>
+        )}
+
+        {active === 3 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="python" style={Colors}>
             {interpolateSnippet(snippets.python)}
           </SyntaxHighlighter>
         )}
 
-        {active === 3 && (
+        {active === 4 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="javascript" style={Colors}>
             {interpolateSnippet(snippets.node)}
           </SyntaxHighlighter>
         )}
 
-        {active === 4 && (
+        {active === 5 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="go" style={Colors}>
             {interpolateSnippet(snippets.go)}
           </SyntaxHighlighter>