Commit e8ef9352 authored by Daniel Puchala's avatar Daniel Puchala
Browse files

refactor: added types and refactored movie component

parent a86d9e81
import Header from './Header';
import MovieCard from './MovieCard';
import { MovieCardMode } from '../models/types';
import { MovieCardMode, MovieDto, ReviewDto } from '../models/types';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
......@@ -35,9 +35,9 @@ export const Movie = () => {
};
const { id } = useParams();
const { data: movie, error: movieError } = useSWR(`movies/${id}`);
const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR(`reviews/search/${id}`);
const { data: recommended, error: recommendedError } = useSWR(`movies/${id}/recommended`);
const { data: movie, error: movieError } = useSWR<MovieDto>(`movies/${id}`);
const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR<ReviewDto[]>(`reviews/search/${id}`);
const { data: recommended, error: recommendedError } = useSWR<MovieDto[]>(`movies/${id}/recommended`);
if (movieError || reviewError || recommendedError) return <div>failed to load</div>;
if (!movie || !reviews || !recommended) return <div>loading...</div>;
......@@ -55,20 +55,20 @@ export const Movie = () => {
</div>
<div className="flex flex-col p-4 w-full">
<p className="text-2xl font-bold">{movie.name}</p>
{movie.genres &&
{movie.genres.length > 0 &&
<p><b>Genres: </b>
{movie.genres.slice(0, -1).map((genre: any) => `${genre}, `)}
{movie.genres.slice(-1).map((genre: any) => `${genre}`)}
{movie.genres.at(-1)}
</p>
}
<p><b>Duration: </b>{formatDuration(movie.duration)}</p>
<p>{movie.description}</p>
<p className="text-xl mt-auto"><b>Director: </b>{movie.director.name}</p>
{movie.actors &&
<p className="text-xl"><b>Actors: </b>
{movie.actors.slice(0, -1).map((actor: any) => `${actor.name}, `)}
{movie.actors.slice(-1).map((actor: any) => `${actor.name}`)}
</p>
{movie.actors.length > 0 &&
(<p className="text-xl"><b>Actors: </b>
{movie.actors.slice(0, -1).map((actor: any) => `${actor.name}, `)}
{`${movie.actors.at(-1)!.name}`}
</p>)
}
<button className="w-max p-4 self-center bg-blue-600 border-2 rounded-3xl border-slate-900"
onClick={() => setShowReviews((prevState => !prevState))}>
......
......@@ -11,3 +11,75 @@ export interface UserAuth {
role: string,
sub: number
}
export interface MovieDto {
id: number,
createdAt: Date,
updatedAt: Date,
name: string,
duration: number,
poster: string,
genres: string[],
description: string,
releaseYear: number,
reviews: SimpleReviewDto,
actors: PersonDto[],
director: PersonDto,
}
export interface ReviewDto {
id: number,
createdAt: Date,
updatedAt: Date,
user: SimplerUserDto,
movie: SimpleMovieDto,
text: string,
scriptRating: number,
ideaRating: number,
visualsEditRating: number,
musicRating: number,
actingRating: number,
}
export interface PersonDto {
id: number,
createdAt: Date,
updatedAt: Date,
name: string,
picture: string,
birth: Date,
about: string,
actedInMovies: SimpleMovieDto,
directedMovies: SimpleMovieDto,
}
export interface SimpleMovieDto {
id: number,
createdAt: Date,
updatedAt: Date,
name: string,
duration: number,
poster: string,
releaseYear: number,
}
export interface SimpleReviewDto {
id: number,
createdAt: Date,
updatedAt: Date,
user: SimplerUserDto,
movie: SimpleMovieDto,
scriptRating: number,
ideaRating: number,
visualsEditRating: number,
musicRating: number,
actingRating: number,
}
export interface SimplerUserDto {
id: number,
createdAt: Date,
updatedAt: Date,
name: string,
avatar: string,
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment