Lecture 10/hw

src/app/dish/[dishId]/loading.js

@@ -0,0 +1,6 @@
+import { Loader } from "@/components/loader/component";
+
+
+export default function Loading() {
+  return <Loader />;
+  }

src/app/dish/[dishId]/page.js

@@ -0,0 +1,16 @@
+
+import { DishContainer } from "@/components/dish/container";
+import styles from "./styles.module.scss";
+import { Ingredients } from "@/components/ingredients/component";
+import { getDishById } from "@/services/api";
+
+export default async function DishPage({params}) {
+  const dish = await getDishById(params.dishId);
+
+  return (
+    <div className={styles.root}>
+        <DishContainer dish={dish} className={styles.dish} />
+        <Ingredients ingredients={dish.ingredients} />
+    </div>
+);
+}

src/app/dish/[dishId]/styles.module.scss

@@ -0,0 +1,10 @@
+// .root {
+//   background-color: rgb(209, 253, 253);
+//   height: 100%;
+//   display: grid;
+//   grid-template-rows: auto 1fr auto;
+//   min-height: 100vh;
+// }
+.root {
+  margin: 10px 20px;
+ }

src/app/page.js

@@ -1,11 +1,7 @@
-import styles from "./styles.module.scss";
+export default function HomePage() {
+    return (
+        <div>HomePage</div>
+    )
+}
 
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        Home page
-      </div>
-    </main>
-  )
-}
+

src/app/restaurants/[restaurantId]/layout.js

@@ -4,7 +4,6 @@ import { Restaurant } from '@/components/restaurant/component';
 
 const Layout = async ({ children, params }) => {
     const restaurant = await getRestaurantById(params.restaurantId);
-
     return (
         <div>
           <Restaurant restaurant={restaurant}/>

src/app/restaurants/[restaurantId]/loading.js

@@ -2,5 +2,5 @@ import { Loader } from "@/components/loader/component";
 
 
 export default function Loading() {
-    return <Loader />
+  return <Loader />;
   }

src/app/restaurants/[restaurantId]/menu/loading.js

@@ -2,5 +2,5 @@ import { Loader } from "@/components/loader/component";
 
 
 export default function Loading() {
-    return <Loader />
+    return <Loader />;
   }

src/app/restaurants/[restaurantId]/page.js

@@ -1,6 +1,8 @@
+import { redirect } from 'next/navigation';
 
-export default function RestaurantPage({ params }) {
-    return (
-      null
-    )
-  }
+const RestaurantPage = ({params}) => {
+  redirect(params.restaurantId+'/menu');
+
+};
+
+export default RestaurantPage;

src/app/restaurants/[restaurantId]/reviews/loading.js

@@ -2,5 +2,5 @@ import { Loader } from "@/components/loader/component";
 
 
 export default function Loading() {
-    return <Loader />
+  return <Loader />;
   }

src/app/restaurants/[restaurantId]/reviews/page.js

@@ -1,10 +1,7 @@
-import { getReviewsByRestaurantId } from "@/services/api";
-import { Reviews } from '@/components/reviews/component';
+import { ReviewsContainer } from '@/components/reviews/container';
 
-export default async function ReviewPage({params}) {
-    const restaurantId = params.restaurantId;
-    const reviews = await getReviewsByRestaurantId(restaurantId);
-    return (
-      <Reviews reviews={reviews}/>
-    )
-  }
+export default async function ReviewPage({ params }) {
+  const restaurantId = params.restaurantId;
+
+  return <ReviewsContainer restaurantId={restaurantId}/>;
+}

src/app/restaurants/loading.js

@@ -1,5 +1,5 @@
 import { Loader } from "@/components/loader/component";
 
 export default function Loading() {
-    return <Loader />
+  return <Loader />;
   }

src/app/styles.module.scss

@@ -4,4 +4,5 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
+
 }

src/components/button/component.jsx

@@ -1,4 +1,4 @@
-"use client";
+import { memo } from 'react';
 import styles from './styles.module.scss';
 import classNames from "classnames";
 
@@ -8,4 +8,6 @@ export const Button = ({ onClick, children, className, disabled, rootRef }) => {
             {children}
         </button>
     );
-};
+};
+
+export const ButtonMemoized = memo(Button);

