Added base for saved icons work

elsiehupp · Oct 22, 2021 · 4eefb25 · 4eefb25
1 parent 883d341
commit 4eefb25
Show file tree

Hide file tree

Showing 12 changed files with 17,589 additions and 55 deletions.
diff --git a/website/macos-big-sur-icons/package-lock.json b/website/macos-big-sur-icons/package-lock.json
diff --git a/website/macos-big-sur-icons/src/assets/icons/Category_Icons/Heart_Filled.svg b/website/macos-big-sur-icons/src/assets/icons/Category_Icons/Heart_Filled.svg
diff --git a/website/macos-big-sur-icons/src/assets/icons/Category_Icons/Heart_Thick.svg b/website/macos-big-sur-icons/src/assets/icons/Category_Icons/Heart_Thick.svg
diff --git a/website/macos-big-sur-icons/src/components/Header.vue b/website/macos-big-sur-icons/src/components/Header.vue
@@ -122,7 +122,6 @@
                                     target="_blank"
                                     class="m-b-10"
                                     href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
-                                    @click="logDonation('header')"
                                 >
                                     <button is="coral-button" variant="cta">
                                         <span>Donate</span>
@@ -352,7 +351,7 @@ export default {
     },
 
     methods:{
-        ...mapActions(['showEl', "logOut", "changePath"]),
+        ...mapActions(['showEl', "logOut", "changePath", "pushDataToArr"]),
 
         toggleOverlay(){
             let parent = this
@@ -418,7 +417,7 @@ export default {
 
     },
 
-    mounted: function(){
+    mounted: async function(){
         let parent = this
 
         // Scroll listener to add/remove nav meny shadow

diff --git a/website/macos-big-sur-icons/src/components/Hero.vue b/website/macos-big-sur-icons/src/components/Hero.vue
@@ -72,7 +72,6 @@
               class="p-l-20"
               target="_blank"
               href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
-              @click="logDonation('hero')"
             >
               <button
                 is="coral-button"

diff --git a/website/macos-big-sur-icons/src/components/Home.vue b/website/macos-big-sur-icons/src/components/Home.vue
@@ -294,7 +294,6 @@
               rel="noopener"
               target="_blank"
               style="width: 100%; left: 0;"
-              @click="logDonation('support-message')"
             >
               <div class="support-page">
                 <h3 class="coral-Heading--S m-0">
@@ -524,12 +523,11 @@ export default {
     }
   },
 
-  mounted: function(){
+  mounted: async function(){
     let parent = this;
     parent.getAd()
-    const { getters } = parent.$store;
+
     let fullPath = parent.$route.fullPath
-    
     let currentUser = Parse.User.current()
 
     if (fullPath.includes("/?username=") && !currentUser) {
@@ -572,7 +570,16 @@ export default {
       }
     }
 
-    parent.getIconsArray();
+    // If user is logged in, get the user's favorites icons
+    if(currentUser){
+      currentUser.relation("favIcons").query().find().then((data) =>{
+          let savedIcons = data.map(({ id }) => id);
+        parent.pushDataToArr({ data: savedIcons, arr: "savedIcons" })
+        parent.getIconsArray();
+      })
+    } else{
+      parent.getIconsArray();
+    }
 
   },
 
@@ -586,7 +593,8 @@ export default {
         'setData',
         'loadMoreIcons',
         'algoliaSearch',
-        'scrollTo'
+        'scrollTo',
+        'pushDataToArr'
       ]),
 
     scrollEl(id, top, left){
@@ -840,12 +848,9 @@ export default {
           parent.iconListLen = count
         })
         
-        // console.log("2");
         parent.setData({state: 'list', data: []})
-        
-        var userInfo = {}
-        
         var allIcons = []
+
         for(let result in results){
 
           let iconItem = results[result]
@@ -857,7 +862,12 @@ export default {
             iconData[data] = objData[data]
           }
           iconData.id = results[result].id
-          
+
+          console.log(iconData.id, ": ", parent.getSavedIcons.includes(iconData.id));
+
+          // Check if icon has been saved by the user
+          iconData.isSaved = parent.getSavedIcons.includes(iconData.id)
+
           allIcons.push(iconData)
         }
         parent.$store.dispatch("pushDataToArr", {data:  allIcons, arr: "list", concatArray: true});
@@ -982,7 +992,7 @@ export default {
   },
 
   computed:{
-    ...mapGetters(['getUser', 'getAppCategories', 'getIconType', 'selectedIcons', 'getSelectedCategory']),
+    ...mapGetters(['getUser', 'getAppCategories', 'getIconType', 'selectedIcons', 'getSelectedCategory', 'getSavedIcons']),
 
     isMobile(){
       let parent = this;

diff --git a/website/macos-big-sur-icons/src/components/StickyBanner.vue b/website/macos-big-sur-icons/src/components/StickyBanner.vue
@@ -22,7 +22,6 @@
             rel="noopener"
             target="_blank"
             style="width: 100%; left: 0;"
-            @click="logDonation('support-message')"
           >
             <div class="support-page">
               <h3 class="coral-Heading--S m-0">

diff --git a/website/macos-big-sur-icons/src/components/UserIconCard.vue b/website/macos-big-sur-icons/src/components/UserIconCard.vue
@@ -1,6 +1,18 @@
 <template>
     <div :label="icon.appName.replaceAll('_', ' ') + 'Icon'" class="card-wrapper card-hover coral-card m-0">
         <div class="m-auto">
+
+            <!-- <div
+                v-if="!icon.isSaved"
+                @click="saveIcon()"
+                class="opacity-0 save-icon icon-heart"
+            />
+
+            <div
+                v-else
+                @click="saveIcon()"
+                class="save-icon icon-heart-filled"
+            /> -->
 
             <!-- Icon image -->
             <div class="card-img-wrapper" style="max-width: 120px;">
@@ -100,10 +112,14 @@ export default {
                 download: require("../assets/icons/Download.svg"),
                 placeholderIcon: require("../assets/placeholder-icon.png"),
             },
+            icons:{
+                Heart: require("../assets/icons/Category_Icons/Heart.svg"),
+            },
             dialog:{
                 editIcon: false,
                 deleteIcon: false
-            }
+            },
+            isSaved: false
         }
     },
     
@@ -172,6 +188,29 @@ export default {
             })
         },
 
