fix(storefront): 🐛 fixed not authenticated error on product review

sahrohit · Aug 7, 2023 · a52ef49 · a52ef49
1 parent 84379bb
commit a52ef49
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/apps/storefront/src/components/pages/product/review/ProductReview.tsx b/apps/storefront/src/components/pages/product/review/ProductReview.tsx
@@ -15,6 +15,7 @@ import {
 	ProductReview as IProductReview,
 	ReviewSummaryResponse,
 	useAllReviewsQuery,
+	useMeQuery,
 	useReviewByUserAndProductQuery,
 	useReviewSummaryQuery,
 	useReviewsQuery,
@@ -232,10 +233,12 @@ interface ReviewFormProps extends ButtonProps {
 
 export const CreateReviewButton = ({ productId, ...rest }: ReviewFormProps) => {
 	const modalRef: any = useRef();
+	const { data: user, loading: userLoading, error: userError } = useMeQuery();
 	const { data, loading, error } = useReviewByUserAndProductQuery({
 		variables: {
 			productId,
 		},
+		skip: !user?.me?.id,
 	});
 
 	const closeModal = () => {
@@ -244,21 +247,25 @@ export const CreateReviewButton = ({ productId, ...rest }: ReviewFormProps) => {
 		}
 	};
 
-	if (loading) {
+	if (loading || userLoading) {
 		return (
 			<Button colorScheme="blue" px={12} size="xl" isLoading>
 				Write a review
 			</Button>
 		);
 	}
 
-	if (error)
+	if (!userLoading && !user?.me?.id) {
+		return null;
+	}
+
+	if (error || userError)
 		return (
 			<Result
-				heading={error.name}
+				heading={error ? error.name : userError?.name!}
 				type="error"
-				text={error.message}
-				dump={error.stack}
+				text={error ? error.message : userError?.message!}
+				dump={error ? error.stack : userError?.stack}
 			/>
 		);
 

diff --git a/apps/storefront/src/pages/products/favourite.tsx b/apps/storefront/src/pages/products/favourite.tsx
@@ -7,6 +7,7 @@ import Rating from "@/components/shared/product/Rating";
 import {
 	Favourite,
 	useFavouritesWithProductQuery,
+	useMeQuery,
 	useRemoveFromFavouriteMutation,
 } from "@/generated/graphql";
 import {
@@ -29,15 +30,18 @@ import Image from "next/image";
 import services from "../../../public/assets/services.svg";
 
 const FavouritePage = () => {
-	const { data, loading, error } = useFavouritesWithProductQuery();
+	const { data: user, loading: userLoading, error: userError } = useMeQuery();
+	const { data, loading, error } = useFavouritesWithProductQuery({
+		skip: !user?.me?.id,
+	});
 
-	if (error) {
+	if (error || userError) {
 		return (
 			<Result
-				heading={error.name}
+				heading={error ? error.name : userError?.name!}
 				type="error"
-				text={error.message}
-				dump={error.stack}
+				text={error ? error.message : userError?.message!}
+				dump={error ? error.stack : userError?.stack}
 			/>
 		);
 	}
@@ -63,7 +67,7 @@ const FavouritePage = () => {
 					rowGap={{ base: "8", md: "10" }}
 				>
 					{/* eslint-disable-next-line no-nested-ternary */}
-					{loading ? (
+					{loading || userLoading ? (
 						Array(4)
 							.fill("favourite-skeleton")
 							.map((mock, index) => (