overseerr/src/components/TvDetails/Season/index.tsx

import AirDateBadge from '@app/components/AirDateBadge';
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
import type { SeasonWithEpisodes } from '@server/models/Tv';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';

const messages = defineMessages({
  somethingwentwrong: 'Something went wrong while retrieving season data.',
});

type SeasonProps = {
  seasonNumber: number;
  tvId: number;
};

const Season = ({ seasonNumber, tvId }: SeasonProps) => {
  const intl = useIntl();
  const { data, error } = useSWR<SeasonWithEpisodes>(
    `/api/v1/tv/${tvId}/season/${seasonNumber}`
  );

  if (!data && !error) {
    return <LoadingSpinner />;
  }

  if (!data) {
    return <div>{intl.formatMessage(messages.somethingwentwrong)}</div>;
  }

  return (
    <div className="flex flex-col justify-center divide-y divide-gray-700">
      {data.episodes
        .slice()
        .reverse()
        .map((episode) => {
          return (
            <div
              className="flex flex-col space-y-4 py-4 xl:flex-row xl:space-y-4 xl:space-x-4"
              key={`season-${seasonNumber}-episode-${episode.episodeNumber}`}
            >
              <div className="flex-1">
                <div className="flex flex-col space-y-2 xl:flex-row xl:items-center xl:space-y-0 xl:space-x-2">
                  <h3 className="text-lg">{episode.name}</h3>
                  <AirDateBadge airDate={episode.airDate} />
                </div>
                {episode.overview && <p>{episode.overview}</p>}
              </div>
              {episode.stillPath && (
                <img
                  className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
                  src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
                  alt=""
                />
              )}
            </div>
          );
        })}
    </div>
  );
};

export default Season;