feat: S3 frontend integration + review flow updates (#106)

Co-authored-by: Ben Petrillo <benpetrillo.bp@gmail.com>

Author: danctila

frontend/api/auth.ts

@@ -2,7 +2,7 @@ import { makeRequest } from "@/api/base";
 import { LoginRequestBody, RegisterRequestBody } from "@/types/auth";
 
 export async function getUserById(userId: string) {
-    return await makeRequest(`/api/v1/users/${userId}`, "GET");
+    return await makeRequest(`/api/v1/user/${userId}`, "GET");
 }
 
 export async function login(body: LoginRequestBody) {

frontend/api/review.ts

@@ -17,7 +17,12 @@ export interface ReviewData {
         _id: string;
         pfp?: string;
         username: string;
+        name: string;
     };
+    menuItem: string;
+    restaurantId: string;
+    menuItemName: string;
+    restaurantName: string;
 }
 
 export async function createReview(reviewData: ReviewData) {

frontend/api/reviews.tsx

@@ -5,8 +5,8 @@ export const getReviews = async (page: number = 1, limit: number = 20): Promise<
     return await makeRequest(`/api/v1/review?page=${page}&limit=${limit}`, "GET");
 };
 
-export const getReviewById = async (id: string, userId: string): Promise<TReview> => {
-    return await makeRequest(`/api/v1/review/${id}?userId=${userId}`, "GET");
+export const getReviewById = async (id: string): Promise<TReview> => {
+    return await makeRequest(`/api/v1/review/${id}`, "GET");
 };
 
 export const getFriendsReviews = async (id: string): Promise<TReview[]> => {

frontend/app.json

@@ -21,7 +21,8 @@
                             "NSTemporaryExceptionAllowsInsecureHTTPLoads": true
                         }
                     }
-                }
+                },
+                "NSPhotoLibraryUsageDescription": "This app requires access to your photo library to upload images."
             },
             "entitlements": {
                 "aps-environment": "development"
@@ -34,7 +35,7 @@
                 "foregroundImage": "./assets/splash-icon.png",
                 "backgroundColor": "#ffffff"
             },
-            "permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION"]
+            "permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION", "READ_EXTERNAL_STORAGE"]
         },
         "web": {
             "bundler": "metro",

frontend/app/(menuItem)/[id].tsx

@@ -101,6 +101,7 @@ export default function Route() {
                                     restaurantId={menuItem?.restaurantID || ""}
                                     menuItemName={menuItem?.name || ""}
                                     dishImageUrl={menuItem?.picture || ""}
+                                    menuItemId={menuItem?.id || ""}
                                 />
                             </ThemedView>
                         </ThemedView>

frontend/app/(review)/[id].tsx

@@ -83,7 +83,7 @@ export default function Route() {
 
     useEffect(() => {
         if (!user) return;
-        getReviewById(id, user.id).then((res) => {
+        getReviewById(id).then((res) => {
             setReview(res);
             if (res.like) {
                 setLikeState(LikeState.LIKED);
@@ -241,6 +241,12 @@ export default function Route() {
                             ))}
                         </ScrollView>
 
+                        {review.picture && (
+                            <ThemedView style={styles.imageContainer}>
+                                <Image source={{ uri: review.picture }} style={styles.reviewImage} />
+                            </ThemedView>
+                        )}
+
                         {/* Action Bar */}
                         <View style={styles.actionBar}>
                             <View style={styles.voteContainer}>

frontend/app/(tabs)/profile/profile.tsx

@@ -218,24 +218,26 @@ const ProfileScreen = () => {
                             value={searchText}
                             onChangeText={(text) => setSearchText(text)}
                         />
-                        <ThemedView style={{ gap: 12, marginTop: 12 }}>
+                        <ThemedView style={{ gap: 12, marginTop: 12, marginBottom: 64 }}>
                             {userReviews &&
-                                userReviews.map((review) => (
-                                    <ReviewPreview
-                                        reviewId={review._id}
-                                        key={review._id}
-                                        likes={review.likes}
-                                        plateName={review.menuItemName}
-                                        restaurantName={review.restaurantName}
-                                        tags={[]}
-                                        rating={review.rating.overall}
-                                        content={review.content}
-                                        authorId={user.id}
-                                        authorName={user.name}
-                                        authorUsername={user.username}
-                                        authorAvatar={user.profile_picture || DEFAULT_PROFILE_PIC}
-                                    />
-                                ))}
+                                userReviews
+                                    .reverse()
+                                    .map((review) => (
+                                        <ReviewPreview
+                                            reviewId={review._id}
+                                            key={review._id}
+                                            likes={review.likes}
+                                            plateName={review.menuItemName}
+                                            restaurantName={review.restaurantName}
+                                            tags={[]}
+                                            rating={review.rating.overall}
+                                            content={review.content}
+                                            authorId={user.id}
+                                            authorName={user.name}
+                                            authorUsername={user.username}
+                                            authorAvatar={user.profile_picture || DEFAULT_PROFILE_PIC}
+                                        />
+                                    ))}
                         </ThemedView>
                     </ThemedView>
                 </ThemedView>

frontend/app/MenuItemView.tsx

@@ -160,6 +160,7 @@ export default function MenuItemView() {
                 onClose={() => setIsReviewModalVisible(false)}
                 restaurantId="pad-thai-kitchen"
                 menuItemName="Pad Thai"
+                menuItemId={""}
             />
         </>
     );