use location.origin instead of hardcoded https://siasky.net

src/LocationContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext(null);

src/components/CodeExamples/CodeExamples.js

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import classNames from "classnames";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import { javascript, go, python, bash } from "react-syntax-highlighter/dist/esm/languages/hljs";
 import Colors from "./Colors";
 import * as snippets from "./Code";
 import "./CodeExamples.scss";
+import LocationContext from "../../LocationContext";
 
 SyntaxHighlighter.registerLanguage("javascript", javascript);
 SyntaxHighlighter.registerLanguage("go", go);
@@ -13,6 +14,9 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 
 export default function CodeExamples() {
   const [active, setActive] = useState(1);
+  const location = useContext(LocationContext);
+  const interpolateRegExp = new RegExp("https://siasky.net", "g");
+  const interpolateSnippet = snippet => snippet.replace(interpolateRegExp, location.origin);
 
   return (
     <div className="code-examples">
@@ -34,25 +38,25 @@ export default function CodeExamples() {
       <div className="code-examples-body">
         {active === 1 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="bash" style={Colors}>
-            {snippets.curl}
+            {interpolateSnippet(snippets.curl)}
           </SyntaxHighlighter>
         )}
 
         {active === 2 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="python" style={Colors}>
-            {snippets.python}
+            {interpolateSnippet(snippets.python)}
           </SyntaxHighlighter>
         )}
 
         {active === 3 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="javascript" style={Colors}>
-            {snippets.node}
+            {interpolateSnippet(snippets.node)}
           </SyntaxHighlighter>
         )}
 
         {active === 4 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="go" style={Colors}>
-            {snippets.go}
+            {interpolateSnippet(snippets.go)}
           </SyntaxHighlighter>
         )}
       </div>

src/components/HomeUpload/HomeUpload.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useContext } from "react";
 import classNames from "classnames";
 import Dropzone from "react-dropzone";
 import Reveal from "react-reveal/Reveal";
@@ -6,30 +6,28 @@ import shortid from "shortid";
 import { Button, UploadFile } from "../";
 import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
 import "./HomeUpload.scss";
+import LocationContext from "../../LocationContext";
 
-export default class HomeUpload extends Component {
-  state = { files: [] };
+export default function HomeUpload() {
+  const [files, setFiles] = useState([]);
+  const location = useContext(LocationContext);
 
-  handleDrop = async acceptedFiles => {
-    this.setState({
-      files: [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...this.state.files]
-    });
+  const handleDrop = async acceptedFiles => {
+    setFiles(previousFiles => [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...previousFiles]);
 
     const onComplete = (file, status, skylink) => {
-      this.setState(state => {
-        const index = state.files.findIndex(f => f.file === file);
+      setFiles(previousFiles => {
+        const index = previousFiles.findIndex(f => f.file === file);
 
-        return {
-          files: [
-            ...state.files.slice(0, index),
+        return [
+          ...previousFiles.slice(0, index),
           {
-              ...state.files[index],
+            ...previousFiles[index],
             status,
-              url: `https://siasky.net/${skylink}`
+            url: `${location.origin}/${skylink}`
           },
-            ...state.files.slice(index + 1)
-          ]
-        };
+          ...previousFiles.slice(index + 1)
+        ];
       });
     };
 
@@ -39,7 +37,7 @@ export default class HomeUpload extends Component {
         fd.append("file", file);
 
         const uuid = shortid.generate();
-        const response = await fetch(`/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
+        const response = await fetch(`${location.origin}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
         const { skylink } = await response.json();
 
         onComplete(file, "complete", skylink);
@@ -49,7 +47,7 @@ export default class HomeUpload extends Component {
     });
   };
 
-  handleSkylink = event => {
+  const handleSkylink = event => {
     event.preventDefault();
 
     const skylink = event.target.skylink.value.replace("sia://", "");
@@ -59,14 +57,13 @@ export default class HomeUpload extends Component {
     }
   };
 
-  render() {
   return (
     <Reveal effect="active">
       <div className="home-upload">
         <div className="home-upload-white fadeInUp delay4">
           <div className="home-upload-split">
             <div className="home-upload-box ">
-                <Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
+              <Dropzone onDrop={handleDrop}>
                 {({ getRootProps, getInputProps, isDragActive }) => (
                   <>
                     <div
@@ -95,7 +92,7 @@ export default class HomeUpload extends Component {
                 <h3 id="skylink-retrieve-title">Have a Skylink?</h3>
                 <p>Paste the link to retrieve your file</p>
 
-                  <form className="home-upload-retrieve-form" onSubmit={this.handleSkylink}>
+                <form className="home-upload-retrieve-form" onSubmit={handleSkylink}>
                   <input name="skylink" type="text" placeholder="sia://" aria-labelledby="skylink-retrieve-title" />
                   <button type="submit" aria-label="Retrieve file">
                     <DownArrow />
@@ -105,9 +102,9 @@ export default class HomeUpload extends Component {
             </div>
           </div>
 
-            {this.state.files.length > 0 && (
+          {files.length > 0 && (
             <div className="home-uploaded-files">
-                {this.state.files.map((file, i) => {
+              {files.map((file, i) => {
                 return <UploadFile key={i} {...file} />;
               })}
             </div>
@@ -125,5 +122,4 @@ export default class HomeUpload extends Component {
       </div>
     </Reveal>
   );
-  }
 }

src/pages/index.js

@@ -2,12 +2,13 @@ import React from "react";
 import SEO from "../components/seo";
 import { App } from "../components";
 import "../global.scss";
+import LocationContext from "../LocationContext";
 
-const IndexPage = () => (
-  <>
+const IndexPage = ({ location }) => (
+  <LocationContext.Provider value={location}>
     <SEO />
     <App />
-  </>
+  </LocationContext.Provider>
 );
 
 export default IndexPage;