neuefische · pavlo-bystrytskyi · Oct 24, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <script
+            src="https://kit.fontawesome.com/9d18197c84.js"
+            crossorigin="anonymous"
+    ></script>
+    <title>Movie Library</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/Component/App.tsx b/frontend/src/Component/App.tsx
@@ -10,7 +10,7 @@ function App() {
             <Header/>
             <Routes>
                 <Route path="/" element={<Main/>}/>
-                <Route path="/movie/:id" element={<Details/>}/>
+                <Route path="api/movie/:id" element={<Details/>}/>
             </Routes>
             <Footer/>
         </>

diff --git a/frontend/src/Component/App/Details.tsx b/frontend/src/Component/App/Details.tsx
@@ -1,17 +1,58 @@
 import MovieDetails from "./Details/MovieDetails.tsx";
 import MovieControls from "./Details/MovieControls.tsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import EditMovieForm from "./EditMovieForm.tsx";
 import "../../Style/Details.css"
+import {useParams} from "react-router-dom";
+import MovieType from "../../Type/MovieType.tsx";
+import RatingType from "../../Type/RatingType.tsx";
+import axios from "axios";
 
 export default function Details() {
+
+    const errorMessage = "Something went wrong";
+
     const [editModeEnabled, setEditModeEnabled] = useState<boolean>(false);
+    const {id} = useParams();
+
+    const [movieData, setMovieData] = useState<MovieType>({
+        id: "",
+        name: ""
+    });
+    const [ratingData, setRatingData] = useState<RatingType>({
+        id: "",
+        rating: 0,
+        isWatched: true,
+        movieId: ""
+    });
+
+    const updateMovieData = function () {
+        axios.get<MovieType>("/api/movie/" + id).then(
+            (result) => setMovieData(result.data)
+        ).catch(
+            () => console.log(errorMessage)
+        )
+    }
+    const updateRatingData = function () {
+        axios.get<RatingType>("/api/rating/" + id).then(
+            (result) => setRatingData(result.data)
+        ).catch(
+            () => console.log(errorMessage)
+        )
+    }
+
+
+    useEffect(updateMovieData, [id]);
+    useEffect(updateRatingData, [id]);
 
     return (
         <div>
-            Details
-            {editModeEnabled ? <EditMovieForm/> : <MovieDetails/>}
-            <MovieControls editModeEnabled={editModeEnabled} setEditModeEnabled={setEditModeEnabled}/>
+            {editModeEnabled ?
+                <EditMovieForm id={id} setMovieData={setMovieData} setRatingData={setRatingData}
+                               movieData={movieData} ratingData={ratingData}/> :
+                <MovieDetails id={id ?? ""}/>}
+            <MovieControls editModeEnabled={editModeEnabled} setEditModeEnabled={setEditModeEnabled}
+                           ratingData={ratingData} movieData={movieData}/>
         </div>
     );
 }
diff --git a/frontend/src/Component/App/Details/MovieControls.tsx b/frontend/src/Component/App/Details/MovieControls.tsx
@@ -1,10 +1,15 @@
 import axios from "axios";
 import {useNavigate, useParams} from "react-router-dom";
 import {useState} from "react";
+import RatingType from "../../../Type/RatingType.tsx";
+import MovieType from "../../../Type/MovieType.tsx";
 
 export default function MovieControls(
-    {editModeEnabled, setEditModeEnabled}:
-        { editModeEnabled: boolean, setEditModeEnabled: (state: boolean) => void }) {
+    {editModeEnabled, setEditModeEnabled, ratingData, movieData}:
+        {
+            editModeEnabled: boolean, setEditModeEnabled: (state: boolean) => void,
+            ratingData: RatingType, movieData: MovieType
+        }) {
 
     const [saveButtonDisabled, setSaveButtonDisabled] = useState<boolean>(false);
     const [deleteButtonDisabled, setDeleteButtonDisabled] = useState<boolean>(false);
@@ -14,18 +19,17 @@ export default function MovieControls(
 
     const navigate = useNavigate();
 
-    const save = () => {
+    const save = async () => {
         setSaveButtonDisabled(true);
-        axios.put(`/api/movie/${id}`).then(
-            // () => navigate("/")
-        ).catch(
-            () => alert("Something went wrong")
-        ).finally(
-            () => {
-                setEditModeEnabled(false);
-                setSaveButtonDisabled(false);
-            }
-        );
+        try {
+            await axios.put(`/api/movie/${id}`, movieData);
+            await axios.post(`/api/rating`, ratingData);
+        } catch {
+            alert("Something went wrong");
+        } finally {
+            setEditModeEnabled(false);
+            setSaveButtonDisabled(false);
+        }
     }
 
     const edit = () => {

diff --git a/frontend/src/Component/App/Details/MovieDetails.tsx b/frontend/src/Component/App/Details/MovieDetails.tsx
@@ -1,16 +1,14 @@
 import {useEffect, useState} from "react";
 import axios from "axios";
-import {useParams} from "react-router-dom";
 import PersonList from "./MovieDetails/PersonList.tsx";
 import MovieType from "../../../Type/MovieType.tsx";
 import PersonType from "../../../Type/PersonType.tsx";
 
 import RatingType from "../../../Type/RatingType.tsx";
 
-export default function MovieDetails() {
+export default function MovieDetails({id}: {id: string}) {
     const errorMessage = "Something went wrong";
 
-    const {id} = useParams();
     const [movieData, setMovieData] = useState<MovieType>();
     const [ratingData, setRatingData] = useState<RatingType>();
     const [actorsData, setActorsData] = useState<PersonType[]>([]);

diff --git a/frontend/src/Component/App/EditMovieForm.tsx b/frontend/src/Component/App/EditMovieForm.tsx
@@ -1,7 +1,121 @@
-export default function EditMovieForm() {
+import { ChangeEvent, useEffect, useState } from "react";
+import MovieType from "../../Type/MovieType.tsx";
+import RatingType from "../../Type/RatingType.tsx";
+import PersonType from "../../Type/PersonType.tsx";
+import axios from "axios";
+import PersonList from "./Details/MovieDetails/PersonList.tsx";
+
+export default function EditMovieForm({
+                                          id,
+                                          setMovieData,
+                                          setRatingData,
+                                          ratingData,
+                                          movieData,
+                                      }: {
+    id: string | undefined;
+    setMovieData: React.Dispatch<React.SetStateAction<MovieType>>;
+    setRatingData: React.Dispatch<React.SetStateAction<RatingType>>;
+    ratingData: RatingType;
+    movieData: MovieType;
+}) {
+    const errorMessage = "Something went wrong";
+
+    const [actorsData, setActorsData] = useState<PersonType[]>([]);
+    const [directorsData, setDirectorsData] = useState<PersonType[]>([]);
+
+    const handleMovieChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setMovieData((prevState) => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
+
+    const handleRatingChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setRatingData((prevState) => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
+
+    const handleRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        const booleanValue = value === "true";
+        setRatingData((prevState) => ({
+            ...prevState,
+            [name]: booleanValue,
+        }));
+    };
+
+    const updateActorsData = function () {
+        axios
+            .get<PersonType[]>("/api/movie-actor/" + id)
+            .then((result) => setActorsData(result.data))
+            .catch(() => console.log(errorMessage));
+    };
+
+    const updateDirectorsData = function () {
+        axios
+            .get<PersonType[]>("/api/movie-director/" + id)
+            .then((result) => setDirectorsData(result.data))
+            .catch(() => console.log(errorMessage));
+    };
+
+    useEffect(updateActorsData, [id]);
+    useEffect(updateDirectorsData, [id]);
+
     return (
-        <div className={"edit_form"}>
-            <span>EditMovieForm</span>
+        <div className="edit_form-inner">
+            <form>
+                <div className="form-row">
+                    <label htmlFor="title">Title</label>
+                    <input
+                        type="text"
+                        name="name"
+                        value={movieData?.name}
+                        onChange={(e) => handleMovieChange(e)}
+                    />
+                </div>
+                <div className="form-row">
+                    <label>Watched already?</label>
+                    <div className="radio-group">
+                        <label>
+                            <input
+                                type="radio"
+                                name="isWatched"
+                                value="true"
+                                checked={ratingData?.isWatched === true}
+                                onChange={(e) => handleRadioChange(e)}
+                            />
+                            Yes
+                        </label>
+                        <label>
+                            <input
+                                type="radio"
+                                name="isWatched"
+                                value="false"
+                                checked={ratingData?.isWatched === false}
+                                onChange={(e) => handleRadioChange(e)}
+                            />
+                            No
+                        </label>
+                    </div>
+                </div>
+                <div className="form-row">
+                    <label htmlFor="rating">Rating</label>
+                    <input
+                        type="text"
+                        name="rating"
+                        value={ratingData?.rating}
+                        onChange={(e) => handleRatingChange(e)}
+                    />
+                </div>
+                {directorsData && (
+                    <PersonList people={directorsData} legend={"Directed by"} />
+                )}
+                {actorsData && <PersonList people={actorsData} legend={"Starring"} />}
+            </form>
         </div>
     );
-}
+}
diff --git a/frontend/src/Component/App/Footer.tsx b/frontend/src/Component/App/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
     return (
         <div className={"footer"}>
-            Footer
+            Made with <span className="heart">&#10084; </span>by Team 2
         </div>
     );
 }
diff --git a/frontend/src/Component/App/Header.tsx b/frontend/src/Component/App/Header.tsx
@@ -1,5 +1,6 @@
 import axios from "axios";
 import {useEffect, useState} from "react";
+import {Link} from "react-router-dom";
 
 export default function Header() {
     const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -39,12 +40,16 @@ export default function Header() {
 
     return (
         <nav>
-            <div>
-                Hello {userName}
+            <Link to="/" className="navbar-title">
+                <i className="fa-duotone fa-solid fa-video"></i>
+                <h1>Movie Library</h1>
+            </Link>
+            <div className={"navbar-user"}>
+                <p>Hello {userName}</p>
+                <button onClick={handleButtonClick}>
+                    {isLoggedIn ? 'Logout' : 'Login'}
+                </button>
             </div>
-            <button onClick={handleButtonClick}>
-                {isLoggedIn ? 'Logout' : 'Login'}
-            </button>
         </nav>
     );
 }
diff --git a/frontend/src/Component/App/Main.tsx b/frontend/src/Component/App/Main.tsx
@@ -1,16 +1,69 @@
 import WatchedTab from "./Main/WatchedTab.tsx";
 import WishlistTab from "./Main/WishlistTab.tsx";
 import EditMovieForm from "./EditMovieForm.tsx";
+import CreateButton from "./Main/CreateButton.tsx";
+import {useEffect, useState} from "react";
+import MovieType from "../../Type/MovieType.tsx";
+import RatingType from "../../Type/RatingType.tsx";
+import axios from "axios";
+import MovieRatingType from "../../Type/MovieRatingType.tsx";
 
 export default function Main() {
+    const [wishListData, setWishListData] = useState<MovieRatingType[]>([]);
+    const [watchedListData, setwatchedListData] = useState<MovieRatingType[]>([]);
+
+    const [isUpdated, setIsUpdated] = useState(false);
+    useEffect(() => {
+        axios.get<MovieRatingType[]>("/api/movie/wishlist").then(
+            (result) => {
+                setWishListData(result.data)
+            }
+        ).catch(
+            () => console.log("Something went wrong")
+        )
+        axios.get<MovieRatingType[]>("/api/movie/watched").then(
+            (result) => {
+                setwatchedListData(result.data)
+            }
+        ).catch(
+            () => console.log("Something went wrong")
+        )
+        setIsUpdated(false);
+        setMovieData({
+            id: "",
+            name: ""
+        })
+        setRatingData({
+            id: "",
+            rating: 0,
+            isWatched: true,
+            movieId: ""
+        })
+    }, [isUpdated]);
+
+    const [movieData, setMovieData] = useState<MovieType>({
+        id: "",
+        name: ""
+    });
+    const [ratingData, setRatingData] = useState<RatingType>({
+        id: "",
+        rating: 0,
+        isWatched: true,
+        movieId: ""
+    });
+
 
     return (
         <>
             <div className={"main_container"}>
-                <WatchedTab/>
-                <WishlistTab/>
+                <WatchedTab data={watchedListData}/>
+                <WishlistTab data={wishListData}/>
+            </div>
+            <div className={"edit-form-main"}>
+                <EditMovieForm id={undefined} movieData={movieData} ratingData={ratingData} setMovieData={setMovieData}
+                               setRatingData={setRatingData}/>
+                <CreateButton movieData={movieData} ratingData={ratingData} setIsUpdated={setIsUpdated}/>
             </div>
-            <EditMovieForm/>
         </>
     );
 }