[SBS-4][SBS-27] api: call api list review"

app/components/Rating.tsx

@@ -1,21 +1,40 @@
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
 import { View, TouchableOpacity, TextStyle, ViewStyle } from "react-native";
 import { Text } from "app/components";
 import { colors, spacing } from "app/theme";
 import { useNavigation } from "@react-navigation/native";
 import StarRating from "react-native-star-rating-widget";
+import type { Review } from "app/types";
+import { api } from "../services/api";
 
-interface RatingProps {}
+export interface RatingProps {
+  productId: string;
+}
 
-
-const Rating: React.FC<RatingProps> = () => {
+const Rating: React.FC<RatingProps> = ({productId}) => {
   const navigation = useNavigation<any>();
   const handleRate = () => {
     navigation.navigate("WriteReviewScreen");
   };
+  const [reviews, setReviews] = useState<Review[]>([]);
+
+    useEffect(() => {
+      const fetchReviews = async () => {
+        try {
+          const response = await api.getReviews(productId);
+          console.log(response.data, "API Response"); // Log response data
+          setReviews(response.data);
+        } catch (error) {
+          console.error("Error fetching reviews:", error);
+        }
+      };
+      console.log(reviews, "check review");
+      fetchReviews();
+    }, [productId]);
+  const averageRating = reviews.length > 0
+  ? reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length
+  : 0;
 
-  const rating = 3.5;
-  const ratingSecond = 4;
   const [setRating] = useState(0);
   return (
     <View style={$container}>
@@ -24,52 +43,28 @@ const Rating: React.FC<RatingProps> = () => {
         <View style={$header}>
           <View style={$headerLeft}>
             <View style={$rating}>
-              <Text style={$realRating}>4.8</Text>
+              <Text style={$realRating}>{averageRating}</Text>
               <Text style={$totalRating}>/5</Text>
             </View>
             <View style={$overalRating}>
               <Text style={$overal} tx="listReview.overal" />
-              <Text style={$quantityRating}>3 Ratings</Text>
+              <Text style={$quantityRating}>{ reviews.length } Ratings</Text>
             </View>
           </View>
           <TouchableOpacity style={[$button, $addToCartButton]} onPress = {handleRate}>
             <Text style={[$buttonText, { color: colors.blue }]} tx="listReview.rateBtn" />
           </TouchableOpacity>
         </View>
       </View>
-      <View style={$reviewContainer}>
-        <View style={$reviewStar}>
-          <StarRating
-            rating={rating}
-            onChange={setRating}
-          />
-        </View>
-
-        <Text weight="bold" size="xl">
-          Amazing
-        </Text>
-        <Text>
-          An amazing fit. i am somewhere around 6ft and ordered 40 size. It's a perfect fit and
-          quality is worth
-        </Text>
-        <Text style={$reviewDate}>TrungDOng, 31th Jan 2024</Text>
-      </View>
-      <View style={$reviewContainer}>
-        <View style={$reviewStarSecond}>
-          <StarRating
-            rating={ratingSecond}
-            onChange={setRating}
-          />
+      {reviews.map((review, index) => (
+        <View key={index} style={$reviewContainer}>
+          <View style={$reviewStar}>
+            <StarRating rating={review.rating} onChange={setRating} />
+          </View>
+          <Text>{review.content}</Text>
+          <Text style={$reviewDate}>{review.reviewer.name}, {new Date(review.createdAt).toLocaleDateString()}</Text>
         </View>
-
-        <Text weight="bold" size="xl">
-          Wonderful
-        </Text>
-        <Text>
-        I was pleasantly surprised by how well this fits. Being about 6 feet tall, I chose a size 40 and it suits me perfectly. The craftsmanship and quality are impressive and definitely justify the cost.
-        </Text>
-        <Text style={$reviewDate}>HiNam, 3th Feb 2024</Text>
-      </View>
+    ))}
     </View>
   );
 };
@@ -166,10 +161,7 @@ const $reviewDate: TextStyle = {
 const $reviewStar: ViewStyle = {
   flexDirection: "row",
   gap: spacing.xs,
-};
-
-const $reviewStarSecond: ViewStyle = {
-  marginTop: spacing.xs,
+  marginTop: spacing.xxs,
 };
 
 export default Rating;

app/config/config.dev.ts

@@ -6,5 +6,5 @@
  * https://reactnative.dev/docs/security#storing-sensitive-info
  */
 export default {
-  API_URL: "http://localhost:3000/api",
+  API_URL: "https://2bw10hcq-3000.asse.devtunnels.ms/api",
 };

app/screens/ProductDetailScreen/ProductDetailScreen.tsx

@@ -31,8 +31,13 @@ const ProductDetailScreen = () => {
 
   const rightContents = ["heart-outline", "share-outline", "cart-outline"];
 
-  const [selectedType, setSelectedType] = useState<number>(0);
-  const { addProductToCart, isMutating } = useAddProductToCart();
+  const [selectedType, setSelectedType] = useState<number>(-1);
+
+  const navigation = useNavigation<any>();
+  const handleAddToCart = () => {
+    navigation.navigate("CartScreen");
+  };
+  const id = "4fdae4dc-4130-4cf9-9f92-1e6d02e1ff3e";
 
   return (
     <View style={$container}>
@@ -94,7 +99,7 @@ const ProductDetailScreen = () => {
             ))}
           </View>
           <View>
-            <Rating />
+            <Rating productId={id}/>
           </View>
         </View>
       </ScrollView>

app/services/api/api.ts

@@ -17,6 +17,7 @@ import {
   ApiRegisterResponse,
 } from "./api.types";
 import type { EpisodeSnapshotIn } from "app/models/Episode";
+import { Category, Review } from "app/types";
 /**
  * Configuring the apisauce instance.
  */
@@ -81,6 +82,36 @@ export class Api {
     }
   }
 
+  async getCategories(): Promise<any> {
+    try {
+      const response: ApiResponse<Category[]> = await this.apisauce.get("/inventory/categories");
+
+      if (!response.ok) {
+        const problem = getGeneralApiProblem(response);
+        if (problem) return problem;
+      }
+
+      return response.data;
+    } catch (e) {
+      return { kind: "unknown-error", temporary: true };
+    }
+  }
+
+  async getReviews(id: string): Promise<any> {
+    try {
+      const response: ApiResponse<Review[]> = await this.apisauce.get(`/reviews/reviews/products/${id}`);
+
+      if (!response.ok) {
+        const problem = getGeneralApiProblem(response);
+        if (problem) return problem;
+      }
+
+      return response.data;
+    } catch (e) {
+      return { kind: "unknown-error", temporary: true };
+    }
+  }
+
   async loginByEmail(email: string, password: string): Promise<ApiLoginResponse> {
     const response: ApiResponse<ApiLoginResponse | ApiErrorResponse> = await this.apisauce.post(
       "identity/auth/login",

app/services/api/api.types.ts

@@ -53,6 +53,7 @@ export interface ApiRegisterResponse {
   coverUrl: string;
 }
 
+
 /**
  * The options used to configure apisauce.
  */

app/types/inventory.ts

@@ -9,7 +9,24 @@ export interface Category {
   id: string;
   subCategories: SubCategory[];
 }
-
+export interface Review {
+  id: string;
+  content: string;
+  rating: number;
+  reviewer: {
+    id: string;
+    name: string;
+    avatarUrl: string;
+  };
+  product: {
+    id: string;
+    name: string;
+    imageUrl: string;
+    typeName: string;
+  };
+  createdAt: string;
+  likes: number;
+}
 export interface Product {
   id?: string;
   name: string;