fix(coordsToFloats): new location modal inputs to numbers

antekai · Oct 18, 2018 · 5c4a1ba · 5c4a1ba
1 parent 49c4a76
commit 5c4a1ba
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/src/Map/Location.js b/src/Map/Location.js
@@ -51,7 +51,7 @@ export const MapLocation = ({
             ]
       }
     >
-      <p>
+      <div>
         {isEdit ? (
           <Tooltip title="Press enter to update values">
             <Input
@@ -63,8 +63,8 @@ export const MapLocation = ({
         ) : (
           `Latitude: ${lat}`
         )}
-      </p>
-      <p>
+      </div>
+      <div>
         {isEdit ? (
           <Tooltip title="Press enter to update values">
             <Input
@@ -76,7 +76,7 @@ export const MapLocation = ({
         ) : (
           `Longitude: ${lon}`
         )}
-      </p>
+      </div>
     </Card>
   </div>
 );
diff --git a/src/Map/LocationModal.js b/src/Map/LocationModal.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Modal, Form, Input } from "antd";
+import { Modal, Form, Input, InputNumber } from "antd";
 
 const FormItem = Form.Item;
 
@@ -41,11 +41,13 @@ export const LocationModal = Form.create()(
                     pattern: /^-?([1-8]?[1-9]|[1-9]0)\.{1}\d{1,6}/,
                     message: `Latitude should only contain a valid latitude format`
                   }
-                ]
+                ],
+                initialValue: 48.17243
               })(
-                <Input
+                <InputNumber
                   placeholder="Please add Location's latitude"
-                  type="text"
+                  step={0.1}
+                  size={150}
                 />
               )}
             </FormItem>
@@ -60,8 +62,14 @@ export const LocationModal = Form.create()(
                     pattern: /^-?([1-8]?[1-9]|[1-9]0)\.{1}\d{1,6}/,
                     message: `longitude should only contain a valid longitude format`
                   }
-                ]
-              })(<Input placeholder="Please add Location's longitude" />)}
+                ],
+                initialValue: 11.576502
+              })(
+                <InputNumber
+                  placeholder="Please add Location's longitude"
+                  step={0.1}
+                />
+              )}
             </FormItem>
           </Form>
         </Modal>

diff --git a/src/Map/Screen.js b/src/Map/Screen.js
@@ -68,9 +68,14 @@ class MapScreen extends React.Component {
       if (err) {
         return;
       }
-      const newLocation = { id: this.state.data.length, ...values };
+      const newLocation = {
+        id: this.state.data.length,
+        lat: parseFloat(values.lat),
+        lon: parseFloat(values.lon),
+        ...values
+      };
       this.setState({ data: [...this.state.data, newLocation] });
-      console.log(this.state.data);
+      console.log(this.state.data, newLocation);
     });
   };
   removeLocation = id => {
@@ -103,17 +108,21 @@ class MapScreen extends React.Component {
   };
   onEnterLat = (id, e) => {
     console.log(id, e.target.value);
-    const lat = parseFloat(e.target.value);
     const clonedData = [...this.state.data];
-    const updatedRecord = { ...clonedData[id], lat: lat };
+    const updatedRecord = {
+      ...clonedData[id],
+      lat: parseFloat(e.target.value)
+    };
     clonedData[id] = updatedRecord;
     this.setState({ data: clonedData });
   };
   onEnterLon = (id, e) => {
     console.log(id, e.target.value);
-    const lng = parseFloat(e.target.value);
     const clonedData = [...this.state.data];
-    const updatedRecord = { ...clonedData[id], lon: lng };
+    const updatedRecord = {
+      ...clonedData[id],
+      lon: parseFloat(e.target.value)
+    };
     clonedData[id] = updatedRecord;
     this.setState({ data: clonedData });
   };
@@ -139,8 +148,12 @@ class MapScreen extends React.Component {
         onCheck={() => this.viewLocation(item.id)}
       />
     ));
-    const markers = this.state.data.map(item => (
-      <Marker position={{ lat: item.lat, lng: item.lon }} title={item.name} />
+    const markers = this.state.data.map((item, i) => (
+      <Marker
+        key={i}
+        position={{ lat: item.lat, lng: item.lon }}
+        title={item.name}
+      />
     ));
     return (
       <div className={`flexContainer margin-1`}>