Skip to content
Snippets Groups Projects
MoviePage.tsx 2.53 KiB
Newer Older
import { Descriptions, Image } from "antd";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import axiosConfig from '../axios-config';
Martin Korec's avatar
Martin Korec committed
import {CategoryDTO, DirectorDTO, MovieDTO} from "../dto";
import { ErrorPage } from "./ErrorPage";
  const [movie, setMovie] = useState<MovieDTO>({} as MovieDTO);
  const [director, setDirector] = useState<DirectorDTO>({} as DirectorDTO);
Martin Korec's avatar
Martin Korec committed
  const [categories, setCategories] = useState<CategoryDTO[]>([]);
  const [isError, setIsError] = useState<boolean>(false);
Martin Korec's avatar
Martin Korec committed


  useEffect(() => {
    const fetchMovie = async () => {
      try {
        const response = await axiosConfig.get("movies/" + id);
Martin Korec's avatar
Martin Korec committed
        setMovie(response.data);
Martin Korec's avatar
Martin Korec committed
        setDirector(response.data.director);
        setCategories(response.data.categories);
Martin Korec's avatar
Martin Korec committed
      } catch (err) {
        setIsError(true);
    void fetchMovie();
Martin Korec's avatar
Martin Korec committed
  }, [])
  if (isError) {
    return <ErrorPage />;
Martin Korec's avatar
Martin Korec committed
  const movieCategories = categories.map((category) =>
      <>
          {category.name} &nbsp;&nbsp;
      </>
  );

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