order update

app/src/components/ChangeAddress.tsx

@@ -2,6 +2,126 @@ import React, {useState} from "react";
 import axios from "axios";
 import {useForm} from "react-hook-form";
 
+interface AddressForm {
+    zip: string,
+    street: string,
+    streetNumber: string,
+    city: string
+}
+
 export const ChangeAddress = () => {
+    // TODO
+    const userId = localStorage.getItem("user");
+    const [address, setAddress] = useState({
+        zip: "",
+        street: "",
+        streetNumber: "",
+        city: "",
+    });
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const addressData = {
+            id: userId,
+            zip: address.zip,
+            street: address.city,
+            streetNumber: address.streetNumber,
+            city: address.city,
+        }
+        axios
+            .post("http://localhost:8080/adresses/", addressData)
+            .then((response) => {
+                console.log(response);
+                // set the state of the user
+                setAddress(response.data)
+                // redirect to success page TODO
+
+            })
+            .catch((error) => {
+                if (error.response) {
+                    console.log(error.response);
+                    console.log("server responded");
+                } else if (error.request) {
+                    console.log("network error");
+                } else {
+                    console.log(error);
+                }
+            });
+    };
+
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setAddress({
+            ...address,
+            [e.target.name]: value
+        });
+    };
+
+    const {
+        register,
+        formState: { errors },
+    } = useForm<AddressForm>();
+
+    return (
+      <section>
+        <h1>Změnit údaje</h1>
+        <form className="change-address-form" onSubmit={handleSubmit}>
+            <label>PSČ</label>
+            <input
+                className={`text-field ${errors.zip && "text-field--error"}`}
+                {...register('zip', {required: true})}
+                type="number"
+                name="zip"
+                value={address.zip}
+                onChange={handleChange}
+            />
+            {errors.zip && (
+                <p className="change__error">Zip is required</p>
+            )}
+
+            <label>Ulica</label>
+            <input
+                className={`text-field ${errors.street && "text-field--error"}`}
+                {...register('street', {required: true})}
+                type="street"
+                name="street"
+                value={address.street}
+                onChange={handleChange}
+            />
+            {errors.street && (
+                <p className="change__error">Street is required</p>
+            )}
+
+            <label>Číslo</label>
+            <input
+                className={`text-field ${errors.streetNumber && "text-field--error"}`}
+                {...register('streetNumber', {required: true})}
+                type="number"
+                name="streetNumber"
+                value={address.streetNumber}
+                onChange={handleChange}
+            />
+            {errors.streetNumber && (
+                <p className="change__error">Street number is required</p>
+            )}
+
+            <label>Mesto</label>
+            <input
+                className={`text-field ${errors.city && "text-field--error"}`}
+                {...register('city', {required: true})}
+                type="city"
+                name="city"
+                value={address.city}
+                onChange={handleChange}
+            />
+            {errors.city && (
+                <p className="change__error">Quantity is required</p>
+            )}
+
+            <input className="button" type="submit" value="Uložit">
+            </input>
+        </form>
+      </section>
+    );
 
 };

app/src/components/Login.tsx

