✨ add dev config for local development (#279)

* ✨ add dev config for local development * 🐛 fix url for api
Geovation · Mar 13, 2020 · ec75de2 · ec75de2
1 parent bd1dd7e
commit ec75de2
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 36 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,6 +17,8 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import CloseIcon from "@material-ui/icons/Close";
 
+import { dbFirebase, authFirebase } from "features/firebase";
+
 import TutorialPage from "./components/pages/TutorialPage";
 import WelcomePage from "./components/pages/WelcomePage";
 import PhotoPage from "./components/pages/PhotoPage";
@@ -33,8 +35,7 @@ import DrawerContainer from "./components/DrawerContainer";
 import TermsDialog from "./components/TermsDialog";
 import EmailVerifiedDialog from "./components/EmailVerifiedDialog";
 import DisplayPhoto from "./components/MapPage/DisplayPhoto";
-import authFirebase from "./authFirebase";
-import dbFirebase from "./dbFirebase";
+
 import { gtagPageView, gtagEvent } from "./gtag.js";
 import "./App.scss";
 import FeedbackReportsSubrouter from "./components/FeedbackReports/FeedbackReportsSubrouter";

diff --git a/src/components/EmailVerifiedDialog.js b/src/components/EmailVerifiedDialog.js
@@ -14,7 +14,8 @@ import CloseIcon from "@material-ui/icons/Close";
 import withMobileDialog from "@material-ui/core/withMobileDialog";
 import { withStyles } from "@material-ui/core/styles";
 
-import authFirebase from "../authFirebase";
+import { authFirebase } from "features/firebase";
+
 import { isIphoneWithNotchAndCordova, isIphoneAndCordova } from "../utils";
 
 const styles = theme => ({

diff --git a/src/components/FeedbackReports/FeedbackDetailsPage.js b/src/components/FeedbackReports/FeedbackDetailsPage.js
@@ -12,9 +12,10 @@ import withMobileDialog from "@material-ui/core/withMobileDialog";
 import { withStyles } from "@material-ui/core/styles";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
+import { dbFirebase } from "features/firebase";
+
 import { isIphoneWithNotchAndCordova, isIphoneAndCordova } from "../../utils";
 import config from "../../custom/config";
-import dbFirebase from "../../dbFirebase";
 
 const styles = theme => ({
   notchTop: {

diff --git a/src/components/FeedbackReports/FeedbackReportsPage.js b/src/components/FeedbackReports/FeedbackReportsPage.js
@@ -14,8 +14,9 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import { withStyles } from "@material-ui/core/styles";
 
+import { dbFirebase } from "features/firebase";
+
 import PageWrapper from "../PageWrapper";
-import dbFirebase from "../../dbFirebase";
 import config from "../../custom/config";
 import "../ModeratorPage.scss";
 

diff --git a/src/components/LoginFirebase.js b/src/components/LoginFirebase.js
@@ -9,7 +9,8 @@ import * as firebaseui from "firebaseui";
 import firebase from "firebase/app";
 import "firebase/auth";
 
-import authFirebase from "../authFirebase";
+import { authFirebase } from "features/firebase";
+
 // TODO: change theme: https://github.com/firebase/firebaseui-web-react/tree/master/dist
 
 class LoginFirebase extends React.Component {

diff --git a/src/components/WriteFeedbackPage.js b/src/components/WriteFeedbackPage.js
@@ -12,7 +12,8 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import TextField from "@material-ui/core/TextField";
 import { withStyles } from "@material-ui/core/styles";
 
-import dbFirebase from "../dbFirebase";
+import { dbFirebase } from "features/firebase";
+
 import utils, { device } from "../utils";
 import PageWrapper from "./PageWrapper";
 

diff --git a/src/components/pages/PhotoPage/index.js b/src/components/pages/PhotoPage/index.js
@@ -8,9 +8,10 @@ import Button from "@material-ui/core/Button";
 import Link from "@material-ui/core/Link";
 import { withStyles } from "@material-ui/core/styles";
 
+import { dbFirebase } from "features/firebase";
+
 import config from "../../../custom/config";
 import { gtagEvent } from "../../../gtag.js";
-import dbFirebase from "../../../dbFirebase";
 import { isIphoneWithNotchAndCordova, device } from "../../../utils";
 
 import PageWrapper from "../../PageWrapper";

diff --git a/src/custom/config.js b/src/custom/config.js
@@ -219,11 +219,6 @@ export default {
   SECURITY: {
     UPLOAD_REQUIRES_LOGIN: true
   },
-  API: {
-    URL: "https://api.plasticpatrol.co.uk"
-    // URL: "https://us-central1-plastic-patrol-fd3b3.cloudfunctions.net/api",
-    // URL: "http://localhost:5000/plastic-patrol-fd3b3/us-central1/api"
-  },
   MODERATING_PHOTOS: 15,
   LEADERBOARD_FIELD: {
     label: "Pieces",

diff --git a/src/custom/config.json b/src/custom/config.json
@@ -1,14 +1,4 @@
 {
-  "FIREBASE": {
-    "apiKey": "AIzaSyBbN8z-zSqChaQkTyOtIZZ3apq0qg59FzI",
-    "authDomain": "plastic-patrol-fd3b3.firebaseapp.com",
-    "databaseURL": "https://plastic-patrol-fd3b3.firebaseio.com",
-    "projectId": "plastic-patrol-fd3b3",
-    "storageBucket": "plastic-patrol-fd3b3.appspot.com",
-    "messagingSenderId": "845679623528",
-    "appId": "1:845679623528:web:11731eae5c93b758",
-    "measurementId": "G-E3JL8LTHS9"
-  },
   "metadata": {
     "metadataServerUrl": "https://md.plasticpatrol.co.uk",
     "serverUrl": "https://app.plasticpatrol.co.uk",

diff --git a/src/authFirebase.js → src/features/firebase/authFirebase.js b/src/authFirebase.js → src/features/firebase/authFirebase.js
@@ -1,10 +1,11 @@
 import firebase from "firebase/app";
 import md5 from "md5";
 
-import User from "./types/User";
+import config from "custom/config";
+import User from "types/User";
+import { gtagEvent, gtagSetId } from "gtag.js";
+
 import dbFirebase from "./dbFirebase";
-import { gtagEvent, gtagSetId } from "./gtag.js";
-import config from "./custom/config";
 
 /**
  * When the user login call fn

diff --git a/src/features/firebase/config.dev.json b/src/features/firebase/config.dev.json
@@ -0,0 +1,11 @@
+{
+  "apiKey": "AIzaSyBm_X-Jiz0TmfQOcd89FoHHLiNi_Ef6xtg",
+  "authDomain": "plastic-patrol-dev-722eb.firebaseapp.com",
+  "databaseURL": "https://plastic-patrol-dev-722eb.firebaseio.com",
+  "projectId": "plastic-patrol-dev-722eb",
+  "storageBucket": "plastic-patrol-dev-722eb.appspot.com",
+  "messagingSenderId": "664053532725",
+  "appId": "1:664053532725:web:6556617240a6813503097c",
+  "measurementId": "G-7ZS2821F9N",
+  "apiURL": "https://us-central1-plastic-patrol-dev-722eb.cloudfunctions.net/api"
+}
diff --git a/src/features/firebase/config.js b/src/features/firebase/config.js
@@ -0,0 +1,6 @@
+const config =
+  process.env.NODE_ENV === "development"
+    ? require("./config.dev.json")
+    : require("./config.json");
+
+export default config;
diff --git a/src/features/firebase/config.json b/src/features/firebase/config.json
@@ -0,0 +1,11 @@
+{
+  "apiKey": "AIzaSyBbN8z-zSqChaQkTyOtIZZ3apq0qg59FzI",
+  "authDomain": "plastic-patrol-fd3b3.firebaseapp.com",
+  "databaseURL": "https://plastic-patrol-fd3b3.firebaseio.com",
+  "projectId": "plastic-patrol-fd3b3",
+  "storageBucket": "plastic-patrol-fd3b3.appspot.com",
+  "messagingSenderId": "845679623528",
+  "appId": "1:845679623528:web:11731eae5c93b758",
+  "measurementId": "G-E3JL8LTHS9",
+  "apiURL": "https://api.plasticpatrol.co.uk"
+}
diff --git a/src/dbFirebase.js → src/features/firebase/dbFirebase.js b/src/dbFirebase.js → src/features/firebase/dbFirebase.js
@@ -1,10 +1,12 @@
 import firebase from "firebase/app";
 import _ from "lodash";
 
-import firebaseApp from "./firebaseInit.js";
-import config from "./custom/config";
 import * as localforage from "localforage";
 
+import appConfig from "custom/config";
+import firebaseApp from "./firebaseInit.js";
+import firebaseConfig from "./config";
+
 const firestore = firebase.firestore();
 const storageRef = firebase.storage().ref();
 
@@ -85,13 +87,13 @@ const configObserver = (onNext, onError) => {
 };
 
 async function fetchStats() {
-  return fetch(config.API.URL + "/stats", { mode: "cors" }).then(response =>
-    response.json()
-  );
+  return fetch(firebaseConfig.apiURL + "/stats", {
+    mode: "cors"
+  }).then(response => response.json());
 }
 
 async function fetchPhotos() {
-  const photosResponse = await fetch(config.API.URL + "/photos.json", {
+  const photosResponse = await fetch(firebaseConfig.apiURL + "/photos.json", {
     mode: "cors"
   });
   const photosJson = await photosResponse.json();
@@ -104,7 +106,7 @@ function fetchFeedbacks(isShowAll) {
   let query = firestore
     .collection("feedbacks")
     .orderBy("updated", "desc")
-    .limit((config.FEEDBACKS && config.FEEDBACKS.MAX) || 50);
+    .limit((appConfig.FEEDBACKS && appConfig.FEEDBACKS.MAX) || 50);
   return query
     .get()
     .then(sn =>
@@ -132,7 +134,7 @@ function saveMetadata(data) {
   data.moderated = null;
 
   let fieldsToSave = ["moderated", "updated", "location", "owner_id"];
-  _.forEach(config.PHOTO_FIELDS, field => fieldsToSave.push(field.name));
+  _.forEach(appConfig.PHOTO_FIELDS, field => fieldsToSave.push(field.name));
 
   return firestore.collection("photos").add(_.pick(data, fieldsToSave));
 }

diff --git a/src/firebaseInit.js → src/features/firebase/firebaseInit.js b/src/firebaseInit.js → src/features/firebase/firebaseInit.js
@@ -9,11 +9,13 @@ import "firebase/performance";
 import "firebase/storage";
 import "firebase/analytics";
 
-import config from "./custom/config";
+import config from "./config";
+
 // Initialize Firebase
 const firebaseApp = !firebase.apps.length
-  ? firebase.initializeApp(config.FIREBASE)
+  ? firebase.initializeApp(config)
   : firebase.app();
+
 const firestore = firebase.firestore();
 
 // measuring web performance. See https://firebase.google.com/docs/perf-mon/get-started-web

diff --git a/src/features/firebase/index.js b/src/features/firebase/index.js
@@ -0,0 +1,5 @@
+export { default as authFirebase } from "./authFirebase";
+
+export { default as dbFirebase } from "./dbFirebase";
+
+export { default as config } from "./config";