Merge pull request #171 from s0lvang/feature/kjempebra-service

Flytt firebasefunksjoner til service-fil

package.json

@@ -13,7 +13,6 @@
     "@sentry/browser": "^5.14.2",
     "@sentry/integrations": "^5.14.2",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "date-fns": "^2.11.0",
     "eslint-config-prettier": "^6.10.0",

src/components/GoogleLoginButton.vue

@@ -8,15 +8,12 @@
 </template>
 
 <script>
-import firebase from "firebase";
+import { signInWithGoogle } from "@/services/firebase";
 
 export default {
   name: "LoginButton",
   methods: {
-    signInWithGoogle() {
-      const provider = new firebase.auth.GoogleAuthProvider();
-      firebase.auth().signInWithRedirect(provider);
-    }
+    signInWithGoogle
   }
 };
 </script>

src/components/LoginArea.vue

@@ -25,12 +25,8 @@
 </template>
 
 <script>
-import firebase from "firebase";
-import {
-  handleSignedIn,
-  getErrorMessage,
-  getRedirectUrl
-} from "@/helpers/auth";
+import { getErrorMessage, handleSignedIn } from "@/helpers/auth";
+import { registerWithEmail, login } from "@/services/firebase";
 import Button from "@/components/shared/Button.vue";
 
 export default {
@@ -51,61 +47,16 @@ export default {
     }
   },
   methods: {
-    register() {
-      const actionCodeSettings = {
-        // URL you want to redirect back to. The domain (www.example.com) for this
-        // URL must be whitelisted in the Firebase Console.
-        url: getRedirectUrl(),
-        // This must be true.
-        handleCodeInApp: true,
-        lang: "no"
-      };
-      firebase
-        .auth()
-        .sendSignInLinkToEmail(this.email, actionCodeSettings)
-        .then(() => {
-          window.localStorage.setItem("emailForSignIn", this.email);
-          this.sentMail = true;
-          this.errorCode = null;
-        })
-        .catch(err => {
-          this.errorCode = err.code;
-        });
+    async register() {
+      this.errorCode = await registerWithEmail(this.email, () => {
+        this.sentMail = true;
+      });
     }
   },
   async beforeMount() {
-    const login = async url => {
-      try {
-        const fb = firebase.auth();
-        if (fb.isSignInWithEmailLink(url)) {
-          let email = window.localStorage.getItem("emailForSignIn");
-          if (!email) {
-            // If the user opens the link on another device
-            email = await this.$dialog
-              .prompt(
-                {
-                  title: "Epostadresse",
-                  body: "Skriv inn epostadressen din",
-                  promptHelp: `Skriv din epostadresse i boksen under og trykk "[+:okText]"`
-                },
-                {
-                  okText: "Fortsett",
-                  cancelText: "Lukk",
-                  customClass: "phone-prompt"
-                }
-              )
-              .then(dialog => dialog.data);
-          }
-          await fb
-            .signInWithEmailLink(email, url)
-            .then(() => handleSignedIn(this, fb.currentUser))
-            .then(() => window.localStorage.removeItem("emailForSignIn"));
-        }
-      } catch (err) {
-        this.errorCode = err.code;
-      }
-    };
-    await login(window.location.href);
+    this.errorCode = await login(window.location.href, this.$dialog, currUser =>
+      handleSignedIn(this, currUser)
+    );
   }
 };
 </script>

src/components/Menu.vue

@@ -3,9 +3,9 @@
     <a
       tabIndex="0"
       class="brand"
-      @click="goToStart"
-      v-on:keyup.enter="goToStart"
-      v-on:keyup.space="goToStart"
+      @click="navigate('StartScreen')"
+      v-on:keyup.enter="navigate('StartScreen')"
+      v-on:keyup.space="navigate('StartScreen')"
     >
       <img src="@/assets/logo.svg" alt="logo" />
       <h1>
@@ -24,43 +24,43 @@
     <nav v-if="getUser" :class="open ? 'block' : 'hidden'">
       <a
         tabIndex="0"
-        @click="toAllRequests"
-        v-on:keyup.enter="toAllRequests"
-        v-on:keyup.space="toAllRequests"
+        @click="navigate('AllRequests')"
+        v-on:keyup.enter="navigate('AllRequests')"
+        v-on:keyup.space="navigate('AllRequests')"
       >
         Oppdragslisten
       </a>
       <a
         tabIndex="0"
-        @click="myAssignedRequests"
-        v-on:keyup.enter="myAssignedRequests"
-        v-on:keyup.space="myAssignedRequests"
+        @click="navigate('MyAssignedRequests')"
+        v-on:keyup.enter="navigate('MyAssignedRequests')"
+        v-on:keyup.space="navigate('MyAssignedRequests')"
       >
         Mine oppdrag
       </a>
       <span class="divider" />
       <a
         tabIndex="0"
