From 896d9b6302f8e0e112b37d73095af621637d514b Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Fri, 28 Feb 2020 13:52:32 +0100
Subject: [PATCH] add GATSBY_API_URL param

---
 README.md                                   | 21 +++++++++++++++++++++
 src/{LocationContext.js => AppContext.js}   |  0
 src/components/CodeExamples/CodeExamples.js |  6 +++---
 src/components/HomeUpload/HomeUpload.js     |  8 ++++----
 src/pages/index.js                          | 15 +++++++++++----
 5 files changed, 39 insertions(+), 11 deletions(-)
 rename src/{LocationContext.js => AppContext.js} (100%)

diff --git a/README.md b/README.md
index 42e1b6b8..6725d15a 100644
--- a/README.md
+++ b/README.md
@@ -8,3 +8,24 @@ Once the setup guide is complete you will be running:
 
 - `siad` configured as a Skynet Portal
 - an nginx webserver serving webportal
+
+## Web application
+
+### Development
+
+Use `yarn start` to start the development server.
+
+### Production build
+
+Use `yarn build` to compile the application to `/public` directory.
+
+### Build parameters
+
+You can use the below build parameters to customize your application. You can use them both on development and production builds.
+
+- development example `GATSBY_API_URL=https://siasky.dev yarn start`
+- production example `GATSBY_API_URL=https://siasky.net yarn build`
+
+#### List of available parameters
+
+- `GATSBY_API_URL`: you can override the api url if it is different than the location origin
diff --git a/src/LocationContext.js b/src/AppContext.js
similarity index 100%
rename from src/LocationContext.js
rename to src/AppContext.js
diff --git a/src/components/CodeExamples/CodeExamples.js b/src/components/CodeExamples/CodeExamples.js
index 9334888f..83d4bc68 100644
--- a/src/components/CodeExamples/CodeExamples.js
+++ b/src/components/CodeExamples/CodeExamples.js
@@ -5,7 +5,7 @@ import { javascript, go, python, bash } from "react-syntax-highlighter/dist/esm/
 import Colors from "./Colors";
 import * as snippets from "./Code";
 import "./CodeExamples.scss";
-import LocationContext from "../../LocationContext";
+import AppContext from "../../AppContext";
 
 SyntaxHighlighter.registerLanguage("javascript", javascript);
 SyntaxHighlighter.registerLanguage("go", go);
@@ -14,9 +14,9 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 
 export default function CodeExamples() {
   const [active, setActive] = useState(1);
-  const location = useContext(LocationContext);
+  const { apiUrl } = useContext(AppContext);
   const interpolateRegExp = new RegExp("https://siasky.net", "g");
-  const interpolateSnippet = snippet => snippet.replace(interpolateRegExp, location.origin);
+  const interpolateSnippet = snippet => snippet.replace(interpolateRegExp, apiUrl);
 
   return (
     <div className="code-examples">
diff --git a/src/components/HomeUpload/HomeUpload.js b/src/components/HomeUpload/HomeUpload.js
index 4620aee8..753fd9a7 100644
--- a/src/components/HomeUpload/HomeUpload.js
+++ b/src/components/HomeUpload/HomeUpload.js
@@ -6,11 +6,11 @@ import shortid from "shortid";
 import { Button, UploadFile } from "../";
 import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
 import "./HomeUpload.scss";
-import LocationContext from "../../LocationContext";
+import AppContext from "../../AppContext";
 
 export default function HomeUpload() {
   const [files, setFiles] = useState([]);
-  const location = useContext(LocationContext);
+  const { apiUrl } = useContext(AppContext);
 
   const handleDrop = async acceptedFiles => {
     setFiles(previousFiles => [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...previousFiles]);
@@ -24,7 +24,7 @@ export default function HomeUpload() {
           {
             ...previousFiles[index],
             status,
-            url: `${location.origin}/${skylink}`
+            url: `${apiUrl}/${skylink}`
           },
           ...previousFiles.slice(index + 1)
         ];
@@ -37,7 +37,7 @@ export default function HomeUpload() {
         fd.append("file", file);
 
         const uuid = shortid.generate();
-        const response = await fetch(`${location.origin}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
+        const response = await fetch(`${apiUrl}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
         const { skylink } = await response.json();
 
         onComplete(file, "complete", skylink);
diff --git a/src/pages/index.js b/src/pages/index.js
index 10e0b7cd..c7768040 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,16 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import SEO from "../components/seo";
 import { App } from "../components";
 import "../global.scss";
-import LocationContext from "../LocationContext";
+import AppContext from "../AppContext";
 
 export default function IndexPage({ location }) {
+  const context = useMemo(
+    () => ({
+      apiUrl: process.env.GATSBY_API_URL ?? location.origin
+    }),
+    [location.origin]
+  );
+
   return (
-    <LocationContext.Provider value={location}>
+    <AppContext.Provider value={context}>
       <SEO />
       <App />
-    </LocationContext.Provider>
+    </AppContext.Provider>
   );
 }