React

by bgvianyc

HTML

<script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

let node;
class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	logs: [],
      CID: 'QmY8hBsESwuTRSWUh7iMYVKhyVTpt8kacQSFPWRuf8r1iT'
    }
  }
  
  componentDidMount(){
  	const { logs } = this.state
    const { logToState } = this
  	node = new window.Ipfs()

		node.on('ready', () => {
    	console.log('IPFS ready!')
      logToState('IPFS ready!')
      
      node.version((err, version) => {
      	if (err) this.logToState(err)
        if (version) logToState(JSON.stringify(version))
      })
      
      logToState('calling swarm.peers')
      node.swarm.peers(function (err, peerInfos) {
      	logToState('response swarm.peers')
    		if (err) {
     		 logToState(err)
    		}
    		if (peerInfos.length) logToState(JSON.stringify(peerInfos))
  		})

			logToState('calling swarm.addrs')
  		node.swarm.addrs(function (err, addrs) {
	      logToState('response swarm.addrs')
    		if (err) {
     		 logToState(err)
    		}
    		if (addrs) logToState(JSON.stringify(addrs))
  		})
  })
  }
  
  logToState = (text) => {
  	const { logs } = this.state
    this.setState({
    	logs: [...logs, `${new Date()} | ${text}`]
    })
  }
  
  handleCidChange = (event) => {
    this.setState({CID: event.target.value});
  }
  
  getFromIpfs = () => {
   this.logToState(`fetching CID: ${this.state.CID}`)
    node.get(this.state.CID, (err, files) => {
    files.forEach((file) => {
    	if (err) this.logToState(err)
      if (files){
	      this.logToState(file.path)
        this.logToState(file.content.toString('utf8'))
      } 
    })
  })


  	
  }
  
  render() {
  	const { logs } = this.state
    return (
      <div id="app">
        <h2>JS-IPFS Testing</h2>
        {logs.map((log,i) => <div key={log} style={{ marginBottom: '20px' }}>{log}</div>)}
       <label>
           IPFS Hash to fetch
          <input onChange={this.handleCidChange} value={this.state.CID} />
       </label>
       <button...