Home

評価値の取得

API

評価値取得API

frontend/src/services/ratings/getRating.ts

import { ApiContext, Movie, Rating, User } from '@/types/data';
import { fetcher } from '@/utils';

const context: ApiContext = {
  apiRootUrl: process.env.NEXT_PUBLIC_API_BASE_URL,
};

/**
 * 評価値取得API
 * @param user - ユーザ
 * @param movie - 映画
 * @returns 評価値
 */
const getRating = async (user: User, movie: Movie): Promise<{ rating: Rating }> => {
  const id = user.id + '_' + String(movie.id).padStart(6, '0');
  const res = await fetcher(`${context.apiRootUrl?.replace(/\/$/g, '')}/ratings/?id=${id}`, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    cache: 'no-store',
  });
  return res.ratings.at(-1);
};

export default getRating;

コンポーネント

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

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

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

const STAR_WIDTH = 24;

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

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

  const handleRatingClick = async (rating: number) => {
    await postRating(props.user, props.movie, rating);
    // ↓追加
    const rating_ = await getRating(props.user, props.movie);
    let movie_ = JSON.parse(JSON.stringify(props.movie));
    movie_.rating = JSON.parse(JSON.stringify(rating_));
    props.handleRatingClick(movie_);
    // ↑追加
  };
...（略）...
};

export default MovieCard;

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

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

...（略）...
const MovieList = (props: Props) => {
...（略）...
  // ↓追加
  const handleRatingClick = (movie: Movie) => {
    const movies_ = movies.map((movie_) => {
      let movie__ =
        movie_.id == movie.id
          ? JSON.parse(JSON.stringify(movie))
          : JSON.parse(JSON.stringify(movie_));
      return movie__;
    });
    setMovies(movies_);
  };
  // ↑追加

  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}
            handleRatingClick={handleRatingClick} // <- 追加
            key={movie.id}
          />
        ))}
        <button
...（略）...
        </button>
      </div>
    </>
  );
};

export default MovieList;

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

• http://localhost:3000

映画リスト上で評価値を更新してください。ページを切り替えても更新結果が維持されています。ただし、現時点では、ユーザ依存の処理を実装していないため、映画詳細ページを表示しても、ユーザの与えた評価値は表示されません。