Newer
Older
import {
Card,
Carousel,
Col,
Divider,
Grid,
Image,
Menu,
Row,
Space,
} from "antd";
import Meta from "antd/lib/card/Meta";
import Title from "antd/lib/skeleton/Title";
import React, {useEffect, useState} from "react";
Tomáš Havlíček
committed
import { Link } from "react-router-dom";
import axiosConfig from "../axios-config";
Tomáš Havlíček
committed
const contentStyle: React.CSSProperties = {
color: "#fff",
lineHeight: "160px",
textAlign: "center",
background: "#364d79",
};
export interface CategoryIO {
id: string;
name: string;
movies: MovieIO[];
Tomáš Havlíček
committed
}
export interface MovieIO {
id: string;
name: string;
originalName: string;
intro: string;
picture: string;
publishedAt: string;
runTimeMinutes: number;
Tomáš Havlíček
committed
}
export interface DirectorIO {
id: string;
name: string;
surname: string;
Tomáš Havlíček
committed
}
//example - TODO replace this with API preview call - get RECENT movies (probably 6-7 is enough)
export const cardsDataExample2: MovieIO[] = [
{
id: "1",
originalName: "Cars",
name: "Auta",
intro: "auta ve filmu",
publishedAt: "7.8.2005",
runTimeMinutes: 125,
director: {
id: "xd123",
name: "Kenny",
surname: "Omega",
},
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",
},
},
{
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",
},
},
{
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",
},
},
{
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",
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"
style={{ display: "flex", paddingTop: "2%" }}
>
<Card title="Editor's picks">
<Row justify="space-evenly" gutter={50}>
{movies.map((movie) => {
return (
<Col flex={1}>
<Link to={`/movie/${movie.id}`}>
<Card
hoverable
style={{
width: "240px",
}}
cover={<img alt={movie.name} src={movie.picture} />}
>
<Meta title={movie.name} description={movie.originalName} />
</Card>
</Link>
</Col>
);
})}
</Row>
<Row justify="space-evenly" gutter={50}>
{cardsDataExample2.map((movie) => {
return (
<Col flex={1}>
<Link to={`/movie/${movie.id}`}>
<Card
hoverable
style={{
width: "240px",
}}
cover={<img alt={movie.name} src={movie.picture} />}
>
<Meta title={movie.name} description={movie.originalName} />
</Card>
</Link>
</Col>
);
})}
</Row>