feat(gMapErrorHandle): use placeholder text on googleMap API error

antekai · Oct 18, 2018 · 8947501 · 8947501
1 parent 0bb3208
commit 8947501
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/Map/Screen.js b/src/Map/Screen.js
@@ -5,7 +5,7 @@ import "./Screen.css";
 import { MapLocation } from "./Location";
 import { LocationModal } from "./LocationModal";
 import { Marker } from "react-google-maps";
-import { fireBaseInstance } from "../axios";
+import { fireBaseInstance, gMapInstance } from "../axios";
 const mockData = [
   {
     id: 0,
@@ -42,13 +42,16 @@ class MapScreen extends React.Component {
     data: [],
     isVisibleNewLocationModal: false,
     isEdit: false,
-    fbGetError: false
+    fbGetError: false,
+    gMapError: false
   };
   componentDidMount() {
     fireBaseInstance
       .get("/fbData.json")
       .then(response => this.setState({ data: response.data }))
       .catch(error => this.setState({ fbGetError: true }));
+    // Error handling for google maps API
+    gMapInstance.get("").catch(error => this.setState({ gMapError: true }));
   }
   removeAll = () => {
     this.setState({ data: [] });
@@ -171,7 +174,11 @@ class MapScreen extends React.Component {
     return (
       <div className={`flexContainer margin-1`}>
         <div className="flexItem">
-          <GoogleMapWrapper isMarkerShown>{markers}</GoogleMapWrapper>
+          {this.state.gMapError ? (
+            `GoogleMapAPI error - put fallback component here`
+          ) : (
+            <GoogleMapWrapper isMarkerShown>{markers}</GoogleMapWrapper>
+          )}
         </div>
         <div className="flexItem">
           <Button

diff --git a/src/axios.js b/src/axios.js
@@ -6,3 +6,11 @@ export const fireBaseInstance = axios.create({
 });
 
 fireBaseInstance.defaults.headers.post["Content-Type"] = "application/json";
+
+//Google map instance
+const gMapKey = `${process.env.REACT_APP_GOOGLE_MAP_API}`;
+// const gMapKeyB = `${process.env.REACT_APP_GOOGLE_MAP_BROKEN_API}`;
+
+export const gMapInstance = axios.create({
+  baseURL: `https://maps.googleapis.com/maps/api/js?key=${gMapKey}&v=3.exp&libraries=geometry,drawing,places`
+});