🐛 Fixed a bug with Collection sync

components/collections/importExportCollections.vue

@@ -11,6 +11,54 @@
               </button>
             </div>
           </div>
+          <div class="flex-wrap">
+            <span
+              v-tooltip="{
+                content: !fb.currentUser
+                  ? $t('login_first')
+                  : $t('replace_current')
+              }"
+            >
+              <button
+                :disabled="!fb.currentUser"
+                class="icon"
+                @click="syncCollections"
+              >
+                <i class="material-icons">folder_shared</i>
+                <span>{{ $t("import_from_sync") }}</span>
+              </button>
+            </span>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToReplaceWith"
+              v-tooltip="$t('replace_current')"
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("replace_json") }}</span>
+              <input
+                type="file"
+                @change="replaceWithJSON"
+                style="display: none;"
+                ref="inputChooseFileToReplaceWith"
+                accept="application/json"
+              />
+            </button>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToImportFrom"
+              v-tooltip="$t('preserve_current')"
+            >
+              <i class="material-icons">folder_special</i>
+              <span>{{ $t("import_json") }}</span>
+              <input
+                type="file"
+                @change="importFromJSON"
+                style="display: none;"
+                ref="inputChooseFileToImportFrom"
+                accept="application/json"
+              />
+            </button>
+          </div>
         </li>
       </ul>
     </div>
@@ -18,39 +66,6 @@
       <textarea v-model="collectionJson" rows="8"></textarea>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
-        <span>
-          <button
-            class="icon"
-            @click="openDialogChooseFileToReplaceWith"
-            v-tooltip="$t('replace_current')"
-          >
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("replace_json") }}</span>
-            <input
-              type="file"
-              @change="replaceWithJSON"
-              style="display: none;"
-              ref="inputChooseFileToReplaceWith"
-            />
-          </button>
-          <button
-            class="icon"
-            @click="openDialogChooseFileToImportFrom"
-            v-tooltip="$t('preserve_current')"
-          >
-            <i class="material-icons">folder_shared</i>
-            <span>{{ $t("import_json") }}</span>
-            <input
-              type="file"
-              @change="importFromJSON"
-              style="display: none;"
-              ref="inputChooseFileToImportFrom"
-            />
-          </button>
-        </span>
-        <span></span>
-      </div>
       <div class="flex-wrap">
         <span></span>
         <span>
@@ -71,7 +86,14 @@
 </template>
 
 <script>
+import { fb } from "../../functions/fb";
+
 export default {
+  data() {
+    return {
+      fb
+    };
+  },
   props: {
     show: Boolean
   },
@@ -101,6 +123,7 @@ export default {
         this.$store.commit("postwoman/replaceCollections", collections);
       };
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+      this.fileImported();
     },
     importFromJSON() {
       let reader = new FileReader();
@@ -110,6 +133,7 @@ export default {
         this.$store.commit("postwoman/importCollections", collections);
       };
       reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+      this.fileImported();
     },
     exportJSON() {
       let text = this.collectionJson;
@@ -125,6 +149,18 @@ export default {
       document.body.appendChild(anchor);
       anchor.click();
       document.body.removeChild(anchor);
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done"
+      });
+    },
+    syncCollections() {
+      this.$store.commit("postwoman/replaceCollections", fb.currentCollections);
+      this.fileImported();
+    },
+    fileImported() {
+      this.$toast.info(this.$t("file_imported"), {
+        icon: "folder_shared"
+      });
     }
   }
 };

components/collections/index.vue

@@ -108,6 +108,7 @@ ul {
 
 <script>
 import collection from "./collection";
+import { fb } from "../../functions/fb";
 
 export default {
   components: {
@@ -172,11 +173,13 @@ export default {
       this.$data.editingCollection = collection;
       this.$data.editingCollectionIndex = collectionIndex;
       this.displayModalEdit(true);
+      this.syncCollections();
     },
     addFolder(collection, collectionIndex) {
       this.$data.editingCollection = collection;
       this.$data.editingCollectionIndex = collectionIndex;
       this.displayModalAddFolder(true);
+      this.syncCollections();
     },
     editFolder(payload) {
       const { collectionIndex, folder, folderIndex } = payload;
@@ -185,6 +188,7 @@ export default {
       this.$data.editingFolder = folder;
       this.$data.editingFolderIndex = folderIndex;
       this.displayModalEditFolder(true);
+      this.syncCollections();
     },
     editRequest(payload) {
       const { request, collectionIndex, folderIndex, requestIndex } = payload;
@@ -193,6 +197,7 @@ export default {
       this.$data.editingRequest = request;
       this.$data.editingRequestIndex = requestIndex;
       this.displayModalEditRequest(true);
+      this.syncCollections();
     },
     resetSelectedData() {
       this.$data.editingCollection = undefined;
@@ -201,6 +206,15 @@ export default {
       this.$data.editingFolderIndex = undefined;
       this.$data.editingRequest = undefined;
       this.$data.editingRequestIndex = undefined;
+    },
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(
+            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections))
+          );
+        }
+      }
     }
   }
 };

functions/fb.js

