This now contains the button and request function for getting torrents matching a serach query given by the name of the elment. The result is passed to the child component torrentTable which renders the result in a table view.

client/app/components/admin/PirateSearch.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import { fetchJSON } from '../http.jsx'; 
 
+// Components
+import TorrentTable from './torrentTable.jsx'
+
 // Stylesheets
 import btnStylesheet from '../styles/buttons.jsx';
 
@@ -13,52 +16,56 @@ class PirateSearch extends Component {
    constructor() {
       super();
       this.state = {
-			response: [],
+         torrentResponse: undefined,
          name: '',
-			loading: '',
+         loading: null,
+         showButton: true,
       }
    }
 
-	sendToDownload(torrent) {
-		let data = {magnet: torrent.magnet}
-		fetchJSON('https://apollo.kevinmidboe.com/api/v1/pirate/add', 'POST', data)
-		.then((response) => {
-			console.log(response)
+   componentWillReceiveProps(props) {
+      if (props.name != this.state.name) {
+         this.setState({
+            torrentResponse: undefined,
+            showButton: true,
          })
       }
+   }
 
    searchTheBay() {
       const query = this.props.name;
       const type = this.props.type;
 
       this.setState({
-			loading: <Loading />
+         showButton: false,
+         loading: <Loading />,
       })
 
       fetchJSON('https://apollo.kevinmidboe.com/api/v1/pirate/search?query='+query+'&type='+type, 'GET')
+      // fetchJSON('http://localhost:31459/api/v1/pirate/search?query='+query+'&type='+type, 'GET')
       .then((response) => {
-			console.log(response.torrents)
          this.setState({
-				loading: '',
-				response: response.torrents.map((torrent, index) => {
-					return (
-						<div key={index}>
-							<span>{torrent.name}</span><br />
-							<span>{torrent.size}</span><br />
-							<span>{torrent.seed}</span><br />
-							<button onClick={() => {this.sendToDownload(torrent)}}>Send to download</button>
-							<br /><br />
-						</div>
-					)
+            torrentResponse: response.torrents,
+            loading: null,
          })
       })
+      .catch((error) => {
+         console.error(error);
+         this.setState({
+            showButton: true,
+         })
       })
    }
 
    render() {
+      btnStylesheet.submit.top = '50%'
+      btnStylesheet.submit.position = 'absolute'
+      btnStylesheet.submit.marginLeft = '-75px'
+
       return (
          <div>
-				<div>
+            { this.state.showButton ? 
+            <div style={{textAlign:'center'}}>
                <Interactive 
                   as='button'
                   onClick={() => {this.searchTheBay()}}
@@ -69,10 +76,11 @@ class PirateSearch extends Component {
                   <span style={{whiteSpace: 'nowrap'}}>Search for torrents</span>
                </Interactive>
             </div>
+            : null }
 
             { this.state.loading }
 
-				<span>{this.state.response}</span>
+            <TorrentTable response={this.state.torrentResponse} />
          </div>
       )
    }