Commit 0fce097c authored by Daniel Puchala's avatar Daniel Puchala
Browse files

refactor: movie component

parent 7cf3781e
...@@ -16,10 +16,6 @@ function getAverageRating(review: any) { ...@@ -16,10 +16,6 @@ function getAverageRating(review: any) {
export const Movie = () => { export const Movie = () => {
const [ showReviews, setShowReviews ] = useState<boolean>(false); const [ showReviews, setShowReviews ] = useState<boolean>(false);
const changeShowStatus = () => {
setShowReviews((prevState => !prevState));
};
const { register, handleSubmit, getValues, watch } = useForm(); const { register, handleSubmit, getValues, watch } = useForm();
watch(); watch();
...@@ -43,14 +39,8 @@ export const Movie = () => { ...@@ -43,14 +39,8 @@ export const Movie = () => {
const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR(`reviews/search/${id}`); const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR(`reviews/search/${id}`);
const { data: recommended, error: recommendedError } = useSWR(`movies/${id}/recommended`); const { data: recommended, error: recommendedError } = useSWR(`movies/${id}/recommended`);
if (movieError) return <div>failed to load</div>; if (movieError || reviewError || recommendedError) return <div>failed to load</div>;
if (!movie) return <div>loading...</div>; if (!movie || !reviews || !recommended) return <div>loading...</div>;
if (reviewError) return <div>failed to load</div>;
if (!reviews) return <div>loading...</div>;
if (recommendedError) return <div>failed to load</div>;
if (!recommended) return <div>loading...</div>;
const recommendedMovies = recommended.slice(0, 5); const recommendedMovies = recommended.slice(0, 5);
...@@ -68,7 +58,7 @@ export const Movie = () => { ...@@ -68,7 +58,7 @@ export const Movie = () => {
{movie.genres && {movie.genres &&
<p><b>Genres: </b> <p><b>Genres: </b>
{movie.genres.slice(0, -1).map((genre: any) => `${genre}, `)} {movie.genres.slice(0, -1).map((genre: any) => `${genre}, `)}
{movie.genres.slice(-1).map(((genre: any) => `${genre}`))} {`${movie.genres.at(-1)}`}
</p> </p>
} }
<p><b>Duration: </b>{formatDuration(movie.duration)}</p> <p><b>Duration: </b>{formatDuration(movie.duration)}</p>
...@@ -77,11 +67,11 @@ export const Movie = () => { ...@@ -77,11 +67,11 @@ export const Movie = () => {
{movie.actors && {movie.actors &&
<p className="text-xl"><b>Actors: </b> <p className="text-xl"><b>Actors: </b>
{movie.actors.slice(0, -1).map((actor: any) => `${actor.name}, `)} {movie.actors.slice(0, -1).map((actor: any) => `${actor.name}, `)}
{movie.actors.slice(-1).map((actor: any) => `${actor.name}`)} {`${movie.actors.at(-1).name}`}
</p> </p>
} }
<button className="w-max p-4 self-center bg-blue-600 border-2 rounded-3xl border-slate-900" <button className="w-max p-4 self-center bg-blue-600 border-2 rounded-3xl border-slate-900"
onClick={changeShowStatus}> onClick={() => setShowReviews((prevState => !prevState))}>
{showReviews ? 'Show recommended movies' : 'Show reviews'} {showReviews ? 'Show recommended movies' : 'Show reviews'}
</button> </button>
</div> </div>
......
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