Merge pull request #27 from openrice-canada/feat/restaurant

feat: review
openrice-canada · Nov 22, 2023 · eaed4c2 · eaed4c2
2 parents 08e57b1 + faa5b34
commit eaed4c2
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 155 deletions.
diff --git a/src/api/auth/authApiIndex.ts b/src/api/auth/authApiIndex.ts
@@ -1,20 +1,18 @@
 import { AxiosApiClientBuilder } from "../axiosIndex";
-import { User, AuthenticateResponse } from "./authType";
+import { AuthType, AuthenticateResponse } from "./authType";
 
 const apiClient = new AxiosApiClientBuilder()
   .withResourceName("/auth/user")
   .withCredentials(true)
   .build();
 
-export const postUserRegister = async (
-  user: User
+export const register = async (
+  user: AuthType
 ): Promise<AuthenticateResponse> => {
   return apiClient.post("/register", user);
 };
 
-export const postUserAuth = async (
-  user: User
-): Promise<AuthenticateResponse> => {
+export const login = async (user: AuthType): Promise<AuthenticateResponse> => {
   return apiClient.post("/login", user);
 };
 

diff --git a/src/api/auth/authType.ts b/src/api/auth/authType.ts
@@ -1,39 +1,14 @@
-export type User = {
-  email?: string;
+import { CurrentLoginUserInfo } from "../../redux/auth/authSlice";
+
+export type AuthType = {
   username?: string;
+  email?: string;
   password: string;
   role?: string;
 };
 
-export type UserEntity = {
-  user_id: string;
-  email: string;
-  username: string;
-  password: string;
-  created_at: string;
-  modifiedAt: string;
-  active: boolean;
-  role: string;
-  enabled: boolean;
-  authorities: [
-    {
-      authority: string;
-    }
-  ];
-  accountNonExpired?: boolean;
-  accountNonLocked?: boolean;
-  credentialsNonExpired?: boolean;
-};
-
 export type AuthenticateResponse = {
   token?: string;
   message?: string;
-  user?: UserLogin;
+  user?: CurrentLoginUserInfo;
 };
-
-export interface UserLogin {
-  user_id: string;
-  username: string;
-  email: string;
-  role: string;
-}
diff --git a/src/api/restaurant/RestaurantType.ts b/src/api/restaurant/RestaurantType.ts
@@ -9,7 +9,7 @@ export interface Restaurant {
   phone: string;
   intro: string;
   opening_hours: string;
-  cover_image?: string;
+  cover_image_url?: string;
   averageRating: number;
   reviewCount: number;
   active: boolean;
@@ -24,14 +24,14 @@ export type SearchRestaurantQuery = {
 };
 
 export type CreateRestaurantType = {
+  name: string;
   address: string;
+  district_id: string;
   latitude: string;
   longitude: string;
-  created_at?: string;
-  district_id: string;
+  postal_code: string;
+  phone: string;
   intro: string;
-  modified_at?: string;
-  name: string;
   opening_hours:
     | {
         monday: { from: string; to: string };
@@ -44,9 +44,8 @@ export type CreateRestaurantType = {
         holiday?: { from: string; to: string };
       }
     | string;
-  phone: string;
-  postal_code: string;
-  restaurant_id?: string;
+  cover_image_url?: string;
   rating?: number;
-  coverImageUrl?: string;
+  created_at?: string;
+  modified_at?: string;
 };
diff --git a/src/api/restaurantPaymentMethod/restaurantPaymentMethodApiIndex.ts b/src/api/restaurantPaymentMethod/restaurantPaymentMethodApiIndex.ts
@@ -8,5 +8,5 @@ const apiClient = new AxiosApiClientBuilder()
 export const createRestaurantPaymentMethod = async (
   restaurantPaymentMethod: RestaurantPaymentMethod
 ): Promise<RestaurantPaymentMethod> => {
-  return apiClient.post("/restaurant-payment", restaurantPaymentMethod);
+  return apiClient.post("/restaurant-payment-method", restaurantPaymentMethod);
 };
diff --git a/src/api/review/ReviewType.ts b/src/api/review/ReviewType.ts
@@ -2,16 +2,17 @@ export type Review = {
   review_id: string;
   user_id: string;
   restaurant_id: string;
-  rating: number;
+  username: string;
+  restaurantName: string;
   title: string;
-  visit_date: string;
   content: string;
+  rating: number;
   spending: number;
+  visit_date: string;
+  photo?: string;
+  active: boolean;
   created_at: string;
   modified_at: string;
-  active: boolean;
-  username: string;
-  restaurantName: string;
 };
 
 export type CreateReviewRequest = {

diff --git a/src/api/review/reviewApiIndex.ts b/src/api/review/reviewApiIndex.ts
@@ -10,9 +10,9 @@ export const getReviews = async (): Promise<Review[]> => {
 };
 
 export const getReviewsByRestaurantID = async (
-  restaurantId: string
+  restaurantID: string
 ): Promise<Review[]> => {
-  return apiClient.get("", { params: { restaurantId } });
+  return apiClient.get("", { params: { restaurantID } });
 };
 
 export const createReview = async (

diff --git a/...loader/RestaurantDetailSkeletonLoader.tsx → ...Loader/RestaurantDetailSkeletonLoader.tsx b/...loader/RestaurantDetailSkeletonLoader.tsx → ...Loader/RestaurantDetailSkeletonLoader.tsx
diff --git a/src/components/utils/buttons/UploadButton.tsx b/src/components/utils/buttons/UploadButton.tsx
@@ -0,0 +1,12 @@
+const UploadButton: React.FC = () => {
+  return (
+    <button
+      type="submit"
+      className="border-gray-700 h-full w-20 flex justify-center items-center rounded-md text-md px-11 py-2 border-2 hover:bg-gray-700 hover:text-white"
+    >
+      upload
+    </button>
+  );
+};
+
+export default UploadButton;
diff --git a/src/components/utils/cards/RestaurantCard.tsx b/src/components/utils/cards/RestaurantCard.tsx
@@ -22,7 +22,7 @@ const RestaurantCard: React.FC<Restaurant> = (props: Restaurant) => {
     >
       <div className="w-full h-48 overflow-hidden">
         <img
-          src={`${process.env.REACT_APP_IMAGE_PREFIX}/coverImageUrl/${props.restaurant_id}.jpg`}
+          src={props.cover_image_url}
           alt={props.name}
           className="w-[100%] h-[100%] object-cover rounded-tl-md rounded-tr-md hover:scale-110 duration-300"
         />

diff --git a/src/components/utils/cards/ReviewCard.tsx b/src/components/utils/cards/ReviewCard.tsx
@@ -13,7 +13,7 @@ import { format } from "date-fns";
 const ReviewRow = ({ text, icon }: { text: string; icon: React.ReactNode }) => (
   <div className="flex gap-2 items-center">
     <div>{icon}</div>
-    <h1 className="text-sm truncate">{text}</h1>
+    <h1 className="text-sm truncate w-80">{text}</h1>
   </div>
 );
 
@@ -23,25 +23,39 @@ const ReviewCard: React.FC<Review> = (props: Review) => {
       to={`/review/${props.review_id}`}
       className="rounded-md shadow-lg hover:bg-slate-200"
     >
-      <div className="flex flex-col gap-1 px-4 py-6">
-        <ReviewRow text={props.username} icon={<IoPerson />} />
-        <ReviewRow text={props.title} icon={<IoRestaurant />} />
-        <ReviewRow text={props.content} icon={<IoChatbubbleEllipsesSharp />} />
-        <div className="flex gap-2 items-start">
-          <div>{<IoThumbsUpSharp />}</div>
-          {Array.from({ length: props.rating }).map((_, index) => (
-            <span className="text-yellow-400" key={index}>
-              {<IoStar />}
-            </span>
-          ))}
+      <div className="flex justify-between">
+        <div className="flex flex-col gap-1 px-4 py-6">
+          <ReviewRow text={props.username} icon={<IoPerson />} />
+          <ReviewRow text={props.title} icon={<IoRestaurant />} />
+          <ReviewRow
+            text={props.content}
+            icon={<IoChatbubbleEllipsesSharp />}
+          />
+          <div className="flex gap-2 items-start">
+            <div>{<IoThumbsUpSharp />}</div>
+            {Array.from({ length: props.rating }).map((_, index) => (
+              <span className="text-yellow-400" key={index}>
+                {<IoStar />}
+              </span>
+            ))}
+          </div>
+          <ReviewRow
+            text={
+              "Created at " +
+              format(new Date(props.created_at), "dd MMM yyyy HH:mm:ss")
+            }
+            icon={<IoTime />}
+          />
         </div>
-        <ReviewRow
-          text={
-            "Created at " +
-            format(new Date(props.created_at), "dd MMM yyyy HH:mm:ss")
-          }
-          icon={<IoTime />}
-        />
+        {props.photo && (
+          <div className="h-auto w-80">
+            <img
+              src={props.photo}
+              alt=""
+              className="object-cover rounded-tr-md rounded-br-md"
+            />
+          </div>
+        )}
       </div>
     </Link>
   );

diff --git a/src/components/utils/modals/AddReviewModal.tsx b/src/components/utils/modals/AddReviewModal.tsx
@@ -68,14 +68,7 @@ const AddReviewModal: React.FC<AddReviewModalProps> = (
         await uploadImage(
           review.photo,
           props?.restaurant_id as string,
-          "photos",
-          reviewID
-        );
-
-        await uploadImage(
-          review.photo,
-          props?.restaurant_id as string,
-          "menus",
+          "reviews",
           reviewID
         );
       }

diff --git a/src/pages/restaurant/RestaurantOverviewPage.tsx b/src/pages/restaurant/RestaurantOverviewPage.tsx
@@ -10,9 +10,10 @@ import useOnClickOutside from "../../components/hooks/useOnClickOutside";
 import RestaurantOverviewButton from "../../components/utils/buttons/RestaurantOverviewButton";
 import ReviewCard from "../../components/utils/cards/ReviewCard";
 import AddReviewModal from "../../components/utils/modals/AddReviewModal";
-import RestaurantDetailSkeletonLoader from "../../components/loader/RestaurantDetailSkeletonLoader";
+import RestaurantDetailSkeletonLoader from "../../components/skeletonLoader/RestaurantDetailSkeletonLoader";
 import PhotoModal from "../../components/utils/modals/PhotoModal";
 import ErrorPage from "../error/ErrorPage";
+import UploadButton from "../../components/utils/buttons/UploadButton";
 
 function isUUID(id: string) {
   const uuidPattern =
@@ -55,25 +56,6 @@ const RestaurantOverviewPage: React.FC = () => {
     fetchRestaurantReview();
   }, [id, dispatch]);
 
-  useEffect(() => {
-    if (id === "8879942f-fce4-41d2-8aab-3faeb8d8c909") {
-      setPhotos(
-        reviews.map((review) => ({
-          id: review.review_id,
-          src: `${process.env.REACT_APP_IMAGE_PREFIX}/photos/${id}/${review.review_id}.jpg`,
-        }))
-      );
-      setMenus(
-        reviews
-          .map((review) => ({
-            id: review.review_id,
-            src: `${process.env.REACT_APP_IMAGE_PREFIX}/menus/${id}/${review.review_id}.jpg`,
-          }))
-          .sort((a, b) => a.id.localeCompare(b.id))
-      );
-    }
-  }, [id, reviews]);
-
   useEffect(() => {
     if (!id || !isUUID(id)) {
       navigate("error");
@@ -129,9 +111,9 @@ const RestaurantOverviewPage: React.FC = () => {
             <div className="relative w-[400px] h-auto shrink-0 rounded-md overflow-hidden">
               {restaurantDetail && (
                 <img
-                  src={`${process.env.REACT_APP_IMAGE_PREFIX}/coverImageUrl/${restaurantDetail.restaurant_id}.jpg`}
+                  src={restaurantDetail.cover_image_url}
                   alt=""
-                  width="object-cover"
+                  className="object-cover"
                 />
               )}
             </div>
@@ -140,7 +122,12 @@ const RestaurantOverviewPage: React.FC = () => {
             ) : (
               <div>
                 <h1 className="text-2xl font-bold">{restaurantDetail.name}</h1>
-                <div>{restaurantDetail.averageRating}</div>
+                {restaurantDetail.averageRating && (
+                  <div className="flex gap-2">
+                    <div>rating</div>
+                    <div>{restaurantDetail.averageRating}</div>
+                  </div>
+                )}
                 <div className="text-lg font-semibold">
                   {restaurantDetail?.address}
                 </div>
@@ -188,12 +175,6 @@ const RestaurantOverviewPage: React.FC = () => {
           <>
             <div className="flex justify-between">
               <h1 className="text-2xl font-bold my-4">Photos</h1>
-              <button
-                type="submit"
-                className="border-gray-700 h-full w-20 flex justify-center items-center rounded-md text-lg px-12 py-2 border-2 hover:bg-gray-700 hover:text-white"
-              >
-                upload
-              </button>
             </div>
             {photos.length === 0 && <div>No photos in this restaurant</div>}
             {photos.length > 0 && (
@@ -228,12 +209,7 @@ const RestaurantOverviewPage: React.FC = () => {
           <>
             <div className="flex justify-between">
               <h1 className="text-2xl font-bold my-4">Menus</h1>
-              <button
-                type="submit"
-                className="border-gray-700 h-full w-20 flex justify-center items-center rounded-md text-lg px-12 py-2 border-2 hover:bg-gray-700 hover:text-white"
-              >
-                upload
-              </button>
+              <UploadButton />
             </div>
             {menus.length === 0 && (
               <div>No menu photos are provided for this restaurant</div>

diff --git a/src/pages/review/ReviewPage.tsx b/src/pages/review/ReviewPage.tsx
@@ -30,6 +30,9 @@ const ReviewPage: React.FC = () => {
 
   const dispatch = useDispatch<AppDispatch>();
   const review = useSelector((state: IRootState) => state.review.review);
+  const restaurant = useSelector(
+    (state: IRootState) => state.restaurant.restaurant
+  );
 
   useEffect(() => {
     const fetchReview = async () => {
@@ -43,7 +46,7 @@ const ReviewPage: React.FC = () => {
     <div className="container justify-center mb-8 px-4 gap-8 mx-auto mt-10">
       <div className="relative">
         <img
-          src={`${process.env.REACT_APP_IMAGE_PREFIX}/coverImageUrl/${review?.restaurant_id}.jpg`}
+          src={restaurant?.cover_image_url}
           alt="hero"
           className="w-full h-80 object-cover rounded-lg mb-4 grayscale-[50%]"
         />