refactor: movie component

frontend/src/components/Movie.tsx

@@ -16,10 +16,6 @@ function getAverageRating(review: any) {
 
 export const Movie = () => {
   const [ showReviews, setShowReviews ] = useState<boolean>(false);
-  const changeShowStatus = () => {
-    setShowReviews((prevState => !prevState));
-  };
-
   const { register, handleSubmit, getValues, watch } = useForm();
   watch();
 
@@ -43,14 +39,8 @@ export const Movie = () => {
   const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR(`reviews/search/${id}`);
   const { data: recommended, error: recommendedError } = useSWR(`movies/${id}/recommended`);
 
-  if (movieError) return <div>failed to load</div>;
-  if (!movie) 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>;
+  if (movieError || reviewError || recommendedError) return <div>failed to load</div>;
+  if (!movie || !reviews || !recommended) return <div>loading...</div>;
 
   const recommendedMovies = recommended.slice(0, 5);
 
@@ -68,7 +58,7 @@ export const Movie = () => {
               {movie.genres &&
                   <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>
@@ -77,11 +67,11 @@ export const Movie = () => {
               {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}`)}
+                    {`${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={changeShowStatus}>
+                      onClick={() => setShowReviews((prevState => !prevState))}>
                 {showReviews ? 'Show recommended movies' : 'Show reviews'}
               </button>
             </div>