Migrate data to firebase firestore

src/components/Article/Details.vue

@@ -4,7 +4,7 @@
             <v-layout row>
                 <v-flex xs4 md3>
                     <v-img
-                        src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
+                        :src="article.imageUrl"
                         v-bind:height="expandDetails ? '150px' : '100px'"
                     >
                     </v-img>
@@ -36,11 +36,11 @@
             <v-layout row>
                 <v-flex xs12>
                     <v-card-actions>
-                        <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
+                        <!-- <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
                         <div class="ml-1">
                             <span>{{ article.rating }}</span>
                             <span>({{ article.ratingsCount }})</span>
-                        </div>
+                        </div> -->
                         <v-spacer></v-spacer>
                         <v-btn v-if="!expandDetails" class="primary" flat :to="{ name: 'article', params: { articleId: article.id } }">
                             Открыть

src/main.js

@@ -4,6 +4,7 @@ import firebase from 'firebase/app';
 import VuetifyConfirm from 'vuetify-confirm';
 import VueYouTubeEmbed from 'vue-youtube-embed';
 import 'firebase/auth';
+import 'firebase/firestore';
 
 import 'vuetify/dist/vuetify.min.css';
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
@@ -13,9 +14,12 @@ import router from '@/router';
 import store from '@/store';
 import firebaseConfig from '@/config/firebase';
 
-firebase.initializeApp(firebaseConfig);
+const firebaseApp = firebase.initializeApp(firebaseConfig);
+const db = firebaseApp.firestore();
 
 Vue.config.productionTip = false;
