nextjs-web-app: Adding session hook and login-logout functionality

- Right side bar for sorting

src/backend/web/web.client/web-app-new/src/app/api/auth/[...nextauth]/route.ts

@@ -13,6 +13,12 @@ export const authOptions: AuthOptions = {
         })
     ],
     secret: process.env.NEXTAUTH_SECRET,
+    callbacks: {
+        async session({ session, token, user }) {
+            session.user.user_id = token.sub;
+            return session
+        }
+    }
 }
 
 const handler = NextAuth(authOptions);

src/backend/web/web.client/web-app-new/src/app/cart/page.tsx

@@ -73,7 +73,7 @@ const CartPage: React.FC = () => {
   );
 
   return (
-    <div className="container mx-auto mt-10">
+    <div className="container mx-auto mt-10 p-6">
       <h1 className="text-3xl font-bold mb-4">Your basket</h1>
       <div className="bg-white shadow-lg rounded-lg p-6">
         <h2 className="text-xl font-bold mb-4">

src/backend/web/web.client/web-app-new/src/app/checkout/checkout.tsx

@@ -1,90 +1,161 @@
-'use client'
-import React, { useState } from 'react';
+"use client";
+import React, { useState } from "react";
 
 export const CheckoutComponent: React.FC = () => {
-    const [formData, setFormData] = useState({
-        fullName: '',
-        email: '',
-        address: '',
-        city: '',
-        zip: '',
-        country: '',
-        cardNumber: '',
-        cardExpiration: '',
-        cardCVC: '',
-    });
+  const [formData, setFormData] = useState({
+    fullName: "",
+    email: "",
+    street_address: "",
+    city: "",
+    state: "",
+    zip_code: "",
+    country: "",
+    credit_card_number: "",
+    credit_card_expiration_month: "",
+    credit_card_expiration_year: "",
+    credit_card_cvv: "",
+  });
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFormData({ ...formData, [e.target.name]: e.target.value });
-    };
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
 
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        // TODO: checkout
-        console.log(formData);
-    };
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // TODO: Implement the checkout functionality here
+    console.log(formData);
+  };
 
-    return (
-        <div className="container mx-auto p-6">
-            <h1 className="text-3xl font-bold mb-6">Checkout</h1>
-            <form onSubmit={handleSubmit} className="max-w-lg mx-auto">
-                {/* Full Name */}
-                <div className="mb-4">
-                    <label htmlFor="fullName" className="block mb-2">Full Name</label>
-                    <input
-                        type="text"
-                        name="fullName"
-                        id="fullName"
-                        value={formData.fullName}
-                        onChange={handleChange}
-                        className="w-full p-2 border border-gray-300 rounded"
-                        required
-                    />
-                </div>
-                {/* ... other input fields */}
-                {/* Card Details */}
-                <div className="mb-4">
-                    <label htmlFor="cardNumber" className="block mb-2">Card Number</label>
-                    <input
-                        type="text"
-                        name="cardNumber"
-                        id="cardNumber"
-                        value={formData.cardNumber}
-                        onChange={handleChange}
-                        className="w-full p-2 border border-gray-300 rounded"
-                        required
-                    />
-                </div>
-                <div className="flex gap-4 mb-4">
-                    <div className="flex-1">
-                        <label htmlFor="cardExpiration" className="block mb-2">Expiration</label>
-                        <input
-                            type="text"
-                            name="cardExpiration"
-                            id="cardExpiration"
-                            value={formData.cardExpiration}
-                            onChange={handleChange}
-                            className="w-full p-2 border border-gray-300 rounded"
-                            required
-                        />
-                    </div>
-                    <div className="flex-1">
-                        <label htmlFor="cardCVC" className="block mb-2">CVC</label>
-                        <input
-                            type="text"
-                            name="cardCVC"
-                            id="cardCVC"
-                            value={formData.cardCVC}
-                            onChange={handleChange}
-                            className="w-full p-2 border border-gray-300 rounded"
-                            required
-                        />
-                    </div>
-                </div>
-                <button type="submit" className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded">
-                    Complete Order
-                </button>
-            </form>
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">Checkout</h1>
+      <form onSubmit={handleSubmit} className="max-w-lg mx-auto">
+        {/* Customer Information */}
+        <div className="mb-4">
+          <label htmlFor="fullName" className="block mb-2">
+            Full Name
+          </label>
+          <input
+            type="text"
+            name="fullName"
+            id="fullName"
+            value={formData.fullName}
+            onChange={handleChange}
+            className="w-full p-2 border border-gray-300 rounded"
+            required
+          />
         </div>
-    );
+        <div className="mb-4">
+          <label htmlFor="email" className="block mb-2">
+            Email
+          </label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            value={formData.email}
+            onChange={handleChange}
+            className="w-full p-2 border border-gray-300 rounded"
+            required
+          />
+        </div>
+
+        {/* Address Details */}
+        <fieldset className="mb-4">
+          <legend className="text-xl font-semibold mb-4">Address</legend>
+          <div className="mb-4">
+            <label htmlFor="street_address" className="block mb-2">
+              Street Address
+            </label>
+            <input
+              type="text"
+              name="street_address"
+              id="street_address"
+              value={formData.street_address}
+              onChange={handleChange}
+              className="w-full p-2 border border-gray-300 rounded"
+              required
+            />
+          </div>
+          {/* ... other address fields such as city, state, zip_code, and country */}
+        </fieldset>
+
+        {/* Credit Card Details */}
+        <fieldset>
+          <legend className="text-xl font-semibold mb-4">Credit Card</legend>
+          <div className="mb-4">
+            <label htmlFor="credit_card_number" className="block mb-2">
+              Card Number
+            </label>
+            <input
+              type="text"
+              name="credit_card_number"
+              id="credit_card_number"
+              value={formData.credit_card_number}
+              onChange={handleChange}
+              className="w-full p-2 border border-gray-300 rounded"
+              required
+            />
+          </div>
+          <div className="flex gap-4 mb-4">
+            <div className="flex-1">
+              <label
+                htmlFor="credit_card_expiration_month"
+                className="block mb-2"
+              >
+                Expiration Month
+              </label>
+              <input
+                type="text"
+                name="credit_card_expiration_month"
+                id="credit_card_expiration_month"
+                value={formData.credit_card_expiration_month}
+                onChange={handleChange}
+                className="w-full p-2 border border-gray-300 rounded"
+                required
+              />
+            </div>
+            <div className="flex-1">
+              <label
+                htmlFor="credit_card_expiration_year"
+                className="block mb-2"
+              >
+                Expiration Year
+              </label>
+              <input
+                type="text"
+                name="credit_card_expiration_year"
+                id="credit_card_expiration_year"
+                value={formData.credit_card_expiration_year}
+                onChange={handleChange}
+                className="w-full p-2 border border-gray-300 rounded"
+                required
+              />
+            </div>
+            <div className="flex-1">
+              <label htmlFor="credit_card_cvv" className="block mb-2">
+                CVV
+              </label>
+              <input
+                type="text"
+                name="credit_card_cvv"
+                id="credit_card_cvv"
+                value={formData.credit_card_cvv}
+                onChange={handleChange}
+                className="w-full p-2 border border-gray-300 rounded"
+                required
+              />
+            </div>
+          </div>
+        </fieldset>
+
+        <button
+          type="submit"
+          className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded"
+        >
+          Complete
+        </button>
+      </form>
+    </div>
+  );
 };

