show only 1 like button if any clicked

Author: supalarry

frontend/src/components/app/users/LikeButton.vue

@@ -3,7 +3,7 @@
   <div class="w-full">
     <div @mouseover="hover = true"
          @mouseleave="hover = false"
-         @click="clicked = !clicked"
+         @click="toggle()"
          class="w-full flex justify-center items-center bg-purple-matcha py-4 rounded-lg cursor-pointer">
       <img v-bind:src="getImage" class="h-8">
       <h1 class="text-white-matcha text-2xl ml-2 font-bold">{{getText}}</h1>
@@ -21,6 +21,16 @@ export default {
     hover: false,
     clicked: false,
   }),
+  methods: {
+    toggle() {
+      this.clicked = !this.clicked;
+      if (this.clicked) {
+        this.$emit('clicked');
+      } else {
+        this.$emit('revert');
+      }
+    },
+  },
   computed: {
     getImage() {
       if (this.clicked) {

frontend/src/components/app/users/UserProfile.vue

@@ -34,19 +34,25 @@
     </div>
     <div class="text-center flex flex-col mx-auto p-8 border-b">
       <LikeButton
+        v-if="!likeButtons.superLikeClicked"
         v-bind:startImage="likeImage"
         v-bind:hoverImage="likeImageHover"
         v-bind:clickedImage="likeImageClicked"
         v-bind:text="'Like'"
-        v-bind:textRevert="'Unlike'"></LikeButton>
+        v-bind:textRevert="'Unlike'"
+        v-on:clicked="likeButtons.likeClicked = true"
+        v-on:revert="likeButtons.likeClicked = false"></LikeButton>
       <LikeButton
-        class="mt-8"
+        v-if="!likeButtons.likeClicked && superLikesLeft()"
+        v-bind:class="{'mt-8': !likeButtons.superLikeClicked}"
         v-bind:startImage="superLikeImage"
         v-bind:hoverImage="superLikeImageHover"
         v-bind:clickedImage="superLikeImageClicked"
         v-bind:text="'Super Like'"
         v-bind:textRevert="'Unlike'"
-        v-bind:description="`Worth 10 likes, and ${user.first_name} sees your extra interest`"></LikeButton>
+        v-bind:description="`Worth 10 likes, and ${user.first_name} sees your extra interest`"
+        v-on:clicked="likeButtons.superLikeClicked = true"
+        v-on:revert="likeButtons.superLikeClicked = false"></LikeButton>
     </div>
     <div class="text-center p-8 border-b relative">
       <DropdownDisplayChoice
@@ -88,6 +94,10 @@ export default {
     superLikeImage,
     superLikeImageHover,
     superLikeImageClicked,
+    likeButtons: {
+      likeClicked: false,
+      superLikeClicked: false,
+    },
   }),
   methods: {
     preferences() {
@@ -111,6 +121,9 @@ export default {
       }
       return 'any gender';
     },
+    superLikesLeft() {
+      return true;
+    },
     saveSingleChoice(...args) {
       const [key, value] = args;
       console.log(key);