add routes to multiple sport search

nabeelkausari · Mar 3, 2018 · 04d8c1b · 04d8c1b
1 parent b482333
commit 04d8c1b
Show file tree

Hide file tree

Showing 13 changed files with 1,348 additions and 32 deletions.
diff --git a/data/cricket.json b/data/cricket.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^16.2.0",
     "react-file-download": "^0.3.5",
     "react-image": "^1.3.1",
+    "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
     "reactstrap": "^5.0.0-beta.2"
   },

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Image Search</title>
   </head>
   <body>
     <noscript>

diff --git a/server.js b/server.js
@@ -21,7 +21,8 @@ app.use(cors());
 setupDB();
 
 app.get('/file', (req, res) => {
-  let file = fs.readFileSync("./data/football.json");
+  let fileName = req.query.name;
+  let file = fs.readFileSync("./data/" + fileName);
   res.json(JSON.parse(file));
 })
 

diff --git a/src/App.js b/src/App.js
@@ -1,33 +1,32 @@
 import React, { Component } from 'react';
 import Img from 'react-image';
-import preLoader from './preLoader';
 import './App.css';
-import { Card, CardText, CardBody, Container, Row, Col, ListGroup, ListGroupItem, Label, Input, FormGroup } from 'reactstrap';
+import { Card, CardText, CardBody, Container, Row, Col, ListGroup, ListGroupItem, Input, FormGroup } from 'reactstrap';
 
 import fetch from 'node-fetch';
 
-const apiUrl = "/";
-const extraTerm = "football";
+const apiUrl = "http://localhost:4000/";
 
 class App extends Component {
   state = {
     term: '',
     images: [],
     list: [],
-    listSet: {}
+    listSet: {},
+    initial: true
   }
   makeSearch(term) {
     fetch(apiUrl + 'api?term='+ term || this.state.term)
       .then(res => res.json())
-      .then(images => this.setState({images}))
+      .then(images => this.setState({images, initial: false}))
   }
   startSearch(term) {
     this.setState({ term });
-    this.makeSearch(`${term} ${extraTerm}`);
+    this.makeSearch(`${term} ${this.props.sport}`);
   }
 
   componentDidMount() {
-    fetch(apiUrl + 'file')
+    fetch(apiUrl + 'file?name=' + this.props.fileName)
       .then(res => res.json())
       .then(list => {
         this.setState({listSet: this.makeListSet(list)});
@@ -62,9 +61,10 @@ class App extends Component {
   }
 
   render() {
-    let {images, list, listSet} = this.state;
+    let {images, list, listSet, initial} = this.state;
     return (
-      <Container className="App" style={{ marginTop: 70 }}>
+      <Container className="App" style={{ marginTop: 50 }}>
+        <h3 style={{ marginBottom: 50 }}>{this.props.sport}</h3>
         <Row>
           <Col xs={3}>
             <SelectRows set={listSet} setList={this.setList.bind(this)} />
@@ -79,11 +79,11 @@ class App extends Component {
             </ListGroup>
           </Col>
           <Col xs={9}>
-            {images.length === 0 && <h1>No Results Found</h1>}
+            {images.length === 0 && !initial && <h1>No Results Found</h1>}
             {images.length > 0 && <div>
               <ul>
                 {images.map((img, i) => <Card key={i} style={{ display: "inline-block", marginBottom: 10 }}>
-                  <Img src={img.contentUrl} style={{ height: 150 }} loader={<preLoader/>}/>
+                  <Img src={img.contentUrl} style={{ height: 150 }} />
                   <CardBody>
                     <CardText>{img.height} x {img.width}</CardText>
                     <a

diff --git a/src/index.js b/src/index.js
@@ -2,8 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import 'bootstrap/dist/css/bootstrap.css';
-import App from './App';
+import Routes from './routes';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Routes />, document.getElementById('root'));
 registerServiceWorker();
diff --git a/src/loader.gif b/src/loader.gif
diff --git a/src/preLoader.js b/src/preLoader.js
diff --git a/src/routes/Cricket.js b/src/routes/Cricket.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import App from '../App';
+
+export default () => <App sport="Cricket" fileName="cricket.json"/>;
diff --git a/src/routes/Football.js b/src/routes/Football.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import App from '../App';
+
+export default () => <App sport="Football" fileName="football.json"/>;
diff --git a/src/routes/Home.js b/src/routes/Home.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
+import { Container, Row, Col, Button } from 'reactstrap';
+
+
+export default () => (
+  <Container style={{ marginTop: 30 }}>
+    <Row style={{ textAlign: 'center' }}>
+      <Col>
+        <Button color="light">
+          <Link to="/football">Football</Link>
+        </Button>
+      </Col>
+      <Col>
+        <Button color="light">
+          <Link to="/cricket">Cricket</Link>
+        </Button>
+      </Col>
+    </Row>
+  </Container>
+)
diff --git a/src/routes/index.js b/src/routes/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import Home from './Home';
+import Football from './Football';
+import Cricket from "./Cricket"
+
+export default () => (
+  <BrowserRouter>
+    <Switch>
+      <Route path="/" exact component={Home}/>
+      <Route path="/football" exact component={Football}/>
+      <Route path="/cricket" exact component={Cricket}/>
+    </Switch>
+  </BrowserRouter>
+)