Commit 76918d84 authored by Jan Poláček's avatar Jan Poláček
Browse files

feat: homepage

parent 200ed61a

frontend/src/components/MovieCard/MovieCard.tsx

0 → 100644
+33 −0
Original line number Diff line number Diff line 
import {Button, Flex, Typography} from "antd";

import { MovieDetailed} from "../../models/movie.ts";

import imageApi from "../../api/imageApi.ts";

import "../../index.css";

import "./movie_card.css";

import {useNavigate} from "react-router-dom";

import React from "react";



type MovieCardProps = {

  movie: MovieDetailed;

}

const MovieCard: React.FC<MovieCardProps> = ({movie}) => {

  const navigate = useNavigate();

  const {Title, Paragraph} = Typography;



  const goToMovie = (movieId: number) => {

    navigate(`/movie/${movieId}`);

  }



  return (

    <Flex gap="middle" align="start" vertical className="box movie-card" >

      <img src={imageApi.getImagePath(movie.poster_path)} alt={movie.title} width="300"/>



      <Title>{movie.title}</Title>

      <Paragraph ellipsis={{rows: 3, expandable: true, symbol: 'more' }}>

        {movie.overview}

      </Paragraph>

      <Button className="movie-card__button" onClick={() => {goToMovie(movie.id)}}> Details </Button>

    </Flex>

  );

}



export default MovieCard;
 
 No newline at end of file

frontend/src/components/MovieCard/movie_card.css

0 → 100644
+7 −0
Original line number Diff line number Diff line 
.movie-card {

    width: 320px;

}



.movie-card__button {

    margin: 0 auto;

}
 
 No newline at end of file

frontend/src/components/Playlist/Playlist.tsx

0 → 100644
+34 −0
Original line number Diff line number Diff line 
import {useEffect, useState} from "react";

import {Flex} from "antd";

import movieApi from "../../api/movieApi.ts";

import MovieCard from "../MovieCard/MovieCard.tsx";

import {MovieDetailed} from "../../models/movie.ts";



type PlaylistProps = {

  movieIds: string[];

}

const Playlist: React.FC<PlaylistProps> = ({movieIds}) => {

  const [movies, setMovies] = useState<MovieDetailed[]>([]);



  useEffect(() => {

    Promise.all(movieIds.map(id => movieApi.getSingleById(id)))

      .then((movies: MovieDetailed[]) => {

        setMovies(movies);

      })

      .catch((error) => {

        console.error(error);

      });

  }, [movieIds]);



  return (

    <Flex>

      {movies?.map((movie) => (

        <div key={movie.id}>

          <MovieCard movie={movie}/>

        </div>

      ))}

    </Flex>

  );

}



export default Playlist;
 
 No newline at end of file

frontend/src/components/Playlist/playlist.css

0 → 100644
+3 −0
Original line number Diff line number Diff line 
.playlist__box {

    align-items: stretch;

}
 
 No newline at end of file

frontend/src/components/Trending/Trending.tsx

0 → 100644
+26 −0
Original line number Diff line number Diff line 
import {useEffect,useState} from "react";

import {Flex} from "antd";

import movieApi from "../../api/movieApi.ts";

import MovieCard from "../MovieCard/MovieCard.tsx";



const Trending: React.FC = () => {

  const [movies, setMovies] = useState([]);



  useEffect(() => {

    movieApi.getTrending().then((res) => {

      setMovies(res.results);

    });

  }, []);



  return (

    <Flex wrap>

      {movies?.map((movie) => (

        <div key={movie.id}>

          <MovieCard movie={movie}/>

        </div>

      ))}

    </Flex>

  );

}



export default Trending;
 
 No newline at end of file