Added getting and setting cities list from firestore

src/views/Forecast.vue

@@ -3,7 +3,7 @@
     <v-card-title>Prognoza pogody</v-card-title>
     <v-row justify="space-around">
       <v-col pa-1 v-for="(city, i) in city_ids" :key="i">
-        <City :id="city"/>
+        <City :id="city" />
       </v-col>
     </v-row>
   </v-card>
@@ -12,6 +12,16 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import City from "@/components/City.vue";
+import { nanoid } from "nanoid";
+import {
+  collection,
+  query,
+  doc,
+  where,
+  getDocs,
+  setDoc,
+  getFirestore,
+} from "firebase/firestore";
 
 @Component({
   components: {
@@ -19,10 +29,45 @@ import City from "@/components/City.vue";
   },
 })
 export default class Forecast extends Vue {
+  private db = getFirestore();
+  private users = collection(this.db, "users");
+
+  private created() {
+    this.getFirebaseUserData();
+  }
+
+  private async getFirebaseUserData() {
+    const q = query(this.users, where("uid", "==", this.user.uid));
+
+    const querySnapshot = await getDocs(q);
+
+    if (querySnapshot.size > 0) {
+      this.$data.dataID = querySnapshot.docs[0].id;
+      this.$data.cities = querySnapshot.docs[0].data().cities;
+    } else {
+      this.saveUser(nanoid());
+    }
+  }
+
+  private async saveUser(id: string) {
+    if (this.$data.dataID === undefined) {
+      this.$data.dataID = id;
+    }
+    await setDoc(doc(this.users, id), {
+      uid: this.user.uid,
+      cities: this.$data.cities,
+    });
+  }
+
+  get user() {
+    return this.$store.getters.user;
+  }
+
   private data() {
     return {
-      city_ids: [6695624, 759734, 3094802, 764849]
+      city_ids: [6695624, 759734, 3094802, 764849],
-    }
+      cities: [],
+    };
   }
 }
 </script>