From 8114166023494638e96dca09b22af266bc35284f Mon Sep 17 00:00:00 2001
From: Martin Korec <xkorec2@fi.muni.cz>
Date: Thu, 23 Jun 2022 03:11:51 +0200
Subject: [PATCH] fix: add fetch from api
---
frontend/src/components/MoviePage.tsx | 67 +++++++++++++++------------
1 file changed, 37 insertions(+), 30 deletions(-)
diff --git a/frontend/src/components/MoviePage.tsx b/frontend/src/components/MoviePage.tsx
index 0c360c9..527c4db 100644
--- a/frontend/src/components/MoviePage.tsx
+++ b/frontend/src/components/MoviePage.tsx
@@ -1,63 +1,70 @@
import { Badge, Descriptions, Image } from "antd";
-import React from "react";
+import React, {useEffect, useState} from "react";
import { Link, useParams } from "react-router-dom";
-import { MovieIO } from "./Preview";
+import {DirectorIO, MovieIO} from "./Preview";
+import axios from 'axios';
export const MoviePage = () => {
const { id, name } = useParams();
-
- //replace this with /channel/${id} API call
- const exampleMovie: MovieIO = {
- id: "789",
- name: "Saw",
- originalName: "Saw",
- intro: "Jigsaw is the bad guy and this is the game",
- picture:
- "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Jo6M-3oyAlMsB4-F__Z9bwHaHa%26pid%3DApi&f=1",
- published: "1.1.2000",
- runtimeMinutes: 120,
- director: {
- id: "123456789",
- name: "Karel",
- surname: "Vomacka",
- birthdate: "20.2.1987",
- },
- };
+
+ 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={exampleMovie.name}
+ title={movie.name}
bordered
style={{ padding: "5%" }}
>
<Descriptions.Item label="Title picture" span={3}>
- <Image src={exampleMovie.picture}></Image>
+ <Image src={movie.picture}></Image>
</Descriptions.Item>
<Descriptions.Item label="Name" span={2}>
- {exampleMovie.name}
+ {movie.name}
</Descriptions.Item>
<Descriptions.Item label="Original Name">
- {exampleMovie.originalName}
+ {movie.originalName}
</Descriptions.Item>
<Descriptions.Item label="Description" span={3}>
- {exampleMovie.intro}
+ {movie.intro}
</Descriptions.Item>
<Descriptions.Item label="Published">
- {exampleMovie.published}
+ {movie.publishedAt}
</Descriptions.Item>
<Descriptions.Item label="Runtime" span={2}>
- {exampleMovie.runtimeMinutes} minutes
+ {movie.runTimeMinutes} minutes
</Descriptions.Item>
</Descriptions>
<Descriptions title="Director" bordered style={{ padding: "5%" }}>
<Descriptions.Item label="Name" span={3}>
- <Link to={`/director/${exampleMovie.director.id}`}>
- {exampleMovie.director.name} {exampleMovie.director.surname}
+ <Link to={`/director/${director.id}`}>
+ {director.name} {director.surname}
</Link>
</Descriptions.Item>
<Descriptions.Item label="Birthdate">
- {exampleMovie.director.birthdate}
+ {director.birthdate}
</Descriptions.Item>
</Descriptions>
</>
--
GitLab