Refetch product after submitting comment

frontend/components/product/ProductComments.vue

@@ -5,6 +5,7 @@ import useGetComments from "~/composables/api/product/useGetComments";
 import useCreateComment from "~/composables/api/product/useCreateComment";
 import useRateProduct from "~/composables/api/product/useRateProduct";
 import { useAuth } from "~/composables/api/auth/useAuth";
+import useGetProduct from "~/composables/api/product/useGetProduct";
 
 // props
 
@@ -28,6 +29,7 @@ const selectedRating = ref(5);
 const showMoreComments = ref(false);
 
 const { data: comments, refetch: refetchComments } = useGetComments(id);
+const { refetch: refetchProduct } = useGetProduct(id);
 const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
 const { mutateAsync: rateProduct, isPending: isRateProductPending } = useRateProduct(props.product.slug);
 
@@ -80,6 +82,7 @@ const submitComment = async () => {
     userComment.value = "";
     selectedRating.value = 5;
 
+    await refetchProduct();
     await refetchComments();
 };
 
@@ -112,61 +115,66 @@ const limitedComments = computed(() => {
                     @submit.prevent="submitComment"
                     class="flex flex-col gap-6"
                 >
-                    <div
+                    <div v-if="token">
-                        v-if="hasUserRated"
+                        <div
-                        class="flex flex-col gap-3 px-4 py-3 bg-white rounded-lg border border-slate-300"
+                            v-if="hasUserRated"
-                    >
+                            class="flex flex-col gap-3 px-4 py-3 bg-white rounded-lg border border-slate-300"
-                        <div class="flex flex-col gap-2">
+                        >
-                            <span class="typo-p-xs text-slate-700 font-semibold">امتیاز قبلی شما</span>
+                            <div class="flex flex-col gap-2">
+                                <span class="typo-p-xs text-slate-700 font-semibold">امتیاز قبلی شما</span>
+                                <div class="flex items-center gap-1">
+                                    <button
+                                        v-for="star in 5"
+                                        :key="`prev-${star}`"
+                                        type="button"
+                                        disabled
+                                        class="size-9 rounded-full flex-center cursor-not-allowed opacity-75"
+                                        :class="
+                                            star <= (props.product.user_rating || 0) ? 'bg-amber-50' : 'bg-slate-50'
+                                        "
+                                    >
+                                        <Icon
+                                            name="ci:star-solid"
+                                            class="size-5"
+                                            :class="
+                                                star <= (props.product.user_rating || 0)
+                                                    ? '**:fill-yellow-500'
+                                                    : '**:fill-slate-300'
+                                            "
+                                        />
+                                    </button>
+                                    <span class="typo-p-sm font-semibold text-slate-600 mr-2">{{
+                                        props.product.user_rating
+                                    }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            v-else
+                            class="flex flex-col gap-2"
+                        >
+                            <span class="typo-p-sm text-slate-500">امتیاز شما</span>
                             <div class="flex items-center gap-1">
                                 <button
                                     v-for="star in 5"
-                                    :key="`prev-${star}`"
+                                    :key="star"
                                     type="button"
-                                    disabled
+                                    class="size-9 rounded-full flex-center transition-colors"
-                                    class="size-9 rounded-full flex-center cursor-not-allowed opacity-75"
+                                    :class="star <= selectedRating ? 'bg-amber-50' : 'bg-slate-50'"
-                                    :class="star <= (props.product.user_rating || 0) ? 'bg-amber-50' : 'bg-slate-50'"
+                                    :disabled="!token || isCreateCommentPending || isRateProductPending"
+                                    @click="selectedRating = star"
                                 >
                                     <Icon
                                         name="ci:star-solid"
                                         class="size-5"
-                                        :class="
+                                        :class="star <= selectedRating ? '**:fill-yellow-500' : '**:fill-slate-300'"
-                                            star <= (props.product.user_rating || 0)
-                                                ? '**:fill-yellow-500'
-                                                : '**:fill-slate-300'
-                                        "
                                     />
                                 </button>
-                                <span class="typo-p-sm font-semibold text-slate-600 mr-2">{{
+                                <span class="typo-p-sm font-semibold text-slate-500 mr-2">{{ selectedRating }}</span>
-                                    props.product.user_rating
-                                }}</span>
                             </div>
                         </div>
                     </div>
-                    <div
+
-                        v-else
-                        class="flex flex-col gap-2"
-                    >
-                        <span class="typo-p-sm text-slate-500">امتیاز شما</span>
-                        <div class="flex items-center gap-1">
-                            <button
-                                v-for="star in 5"
-                                :key="star"
-                                type="button"
-                                class="size-9 rounded-full flex-center transition-colors"
-                                :class="star <= selectedRating ? 'bg-amber-50' : 'bg-slate-50'"
-                                :disabled="!token || isCreateCommentPending || isRateProductPending"
-                                @click="selectedRating = star"
-                            >
-                                <Icon
-                                    name="ci:star-solid"
-                                    class="size-5"
-                                    :class="star <= selectedRating ? '**:fill-yellow-500' : '**:fill-slate-300'"
-                                />
-                            </button>
-                            <span class="typo-p-sm font-semibold text-slate-500 mr-2">{{ selectedRating }}</span>
-                        </div>
-                    </div>
                     <Input
                         v-model="userTitle"
                         :disabled="!token"
@@ -196,7 +204,7 @@ const limitedComments = computed(() => {
                             type="button"
                             class="rounded-full w-full"
                         >
-                            وارد شوید
+                            برای ثبت نظر وارد شوید
                         </Button>
                     </NuxtLink>
                 </form>