fix eslint validation issues

src/components/CircleIcon/CircleIcon.js

@@ -1,7 +1,11 @@
 import React from "react";
-
+import PropTypes from "prop-types";
 import "./CircleIcon.scss";
 
 export default function CircleIcon({ children }) {
   return <div className="circle-icon">{children}</div>;
 }
+
+CircleIcon.propTypes = {
+  children: PropTypes.node
+};

src/components/FAQ/FAQ.js

@@ -1,5 +1,5 @@
 import React from "react";
-
+import PropTypes from "prop-types";
 import "./FAQ.scss";
 
 export default function FAQ({ title, children }) {
@@ -13,3 +13,8 @@ export default function FAQ({ title, children }) {
     </div>
   );
 }
+
+FAQ.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node
+};

src/components/HomeNetwork/HomeNetwork.js

@@ -142,8 +142,8 @@ export default function HomeNetwork() {
           <Fade duration={700} distance="40px" bottom>
             <FAQ title="How fast is Skynet?">
               <p>
-                Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet
-                download starts in under 500 ms and can stream at rates as high as 1 Gbps!
+                Skynet&apos;s speeds rival centralized providers and surpass all decentralized offerings. A typical
+                Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!
                 <a
                   href="https://skynet.helpdocs.io/article/430teoxgqc-skynet-speed"
                   target="_blank"

src/components/Mailing/Mailing.js

@@ -1,7 +1,7 @@
 import React from "react";
+import PropTypes from "prop-types";
 import MailchimpSubscribe from "react-mailchimp-subscribe";
 import classNames from "classnames";
-
 import "./Mailing.scss";
 
 const url = "https://tech.us11.list-manage.com/subscribe/post?u=5df238d9e852f9801b5f2c92e&id=ab6bea4cc2";
@@ -45,6 +45,14 @@ const CustomForm = ({ status, message, onValidated, light, id }) => {
   );
 };
 
+CustomForm.propTypes = {
+  status: PropTypes.string,
+  message: PropTypes.string,
+  onValidated: PropTypes.func,
+  light: PropTypes.bool,
+  id: PropTypes.string
+};
+
 export default function Mailing({ light, id }) {
   return (
     <MailchimpSubscribe
@@ -61,3 +69,8 @@ export default function Mailing({ light, id }) {
     />
   );
 }
+
+Mailing.propTypes = {
+  light: PropTypes.bool,
+  id: PropTypes.string
+};

src/components/Sample/Sample.js

@@ -1,6 +1,6 @@
 import React from "react";
+import PropTypes from "prop-types";
 import classNames from "classnames";
-
 import "./Sample.scss";
 import { Download } from "../../svg";
 
@@ -17,3 +17,9 @@ export default function Sample({ type, url, className }) {
     </div>
   );
 }
+
+Sample.propTypes = {
+  type: PropTypes.string,
+  url: PropTypes.string,
+  className: PropTypes.string
+};

src/components/SocialLink/SocialLink.js

@@ -1,5 +1,5 @@
 import React from "react";
-
+import PropTypes from "prop-types";
 import "./SocialLink.scss";
 import { Github, Discord, Twitter } from "../../svg";
 
@@ -24,3 +24,10 @@ export default function SocialLink({ icon, title, greenText, url }) {
     </a>
   );
 }
+
+SocialLink.propTypes = {
+  icon: PropTypes.string,
+  title: PropTypes.node,
+  greenText: PropTypes.string,
+  url: PropTypes.string
+};

src/components/UploadFile/UploadFile.js

@@ -1,17 +1,23 @@
-import React, { Component } from "react";
-
+import React, { useState, useRef, useEffect } from "react";
 import "./UploadFile.scss";
 import { LoadingSpinner } from "../";
 import { File, FileCheck, FileError, Copy } from "../../svg";
 
