MoviePage.tsx

import { Badge, Descriptions, Image } from "antd";
import React, {useEffect, useState} from "react";
import { Link, useParams } from "react-router-dom";
import {DirectorIO, MovieIO} from "./Preview";
import axios from 'axios';

export const MoviePage = () => {
  const { id, name } = useParams();

  const instance = axios.create({
    baseURL: 'http://127.0.0.1:4000/movies/',
  });

  const [movie, setMovie] = useState<MovieIO>(Object);
  const [director, setDirector] = useState<DirectorIO>(Object);


  useEffect(() => {
    const fetchMovie = async () => {
      try {
        const response = await instance.get(id as string);
        setMovie(response.data);
        if (response.data.director) {
          setDirector(response.data.director);
        }
      } catch (err) {

      }
    }

    fetchMovie();
  }, [])

  return (
    <>
      <Descriptions
        title={movie.name}
        bordered
        style={{ padding: "5%" }}
      >
        <Descriptions.Item label="Title picture" span={3}>
          <Image src={movie.picture}></Image>
        </Descriptions.Item>
        <Descriptions.Item label="Name" span={2}>
          {movie.name}
        </Descriptions.Item>
        <Descriptions.Item label="Original Name">
          {movie.originalName}
        </Descriptions.Item>
        <Descriptions.Item label="Description" span={3}>
          {movie.intro}
        </Descriptions.Item>
        <Descriptions.Item label="Published">
          {movie.publishedAt}
        </Descriptions.Item>
        <Descriptions.Item label="Runtime" span={2}>
          {movie.runTimeMinutes} minutes
        </Descriptions.Item>
      </Descriptions>
      <Descriptions title="Director" bordered style={{ padding: "5%" }}>
        <Descriptions.Item label="Name" span={3}>
          <Link to={`/director/${director.id}`}>
            {director.name} {director.surname}
          </Link>
        </Descriptions.Item>
        <Descriptions.Item label="Birthdate">
          {director.birthDate}
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};