crud with firebase

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "firebase": "^7.6.0",
     "node-sass": "^4.8.3",
     "sass-loader": "^6.0.7",
     "vue": "^2.5.2",

src/components/TodoList.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
     <input type="text" class="todo-input" placeholder="What needs to be done" v-model="newTodo" @keyup.enter="addTodo">
+
+    <div v-if="$store.state.loading" class="lds-ripple">
+      <div></div><div></div>
+    </div>
+
     <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
 
       <todo-item v-for="todo in todosFiltered"
@@ -161,4 +166,40 @@
   .fade-enter, .fade-leave-to {
     opacity: 0;
   }
+
+  //spin loader css
+
+  .lds-ripple {
+    display: block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto;
+  }
+  .lds-ripple div {
+    position: absolute;
+    border: 4px solid #909090;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  }
+  .lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+  }
+  @keyframes lds-ripple {
+    0% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+    100% {
+      top: 0px;
+      left: 0px;
+      width: 72px;
+      height: 72px;
+      opacity: 0;
+    }
+  }
 </style>

src/firebase/firebase.js

@@ -0,0 +1,21 @@
+import firebase from "firebase/app";
+
+import 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyCvMDYMI5lbnx6GFiw-_gyRDzWriUdPZzE",
+  authDomain: "todos-1a807.firebaseapp.com",
+  databaseURL: "https://todos-1a807.firebaseio.com",
+  projectId: "todos-1a807",
+  storageBucket: "todos-1a807.appspot.com",
+  messagingSenderId: "44399547596",
+  appId: "1:44399547596:web:ce0e227e96b2ca94965e69",
+  measurementId: "G-5LLGPX4M5Z"
+};
+
+const firebaseApp = firebase.initializeApp(firebaseConfig);
+
+const firestore = firebaseApp.firestore();
+// firestore.settings({ timestampsInSnapshots : true });
+
+export default firestore;

src/main.js

@@ -1,14 +1,18 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
-import axios from 'axios';
+//import axios from 'axios';
+import db from './firebase/firebase'
 import App from './App';
 import router from './router/routes';
 import {store} from "./store/store";
 
 window.Bus = new Vue();
-window.axios = axios;
-axios.defaults.baseURL = 'http://127.0.0.1:8001/api/';
+// window.axios = axios;
+// axios.defaults.baseURL = 'http://127.0.0.1:8001/api/';
+
+window.db = db;
+window.dbCollection = db.collection('todos');
 
 Vue.config.productionTip = false;
 

src/store/actions.js