-export default class UploadFile extends Component {
-  state = {
-    copied: false
-  };
+export default function UploadFile({ file, url, status }) {
+  const [copied, setCopied] = useState(false);
+  const urlRef = useRef(null);
 
-  getIcon = () => {
-    const { status } = this.props;
+  useEffect(() => {
+    if (copied) {
+      const timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, 1500);
 
+      return () => clearTimeout(timeoutId);
+    }
+  }, [copied, setCopied]);
+
+  const getIcon = () => {
     if (status === "uploading" || status === "processing") {
       return <File />;
     } else if (status === "error") {
@@ -21,56 +27,47 @@ export default class UploadFile extends Component {
     }
   };
 
-  copyToClipboard = e => {
-    this.urlRef.current.select();
+  const copyToClipboard = e => {
+    urlRef.current.select();
     document.execCommand("copy");
     e.target.focus();
-
-    this.setState({ copied: true }, () => {
-      setTimeout(() => {
-        this.setState({ copied: false });
-      }, 1500);
-    });
+    setCopied(true);
   };
 
-  urlRef = React.createRef();
+  const copyText = copied ? "Copied!" : "Copy to clipboard";
 
-  render() {
-    const { file, url, status } = this.props;
-    const copyText = this.state.copied ? "Copied!" : "Copy to clipboard";
-    return (
-      <div className="upload-file">
-        <div className="upload-file-icon">{this.getIcon()}</div>
-        <div className="upload-file-text">
-          <h3>{file.name}</h3>
-          <p>
-            {status === "uploading" && "Uploading..."}
-            {status === "processing" && "Processing..."}
-            {status === "error" && <span className="red-text">Error processing file.</span>}
-            {status === "complete" && (
-              <a href={url} className="url green-text">
-                {url}
-              </a>
-            )}
-          </p>
-        </div>
-        {(status === "uploading" || status === "processing") && (
-          <div className="upload-file-loading">
-            <LoadingSpinner />
-          </div>
-        )}
-
-        {status === "complete" && (
-          <button onClick={this.copyToClipboard} className="upload-file-copy">
-            <p className="upload-file-copy-tooltip">{copyText}</p>
-            <div className="upload-file-copy-button">
-              Copy Link
-              <Copy />
-            </div>
-            <textarea value={url} ref={this.urlRef} readOnly={true} />
-          </button>
-        )}
+  return (
+    <div className="upload-file">
+      <div className="upload-file-icon">{getIcon()}</div>
+      <div className="upload-file-text">
+        <h3>{file.name}</h3>
+        <p>
+          {status === "uploading" && "Uploading..."}
+          {status === "processing" && "Processing..."}
+          {status === "error" && <span className="red-text">Error processing file.</span>}
+          {status === "complete" && (
+            <a href={url} className="url green-text">
+              {url}
+            </a>
+          )}
+        </p>
       </div>
-    );
-  }
+      {(status === "uploading" || status === "processing") && (
+        <div className="upload-file-loading">
+          <LoadingSpinner />
+        </div>
+      )}
+
+      {status === "complete" && (
+        <button onClick={copyToClipboard} className="upload-file-copy">
+          <p className="upload-file-copy-tooltip">{copyText}</p>
+          <div className="upload-file-copy-button">
+            Copy Link
+            <Copy />
+          </div>
+          <textarea value={url} ref={urlRef} readOnly={true} />
+        </button>
+      )}
+    </div>
+  );
 }

src/pages/index.js

@@ -1,14 +1,19 @@
 import React from "react";
+import PropTypes from "prop-types";
 import SEO from "../components/seo";
 import { App } from "../components";
 import "../global.scss";
 import LocationContext from "../LocationContext";
 
-const IndexPage = ({ location }) => (
-  <LocationContext.Provider value={location}>
-    <SEO />
-    <App />
-  </LocationContext.Provider>
-);
+export default function IndexPage({ location }) {
+  return (
+    <LocationContext.Provider value={location}>
+      <SEO />
+      <App />
+    </LocationContext.Provider>
+  );
+}
 
-export default IndexPage;
+IndexPage.propTypes = {
+  location: PropTypes.object.isRequired
+};

src/svg/Arrow.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Arrow({ className }) {
   return (
@@ -7,3 +8,7 @@ export default function Arrow({ className }) {
     </svg>
   );
 }
+
+Arrow.propTypes = {
+  className: PropTypes.string
+};

src/svg/Cylinder.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Cylinder({ className }) {
   return (
@@ -14,3 +15,7 @@ export default function Cylinder({ className }) {
     </svg>
   );
 }
+
+Cylinder.propTypes = {
+  className: PropTypes.string
+};

src/svg/Discord.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Discord({ className }) {
   return (
@@ -11,3 +12,7 @@ export default function Discord({ className }) {
     </svg>
   );
 }
+
+Discord.propTypes = {
+  className: PropTypes.string
+};

src/svg/DoubleRight.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function DoubleRight({ className }) {
   return (
@@ -14,3 +15,7 @@ export default function DoubleRight({ className }) {
     </svg>
   );
 }
+
+DoubleRight.propTypes = {
+  className: PropTypes.string
+};

src/svg/Download.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Download({ className }) {
   return (
@@ -21,3 +22,7 @@ export default function Download({ className }) {
     </svg>
   );
 }
+
+Download.propTypes = {
+  className: PropTypes.string
+};

src/svg/Github.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Github({ className }) {
   return (
@@ -11,3 +12,7 @@ export default function Github({ className }) {
     </svg>
   );
 }
+
+Github.propTypes = {
+  className: PropTypes.string
+};

src/svg/Logo.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Logo({ className }) {
   return (
@@ -13,3 +14,7 @@ export default function Logo({ className }) {
     </svg>
   );
 }
+
+Logo.propTypes = {
+  className: PropTypes.string
+};

src/svg/LogoSolid.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function LogoSolid({ className }) {
   return (
@@ -11,3 +12,7 @@ export default function LogoSolid({ className }) {
     </svg>
   );
 }
+
+LogoSolid.propTypes = {
+  className: PropTypes.string
+};

src/svg/Pyramid.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Pyramid({ className }) {
   return (
@@ -15,3 +16,7 @@ export default function Pyramid({ className }) {
     </svg>
   );
 }
+
+Pyramid.propTypes = {
+  className: PropTypes.string
+};

src/svg/SmallOrb.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function SmallOrb({ className }) {
   return (
@@ -14,3 +15,7 @@ export default function SmallOrb({ className }) {
     </svg>
   );
 }
+
+SmallOrb.propTypes = {
+  className: PropTypes.string
+};

src/svg/Twitter.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 export default function Twitter({ className }) {
   return (
@@ -11,3 +12,7 @@ export default function Twitter({ className }) {
     </svg>
   );
 }
+
+Twitter.propTypes = {
+  className: PropTypes.string
+};