src/backend/web/web.client/web-app-new/src/app/foods/foods.tsx

@@ -1,18 +1,22 @@
 import CategoriesSidebar from "@/components/CategoriesSidebar";
 import FoodItem from "@/components/FoodItem";
 import { FoodItems } from "./fetch";
+import RightSidebar from "@/components/RightSidebar";
 
-export const FoodsPage = ({foodItems}: {foodItems: FoodItems}) => {
+export const FoodsPage = ({ foodItems }: { foodItems: FoodItems }) => {
   return (
-    <div className="flex flex-1 min-h-screen">
-      <CategoriesSidebar />
-      <div className="container mx-auto">
+    <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 md:flex-row">
+      <div className="order-first w-full flex-none md:max-w-[125px]">
+        <CategoriesSidebar />
+      </div>
+      <div className="order-last min-h-screen w-full md:order-none">
         <div className="flex flex-wrap justify-center">
           {foodItems.map((item) => (
             <FoodItem key={item.id} {...item} />
           ))}
         </div>
       </div>
+      <RightSidebar />
     </div>
   );
 };

src/backend/web/web.client/web-app-new/src/app/foods/page.tsx

@@ -4,7 +4,7 @@ import { FoodsPage } from "./foods";
 
 
 const Page = async () => {
-  const foodItems = await fetchFoodItems(null);
+  const foodItems = await fetchFoodItems();
   return (
     <FoodsPage foodItems={foodItems} />
   );

src/backend/web/web.client/web-app-new/src/app/providers.tsx

@@ -1,9 +1,13 @@
+"use client";
 import { CartProvider } from "@/context/CartContext";
 import { PropsWithChildren } from "react";
 import { ThemeProvider } from "next-themes";
+import { SessionProvider } from "next-auth/react";
 
 export const Providers = ({ children }: PropsWithChildren<{}>) => {
   return (
+    <SessionProvider>
       <CartProvider>{children}</CartProvider>
+    </SessionProvider>
   );
 };

src/backend/web/web.client/web-app-new/src/components/CategoriesSidebar.tsx

@@ -11,7 +11,7 @@ type CategoryProps = {
 const CategoryLink: React.FC<CategoryProps> = ({ name, link }) => {
   return (
     <Link href={link}>
-      <div className="block px-4 py-2 hover:bg-gray-100">{name}</div>
+      <li className="block px-4 py-2 hover:bg-gray-100">{name}</li>
     </Link>
   );
 };
@@ -20,8 +20,8 @@ const CategoriesSidebar: React.FC = async () => {
   const categories = await fetchCategories();
 
   return (
-    <aside className="pt-8 min-h-screen p-5 bg-gray-100">
-      <nav>
+    <nav>
+      <ul>
         {categories.map((category) => {
           const values = {
             id: category.id,
@@ -30,8 +30,8 @@ const CategoriesSidebar: React.FC = async () => {
           };
           return <CategoryLink key={category.id} {...values} />;
         })}
-      </nav>
-    </aside>
+      </ul>
+    </nav>
   );
 };
 
@@ -51,9 +51,7 @@ async function fetchCategories(): Promise<Categories> {
     throw new Error("Failed to fetch categories data");
   }
 
-  const categories: Categories = Categories.parse(
-    await res.json()
-  );
+  const categories: Categories = Categories.parse(await res.json());
   return categories;
 }