Added routing for Add and Edit form

src/components/add-movie-form/add-movie-form.tsx

@@ -0,0 +1,26 @@
+import MovieForm from '../movie-form/movie-form';
+import Dialog from '../dialog/dialog';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMovieService } from '../../services';
+import { Movie } from '../../models';
+
+export default function AddMovieFormDialog() {
+  const { addMovie } = useMovieService();
+  const navigate = useNavigate();
+
+  const handleAdd = (addedMovie: Movie) => {
+    addMovie(addedMovie);
+    closeDialog()
+  }
+
+  const closeDialog = () => {
+    navigate('/');
+  }
+
+  return <>
+    <Dialog title="Add Movie" onClose={closeDialog}>
+      <MovieForm onSubmit={handleAdd}></MovieForm>
+    </Dialog>
+  </>
+}

src/components/edit-movie-form/edit-movie-form.tsx

@@ -0,0 +1,39 @@
+import MovieForm from '../movie-form/movie-form';
+import Dialog from '../dialog/dialog';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useMovieService } from '../../services';
+import { Movie } from '../../models';
+
+export default function EditMovieFormDialog() {
+  const { movieId } = useParams();
+  const [ movie, setMovie] = useState<Movie | null>(null);
+  const { loading, getMovie, editMovie } = useMovieService();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if(movieId) {
+      getMovie(movieId).then(
+        movie => setMovie(movie),
+      )
+    }
+  }, [movieId])
+
+  const handleEdit = (editedMovie: Movie) => {
+    editMovie(editedMovie);
+    closeDialog();
+  }
+
+  const closeDialog = () => {
+    navigate('/');
+  }
+
+  return <>
+    { loading
+      ? <span className="spinner"></span>
+      : <Dialog title="Edit Movie" onClose={closeDialog}>
+          <MovieForm onSubmit={handleEdit} initialData={movie as any}></MovieForm>
+        </Dialog>
+    }
+  </>
+}

src/components/movie-form/movie-form.tsx

@@ -1,31 +1,23 @@
 import React from 'react';
 import { useForm } from 'react-hook-form';
+import { Movie } from '../../models';
 import './movie-form.scss';
 