-        @click="newRequest"
-        v-on:keyup.enter="newRequest"
-        v-on:keyup.space="newRequest"
+        @click="navigate('CreateRequest')"
+        v-on:keyup.enter="navigate('CreateRequest')"
+        v-on:keyup.space="navigate('CreateRequest')"
       >
         Ny bestilling
       </a>
       <a
         tabIndex="0"
-        @click="myRequests"
-        v-on:keyup.enter="myRequests"
-        v-on:keyup.space="myRequests"
+        @click="navigate('MyRequests')"
+        v-on:keyup.enter="navigate('MyRequests')"
+        v-on:keyup.space="navigate('MyRequests')"
       >
         Mine bestillinger
       </a>
       <span class="divider" />
       <a
         tabIndex="0"
-        @click="myPage"
-        v-on:keyup.enter="myPage"
-        v-on:keyup.space="myPage"
+        @click="navigate('MyPage')"
+        v-on:keyup.enter="navigate('MyPage')"
+        v-on:keyup.space="navigate('MyPage')"
       >
         Min side
       </a>
@@ -77,7 +77,10 @@
 </template>
 
 <script>
-import fb from "firebase";
+import { signOut } from "@/services/firebase";
+
+const camelToLisp = str =>
+  str.replace(/[\w]([A-Z])/g, m => `${m[0]}-${m[1]}`).toLowerCase();
 
 export default {
   name: "Menu",
@@ -93,53 +96,23 @@ export default {
     close() {
       this.open = false;
     },
-    myRequests() {
-      if (this.$route.name !== "MyRequests") {
-        this.$router.push("/my-requests");
-      }
-      this.close();
-    },
-    myAssignedRequests() {
-      if (this.$route.name !== "MyAssignedRequests") {
-        this.$router.push("/my-assigned-requests");
-      }
-      this.close();
-    },
-    toAllRequests() {
-      if (this.$route.name !== "AllRequests") {
-        this.$router.push("/all-requests");
-      }
-      this.close();
-    },
-    newRequest() {
-      if (this.$route.name !== "CreateRequest") {
-        this.$router.push("/create-request");
-      }
-      this.close();
-    },
-    myPage() {
-      if (this.$route.name !== "MyPage") {
-        this.$router.push("/my-page");
-      }
-      this.close();
-    },
-    goToStart() {
-      if (this.$route.name !== "StartScreen") {
-        this.$router.push("/start-screen");
+    navigate(to) {
+      /**
+       * Check om inkommende route er samme som nåværende. Hvis ikke,
+       * gjør om MæhmedPakkaBaggen til mæhmed-pakka-bagen, fordi det er
+       * sånn routesene ser ut.
+       */
+      if (this.$route.name !== to) {
+        this.$router.push(`/${camelToLisp(to)}`);
       }
       this.close();
     },
     logout() {
-      fb.auth()
-        .signOut()
-        .then(() => {
-          this.$store.dispatch("SET_CURRENT_USER", null);
-          this.$router.push("/login");
-          this.close();
-        })
-        .catch(error => {
-          console.log(`something went wrong ${error.message}`);
-        });
+      signOut(() => {
+        this.$store.dispatch("SET_CURRENT_USER", null);
+        this.$router.push("/login");
+        this.close();
+      });
     }
   },
   computed: {

src/helpers/auth.js

@@ -82,6 +82,12 @@ export const handleSignedIn = async (context, user) => {
     });
 };
 
+export const setUpGoogleSignInCompleteListener = async (
+  callback = () => {}
+) => {
+  callback(await firebase.auth().getRedirectResult());
+};
+
 export const getErrorMessage = errorCode => {
   switch (errorCode) {
     case "auth/invalid-password":

src/services/fetchLocations.js

@@ -1,16 +1,20 @@
-/* eslint-disable import/prefer-default-export */
-import axios from "axios";
+const prepareParams = obj =>
+  Object.keys(obj)
+    .map(k => `${k}=${encodeURIComponent(obj[k])}`)
+    .join("&");
+
+const params = {
+  access_token: process.env.VUE_APP_MAPBOX_TOKEN,
+  language: "no",
+  country: "no",
+  autocomplete: true
+};
 
 export default async function fetchLocation(location) {
-  return axios
-    .get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${location}.json`, {
-      params: {
-        access_token: process.env.VUE_APP_MAPBOX_TOKEN,
-        language: "no",
-        country: "no",
-        autocomplete: true
-      }
-    })
-    .then(response => response.data.features)
-    .catch(error => console.log(error));
+  const resp = await fetch(
+    `https://api.mapbox.com/geocoding/v5/mapbox.places/${location}.json?${prepareParams(
+      params
+    )}`
+  );
+  return (await resp.json()).features;
 }