+        async saveIcon(){
+            let parent = this
+            let icon = parent.icon
+            var Icons = Parse.Object.extend("Icons2");
+            var User = Parse.Object.extend("User");
+            let iconQuery = new Parse.Query(Icons);
+
+
+            icon = await iconQuery.get(icon.id)
+            let userRelation = Parse.User.current().relation("favIcons")
+            userRelation.add(icon)
+            
+            // console.log("icon: ", Parse.User.current().get("favIcons"));
+
+            Parse.User.current().save().then((data) =>{
+                // console.log("icon: ", data);
+                parent.isSaved = true
+                console.log("SAVED!!!");
+            }).catch((e) =>{
+                console.log("ERROR: ", e);
+            })
+        },
+
     },
 
     computed:{

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -1009,7 +1009,38 @@ coral-buttongroup button{
     border-color: rgb(225, 225, 225);
     border-radius: var(--main-border-radius);
     margin: auto;
-    // max-height: 240px;
+
+    &:hover .save-icon{
+        opacity: 1;
+    }
+}
+
+.icon-heart{
+    background-image: url('~@/assets/icons/Category_Icons/Heart.svg');
+    background-position: 8px 8px;
+    background-repeat: no-repeat;
+
+    &:hover{
+        background-image: url('~@/assets/icons/Category_Icons/Heart_Thick.svg');
+    }
+}
+
+.icon-heart-filled{
+    background-image: url('~@/assets/icons/Category_Icons/Heart_Filled.svg');
+    background-position: 8px 8px;
+    background-repeat: no-repeat;
+}
+
+.save-icon{
+    position: absolute;
+    padding: 8px;
+    top: 0px;
+    left: 0px;
+    height: 16px;
+    width: 16px;
+    z-index: 1;
+    cursor: pointer;
+    transition: 0.2s;
 }
 
 .card-text-wrapper{

diff --git a/website/macos-big-sur-icons/src/components/iconCard.vue b/website/macos-big-sur-icons/src/components/iconCard.vue
@@ -6,7 +6,7 @@
                 <div v-lazy-container="{ selector: 'img', loading: coralIcons.loading }">
                     <img class="w-full" :data-src="icon.pngUrl">
                 </div>
-Hi
+                
                 <coral-quickactions placement="center" target="_prev">
                     <coral-quickactions-item type="button" @click="showDialog('deleteDialog', icon)" :id="icon.fileName" :icon="coralIcons.delete">Remove file</coral-quickactions-item>
                 </coral-quickactions>

diff --git a/website/macos-big-sur-icons/src/store/store.js b/website/macos-big-sur-icons/src/store/store.js
@@ -41,6 +41,8 @@ export default new Vuex.Store({
       twitterHandle: "",
       username: ""
     },
+    savedIcons: [],
+
     userData: Parse.User.current(),
 
     loading: true,
@@ -240,6 +242,10 @@ export default new Vuex.Store({
         store.dispatch('algoliaSearch')
       }
 
+      // if(category.id == 'downloads'){
+
+      // }
+
       if (category.id != "All" && !sameCategory) {
         store.commit('setDataToArr', {arr: 'dataToShow', data: [], concatArray: false})
 
@@ -724,7 +730,13 @@ export default new Vuex.Store({
 
     isLoading(store){
       return store.loading
+    },
+
+    getSavedIcons(store){
+      return store.savedIcons
     }
+
+
   }
 
 })
diff --git a/website/macos-big-sur-icons/src/views/Resources.vue b/website/macos-big-sur-icons/src/views/Resources.vue
@@ -33,7 +33,6 @@
               rel="noopener"
               target="_blank"
               style="width: 100%; left: 0;"
-              @click="logDonation('support-message')"
             >
               <div class="support-page">
                 <h3 class="coral-Heading--S m-0">