@@ -62,7 +62,7 @@ export const Login = () => {
     return (
         <section className="login-container">
             <h2 className="login__header">Login</h2>
-            <form className="form" onSubmit={handleSubmit}>
+            <form className="login-form" onSubmit={handleSubmit}>
                 <label>Email:</label>
                 <input
                     className={`text-field ${errors.email && "text-field--error"}`}

app/src/components/Meal.tsx

+import { Link } from 'react-router-dom';
+import useSWR from "swr";
+import fetcher from "../models/fetcher";
+import menu from "../../../api/src/models/menu";
+import React, {useState} from "react";
+import axios, {AxiosRequestConfig} from "axios";
+
+export interface MealProps {
+    id: string
+}
+
+export const Meal = ({ id}: MealProps) => {
+    const [data, setData] = useState({
+        name: "",
+        price: ""
+    });
+
+    const menuData: AxiosRequestConfig = {
+        data: {
+            id: id,
+        }
+    }
+    const currentMeal = {
+        name: data.name,
+        price: data.price
+    };
+    axios.get('http://localhost:8080/meals/:' + {id})
+        .then((response) => {
+            console.log(response);
+            // set the state of the user
+            setData(response.data)
+        });
+
+    return (
+        <div className="meal">
+            <div className="meal__info">
+                <div className="meal__name">
+                    <div>{currentMeal.name}</div>
+                </div>
+                <div className="meal__price">
+                    <div>{currentMeal.price}</div>
+                </div>
+            </div>
+        </div>
+    );
+};

app/src/components/Menu.tsx

@@ -12,6 +12,7 @@ import {User} from "./User";
 import {Login} from "./Login";
 import {Staff} from "./Staff";
 import {Navbar} from "./Navbar";
+import {ChangeAddress} from "./ChangeAddress";
 
 
 
@@ -60,6 +61,9 @@ export const Menu = () => {
                 <Route path="/administration">
                     <Staff />
                 </Route>
+                <Route path="/address" exact>
+                    <ChangeAddress />
+                </Route>
             </Switch>
         </Router>
     );

app/src/components/OrderSummary.tsx

+import React, {useState} from "react";
+import axios, {AxiosRequestConfig} from "axios";
+import {useForm} from "react-hook-form";
+
+export interface OrderProps {
+    id: string
+}
+
+interface OrderForm {
+    deliveryTime: string,
+    mealId: string,
+    quantity: string
+}
+
+export const OrderSummary = ({ id}: OrderProps) => {
+    let mealCount = 1;
+
+    const [meal, setMeal] = useState({
+        name: "",
+        price: "",
+    });
+
+    // load the meal by id
+    axios
+        .get("http://localhost:8080/meals/:" + {id})
+        .then((response) => {
+            console.log(response);
+            // set the state of the user
+            setMeal(response.data)
+        })
+        .catch((error) => {
+            if (error.response) {
+                console.log(error.response);
+                console.log("server responded");
+            } else if (error.request) {
+                console.log("network error");
+            } else {
+                console.log(error);
+            }
+        });
+
+    // place order with meal and mealCount
+    const [order, setOrder] = useState({
+        deliveryTime: "",
+        mealId: "",
+        quantity: ""
+    });
+
+    const placeOrder = (e) => {
+        e.preventDefault();
+        const orderData = {
+            deliveryTime: order.deliveryTime,
+            mealId: order.mealId,
+            quantity: order.quantity
+        };
+        axios
+            .post("http://localhost:8080/orders/", orderData)
+            .then((response) => {
+                console.log(response);
+                // set the state of the user
+                setOrder(response.data)
+                // redirect to success page TODO
+            })
+            .catch((error) => {
+                if (error.response) {
+                    console.log(error.response);
+                    console.log("server responded");
+                } else if (error.request) {
+                    console.log("network error");
+                } else {
+                    console.log(error);
+                }
+            });
+    };
+
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setOrder({
+            ...order,
+            [e.target.name]: value
+        });
+    };
+
+    const {
+        register,
+        formState: { errors },
+    } = useForm<OrderForm>();
+
+    return (
+        <div className="order-summary">
+            <form className="order-form" onSubmit={placeOrder}>
+                <p>{meal.name}</p>
+
+                <label>Počet</label>
+                <input
+                    className={`text-field ${errors.quantity && "text-field--error"}`}
+                    {...register('quantity', {required: true})}
+                    type="number"
+                    name="quantity"
+                    value={order.quantity}
+                    onChange={handleChange}
+                />
+                {errors.quantity && (
+                    <p className="order__error">Quantity is required</p>
+                )}
+
+                <label>Čas dodania</label>
+                <input
+                    className={`text-field ${errors.deliveryTime && "text-field--error"}`}
+                    {...register('deliveryTime', {required: true})}
+                    type="deliveryTime"
+                    name="deliveryTime"
+                    value={order.deliveryTime}
+                    onChange={handleChange}
+      k          />
+                {errors.deliveryTime && (
+                    <p className="order__error">Quantity is required</p>
+                )}
+
+                <input className="button" type="submit" value="Objednat">
+                </input>
+            </form>
+        </div>
+    );
+};

app/src/components/Pages/Order.tsx

 import React, {useEffect, useState} from "react";
 import {User} from "../User";
 import {WeeklyMenu} from "./WeeklyMenu";
-import axios from "axios";
+import axios, {AxiosRequestConfig} from "axios";
 import {useForm} from "react-hook-form";
 import menu from "../../../../api/src/models/menu";
+import useSWR from 'swr'
+import fetcher from "../../models/fetcher"
+import { Meal } from "../Meal";
+import {OrderSummary} from "../OrderSummary";
 
 export const Order = () => {
     const loggedInUser = localStorage.getItem("user");
+    const id = localStorage.getItem("menu")
+    let mealId = "";
 
     const [data, setData] = useState({
-        id: "",
+        meals: [],
     });
 
-    const handleChange = (e) => {
-        const value = e.target.value;
-        setData({
-            ...data,
-            [e.target.name]: value
-        });
-    };
-
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        const menuData = {
-            id: data.id
-        };
+    const menuData: AxiosRequestConfig = {
+        data: {
+            date: new Date()
+        }
+    }
 
-        axios
-            .post("http://localhost:8080/menus/:{id}", menuData)
-            .then((response) => {
-                console.log(response);
-                // set the state of the user
-                setData(response.data);
-                // save to local storage
-                localStorage.setItem('menu', response.data);
-            })
-            .catch((error) => {
-                if (error.response) {
-                    console.log(error.response);
-                    console.log("server responded");
-                } else {
-                    console.log(error);
-                }
-            });
+    const currentMenu = {
+        meals: data.meals
     };
 
+    // get menu for current day
+    axios.get('http://localhost:8080/menus/', menuData)
+        .then((response) => {
+            console.log(response);
+            // set the state of the user
+            setData(response.data)
+        });
+
     if (loggedInUser) {
-        return (
-            <div className="order-container">
-                <h1 className="order__header">Objednat oběd</h1>
+        if (currentMenu.meals) {
+            return (
+                <div className="order-container">
+                    <h1 className="order__header">Objednat oběd</h1>
+                    {currentMenu.meals.map((item) => {
+                        mealId = item.id;
+                        return (
+                            <div>
+                                <Meal key={item.id} {...item} />
+                                <input className="button"
+                                       type="button"
+                                       id="add"
+                                       value={"Objednat"}
+                                       onClick={() => <OrderSummary id={item.id} />}/>
+                            </div>
+                            )
+                        })
+                    }
+                </div>
+            );
+        } else {
+            return (
+                <p>No menu for this week</p>
+            )
+        }
 
-            </div>
-        );
     }
     else {
         return (

app/src/components/Pages/WeeklyMenu.tsx

-import React from "react";
+import React, {useState} from "react";
+import axios, {AxiosRequestConfig} from "axios";
+import {Meal} from "../Meal";
 
 export const WeeklyMenu = () => {
+    const [data, setData] = useState({
+        meals: [],
+    });
+
+    const menuData: AxiosRequestConfig = {
+        data: {
+            date: new Date()
+        }
+    }
+
+    const currentMenu = {
+        meals: data.meals
+    };
+
+    // get menu for current day
+    axios.get('http://localhost:8080/menus/', menuData)
+        .then((response) => {
+            console.log(response);
+            // set the state of the user
+            setData(response.data)
+        });
 
     return (
-        <div className="weekly-menu-container">
+        <section className="weekly-menu">
             <h1 className="weekly-menu__header">Týdenní menu</h1>
-        </div>
+            {currentMenu.meals.map((item) => {
+                return (
+                    <div>
+                        <Meal key={item.id} {...item} />
+                    </div>
+                    )
+                })
+            }
+        </section>
     );
 };

app/src/components/User.tsx

@@ -8,6 +8,7 @@ import {ChangeAddress} from "./ChangeAddress";
 export const User = () => {
     const [items, setItems] = useState([]);
 
+    /*
     axios.get("http://localhost:8080/users/me")
         .then((response) => {
             console.log(response);
@@ -21,6 +22,8 @@ export const User = () => {
             }
         });
 
+     */
+
     const loggedUser = localStorage.getItem('user');
     if (loggedUser) {
         return (
@@ -30,14 +33,13 @@ export const User = () => {
                   <input className="button"
                          type="button"
                          id="logout"
-                         value="Odhlásit" />
+                         value="Odhlásit"
+                        />
 
                   <Link to="/address">Změnit adresu</Link>
 
                   <Switch>
-                      <Route path="/address" exact>
-                          <ChangeAddress />
-                      </Route>
+
                   </Switch>
               </div>
           </Router>