From a9361c649042f8d88b210458e6e4c4108388bc18 Mon Sep 17 00:00:00 2001
From: unknown <hadi20107@hotmail.co.uk>
Date: Thu, 15 Oct 2020 22:04:53 +0100
Subject: [PATCH] Fix delete link bug

---
 src/components/Fonts/chooseFonts.vue          | 12 ++--
 .../AddEditProfiles/addSocialProfile.vue      |  2 +
 .../AddEditProfiles/editSocialProfile.vue     | 15 ++---
 src/components/QuickAdd/quickAdd.vue          | 60 ++++++++++++++-----
 src/store.js                                  | 48 +++++++--------
 src/views/Home.vue                            | 17 +++---
 src/views/Profile.vue                         |  8 ++-
 7 files changed, 100 insertions(+), 62 deletions(-)

diff --git a/src/components/Fonts/chooseFonts.vue b/src/components/Fonts/chooseFonts.vue
index d5e389a..ac7e9e1 100644
--- a/src/components/Fonts/chooseFonts.vue
+++ b/src/components/Fonts/chooseFonts.vue
@@ -64,13 +64,15 @@ export default {
   },
   methods: {
     editFontSelection() {
-      store.dispatch("addUpdateFont", this.radios );
+      store.dispatch("addUpdateFont", this.radios);
     },
   },
-  beforeMount(){
-      console.log(this.searchedUser.font)
-      this.radios = this.searchedUser.font
-
+  beforeMount() {
+    if (this.searchedUser.font != "" && this.searchedUser.font != null) {
+      this.radios = this.searchedUser.font;
+    } else {
+      this.radios = "Default";
+    }
   },
   computed: {
     ...mapState(["searchedUser"]),
diff --git a/src/components/QuickAdd/AddEditProfiles/addSocialProfile.vue b/src/components/QuickAdd/AddEditProfiles/addSocialProfile.vue
index 1da146d..f4f340c 100644
--- a/src/components/QuickAdd/AddEditProfiles/addSocialProfile.vue
+++ b/src/components/QuickAdd/AddEditProfiles/addSocialProfile.vue
@@ -63,6 +63,8 @@ export default {
         this.tempSocialLink.nameButton = "Tik Tok";
       }
       store.dispatch("addSocialProfile", this.tempSocialLink);
+      this.tempSocialLink = {}
+      this.tempValueTextField = ""
     },
   },
 };
diff --git a/src/components/QuickAdd/AddEditProfiles/editSocialProfile.vue b/src/components/QuickAdd/AddEditProfiles/editSocialProfile.vue
index c28535e..1b3c2f6 100644
--- a/src/components/QuickAdd/AddEditProfiles/editSocialProfile.vue
+++ b/src/components/QuickAdd/AddEditProfiles/editSocialProfile.vue
@@ -6,11 +6,11 @@
         :prepend-icon="iconName"
         :label="labelName"
         large
-        v-model="tempValueTextField"
+        v-model="valueTextfield"
       >
         <template v-slot:prepend></template>
         <template v-slot:append-outer>
-          <v-btn text  @click="updateSocialMediaProfile(valueBeforeFilter, tempValueTextField)">
+          <v-btn text  @click="updateSocialMediaProfile(valueBeforeFilter, valueTextfield)">
             <v-icon left>fas fa-edit</v-icon>Update
           </v-btn>
           <v-btn color="red" fab x-small dark @click="deleteSocialMediaProfile()">
@@ -44,11 +44,8 @@ export default {
     "valueTextfield",
     "valueBeforeFilter",
     "docId",
+    "index",
   ],
-  beforeMount() {
-    this.tempValueTextField = this.valueTextfield;
-  },
-
   methods: {
     //Twitter
     //Tik Tok
@@ -81,7 +78,11 @@ export default {
       store.dispatch("updateSocialProfile", this.tempSocialLink);
     },
     deleteSocialMediaProfile(){
-      store.dispatch("deleteSocialMediaProfile", this.docId);
+      var tempIndex = this.index;
+      var tempDocId = this.docId
+      var payload = { tempIndex, tempDocId }
+      store.dispatch("deleteSocialMediaProfile", payload);
+      //console.log("index(edit comp): " + this.index)
     }
   },
 };