+Vue.$db = db;
+
 Vue.use(Vuetify);
 Vue.use(VuetifyConfirm, {
   buttonTrueText: 'Да',
@@ -32,5 +36,7 @@ new Vue({
     firebase.auth().onAuthStateChanged((user) => {
       this.$store.dispatch('stateChanged', user);
     });
+
+    this.$store.dispatch('loadArticles');
   }
 }).$mount('#app');

src/store/articles.js

@@ -1,167 +1,39 @@
+import Vue from 'vue';
+
 export default {
     state: {
-        articles: [
+        articles: [],
-            {
+    },
-                id: 'sgjngsnaada312',
+    actions: {
-                title: 'Harry Potter und Stein der Weisen - 1',
+        loadArticles({ commit }) {
-                description: 'Первая глава первой книги о Гарри Поттере',
+            Vue.$db.collection('articles')
-                imageId: 'asfgdfhmfgn131',
+                .get()
-                level: ['B2', 'C1'],
+                .then((querySnapshot) => {
-                rating: 4,
+                    const articles = querySnapshot.docs.map((articleSnap) => {
-                ratingsCount: 164,
+                        const data = articleSnap.data();
-                youtubePlaylistId: 'asdadsadad',
+                        const { parts } = data;
-                parts: [
+                        return {
-                    {
+                            id: articleSnap.id,
-                        id: 'asdasdad123',
+                            title: data.title,
-                        title: 'kapitel 1',
+                            description: data.description,
-                        youtubeId: 'asdasdad1',
+                            imageUrl: data.imageUrl,
-                    },
+                            level: data.level.slice(),
-                    {
+                            youtubePlaylistId: data.youtubePlaylistId,
-                        id: 'asdasdad124',
+                            parts: parts ? parts.map(part => Object.assign({}, part)) : [],
-                        title: 'kapitel 2',
+                        };
-                        youtubeId: 'asdasdad2',
+                    });
-                    },
-                    {
-                        id: 'asdasdad125',
-                        title: 'kapitel 3',
-                        youtubeId: 'asdasdad3',
-                    },
-                    {
-                        id: 'asdasdad126',
-                        title: 'kapitel 4',
-                        youtubeId: 'asdasdad4',
-                    },
-                ],
-            },
-            {
-                id: 'sgjngsnaadasd2',
-                title: 'Harry Potter und Stein der Weisen - 2',
-                description: 'Вторая глава первой книги о Гарри Поттере',
-                imageId: 'asfgdf111hmfgn131',
-                level: ['B1', 'B2'],
-                rating: 3.5,
-                ratingsCount: 55,
-                youtubePlaylistId: 'asdadsadad234234',
-                parts: [
-                    {
-                        id: 'bsdasdad123',
-                        title: 'kapitel 1',
-                        youtubeId: 'bsdasdad1',
-                    },
-                    {
-                        id: 'bsdasdad124',
-                        title: 'kapitel 2',
-                        youtubeId: 'bsdasdad2',
-                    },
-                    {
-                        id: 'bsdasdad125',
-                        title: 'kapitel 3',
-                        youtubeId: 'bsdasdad3',
-                    },
-                ],
-            },
-            {
-                id: 'sgjngsdbfd12as',
-                title: 'Harry Potter und Stein der Weisen - 3',
-                description: 'Третья глава первой книги о Гарри Поттере',
-                imageId: 'asfgdfhmfgn13111',
-                level: ['A2'],
-                rating: 2,
-                ratingsCount: 80,
-                youtubePlaylistId: 'asdadsada435346',
-                parts: [
-                    {
-                        id: 'bsdasdad123',
-                        title: 'kapitel 1',
-                        youtubeId: 'bsdasdad1',
-                    },
-                    {
-                        id: 'bsdasdad124',
-                        title: 'kapitel 2',
-                        youtubeId: 'bsdasdad2',
-                    },
-                    {
-                        id: 'bsdasdad125',
-                        title: 'kapitel 3',
-                        youtubeId: 'bsdasdad3',
-                    },
-                ],
-            },
-        ],
                     
-        articleParts: [
+                    commit('setArticles', articles);
-            {
+                })
-                articleId: 'sgjngsnaada312',
+                .catch(e => console.error(e));
-                articlePartId: 'asdasdad123',
+        },
-                articleTitle: 'Harry Potter und Stein der Weisen - 1',
+    },
-                partTitle: 'kapitel 1',
+    getters: {
-                youtubeId: 'hHW1oY26kxQ',
+        getArticles: state => state.articles,
-                content: [
-                    {
-                        sentences: [
-                            {
-                                origText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-                                transText: 'Бла',
-                            },
-                            {
-                                origText: 'Praesent ligula odio, interdum pretium ligula eu, vehicula consequat nulla. Etiam a massa iaculis, aliquet metus sit amet, varius odio',
-                                transText: 'Бла2',
-                            },
-                            {
-                                origText: 'Suspendisse quis mi eget nisl accumsan molestie in vel lorem. Duis ipsum massa, pharetra nec arcu sed, mattis ultricies neque.',
-                                transText: 'Бла3',
-                            },
-                            {
-                                origText: 'Sed lacinia sed justo sit amet porttitor. Etiam nec nisi nibh. Donec dolor lacus, volutpat in pellentesque vel, accumsan ac nisi.',
-                                transText: 'Бла4',
-                            },
-                        ],
-                    },
-                    {
-                        sentences: [
-                            {
-                                origText: 'Etiam magna dui, pulvinar quis finibus malesuada, vulputate non sem. In hendrerit dui sem, a cursus ipsum interdum non.',
-                                transText: 'Фу1',
-                            },
-                            {
-                                origText: 'Curabitur porta sagittis lacus.',
-                                transText: 'Фу2',
-                            },
-                        ],
-                    }
-                ],
-                words: [
-                    {
-                        origWord: 'Hallo',
-                        transWord: 'Привет',
-                    },
-                    {
-                        origWord: 'Hallo',
-                        transWord: 'Привет',
-                    },
-                    {
-                        origWord: 'Hallo',
-                        transWord: 'Привет',
-                    },
-                    {
-                        origWord: 'Hallo',
-                        transWord: 'Привет',
-                    },
-                    {
-                        origWord: 'Hallo',
-                        transWord: 'Привет',
-                    },
-                ],
-            },
-        ],
     },
     mutations: {
         setArticles(state, payload) {
             state.articles = payload;
         },
     },
-    getters: {
-        getArticles: state => state.articles,
-        getParts: state => state.articleParts,
-    },
 };

src/views/ArticlePart.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+    import Vue from 'vue';
     import BookPartContent from '@/components/Article/Part/Content';
     import BookPartWords from '@/components/Article/Words';
 
@@ -26,15 +27,25 @@
                 required: true,
             },
         },
-        computed: {
-            part() {
-                return this.$store.getters.getParts.find(part => part.articleId === this.articleId
-                    && part.articlePartId === this.partId);
-            }
-        },
         components: {
             BookPartContent,
             BookPartWords,
         },
+        data: () => ({
+            part: null,
+        }),
+        created() {
+            Vue.$db.collection('articleParts')
+                .where('articleId', '==', this.articleId)
+                .where('articlePartId', '==', this.partId)
+                .get()
+                .then((querySnapshot) => {
+                    const snapDocs = querySnapshot.docs;
+                    if (snapDocs.length > 0) {
+                        this.part = Object.assign({}, snapDocs[0].data());
+                    }
+                })
+                .catch(e => console.error(e));
+        }
     };
 </script>