-interface MovieInfo {
-  title: string;
-  movieUrl: string;
-  genre: string;
-  overview: string;
-  releaseDate: string;
-  rating: string;
-  timing: string;
-}
-
 export interface MovieFormProps {
-  initialData?: MovieInfo;
-  onSubmit: (data: MovieInfo) => void;
+  initialData?: Movie;
+  onSubmit: (data: Movie) => void;
 }
 
 export default function MovieForm({ initialData, onSubmit }: MovieFormProps) {
-  const { register, handleSubmit, formState: { errors }, reset } = useForm<MovieInfo>({ defaultValues: initialData });
+  const { register, handleSubmit, formState: { errors }, reset } = useForm<Movie>({ defaultValues: initialData });
 
+  console.log('initialData =', initialData)
   return (
     <form className="movie-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="movie-form-item movie-form-item--title">
         <label htmlFor="title">Title:</label>
-        <input id="title" {...register("title", { required: true })} />
-        {errors.title && <p className="movie-form-item__error">This field is required</p>}
+        <input id="title" {...register("movieName", { required: true })} />
+        {errors.movieName && <p className="movie-form-item__error">This field is required</p>}
       </div>
 
       <div className="movie-form-item movie-form-item--release-date">
@@ -36,8 +28,8 @@ export default function MovieForm({ initialData, onSubmit }: MovieFormProps) {
 
       <div className="movie-form-item movie-form-item--url">
         <label htmlFor="movieUrl">Movie Url:</label>
-        <input id="movieUrl" {...register("movieUrl", { required: true })} />
-        {errors.movieUrl && <p className="movie-form-item__error">This field is required</p>}
+        <input id="movieUrl" {...register("imageUrl", { required: true })} />
+        {errors.imageUrl && <p className="movie-form-item__error">This field is required</p>}
       </div>
 
       <div className="movie-form-item movie-form-item--rating">
@@ -48,24 +40,24 @@ export default function MovieForm({ initialData, onSubmit }: MovieFormProps) {
 
       <div className="movie-form-item movie-form-item--genre">
         <label htmlFor="genre">Genre:</label>
-        <select id="genre" {...register("genre", { required: true })}>
+        <select id="genre" {...register("genres", { required: true })}>
           <option value="action">Action</option>
           <option value="drama">Drama</option>
           <option value="comedy">Comedy</option>
         </select>
-        {errors.genre && <p className="movie-form-item__error">This field is required</p>}
+        {errors.genres && <p className="movie-form-item__error">This field is required</p>}
       </div>
 
       <div className="movie-form-item movie-form-item--timing">
         <label htmlFor="timing">Timing:</label>
-        <input id="timing" {...register("timing", { required: true })} />
-        {errors.timing && <p className="movie-form-item__error">This field is required</p>}
+        <input id="timing" {...register("duration", { required: true })} />
+        {errors.duration && <p className="movie-form-item__error">This field is required</p>}
       </div>
 
       <div className="movie-form-item movie-form-item--overview">
         <label htmlFor="overview">Overview:</label>
-        <textarea id="overview" {...register("overview")} />
-        {errors.overview && <p className="movie-form-item__error">This field is required</p>}
+        <textarea id="overview" {...register("description")} />
+        {errors.description && <p className="movie-form-item__error">This field is required</p>}
       </div>
 
       <div className="movie-form-cta">

src/components/movie-tile/movie-tile.test.tsx

@@ -5,6 +5,7 @@ import MovieTile from './movie-tile';
 describe('MovieTile component', () => {
   const mockedClick = jest.fn();
   const movieData= {
+    id: 123,
     imageUrl: '/sample.jpg',
     movieName: 'Sample Movie',
     releaseYear: 2001,

src/components/movie-tile/movie-tile.tsx

@@ -1,20 +1,20 @@
 import React, { MouseEvent , useState } from 'react';
-import Dialog from '../dialog/dialog';
-import MovieForm from '../movie-form/movie-form';
 
 import './movie-tile.scss';
+import { useNavigate } from 'react-router-dom';
 
 interface MovieTileProps {
+  id: number;
   imageUrl: string;
   movieName: string;
   releaseYear: number;
   genres: string[];
   onClick: () => void;
 }
 
-export default function MovieTile({ imageUrl, movieName, releaseYear, genres, onClick }: MovieTileProps) {
+export default function MovieTile({ id, imageUrl, movieName, releaseYear, genres, onClick }: MovieTileProps) {
   const [isContextMenuVisible, setContextMenuVisible] = useState(false);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const navigate = useNavigate();
 
   const openContextMenu = (e: MouseEvent) => {
     e.stopPropagation();
@@ -27,22 +27,14 @@ export default function MovieTile({ imageUrl, movieName, releaseYear, genres, on
   };
 
   const handleEdit = (e: MouseEvent) => {
-    setIsEditDialogOpen(true);
     closeContextMenu(e);
+    navigate(`${id}/edit`);
   };
 
   const handleDelete = (e: MouseEvent) => {
     closeContextMenu(e);
   };
 
-  const closeEditDialog = () => {
-    setIsEditDialogOpen(false);
-  };
-
-  const onEditSubmit = (data: any) => {
-    console.log('data =', data);
-  }
-
   return (
     <div className='movie-tile' onClick={onClick}>
       <img className='movie-tile__img' src={imageUrl} alt={movieName} />
@@ -66,12 +58,6 @@ export default function MovieTile({ imageUrl, movieName, releaseYear, genres, on
           <button className='context-menu--delete' onClick={handleDelete}>Delete</button>
         </div>
       )}
-
-      {isEditDialogOpen && (
-        <Dialog title="Edit Movie" onClose={closeEditDialog}>
-          <MovieForm onSubmit={onEditSubmit}></MovieForm>
-        </Dialog>
-      )}
     </div>
   );
 }

src/components/pages/home-page.scss

@@ -1,17 +1,21 @@
 @import "src/scss/colors";
+@import "src/scss/mixins";
 
 .filter-sort-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
+  padding: 10px 20px;
+  background: $black;
 }
 
 .movie-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
-  margin-top: 20px;
+  padding: 20px;
+  background: $black;
 }
 
 .spinner {
@@ -29,6 +33,34 @@
   animation: rotation 1s linear infinite;
 }
 
+.search-container {
+  padding: 20px;
+  background-image: url("../../../public/background.png");
+  background-position: center;
+  background-size: cover;
+
+  &__add-movie {
+    display: flex;
+    justify-content: end;
+  }
+
+  &__add-movie--link {
+    font-size: 20px;
+    text-transform: uppercase;
+    background-color: $grey;
+    border-radius: 4px;
+    color: $red;
+    padding: 10px 20px;
+    text-decoration: none;
+    opacity: 0.9;
+
+    &::before {
+      content: "+";
+      margin-right: 5px;
+    }
+  }
+}
+
 @keyframes rotation {
   0% {
     transform: rotate(0deg);

src/components/pages/home-page.tsx

@@ -1,14 +1,16 @@
 import Search from '../search/search';
 import GenreFilter from '../genre-filter/genre-filter';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import MovieTile from '../movie-tile/movie-tile';
 import SortControl, { SortOptionType } from '../sort-control/sort-control';
 import MovieDetails from '../movie-details/movie-details';
-
-import './home-page.scss';
+import AddMovieFormDialog from '../add-movie-form/add-movie-form';
 import { useMovieService } from '../../services';
 import { Movie } from '../../models';
-import { Routes, Route, useSearchParams, useNavigate, useParams } from 'react-router-dom';
+import { Routes, Route, useSearchParams, useNavigate, useParams, Outlet, Link } from 'react-router-dom';
+import EditMovieFormDialog from '../edit-movie-form/edit-movie-form';
+
+import './home-page.scss';
 
 const genres = [
   { label: 'All', value: '' },
@@ -89,10 +91,19 @@ export function HomePage() {
       <Routes>
         <Route path="/" element={
           <div className="search-container">
+            <div className="search-container__add-movie">
+              <Link className="search-container__add-movie--link" to="new">Add Movie</Link>
+            </div>
             <Search initialQuery={searchQuery} onSearch={handleSearch}/>
+            <Outlet></Outlet>
           </div>
-        }/>
+        }>
+          <Route path="/new" element={
+            <AddMovieFormDialog />
+          }></Route>
+        </Route>
         <Route path="/:movieId" element={<MovieDetails {...selectedMovie} onClose={handleMovieDetailsClose}/>}/>
+        <Route path="/:movieId/edit" element={<EditMovieFormDialog/>}/>
       </Routes>
       <div className="filter-sort-controls">
         <GenreFilter genres={genres} selectedGenre={selectedGenre} onSelect={handleSelect} />
@@ -104,6 +115,7 @@ export function HomePage() {
           {movies.map((movie: Movie) =>
             <MovieTile
               key={movie.movieName}
+              id={movie.id}
               imageUrl={movie.imageUrl}
               movieName={movie.movieName}
               releaseYear={movie.releaseYear}

src/components/search/search.scss

@@ -4,13 +4,21 @@
   display: flex;
   gap: 20px;
   margin-top: 20px;
+  flex-wrap: wrap;
+
+  &-title {
+    width: 100%;
+    font-size: 26px;
+    text-transform: uppercase;
+    padding-bottom: 30px;
+  }
 
   &-input {
     background-color: $dark-grey;
     padding: 10px;
     border-radius: 4px;
     width: 700px;
-    opacity: 0.7;
+    opacity: 0.9;
     color: $white;
     border: none;
   }

src/components/search/search.tsx

@@ -22,6 +22,7 @@ export default function Search({ initialQuery, onSearch }: SearchProps) {
 
   return (
     <div className="search">
+      <h3 className="search-title">Find your movie</h3>
       <input
         className="search-input"
         type="text"

src/models/movie.model.tsx

@@ -25,6 +25,7 @@ export interface Movie {
   id: number;
   imageUrl: string;
   movieName: string;
+  releaseDate: string;
   releaseYear: number;
   rating: string;
   duration: string;