diff --git a/src/components/QuickAdd/quickAdd.vue b/src/components/QuickAdd/quickAdd.vue
index 7d7f1cb..b378b4c 100644
--- a/src/components/QuickAdd/quickAdd.vue
+++ b/src/components/QuickAdd/quickAdd.vue
@@ -5,38 +5,53 @@
       <v-card-text>
         <div class="display-1 text--primary">Edit your profiles</div>
       </v-card-text>
-      <v-container v-for="_userLinks in userLinks" :key="_userLinks.message">
+      <v-container
+        v-for="_userLinks in this.userLinks"
+        :key="_userLinks.message"
+      >
         <EditSocialProfile
-          v-if="_userLinks.iconButton == 'Instagram' "
+          v-if="_userLinks.iconButton == 'Instagram'"
           labelName=" Edit your Instagram username"
           iconName="mdi-instagram"
-          :valueTextfield="_userLinks.linkUrl | showUsernameOnly(_userLinks.linkUrl)"
+          :valueTextfield="
+            _userLinks.linkUrl | showUsernameOnly(_userLinks.linkUrl)
+          "
           :valueBeforeFilter="_userLinks.linkUrl"
           :docId="_userLinks.docId"
+          :index="userLinks.findIndex((x) => x.linkUrl === _userLinks.linkUrl)"
         />
         <EditSocialProfile
-          v-if="_userLinks.iconButton == 'Facebook' "
+          v-if="_userLinks.iconButton == 'Facebook'"
           labelName=" Edit your Facebook username"
           iconName="mdi-facebook"
-          :valueTextfield="_userLinks.linkUrl | showUsernameOnly(_userLinks.linkUrl)"
+          :valueTextfield="
+            _userLinks.linkUrl | showUsernameOnly(_userLinks.linkUrl)
+          "
           :valueBeforeFilter="_userLinks.linkUrl"
           :docId="_userLinks.docId"
+          :index="userLinks.findIndex((x) => x.linkUrl === _userLinks.linkUrl)"
         />
         <EditSocialProfile
-          v-if="_userLinks.iconButton == 'Twitter' "
+          v-if="_userLinks.iconButton == 'Twitter'"
           labelName=" Edit your Twitter username"
           iconName="mdi-twitter"
-          :valueTextfield="_userLinks.linkUrl | showUsernameOnly(_userLinks.linkUrl)"
+          :valueTextfield="
+            _userLinks.linkUrl | showUsernameOnly(_userLinks.linkUrl)
+          "
           :valueBeforeFilter="_userLinks.linkUrl"
           :docId="_userLinks.docId"
+          :index="userLinks.findIndex((x) => x.linkUrl === _userLinks.linkUrl)"
         />
         <EditSocialProfile
-          v-if="_userLinks.iconButton == 'Tik Tok' "
+          v-if="_userLinks.iconButton == 'Tik Tok'"
           labelName=" Edit your Tik Tok username"
           iconName="fab fa-tiktok"
-          :valueTextfield="_userLinks.linkUrl | showUsernameOnlyTikTok(_userLinks.linkUrl)"
+          :valueTextfield="
+            _userLinks.linkUrl | showUsernameOnlyTikTok(_userLinks.linkUrl)
+          "
           :valueBeforeFilter="_userLinks.linkUrl"
           :docId="_userLinks.docId"
+          :index="userLinks.findIndex((x) => x.linkUrl === _userLinks.linkUrl)"
         />
       </v-container>
     </v-card>
@@ -45,15 +60,27 @@
     <v-card class="mx-auto" outlined>
       <v-card-text>
         <div class="display-1 text--primary">Quick add</div>
-        <div
-          class="display-6 text--primary"
-        >No need to add all of them, this is to make your life easier</div>
+        <div class="display-6 text--primary">
+          No need to add all of them, this is to make your life easier
+        </div>
       </v-card-text>
       <v-container>
