Home

映画カードへの評価値コンポーネントの追加

コンポーネント

映画カードコンポーネント

frontend/src/app/components/movie/MovieCard.tsx

import { Movie, User } from '@/types/data'; // <- Userを追加
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import StarRating from '../rating/StarRating'; // <- 追加

const STAR_WIDTH = 24; // <- 追加

type Props = {
  movie: Movie;
  user: User; // <- 追加
};

const MovieCard = (props: Props) => {
  const img_url = '/img/dummy_poster.png';

  return (
    <>
      <article className="h-72 w-32 shadow" key={props.movie.id}>
        <Link href={`/movies/${props.movie.id}`} className="hover:opacity-75">
          <Image src={img_url} alt="" width={120} height={180} priority={true} />
        </Link>
        {/* ↓追加 */}
        {props.user ? (
          <StarRating starWidth={STAR_WIDTH} rating={props.movie.rating?.rating} />
        ) : (
          <></>
        )}
        {/* ↑追加 */}
...（略）...
      </article>
    </>
  );
};

export default MovieCard;

映画リストコンポーネント

frontend/src/app/components/movie/MovieList.tsx

'use client';
import { Movie, User } from '@/types/data'; // <- Userを追加
import React, { useEffect, useState } from 'react';
import MovieCard from './MovieCard';
...（略）...
type Props = {
  phrase: string;
  movies: Movie[];
  perPage: number;
  user: User; // <- 追加
};

const MovieList = (props: Props) => {
...（略）...
  return (
    <>
      <div className="text-xl font-bold text-gray-800">{props.phrase}</div>
      <div className="mx-4 my-4 flex justify-between">
        <button
...（略）...
        </button>
...（略）...
        {currentMovies?.map((movie) => (
          <MovieCard movie={movie} user={props.user} key={movie.id} /> // <- userを追加
        ))}
        <button
...（略）...
        </button>
      </div>
    </>
  );
};

export default MovieList;

ページ

インデックスページ

frontend/src/app/page.tsx

import { SessionProvider } from 'next-auth/react';
import React from 'react';
import HelloAccount from './components/HelloAccount';
import connectUser from '@/services/users/connectUser';
import MovieList from './components/movie/MovieList';
import getMovies from '@/services/movies/getMovies';
import { auth } from '@/auth'; // <- 追加
import getUser from '@/services/users/getUser'; // <- 追加

const PER_PAGE = 5;

const Index = async () => {
  await connectUser();
  const session = await auth(); // <- 追加
  const user = session ? await getUser(session?.user?.email!) : null; // <- 追加
  const { movies } = await getMovies();

  return (
    <>
      <section>
        <SessionProvider>
          <HelloAccount />
        </SessionProvider>
        <MovieList phrase="本日のおすすめ" movies={movies} perPage={PER_PAGE} user={user!} />  {/* <- userを追加 */}
      </section>
    </>
  );
};

export default Index;

ブラウザで下記URLにアクセスしてください。

• http://localhost:3000

サインインすると、映画リスト内の各映画カードに評価値コンポーネントが表示されます。評価値コンポーネント上で任意の評価値をクリックすると、その評価値までのスターが黄色く表示されます。ただし、現時点では、評価値は記憶されないため、ブラウザを更新したり、ページを切り替えたりすると元に戻ります。また、現時点では、ユーザ情報は評価値コンポーネントの表示/非表示の判定のために参照しているだけですので、ユーザ依存の評価値は取得できません。