fix: changed Preview.tsx to fetch movies from API

frontend/src/components/Preview.tsx

@@ -11,8 +11,9 @@ import {
 } from "antd";
 import Meta from "antd/lib/card/Meta";
 import Title from "antd/lib/skeleton/Title";
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
+import axiosConfig from "../axios-config";
 
 const contentStyle: React.CSSProperties = {
   height: "320px",
@@ -46,106 +47,6 @@ export interface DirectorIO {
   birthDate?: string;
 }
 
-//example - TODO replace this with API preview call  - get POPULAR movies (probably 6 is enough)
-export const cardsDataExample: MovieIO[] = [
-  {
-    id: "1",
-    originalName: "Cars",
-    name: "Auta",
-    intro: "auta ve filmu",
-    publishedAt: "7.8.2005",
-    runTimeMinutes: 125,
-    director: {
-      id: "xd123",
-      name: "Kenny",
-      surname: "Omega",
-      birthDate: "9.9.1980",
-    },
-    picture: "https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg",
-  },
-  {
-    id: "2",
-    originalName: "Monster House",
-    name: "V tom domě straší",
-    intro: "jo ten dum je docela spooky",
-    publishedAt: "4.4.1994",
-    runTimeMinutes: 80,
-    picture:
-      "https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg",
-    director: {
-      id: "xp234",
-      name: "Bray",
-      surname: "Wyatt",
-      birthDate: "unknown",
-    },
-  },
-  {
-    id: "3",
-    originalName: "Pokemon",
-    name: "Pokémon",
-    intro: "Gotta catch them all.",
-    publishedAt: "9.9.1970",
-    runTimeMinutes: 600,
-    picture:
-      "https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg",
-    director: {
-      id: "xc456",
-      name: "Kazuchika",
-      surname: "Okada",
-      birthDate: "17.2.1984",
-    },
-  },
-  {
-    id: "4",
-    originalName: "Gympl",
-    name: "Gympl",
-    intro: "VO SEDUMNÁCT METRŮ?",
-    publishedAt: "2.2.2005",
-    runTimeMinutes: 96,
-    picture:
-      "https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg",
-    director: {
-      id: "xs789",
-      name: "Tomáš",
-      surname: "Vorel",
-      birthDate: "někdy minulé století",
-    },
-  },
-  {
-    id: "5",
-    originalName: "Toy Story",
-    name: "Příběh hraček",
-    intro: "Hmm the floor here is made of floor",
-    publishedAt: "4.5.1999",
-    runTimeMinutes: 90,
-    picture:
-      "https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg",
-    director: {
-      id: "xl753",
-      name: "Tomohiro",
-      surname: "Ishii",
-      birthDate: "19.9.1970",
-    },
-  },
-  {
-    id: "6",
-    name: "Smoke",
-    originalName: "Kouř",
-    intro:
-      "Jedu dál stále s tebou víme kam cesty vedou je to fajn fajn fajn je to fajn fajnový",
-    publishedAt: "17.11.1989",
-    runTimeMinutes: 50,
-    picture:
-      "https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg",
-    director: {
-      id: "xx787",
-      name: "Zdenda",
-      surname: "Pohlreich",
-      birthDate: "4.4.1985",
-    },
-  },
-];
-
 //example - TODO replace this with API preview call  - get RECENT movies (probably 6-7 is enough)
 export const cardsDataExample2: MovieIO[] = [
   {
@@ -246,7 +147,30 @@ export const cardsDataExample2: MovieIO[] = [
   },
 ];
 
-const Preview: React.FC = () => (
+export const Preview: React.FC = () => {
+  const [movies, setMovies] = useState<MovieIO[]>([]);
+  const [isError, setIsError] = useState<boolean>(false);
+
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await axiosConfig.get("movies?mostRecentCnt=6");
+        setMovies(response.data);
+      } catch (err) {
+        setIsError(true);
+      }
+    }
+
+    void fetchCategories();
+  }, [])
+
+  if (isError) {
+    return <h3>Something went wrong…</h3>;
+  }
+
+
+  return (
   <Space
     className="preview"
     direction="vertical"
@@ -254,7 +178,7 @@ const Preview: React.FC = () => (
   >
     <Card title="Editor's picks">
       <Row justify="space-evenly" gutter={50}>
-        {cardsDataExample.map((movie) => {
+        {movies.map((movie) => {
           return (
             <Col flex={1}>
               <Link to={`/movie/${movie.id}`}>
@@ -297,6 +221,6 @@ const Preview: React.FC = () => (
     </Space>
     </Card>
   </Space>
-);
+)};
 
 export default Preview;