@@ -1,77 +1,152 @@
 export default {
   retrieveTodos(context) {
-    axios
-      .get('/todos')
-      .then(res => {
-        context.commit('retrieveTodos', res.data.data)
-      }).catch(err => {
-      console.log(err)
-    })
+    context.state.loading = true;
+    dbCollection.orderBy('timestamp', 'asc').get()
+      .then(querySnapshot => {
+        let tempTodos = [];
+        querySnapshot.forEach(document => {
+          //console.log(document.data());
+          const data = {
+            id : document.id,
+            title : document.data().title,
+            completed : document.data().completed,
+            timestamp : document.data().timestamp,
+          };
+          tempTodos.push(data);
+        });
+        context.state.loading = false;
+        // const asc = tempTodos.sort((a, b) => {
+        //   return a.timestamp.seconds - b.timestamp.seconds
+        // });
+        context.commit('retrieveTodos', tempTodos);
+      });
+
+
+    // axios
+    //   .get('/todos')
+    //   .then(res => {
+    //     context.commit('retrieveTodos', res.data.data)
+    //   }).catch(err => {
+    //   console.log(err)
+    // })
   },
   addTodo(context, todo) {
-    axios
-      .post('/todos', {
+    context.state.loading = true;
+    //with firebase
+    dbCollection.add({
+      title : todo.title,
+      completed : false,
+      timestamp : new Date(),
+    }).then(document => {
+      context.commit('addTodo', {
+        id : document.id,
         title : todo.title,
         completed : false,
-      })
-      .then(res => {
-        context.commit('addTodo', res.data.data)
-      }).catch(err => {
-      console.log(err)
-    });
+      });
+      context.state.loading = false;
+    })
+
+    // axios
+    //   .post('/todos', {
+    //     title : todo.title,
+    //     completed : false,
+    //   })
+    //   .then(res => {
+    //     context.commit('addTodo', res.data.data)
+    //   }).catch(err => {
+    //   console.log(err)
+    // });
+    // context.commit('addTodo', todo)
   },
 
   updateTodo(context, todo) {
-    axios
-      .patch('/todos/' + todo.id, {
-        title : todo.title,
-        completed : todo.completed,
-      })
-      .then(res => {
-        context.commit('updateTodo', res.data.data)
-      }).catch(err => {
-      console.log(err)
+    dbCollection.doc(todo.id).set({
+      //id : todo.id,
+      title : todo.title,
+      completed : todo.completed,
+      //timestamp : new Date(),
+    }, { merge: true }).then(() => {
+      context.commit('updateTodo', todo)
     });
+
+    // axios
+    //   .patch('/todos/' + todo.id, {
+    //     title : todo.title,
+    //     completed : todo.completed,
+    //   })
+    //   .then(res => {
+    //     context.commit('updateTodo', res.data.data)
+    //   }).catch(err => {
+    //   console.log(err)
+    // });
+    // context.commit('updateTodo', todo)
   },
 
   deleteTodo(context, id) {
-    axios
-      .delete('/todos/' + id)
-      .then(res => {
+    dbCollection.doc(id).delete()
+      .then(() => {
         context.commit('deleteTodo', id)
-      }).catch(err => {
-      console.log(err)
-    });
+      })
+
+    // axios
+    //   .delete('/todos/' + id)
+    //   .then(res => {
+    //     context.commit('deleteTodo', id)
+    //   }).catch(err => {
+    //   console.log(err)
+    // });
+    // context.commit('deleteTodo', id)
   },
 
   checkAll(context, checked) {
-    axios
-      .patch('/check-all', {
-        completed : checked
+    dbCollection.get().then(querySnapshot => {
+      querySnapshot.forEach(document => {
+        document.ref.update({
+          completed : checked,
+        }).then(() => {
+          context.commit('checkAll', checked);
+        })
       })
-      .then(res => {
-        context.commit('checkAll', checked)
-      }).catch(err => {
-      console.log(err)
-    });
+    })
+
+    // axios
+    //   .patch('/check-all', {
+    //     completed : checked
+    //   })
+    //   .then(res => {
+    //     context.commit('checkAll', checked)
+    //   }).catch(err => {
+    //   console.log(err)
+    // });
+    // context.commit('checkAll', checked)
   },
 
   updateFilter(context, filter) {
       context.commit('updateFilter', filter);
   },
 
   clearCompleted(context) {
-    const completed = context.state.todos.filter((todo) => todo.completed).map((todo) => todo.id);
-    axios
-      .delete('/delete-all-checked', {
-        data : {
-          todos : completed,
-        }
+    dbCollection.where('completed', '==', true).get()
+      .then(querySnapshot => {
+        querySnapshot.forEach(document => {
+          document.ref.delete().then(() => {
+            context.commit('clearCompleted');
+          })
+        })
       })
-      .then(res => {
-        context.commit('clearCompleted');
-      }).catch(err => {
-      console.log(err)
-    });
+
+    // const completed = context.state.todos.filter((todo) => todo.completed).map((todo) => todo.id);
+    // axios
+    //   .delete('/delete-all-checked', {
+    //     data : {
+    //       todos : completed,
+    //     }
+    //   })
+    //   .then(res => {
+    //     context.commit('clearCompleted');
+    //   }).catch(err => {
+    //   console.log(err)
+    // });
+    // context.commit('clearCompleted');
   }
 }

src/store/state.js

@@ -1,4 +1,5 @@
 export default {
+  loading : true,
   filter : 'all',
   todos : [
     // {