feat: User-specific Recipe Ratings (#3345)

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -1,34 +1,35 @@
 <template>
   <div @click.prevent>
-    <v-rating
-      v-model="rating"
-      :readonly="!isOwnGroup"
-      color="secondary"
-      background-color="secondary lighten-3"
-      length="5"
-      :dense="small ? true : undefined"
-      :size="small ? 15 : undefined"
-      hover
-      :value="value"
-      clearable
-      @input="updateRating"
-      @click="updateRating"
-    ></v-rating>
+    <v-hover v-slot="{ hover }">
+      <v-rating
+        :value="rating.ratingValue"
+        :half-increments="(!hover) || (!isOwnGroup)"
+        :readonly="!isOwnGroup"
+        :color="hover ? attrs.hoverColor : attrs.color"
+        :background-color="attrs.backgroundColor"
+        length="5"
+        :dense="small ? true : undefined"
+        :size="small ? 15 : undefined"
+        hover
+        clearable
+        @input="updateRating"
+        @click="updateRating"
+      />
+    </v-hover>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext, watch } from "@nuxtjs/composition-api";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
-import { useUserApi } from "~/composables/api";
+import { useUserSelfRatings } from "~/composables/use-users";
 export default defineComponent({
   props: {
     emitOnly: {
       type: Boolean,
       default: false,
     },
-    // TODO Remove name prop?
-    name: {
+    recipeId: {
       type: String,
       default: "",
     },
@@ -44,26 +45,79 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    preferGroupRating: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, context) {
+    const { $auth } = useContext();
     const { isOwnGroup } = useLoggedInState();
+    const { userRatings, setRating, ready: ratingsLoaded } = useUserSelfRatings();
+    const hideGroupRating = ref(false);
 
-    const rating = ref(props.value);
+    type Rating = {
+      ratingValue: number | undefined;
+      hasUserRating: boolean | undefined
+    };
 
-    const api = useUserApi();
-    function updateRating(val: number | null) {
-      if (val === 0) {
-        val = null;
+    // prefer user rating over group rating
+    const rating = computed<Rating>(() => {
+      if (!ratingsLoaded.value) {
+        return { ratingValue: undefined, hasUserRating: undefined };
       }
+      if (!($auth.user?.id) || props.preferGroupRating) {
+        return { ratingValue: props.value, hasUserRating: false };
+      }
+
+      const userRating = userRatings.value.find((r) => r.recipeId === props.recipeId);
+      return {
+        ratingValue: userRating?.rating || (hideGroupRating.value ? 0 : props.value),
+        hasUserRating: !!userRating?.rating
+      };
+    });
+
+    // if a user unsets their rating, we don't want to fall back to the group rating since it's out of sync
+    watch(
+      () => rating.value.hasUserRating,
+      () => {
+        if (rating.value.hasUserRating && !props.preferGroupRating) {
+          hideGroupRating.value = true;
+        }
+      },
+    )
+
+    const attrs = computed(() => {
+      return isOwnGroup.value ? {
+        // Logged-in user
+        color: rating.value.hasUserRating ? "secondary" : "grey darken-1",
+        hoverColor: "secondary",
+        backgroundColor: "secondary lighten-3",
+      } : {
+        // Anonymous user
+        color: "secondary",
+        hoverColor: "secondary",
+        backgroundColor: "secondary lighten-3",
+      };
+    })
+
+    function updateRating(val: number | null) {
+      if (!isOwnGroup.value) {
+        return;
+      }
+
       if (!props.emitOnly) {
-        api.recipes.patchOne(props.slug, {
-          rating: val,
-        });
+        setRating(props.slug, val || 0, null);
       }
       context.emit("input", val);
     }
 
-    return { isOwnGroup, rating, updateRating };
+    return {
+      attrs,
+      isOwnGroup,
+      rating,
+      updateRating,
+    };
   },
 });
 </script>