diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx index e0a44d4f5..73d77dba3 100644 --- a/src/components/PersonDetails/index.tsx +++ b/src/components/PersonDetails/index.tsx @@ -1,5 +1,5 @@ import { useRouter } from 'next/router'; -import React, { useContext, useState } from 'react'; +import React, { useContext, useMemo, useState } from 'react'; import TruncateMarkup from 'react-truncate-markup'; import useSWR from 'swr'; import type { PersonDetail } from '../../../server/models/Person'; @@ -11,6 +11,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { LanguageContext } from '../../context/LanguageContext'; import ImageFader from '../Common/ImageFader'; import Ellipsis from '../../assets/ellipsis.svg'; +import { groupBy } from 'lodash'; const messages = defineMessages({ appearsin: 'Appears in', @@ -35,6 +36,42 @@ const PersonDetails: React.FC = () => { `/api/v1/person/${router.query.personId}/combined_credits?language=${locale}` ); + const sortedCast = useMemo(() => { + const grouped = groupBy(combinedCredits?.cast ?? [], 'id'); + + const reduced = Object.values(grouped).map((objs) => ({ + ...objs[0], + character: objs.map((pos) => pos.character).join(', '), + })); + + return reduced.sort((a, b) => { + const aVotes = a.voteCount ?? 0; + const bVotes = b.voteCount ?? 0; + if (aVotes > bVotes) { + return -1; + } + return 1; + }); + }, [combinedCredits]); + + const sortedCrew = useMemo(() => { + const grouped = groupBy(combinedCredits?.crew ?? [], 'id'); + + const reduced = Object.values(grouped).map((objs) => ({ + ...objs[0], + job: objs.map((pos) => pos.job).join(', '), + })); + + return reduced.sort((a, b) => { + const aVotes = a.voteCount ?? 0; + const bVotes = b.voteCount ?? 0; + if (aVotes > bVotes) { + return -1; + } + return 1; + }); + }, [combinedCredits]); + if (!data && !error) { return ; } @@ -43,24 +80,6 @@ const PersonDetails: React.FC = () => { return ; } - const sortedCast = combinedCredits?.cast.sort((a, b) => { - const aVotes = a.voteCount ?? 0; - const bVotes = b.voteCount ?? 0; - if (aVotes > bVotes) { - return -1; - } - return 1; - }); - - const sortedCrew = combinedCredits?.crew.sort((a, b) => { - const aVotes = a.voteCount ?? 0; - const bVotes = b.voteCount ?? 0; - if (aVotes > bVotes) { - return -1; - } - return 1; - }); - const isLoading = !combinedCredits && !errorCombinedCredits; const cast = (sortedCast ?? []).length > 0 && (