Skip to content
Snippets Groups Projects
MoviePage.tsx 2.22 KiB
Newer Older
import { Badge, Descriptions, Image } from "antd";
Martin Korec's avatar
Martin Korec committed
import React, {useEffect, useState} from "react";
import { Link, useParams } from "react-router-dom";
Martin Korec's avatar
Martin Korec committed
import {DirectorIO, MovieIO} from "./Preview";
import axiosConfig from '../axios-config';
import { ErrorPage } from "./ErrorPage";
  const { id, name } = useParams();
  const [movie, setMovie] = useState<MovieIO>({} as MovieIO);
  const [director, setDirector] = useState<DirectorIO>({} as DirectorIO);
  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);
        if (response.data.director) {
          setDirector(response.data.director);
        }
      } catch (err) {
        setIsError(true);
    void fetchMovie();
Martin Korec's avatar
Martin Korec committed
  }, [])
  if (isError) {
    return <ErrorPage />;
  return (
    <>
      <Descriptions
Martin Korec's avatar
Martin Korec committed
        title={movie.name}
        bordered
        style={{ padding: "5%" }}
      >
        <Descriptions.Item label="Title picture" span={3}>
Martin Korec's avatar
Martin Korec committed
          <Image 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>
      </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>
    </>
  );
};