src/components/button/styles.module.scss

@@ -1,5 +1,6 @@
 .root {
-    min-width: 30px;
+    min-width: fit-content;
+    width: 30px;
     cursor: pointer;
     border: none;
     border-radius: 10px;

src/components/cart/container.jsx

@@ -4,6 +4,5 @@ import { selectCartProductIds } from "@/redux/ui/cart";
 
 export const CartContainer = () => {
     const dishIds = useSelector(selectCartProductIds);
-    console.log(dishIds);
     return <Cart productIds={dishIds} />
 }

src/components/control-tabs/component.jsx

@@ -1,19 +1,22 @@
-
+"use client" ;
 import Link from 'next/link';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import styles from './styles.module.scss';
+import { usePathname } from 'next/navigation';
 
 export const ControlTabs = ({ restaurantId }) => {
-    return (
-        <div >
+    const pathname = usePathname();
+    const isActiveMenu = pathname.endsWith("/menu");
+    const isActiveReview = pathname.endsWith("/reviews");
 
+    return (
+        <div>
             <Link href={`/restaurants/${restaurantId}/menu`} className={styles.pageLink}>
-                <Button>Menu</Button>
+                <ButtonMemoized disabled={isActiveMenu}>Menu</ButtonMemoized>
             </Link>
 
-
             <Link href={`/restaurants/${restaurantId}/reviews`} className={styles.pageLink}>
-                <Button>Review</Button>
+                <ButtonMemoized disabled={isActiveReview}>Review</ButtonMemoized>
             </Link>
         </div>
     );

src/components/create-review-form/container.jsx

@@ -0,0 +1,15 @@
+"use client";
+import { useContext } from 'react';
+import { UserContext } from "@/context/user-provider";
+import { ReviewForm } from "../review-form/component";
+
+export const CreateReviewFormContainer = ({onSave }) => {
+
+    const { name, id } = useContext(UserContext);
+
+    if (!name) {
+        return null;
+    }
+
+    return <ReviewForm  userName={name} userId={id} onSave={onSave}/>;
+}

src/components/dish/cart-container.jsx

@@ -1,29 +1,30 @@
 import style from './styles.module.scss';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import { useDispatch, useSelector } from 'react-redux';
 import { decrement, increment, selectProductAmountById } from '../../redux/ui/cart';
+import { useCallback } from 'react';
 
 export const DishCartContainer = ({ dishId }) => {
     const amount = useSelector((state) =>
         selectProductAmountById(state, dishId)
     );
     const dispatch = useDispatch();
-    const handleDecrement = () => {
+
+    const handleDecrement = useCallback(() => {
         dispatch(decrement(dishId));
-    };
+    }, [dispatch, dishId]);
 
-    const handleIncrement = () => {
+    const handleIncrement = useCallback(() => {
         dispatch(increment(dishId));
-    };
-
+    }, [dispatch, dishId]);
     return (
 
         <div className={style.root}>
             <div>{dishId}</div>
             <div className={style.buttonContainer}>
-                <Button className={style.button} onClick={handleDecrement} disabled={amount === 0}>-</Button>
+                <ButtonMemoized className={style.button} onClick={handleDecrement} disabled={amount === 0}>-</ButtonMemoized>
                 <p>{amount}</p>
-                <Button className={style.button} onClick={handleIncrement} disabled={amount === 5}>+</Button>
+                <ButtonMemoized className={style.button} onClick={handleIncrement} disabled={amount === 5}>+</ButtonMemoized>
             </div>
         </div>
     );

src/components/dish/component.jsx

@@ -1,9 +1,13 @@
+import Link from "next/link";
+
 export const Dish = ({ dish, className }) => {
 
   return (
     <div >
-      <div className={className}>{dish.name}</div>
-      <div className={className}>{dish.price}</div>
+      <Link href={`/dish/${dish.id}`}>
+        <div className={className}>{dish.name}</div>
+        <div className={className}>{dish.price}</div>
+      </Link>
     </div>
   );
 };

src/components/dish/container.jsx

@@ -1,35 +1,34 @@
 
 "use client"; 
 import { decrement, increment, selectProductAmountById } from '@/redux/ui/cart';
-import { Button } from '../button/component';
+import { ButtonMemoized } from '../button/component';
 import { Dish } from './component';
 import styles from './styles.module.scss';
 import { useDispatch, useSelector } from 'react-redux';
+import { useCallback } from 'react';
 
 export const DishContainer = ({ dish, className }) => {
     const amount = useSelector((state) =>
         selectProductAmountById(state, dish.id)
     );
     const dispatch = useDispatch();
 
-    const handleDecrement = () => {
+    const handleDecrement = useCallback(() => {
         dispatch(decrement(dish.id));
-    };
+    }, [dispatch, dish.id]);
 
-    const handleIncrement = () => {
+    const handleIncrement = useCallback(() => {
         dispatch(increment(dish.id));
-    };
+    }, [dispatch, dish.id]);
 
     return (
 
         <div className={styles.root}>
-            {/* <NavLink className={styles.link} to={`/dish/${dish.id}`}> */}
                 <Dish dish={dish} className={className} />
-            {/* </NavLink> */}
             <div className={styles.buttonContainer}>
-                <Button className={styles.button} onClick={handleDecrement} disabled={amount === 0}>-</Button>
+                <ButtonMemoized className={styles.button} onClick={handleDecrement} disabled={amount === 0}>-</ButtonMemoized>
                 <p>{amount}</p>
-                <Button className={styles.button} onClick={handleIncrement} disabled={amount === 5}>+</Button>
+                <ButtonMemoized className={styles.button} onClick={handleIncrement} disabled={amount === 5}>+</ButtonMemoized>
             </div>
         </div>
     );

src/components/header/component.jsx

@@ -1,11 +1,7 @@
 import styles from './styles.module.scss';
 import Link from 'next/link';
-import classNames from 'classnames';
 import { User } from '../user/component';
 import { CartButtonContainer } from '../cart-button/container';
-import { useSelector } from 'react-redux';
-import { selectProductAmount } from '@/redux/ui/cart';
-
 
 export const Header = () => {
     return (
@@ -14,10 +10,8 @@ export const Header = () => {
             <Link href="/restaurants" className={styles.link}>Restaurants</Link>
             <Link href="/contacts" className={styles.link}>Contacts</Link>
             <Link href="/about-us" className={styles.link}>About us</Link>
-            <div className={styles.user}>
-                <User />
-                <CartButtonContainer />
-            </div>
+            <User />
+            <CartButtonContainer />
         </header>
     );
 };

src/components/header/styles.module.scss

@@ -7,11 +7,6 @@
   padding: 10px 20px;
 }
 
-.user {
-  display: flex;
-
-}
-
 .button {
   margin-right: 5px;
 }

src/components/ingredients/component.jsx

@@ -0,0 +1,10 @@
+
+export const Ingredients = ({ ingredients }) => {
+    return (
+    <>
+        <h2>Ingredients:</h2>
+        {ingredients.map((ingredient, index) => (
+            <div key={index}>{ingredient}</div>
+        ))}
+    </>
+)};

src/components/loader/component.jsx

@@ -1,6 +1,6 @@
-import classNames from "classnames";
+
 import styles from "./styles.module.scss";
 
-export const Loader = ({className}) => {
-   return <div className={classNames(styles.root, className)}></div>;
+export const Loader = () => {
+   return <div className={styles.root}></div>;
 };

src/components/loader/styles.module.scss

@@ -1,4 +1,3 @@
-
 .root {
   display: flex;
   width: 100%;