fix: Item with categories

frontend/src/components/MoviePage.tsx

@@ -2,7 +2,7 @@ import { Descriptions, Image } from "antd";
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import axiosConfig from '../axios-config';
-import { DirectorDTO, MovieDTO } from "../dto";
+import {CategoryDTO, DirectorDTO, MovieDTO} from "../dto";
 import { ErrorPage } from "./ErrorPage";
 
 export const MoviePage = () => {
@@ -10,6 +10,7 @@ export const MoviePage = () => {
 
   const [movie, setMovie] = useState<MovieDTO>({} as MovieDTO);
   const [director, setDirector] = useState<DirectorDTO>({} as DirectorDTO);
+  const [categories, setCategories] = useState<CategoryDTO[]>([]);
   const [isError, setIsError] = useState<boolean>(false);
 
 
@@ -18,9 +19,8 @@ export const MoviePage = () => {
       try {
         const response = await axiosConfig.get("movies/" + id);
         setMovie(response.data);
-        if (response.data.director) {
-          setDirector(response.data.director);
-        }
+        setDirector(response.data.director);
+        setCategories(response.data.categories);
       } catch (err) {
         setIsError(true);
       }
@@ -33,6 +33,12 @@ export const MoviePage = () => {
     return <ErrorPage />;
   }
 
+  const movieCategories = categories.map((category) =>
+      <>
+          {category.name} &nbsp;&nbsp;
+      </>
+  );
+
   return (
     <>
       <Descriptions
@@ -58,6 +64,9 @@ export const MoviePage = () => {
         <Descriptions.Item label="Runtime" span={2}>
           {movie.runTimeMinutes} minutes
         </Descriptions.Item>
+        <Descriptions.Item label="Categories" span={3}>
+          {movieCategories}
+        </Descriptions.Item>
       </Descriptions>
       <Descriptions title="Director" bordered style={{ padding: "5%" }}>
         <Descriptions.Item label="Name" span={3}>