fix: add fetch from api

frontend/src/components/MoviePage.tsx

 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>
     </>