fetch harbours

samuelpucat · Oct 21, 2018 · c03eec6 · c03eec6
1 parent 7d8db17
commit c03eec6
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 32 deletions.
diff --git a/pdt-marinehelper-client/package-lock.json b/pdt-marinehelper-client/package-lock.json
diff --git a/pdt-marinehelper-client/package.json b/pdt-marinehelper-client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "mapbox-gl": "^0.50.0",
     "mdbreact": "^4.8.1",
     "react": "^16.5.2",

diff --git a/pdt-marinehelper-client/src/app/components/Harbours.js b/pdt-marinehelper-client/src/app/components/Harbours.js
@@ -1,6 +1,17 @@
 import React from "react";
+import axios from "axios";
 
 export class Harbours extends React.Component {
+  componentDidMount() {
+    axios.get("http://localhost:3001/harbours/getHarbour?id=244608718")
+      .then(res => {
+        console.log(res.data);
+      })
+      .catch(err=>{
+        console.log(err);
+      })
+  }
+
   render() {
     return (
       <div>

diff --git a/pdt-marinehelper-client/src/app/components/Header.js b/pdt-marinehelper-client/src/app/components/Header.js
@@ -1,41 +1,49 @@
 import React from "react";
 import { Navbar, Nav, NavItem } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 
 export const Header = props => {
+  const Navigation = withRouter(({ history }) => (
+    <Navbar.Collapse>
+      <Nav>
+        {/*harbours*/}
+        <NavItem eventKey={1} onClick={() => history.push("/harbours")}>
+          Harbours
+        </NavItem>
+
+        {/*dangers*/}
+        <NavItem eventKey={2} onClick={() => history.push("/dangers")}>
+          Dangers
+        </NavItem>
+
+        <NavItem eventKey={3} onClick={() => history.push("/anchorages")}>
+          Anchorages
+        </NavItem>
+      </Nav>
+
+      <Nav pullRight>
+        <NavItem eventKey={2} onClick={() => history.push("/about")}>
+          About
+        </NavItem>
+      </Nav>
+    </Navbar.Collapse>
+  ));
+
   return (
     <header>
-      <Navbar inverse collapseOnSelect={true} style={{marginBottom: "0", borderRadius: "0"}}>
+      <Navbar
+        inverse
+        collapseOnSelect={true}
+        style={{ marginBottom: "0", borderRadius: "0" }}
+      >
         <Navbar.Header>
           <Navbar.Brand>
             <Link to="/map">Marine helper</Link>
           </Navbar.Brand>
           <Navbar.Toggle />
         </Navbar.Header>
 
-        <Navbar.Collapse>
-          <Nav>
-            {/*harbours*/}
-            <NavItem eventKey={1}>
-              <Link to="/harbours">Harbours</Link>
-            </NavItem>
-
-            {/*dangers*/}
-            <NavItem eventKey={2}>
-              <Link to="/dangers">Dangers</Link>
-            </NavItem>
-
-            <NavItem eventKey={3}>
-              <Link to="/anchorages">Anchorages</Link>
-            </NavItem>
-          </Nav>
-
-          <Nav pullRight>
-            <NavItem eventKey={2}>
-              <Link to="/about">{"About"}</Link>
-            </NavItem>
-          </Nav>
-        </Navbar.Collapse>
+        <Navigation />
       </Navbar>
     </header>
   );

diff --git a/pdt-marinehelper-server/api/controllers/harboursController.js b/pdt-marinehelper-server/api/controllers/harboursController.js
@@ -1,11 +1,13 @@
 const db = require("../../db");
 
 exports.getOne = (req, res, next) => {
-  const id = req.params.id;
+  const { id } = req.query;
+  const SELECT_HARBOUR_QUERY = 'select "seamark:type",  "seamark:harbour:category", ST_AsGeoJSON(way) as way ' +
+  "from planet_osm_polygon " +
+  "where \"seamark:type\" = 'harbour' and osm_id = $1";
+
   db.query(
-    'select "seamark:type",  "seamark:harbour:category", ST_AsGeoJSON(way) as way ' +
-      "from planet_osm_polygon " +
-      "where \"seamark:type\" = 'harbour' and osm_id = $1",
+    SELECT_HARBOUR_QUERY,
     [id],
     (err, res1) => {
       if (err) {

diff --git a/pdt-marinehelper-server/api/models/ordersModel.js b/pdt-marinehelper-server/api/models/ordersModel.js
diff --git a/pdt-marinehelper-server/api/routes/harbours.js b/pdt-marinehelper-server/api/routes/harbours.js
@@ -2,8 +2,8 @@ const express = require("express");
 const router = express.Router();
 const harboursController = require("../controllers/harboursController");
 
-router.route("/:id").get(harboursController.getOne);
+router.route("/getHarbour").get(harboursController.getOne);
 
-router.route("/").get(harboursController.getAll);
+router.route("/getAllHarbours").get(harboursController.getAll);
 
 module.exports = router;
diff --git a/pdt-marinehelper-server/server.js b/pdt-marinehelper-server/server.js
@@ -1,6 +1,6 @@
 const http = require('http');
 const app = require('./app');
 
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 3001;
 const server = http.createServer(app);
 server.listen(port);