DirectorPage.tsx

import { Descriptions } from "antd";
import axiosConfig from '../axios-config';
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { DirectorIO } from "./Preview";

export const DirectorPage = () => {
  const { id: directorId } = useParams();
  const [director, setDirector] = useState<DirectorIO>({} as DirectorIO);
  const [isError, setIsError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axiosConfig.get<DirectorIO>(`/directors/${directorId}`);
        setDirector({ ...response.data });
      } catch {
        setIsError(true);
      }
    };

    void fetchData();
  }, []);

  if (isError) {
    return <h3>Something went wrong…</h3>;
  }

  return (
    <Descriptions title="Director page" bordered style={
        {padding: "4%", width:"50%"}
    }>
      <Descriptions.Item label="Name" span={3}>
        {director.name}
      </Descriptions.Item>
      <Descriptions.Item label="Surname" span={3}>
        {director.surname}
      </Descriptions.Item>
      <Descriptions.Item label="Birthdate">
        {director.birthDate}
      </Descriptions.Item>
    </Descriptions>
  );
};