Display the path in the map.

ahendouz · Mar 11, 2019 · fc37d41 · fc37d41
1 parent 307a66b
commit fc37d41
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 9 deletions.
diff --git a/server/src/routes/api/request.js b/server/src/routes/api/request.js
@@ -3,6 +3,7 @@ const router = express.Router();
 const isValidLocation = require("../../utils/isValidLocation");
 const possibleRoutes = require("../../utils/possibleRoutes");
 const getLocation = require("../../utils/getLocation");
+const formatShapePoints = require("../../utils/formatShapePoints");
 
 const requireAuth = require("../../utils/requireAuth");
 const Bag = require("../../models/Bag");
@@ -27,10 +28,10 @@ router.post(
     const time = `${data.formattedTime} min`;
     const distance = parseInt(data.distance);
 
-    console.log(data.shapePoints);
-
+    const shapePoints = formatShapePoints(data.shapePoints);
+    console.log(shapePoints);
     return res.json({
-      shapePoints: data.shapePoints,
+      shapePoints: shapePoints,
       ridePrice,
       time,
       distance

diff --git a/server/src/utils/formatShapePoints.js b/server/src/utils/formatShapePoints.js
@@ -0,0 +1,12 @@
+const formatShapePoints = shapePoints => {
+  let arr = [];
+  for (let i = 0; i < shapePoints.length - 1; i += 2) {
+    arr.push(
+      [shapePoints[i], shapePoints[i + 1]],
+      [shapePoints[i], shapePoints[i + 1]]
+    );
+  }
+  return arr;
+};
+
+module.exports = formatShapePoints;
diff --git a/server/src/utils/possibleRoutes.js b/server/src/utils/possibleRoutes.js
@@ -4,9 +4,8 @@ const possibleRoutes = async (from, to) => {
   const response = await axios.get(
     `http://www.mapquestapi.com/directions/v2/alternateroutes?key=${
       process.env.MAP_SECRET
-    }&from=${from}&to=${to}&maxRoutes=5`
+    }&from=${from}&to=${to}&maxRoutes=5&generalize=500`
   );
-  // alternateRoutes[].0.route.shape.shapePoints
   const {
     distance,
     formattedTime,

diff --git a/web/src/components/Dashboard/MyProfile.js b/web/src/components/Dashboard/MyProfile.js
@@ -24,7 +24,6 @@ class MyProfile extends Component {
 
   componentWillReceiveProps = nextProps => {
     const { name, email, avatar, number } = nextProps.user;
-    console.log("💕");
     this.fillForms(name, email, avatar, number);
   };
 

diff --git a/web/src/components/RequestBag/RequestBag.js b/web/src/components/RequestBag/RequestBag.js
@@ -13,6 +13,7 @@ class RequistBag extends Component {
     to: "",
     orderProcess: "start"
   };
+
   handleChange = e => {
     const { name, value } = e.target;
     this.setState({
@@ -27,11 +28,22 @@ class RequistBag extends Component {
     window.L.mapquest.map("map", {
       center: [33.995647, -6.846076],
       layers: window.L.mapquest.tileLayer("dark"),
-      // layers: window.L.mapquest.tileLayer("map"),
       zoom: 12
     });
+    this.setLocation();
+  };
+
+  componentWillUpdate = (nextProps, nextState) => {
+    if (nextState.shapePoints.length > 1) {
+      this.setLocation(nextState.shapePoints);
+    }
+  };
+
+  setLocation = (
+    shapePoints = [[33.995647, -6.846076], [33.995647, -6.846076]]
+  ) => {
     window.L.mapquest.directions().route({
-      waypoints: this.state.shapePoints && this.state.shapePoints
+      waypoints: shapePoints
     });
   };
 
@@ -49,6 +61,7 @@ class RequistBag extends Component {
     axios.post("api/request/request_bag", bagDescription).then(res => {
       // TODO Redirct to my bugs
       const { distance, ridePrice, shapePoints, time } = res.data;
+      console.log("🔥🔥🔥🔥shapePoints🔥🔥🔥🔥", shapePoints);
       this.setState({
         distance,
         ridePrice,
@@ -57,6 +70,7 @@ class RequistBag extends Component {
       });
     });
   };
+
   render() {
     const { description, items, from, to } = this.state;
     return (
@@ -94,7 +108,7 @@ class RequistBag extends Component {
             <BtnGreenStyle type="submit">Order now</BtnGreenStyle>
           </form>
 
-          <div id="map">map</div>
+          <div id="map" />
         </div>
       </RequestBagStyles>
     );