-        <AddSocialProfile labelName=" Enter Instagram username" iconName="mdi-instagram" />
-        <AddSocialProfile labelName=" Enter Facebook username" iconName="mdi-facebook" />
-        <AddSocialProfile labelName=" Enter Twitter username" iconName="mdi-twitter" />
-        <AddSocialProfile labelName=" Enter Tik Tok username" iconName="fab fa-tiktok" />
+        <AddSocialProfile
+          labelName=" Enter Instagram username"
+          iconName="mdi-instagram"
+        />
+        <AddSocialProfile
+          labelName=" Enter Facebook username"
+          iconName="mdi-facebook"
+        />
+        <AddSocialProfile
+          labelName=" Enter Twitter username"
+          iconName="mdi-twitter"
+        />
+        <AddSocialProfile
+          labelName=" Enter Tik Tok username"
+          iconName="fab fa-tiktok"
+        />
       </v-container>
     </v-card>
   </v-col>
@@ -69,6 +96,7 @@ export default {
 
   data: () => ({
     showEditProfileCard: false,
+    tempUserLinks: null,
   }),
   components: {
     AddSocialProfile,
diff --git a/src/store.js b/src/store.js
index e901632..76dad71 100644
--- a/src/store.js
+++ b/src/store.js
@@ -133,6 +133,7 @@ export const store = new Vuex.Store({
                             self.commit("setSearchedUserBackgroundColour", tempUserDetails.background_colour);
                             state.searchedUser.buttons_colour = tempUserDetails.buttons_colour
                             state.searchedUser.font = tempUserDetails.font
+                            console.log("fontsss " + tempUserDetails.font)
                             self.commit("setSearchedUserFont", tempUserDetails.font)
                             self.dispatch("incrementViews")
                             fb.storage
@@ -150,7 +151,7 @@ export const store = new Vuex.Store({
                                                 .ref("profileImages/" + doc.id + "_200x200")
                                                 .getDownloadURL().then(function (url) {
                                                     // Insert url into an <img> tag to "download"
-                                                    console.log("url " + url)
+                                                    //console.log("url " + url)
                                                     state.searchedUser.userProfileImage = url;
                                                 }).catch(function (error) {
                                                     state.searchedUser.userProfileImage = "https://firebasestorage.googleapis.com/v0/b/ziplinks-c8231.appspot.com/o/profileNotSet_200x200.png?alt=media&token=230f8b72-af01-4548-839e-e49c42a2778d";
@@ -218,12 +219,14 @@ export const store = new Vuex.Store({
                         })
                         .then(() => {
 
+                            socialLink.docId = docRef.id
                             // Add the new Social profile into userLinks array
-                            state.userLinks.push(socialLink);
+                            //state.userLinks.push(socialLink);
+                            commit("setUserLinks", socialLink)
                             // Show Edit Card just in case
-                            this.commit("setEditYourProfilesBool", true);
+                            commit("setEditYourProfilesBool", true);
                             // Stop loading  
-                            this.commit("setLoadingLink", false)
+                            commit("setLoadingLink", false)
 
                         });
                 })
@@ -248,33 +251,35 @@ export const store = new Vuex.Store({
                 })
                 .catch((err) => {
                     console.log(err);
+                    this.commit("setLoadingLink", false)
                 });
         },
-        deleteSocialMediaProfile({ commit, state }, docId) {
+        deleteSocialMediaProfile({ commit, state }, payload) {
+
             //Start spinner
             this.commit("setLoadingLink", true)
-
             firebase
                 .firestore()
                 .collection("users/")
                 .doc(state.currentUser.uid)
                 .collection("links")
-                .doc(docId)
+                .doc(payload.tempDocId)
                 .delete()
-                .then(() => {
-                    this.commit("setLoadingLink", false)
-                    state.userLinks.forEach(function (arrayItem, index) {
-                        if (arrayItem.docId === docId)
-                            state.userLinks.splice(index, 1);
-                    });
+                .then(() => {            
+                    state.userLinks.splice(payload.tempIndex, 1);
+                    commit("setLoadingLink", false)
+                    if(state.userLinks.length == 0 || state.userLinks === undefined)
+                        this.commit("setEditYourProfilesBool", false);
+                    
                 })
                 .catch((err) => {
+                    this.commit("setLoadingLink", false)
                     console.log(err);
                 });
         },
         editUsername({ commit, state }, username) {
+            // Start Loading 
             commit("setLoadingLink", true)
-            console.log("edit username " + username)
             fb.usersCollection
                 .where("username_lowercase", "==", username)
                 .get()
@@ -288,8 +293,8 @@ export const store = new Vuex.Store({
                             }, { merge: true })
                             .then(() => {
                                 //Stop loading
+                                state.userProfile.username = username
                                 commit("setLoadingLink", false)
-                                window.location.reload()
                             })
                             .catch((err) => {
                                 console.log(err);
@@ -344,22 +349,18 @@ export const store = new Vuex.Store({
                 });
 
         },
-        incrementViews({ commit, state } ) {
+        incrementViews({ commit, state }) {
             fb.usersCollection
-                .doc( state.searchedUser.userID)
+                .doc(state.searchedUser.userID)
                 .set({
                     views: firebase.firestore.FieldValue.increment(1)
                 }, { merge: true })
-                .then(() => {
-                    //add one to views
-                    // console.log("Added one to views")
-                })
                 .catch((err) => {
                     console.log(err);
                 });
         },
         addUpdateFont({ commit, state }, font) {
-            //Start the loading
+            //Start loading
             commit("setLoadingLink", true)
             fb.usersCollection
                 .doc(state.currentUser.uid)
@@ -368,7 +369,6 @@ export const store = new Vuex.Store({
                 }, { merge: true })
                 .then(() => {
                     commit("setSearchedUserFont", font)
-                    console.log(font)
                     //Stop loading
                     commit("setLoadingLink", false)
                 })
@@ -454,7 +454,7 @@ export const store = new Vuex.Store({
             if (val) {
                 state.searchedUser.font = val
             } else {
-                state.searchedUser.font = null
+                state.searchedUser.font = ""
             }
 
         },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f8506b0..a1b0f35 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,7 +3,11 @@
     <br />
     <div class="text-center">
       <h1 class="display-1">@{{ userProfile.username }}</h1>
-      <center>
+      <v-btn class="mx-2" fab dark small color="primary" @click="showEditUsername = !showEditUsername">
+        <v-icon>mdi-pencil</v-icon>
+      </v-btn>
+      <br>
+      <center v-if="showEditUsername">
         <EditUsername />
       </center>
       <br />
@@ -266,6 +270,7 @@ export default {
   name: "Home",
   data: () => ({
     showForm: true,
+    showEditUsername: false,
     lazy: false,
     valid: false,
     validAddLink: true,
@@ -475,12 +480,10 @@ export default {
           console.log("Upload is " + progress + "% done");
 
           if (progress == 100) {
-            
-              setTimeout(() => {
-                // Upload completed successfully, now we can get the download URL
-              store.dispatch("updateImageRef")
-              }, 3000);
-            
+            setTimeout(() => {
+              // Upload completed successfully, now we can get the download URL
+              store.dispatch("updateImageRef");
+            }, 3000);
           }
         },
         function (error) {
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 1b5d95e..4541181 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -37,7 +37,7 @@
         <br />
 
         <h1
-          v-if="!this.linksLoaded && this.searchedUser.userExist && this.mounted" :style="'font-family:'+searchedUser.font === 'null' ? searchedUser.font : '' +';color:'+searchedUser.buttons_colour "
+          v-if="!this.linksLoaded && this.searchedUser.userExist && this.mounted" :style="'font-family:'+ searchedUser.font +';color:'+searchedUser.buttons_colour "
         >@{{searchedUser.username}}</h1>
         <h1 class="display-1" v-else-if="!this.linksLoaded">
           This user
@@ -53,7 +53,7 @@
             outlined
             :href="userLinks.linkUrl"
             target="_blank"
-            :style="'font-family:'+searchedUser.font"
+            :style="'font-family:'+ searchedUser.font "
           >
             <v-icon left large v-if="userLinks.iconButton == 'Snapchat'">mdi-snapchat</v-icon>
             <v-icon left large v-if="userLinks.iconButton == 'Facebook'">mdi-facebook</v-icon>
@@ -98,6 +98,7 @@ export default {
   data: () => ({
     mounted: false,
     tempColour: "#FFFFFF",
+    tempFont: "",
   }),
   computed: {
     ...mapState([
@@ -124,12 +125,13 @@ export default {
         this.tempColour = "#" + this.searchedUser.background_colour;
       }
     }
-    
   },
   mounted() {
     this.mounted = true;
     this.$store.commit("setSearchedUserUsername", this.$route.params.id);
     this.$store.dispatch("fetchUserFromLinkOrSearchBar");
+
+    
   },
   created() {
     firebase.analytics().logEvent("profile",{