Merge pull request #10 from tooploox/gateway-lookup

Implement gateway lookup

app/blog/components/CustomGatewayForm.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export class CustomGatewayForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      address: null,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(event) {
+    this.props.onSubmit(this.state.address);
+    event.preventDefault();
+  }
+
+  handleChange(event) {
+    this.setState({address: event.target.value})
+  }
+
+  render() {
+    const { address } = this.state;
+
+    return (
+      <div>
+        We cannot connect to any IPFS gateway. You can enter an address.
+        <form onSubmit={this.handleSubmit}>
+          <input type="url" value={address} onChange={this.handleChange} />
+          <input type="submit" value="Connect" />
+        </form>
+      </div>
+    );
+  }
+}

app/blog/components/PostPage.jsx

@@ -2,37 +2,88 @@ import React from "react";
 import marked from "marked";
 import { format } from "date-fns";
 import { Link } from "react-router-dom";
+import { CustomGatewayForm } from "./CustomGatewayForm";
 
 const gateways = [
   "http://54.93.56.226:8080/ipfs",
-  "https://ipfs.io/ipfs"
+  "https://ipfs.io/ipfs",
+  "https://gateway.ipfs.io/ipfs",
+  "https://ipfs.infura.io/ipfs",
+  "https://rx14.co.uk/ipfs",
+  "https://xmine128.tk/ipfs",
+  "https://upload.global/ipfs",
+  "https://ipfs.jes.xxx/ipfs",
+  "https://catalunya.network/ipfs",
+  "https://siderus.io/ipfs",
+  "https://www.eternum.io/ipfs",
+  "https://hardbin.com/ipfs",
+  "https://ipfs.macholibre.org/ipfs",
+  "https://ipfs.works/ipfs",
+  "https://ipfs.work/ipfs",
+  "https://ipfs.wa.hle.rs/ipfs",
+  "https://api.wisdom.sh/ipfs",
+  "https://gateway.blocksec.com/ipfs",
+  "https://ipfs.renehsz.com/ipfs",
 ];
 
+
 export class PostPage extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      post: null
+      post: null,
+      customGatewayFormVisible: false,
     };
+
+    this.handleConnectCustomAddress = this.handleConnectCustomAddress.bind(this);
   }
 
   componentDidMount() {
     this.getPost();
   }
 
-  getPost() {
+  getPost(gatewayIndex = 0) {
+    this.fetchPostFromIpfs(gateways[gatewayIndex])
+      .catch(() => this.retry(gatewayIndex))
+  }
+
+  fetchPostFromIpfs(gateway) {
     const { hash } = this.props.match.params;
 
-    fetch(`${gateways[0]}/${hash}`)
-      .then(response => response.json())
-      .then(post => this.setState({ post }));
+    return fetch(`${gateway}/${hash}`)
+           .then(response => {
+             response
+               .json()
+               .then(post => this.setState({ post: post, customGatewayFormVisible: false }))
+           })
+  }
+
+  retry(gatewayIndex) {
+    if(gateways.length > gatewayIndex + 1) {
+      this.getPost(gatewayIndex + 1)
+    } else {
+      this.showCustomGatewayForm()
+    }
+  }
+
+  showCustomGatewayForm() {
+    this.setState({ customGatewayFormVisible: true })
+  }
+
+  handleConnectCustomAddress(address) {
+    this.fetchPostFromIpfs(address);
   }
 
   render() {
-    const { post } = this.state;
+    const { post, customGatewayFormVisible } = this.state;
     const { author, hash } = this.props.match.params;
 
+    if (customGatewayFormVisible) {
+      return (
+        <CustomGatewayForm onSubmit={this.handleConnectCustomAddress}/>
+      );
+    }
 
     if (!post) {
       return <div>Loading {hash}...</div>;