rallly/src/components/participants-provider.tsx

import { Participant, Vote, VoteType } from "@prisma/client";
import { useTranslation } from "next-i18next";
import * as React from "react";

import { trpc } from "../utils/trpc";
import FullPageLoader from "./full-page-loader";
import { useRequiredContext } from "./use-required-context";

const ParticipantsContext =
  React.createContext<{
    participants: Array<Participant & { votes: Vote[] }>;
    getParticipants: (optionId: string, voteType: VoteType) => Participant[];
  } | null>(null);

export const useParticipants = () => {
  return useRequiredContext(ParticipantsContext);
};

export const ParticipantsProvider: React.VoidFunctionComponent<{
  children?: React.ReactNode;
  pollId: string;
}> = ({ children, pollId }) => {
  const { t } = useTranslation("app");

  const { data: participants } = trpc.useQuery([
    "polls.participants.list",
    { pollId },
  ]);

  const getParticipants = (
    optionId: string,
    voteType: VoteType,
  ): Participant[] => {
    if (!participants) {
      return [];
    }
    return participants.filter((participant) => {
      return participant.votes.some((vote) => {
        return vote.optionId === optionId && vote.type === voteType;
      });
    });
  };

  // TODO (Luke Vella) [2022-05-18]: Add mutations here

  if (!participants) {
    return <FullPageLoader>{t("loadingParticipants")}</FullPageLoader>;
  }

  return (
    <ParticipantsContext.Provider value={{ participants, getParticipants }}>
      {children}
    </ParticipantsContext.Provider>
  );
};