@@ -25,6 +25,7 @@ export const fb = {
   currentFeeds: [],
   currentSettings: [],
   currentHistory: [],
+  currentCollections: [],
   writeFeeds: async (message, label) => {
     const dt = {
       createdOn: new Date(),
@@ -34,14 +35,11 @@ export const fb = {
       message,
       label
     };
-    try {
+    usersCollection
-      return usersCollection
+      .doc(fb.currentUser.uid)
-        .doc(fb.currentUser.uid)
+      .collection("feeds")
-        .collection("feeds")
+      .add(dt)
-        .add(dt);
+      .catch(e => console.error("error inserting", dt, e));
-    } catch (e) {
-      return console.error("error inserting", dt, e);
-    }
   },
   deleteFeed: id => {
     usersCollection
@@ -60,26 +58,20 @@ export const fb = {
       name: setting,
       value
     };
-    try {
+    usersCollection
-      return usersCollection
+      .doc(fb.currentUser.uid)
-        .doc(fb.currentUser.uid)
+      .collection("settings")
-        .collection("settings")
+      .doc(setting)
-        .doc(setting)
+      .set(st)
-        .set(st);
+      .catch(e => console.error("error updating", st, e));
-    } catch (e) {
-      return console.error("error updating", st, e);
-    }
   },
   writeHistory: async entry => {
     const hs = entry;
-    try {
+    usersCollection
-      return usersCollection
+      .doc(fb.currentUser.uid)
-        .doc(fb.currentUser.uid)
+      .collection("history")
-        .collection("history")
+      .add(hs)
-        .add(hs);
+      .catch(e => console.error("error inserting", hs, e));
-    } catch (e) {
-      return console.error("error inserting", hs, e);
-    }
   },
   deleteHistory: entry => {
     usersCollection
@@ -105,6 +97,21 @@ export const fb = {
       .doc(entry.id)
       .update({ star: value })
       .catch(e => console.error("error deleting", entry, e));
+  },
+  writeCollections: async collection => {
+    const cl = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      collection: collection
+    };
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("collections")
+      .doc("sync")
+      .set(cl)
+      .catch(e => console.error("error updating", cl, e));
   }
 };
 
@@ -121,11 +128,10 @@ firebase.auth().onAuthStateChanged(user => {
         photoUrl: profile.photoURL,
         uid: profile.uid
       };
-      try {
+      usersCollection
-        usersCollection.doc(fb.currentUser.uid).set(us);
+        .doc(fb.currentUser.uid)
-      } catch (e) {
+        .set(us)
-        console.error("error updating", us, e);
+        .catch(e => console.error("error updating", us, e));
-      }
     });
 
     usersCollection
@@ -167,6 +173,19 @@ firebase.auth().onAuthStateChanged(user => {
         });
         fb.currentHistory = history;
       });
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("collections")
+      .onSnapshot(collectionsRef => {
+        const collections = [];
+        collectionsRef.forEach(doc => {
+          const collection = doc.data();
+          collection.id = doc.id;
+          collections.push(collection);
+        });
+        fb.currentCollections = collections[0].collection;
+      });
   } else {
     fb.currentUser = null;
   }

lang/en-US.js

@@ -259,5 +259,6 @@ export default {
   syncCollections: "Collections",
   turn_on: "Turn on",
   login_first: "Login first",
-  paste_a_collection: "Paste a Collection"
+  paste_a_collection: "Paste a Collection",
+  import_from_sync: "Import from Sync"
 };

pages/settings.vue

@@ -39,7 +39,7 @@
               </pw-toggle>
             </p>
             <p v-if="fb.currentSettings.length == 0">
-              <button class="" @click="writeSettings">
+              <button class="" @click="initSettings">
                 <i class="material-icons">sync</i>
                 <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
               </button>
@@ -406,8 +406,8 @@ export default {
               action: {
                 text: this.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncHistory", true);
-                  fb.writeSettings("syncCollections", true);
+                  fb.writeSettings("syncCollections", false);
                   this.$router.push({ path: "/settings" });
                   toastObject.remove();
                 }
@@ -435,8 +435,8 @@ export default {
               action: {
                 text: this.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncHistory", true);
-                  fb.writeSettings("syncCollections", true);
+                  fb.writeSettings("syncCollections", false);
                   this.$router.push({ path: "/settings" });
                   toastObject.remove();
                 }
@@ -453,9 +453,9 @@ export default {
     toggleSettings(s, v) {
       fb.writeSettings(s, !v);
     },
-    writeSettings() {
+    initSettings() {
-      fb.writeSettings("syncHistory", false);
+      fb.writeSettings("syncHistory", true);
-      fb.writeSettings("syncCollections", true);
+      fb.writeSettings("syncCollections", false);
     }
   },
 

store/postwoman.js

@@ -111,10 +111,10 @@ export const mutations = {
   },
 
   addNewCollection({ collections }, collection) {
-    const { name } = collection
+    const { name } = collection;
-    const duplicateCollection = collections.some(item => item.name === name)
+    const duplicateCollection = collections.some(item => item.name === name);
     if (duplicateCollection) {
-      this.$toast.info('Duplicate collection');
+      this.$toast.info("Duplicate collection");
       return;
     }
     collections.push({
@@ -132,10 +132,10 @@ export const mutations = {
 
   editCollection({ collections }, payload) {
     const { collection, collectionIndex } = payload;
-    const { name } = collection
+    const { name } = collection;
-    const duplicateCollection = collections.some(item => item.name === name)
+    const duplicateCollection = collections.some(item => item.name === name);
     if (duplicateCollection) {
-      this.$toast.info('Duplicate collection');
+      this.$toast.info("Duplicate collection");
       return;
     }
     collections[collectionIndex] = collection;