From d5fc45c5067861ede9c32e531c5e3ac5bc5a1010 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sat, 26 Aug 2023 11:02:54 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Optimize=20participant=20q?=
 =?UTF-8?q?uery?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/participants-provider.tsx  |   3 +-
 apps/web/src/components/poll-context.tsx      |   4 +-
 .../poll/desktop-poll/participant-row.tsx     |   3 +-
 .../poll/manage-poll/finalize-poll-dialog.tsx |  39 ++--
 .../manage-poll/notify-participants-form.tsx  | 209 ------------------
 apps/web/src/contexts/current-event.ts        |  32 ---
 apps/web/src/utils/trpc/types.ts              |   7 +-
 .../trpc/routers/polls/participants.ts        |   7 +-
 8 files changed, 33 insertions(+), 271 deletions(-)
 delete mode 100644 apps/web/src/components/poll/manage-poll/notify-participants-form.tsx

diff --git a/apps/web/src/components/participants-provider.tsx b/apps/web/src/components/participants-provider.tsx
index 44f938629..00cafe367 100644
--- a/apps/web/src/components/participants-provider.tsx
+++ b/apps/web/src/components/participants-provider.tsx
@@ -1,9 +1,10 @@
 import { trpc } from "@rallly/backend";
-import { Participant, Vote, VoteType } from "@rallly/database";
+import { Participant, VoteType } from "@rallly/database";
 import * as React from "react";
 
 import { useVisibility } from "@/components/visibility";
 import { usePermissions } from "@/contexts/permissions";
+import { Vote } from "@/utils/trpc/types";
 
 import { useRequiredContext } from "./use-required-context";
 
diff --git a/apps/web/src/components/poll-context.tsx b/apps/web/src/components/poll-context.tsx
index 3bfa16af9..d16a91787 100644
--- a/apps/web/src/components/poll-context.tsx
+++ b/apps/web/src/components/poll-context.tsx
@@ -1,4 +1,4 @@
-import { Participant, Vote, VoteType } from "@rallly/database";
+import { Participant, VoteType } from "@rallly/database";
 import { TrashIcon } from "@rallly/icons";
 import { keyBy } from "lodash";
 import { useTranslation } from "next-i18next";
@@ -10,7 +10,7 @@ import {
   ParsedTimeSlotOption,
 } from "@/utils/date-time-utils";
 import { useDayjs } from "@/utils/dayjs";
-import { GetPollApiResponse } from "@/utils/trpc/types";
+import { GetPollApiResponse, Vote } from "@/utils/trpc/types";
 
 import ErrorPage from "./error-page";
 import { useParticipants } from "./participants-provider";
diff --git a/apps/web/src/components/poll/desktop-poll/participant-row.tsx b/apps/web/src/components/poll/desktop-poll/participant-row.tsx
index 86fc3a0cb..b55ee6024 100644
--- a/apps/web/src/components/poll/desktop-poll/participant-row.tsx
+++ b/apps/web/src/components/poll/desktop-poll/participant-row.tsx
@@ -1,4 +1,4 @@
-import { Participant, Vote, VoteType } from "@rallly/database";
+import { Participant, VoteType } from "@rallly/database";
 import { MoreHorizontalIcon } from "@rallly/icons";
 import { Button } from "@rallly/ui/button";
 import clsx from "clsx";
@@ -8,6 +8,7 @@ import { ParticipantDropdown } from "@/components/participant-dropdown";
 import { usePoll } from "@/components/poll-context";
 import { useUser } from "@/components/user-provider";
 import { usePermissions } from "@/contexts/permissions";
+import { Vote } from "@/utils/trpc/types";
 
 import UserAvatar from "../user-avatar";
 import VoteIcon from "../vote-icon";
diff --git a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
index f0a20fbfa..edee3251d 100644
--- a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
@@ -38,31 +38,22 @@ const useScoreByOptionId = () => {
   const { options } = usePoll();
 
   return React.useMemo(() => {
-    const res = options.reduce<Record<string, OptionScore>>((acc, option) => {
-      acc[option.id] = { yes: [], ifNeedBe: [], no: [] };
-      return acc;
-    }, {});
+    const scoreByOptionId: Record<string, OptionScore> = {};
+    options.forEach((option) => {
+      scoreByOptionId[option.id] = {
+        yes: [],
+        ifNeedBe: [],
+        no: [],
+      };
+    });
 
-    const votes = responses.flatMap((response) => response.votes);
+    responses?.forEach((response) => {
+      response.votes.forEach((vote) => {
+        scoreByOptionId[vote.optionId][vote.type].push(response.id);
+      });
+    });
 
-    for (const vote of votes) {
-      if (!res[vote.optionId]) {
-        res[vote.optionId] = { yes: [], ifNeedBe: [], no: [] };
-      }
-
-      switch (vote.type) {
-        case "yes":
-          res[vote.optionId].yes.push(vote.participantId);
-          break;
-        case "ifNeedBe":
-          res[vote.optionId].ifNeedBe.push(vote.participantId);
-          break;
-        case "no":
-          res[vote.optionId].no.push(vote.participantId);
-          break;
-      }
-    }
-    return res;
+    return scoreByOptionId;
   }, [responses, options]);
 };
 
@@ -195,7 +186,7 @@ export const FinalizePollForm = ({
                   </RadioGroup>
                 </FormControl>
                 {max < options.length ? (
-                  <div className="absolute bottom-0 mt-2 w-full bg-gradient-to-t from-white via-white to-white/10 py-8 px-3">
+                  <div className="absolute bottom-0 mt-2 w-full bg-gradient-to-t from-white via-white to-white/10 px-3 py-8">
                     <Button
                       variant="ghost"
                       className="w-full"
diff --git a/apps/web/src/components/poll/manage-poll/notify-participants-form.tsx b/apps/web/src/components/poll/manage-poll/notify-participants-form.tsx
deleted file mode 100644
index 32bd4d906..000000000
--- a/apps/web/src/components/poll/manage-poll/notify-participants-form.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import { cn } from "@rallly/ui";
-import { Button } from "@rallly/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@rallly/ui/form";
-import { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
-import dayjs from "dayjs";
-import { Trans } from "next-i18next";
-import React from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { DateIcon } from "@/components/date-icon";
-import { useParticipants } from "@/components/participants-provider";
-import { ConnectedScoreSummary } from "@/components/poll/score-summary";
-import { VoteSummaryProgressBar } from "@/components/vote-summary-progress-bar";
-import { useDateFormatter, usePoll } from "@/contexts/poll";
-
-const formSchema = z.object({
-  selectedOptionId: z.string(),
-  notify: z.enum(["everyone", "available", "noone"]),
-});
-
-type FinalizeFormData = z.infer<typeof formSchema>;
-
-type OptionScore = {
-  yes: string[];
-  ifNeedBe: string[];
-  no: string[];
-};
-
-const useScoreByOptionId = () => {
-  const { participants: responses } = useParticipants();
-  const { options } = usePoll();
-
-  return React.useMemo(() => {
-    const res = options.reduce<Record<string, OptionScore>>((acc, option) => {
-      acc[option.id] = { yes: [], ifNeedBe: [], no: [] };
-      return acc;
-    }, {});
-
-    const votes = responses.flatMap((response) => response.votes);
-
-    for (const vote of votes) {
-      if (!res[vote.optionId]) {
-        res[vote.optionId] = { yes: [], ifNeedBe: [], no: [] };
-      }
-
-      switch (vote.type) {
-        case "yes":
-          res[vote.optionId].yes.push(vote.participantId);
-          break;
-        case "ifNeedBe":
-          res[vote.optionId].ifNeedBe.push(vote.participantId);
-          break;
-        case "no":
-          res[vote.optionId].no.push(vote.participantId);
-          break;
-      }
-    }
-    return res;
-  }, [responses, options]);
-};
-
-export const FinalizePollForm = ({
-  name,
-  onSubmit,
-}: {
-  name: string;
-  onSubmit: (data: FinalizeFormData) => void;
-}) => {
-  const poll = usePoll();
-  const [max, setMax] = React.useState(5);
-
-  const scoreByOptionId = useScoreByOptionId();
-  const { participants } = useParticipants();
-
-  const options = [...poll.options]
-    .sort((a, b) => {
-      const aYes = scoreByOptionId[a.id].yes.length;
-      const bYes = scoreByOptionId[b.id].yes.length;
-
-      if (aYes !== bYes) {
-        return bYes - aYes;
-      }
-
-      const aIfNeedBe = scoreByOptionId[a.id].ifNeedBe.length;
-      const bIfNeedBe = scoreByOptionId[b.id].ifNeedBe.length;
-
-      return bIfNeedBe - aIfNeedBe;
-    })
-    .map((option) => {
-      return { ...option, votes: scoreByOptionId[option.id] };
-    });
-
-  const dateFormatter = useDateFormatter();
-  const form = useForm<FinalizeFormData>({
-    defaultValues: {
-      selectedOptionId: options[0].id,
-      notify: "everyone",
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form
-        id={name}
-        className="space-y-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <FormField
-          control={form.control}
-          name="selectedOptionId"
-          render={({ field }) => {
-            return (
-              <FormItem className="relative">
-                <FormLabel htmlFor={field.name}>
-                  <Trans i18nKey="dates" />
-                </FormLabel>
-                <FormControl>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    className="grid gap-2"
-                  >
-                    {options.slice(0, max).map((option) => {
-                      const start = dateFormatter(option.start);
-                      const end = dateFormatter(
-                        dayjs(option.start).add(option.duration, "minute"),
-                      );
-                      return (
-                        <label
-                          key={option.id}
-                          htmlFor={option.id}
-                          className={cn(
-                            "group flex select-none items-center gap-4 rounded-md border bg-white p-3 text-base",
-                            field.value === option.id
-                              ? "bg-primary-50 border-primary ring-primary ring-1"
-                              : "hover:bg-gray-50",
-                          )}
-                        >
-                          <div className="hidden">
-                            <RadioGroupItem id={option.id} value={option.id} />
-                          </div>
-                          <div>
-                            <DateIcon date={start} />
-                          </div>
-                          <div className="grow">
-                            <div className="flex">
-                              <div className="grow whitespace-nowrap">
-                                <div className="text-sm font-semibold">
-                                  {option.duration > 0
-                                    ? start.format("LL")
-                                    : start.format("LL")}
-                                </div>
-                                <div className="text-muted-foreground text-sm">
-                                  {option.duration > 0 ? (
-                                    `${start.format("LT")} - ${end.format(
-                                      "LT",
-                                    )}`
-                                  ) : (
-                                    <Trans
-                                      i18nKey="allDay"
-                                      defaults="All day"
-                                    />
-                                  )}
-                                </div>
-                              </div>
-                              <div>
-                                <ConnectedScoreSummary optionId={option.id} />
-                              </div>
-                            </div>
-                            <div className="mt-2">
-                              <VoteSummaryProgressBar
-                                {...scoreByOptionId[option.id]}
-                                total={participants.length}
-                              />
-                            </div>
-                          </div>
-                        </label>
-                      );
-                    })}
-                  </RadioGroup>
-                </FormControl>
-                {max < options.length ? (
-                  <div className="absolute bottom-0 mt-2 w-full bg-gradient-to-t from-white via-white to-white/10 py-8 px-3">
-                    <Button
-                      variant="ghost"
-                      className="w-full"
-                      onClick={() => {
-                        setMax((oldMax) => oldMax + 5);
-                      }}
-                    >
-                      <Trans i18nKey="showMore" />
-                    </Button>
-                  </div>
-                ) : null}
-              </FormItem>
-            );
-          }}
-        />
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/web/src/contexts/current-event.ts b/apps/web/src/contexts/current-event.ts
index 844ece026..dbca64d2f 100644
--- a/apps/web/src/contexts/current-event.ts
+++ b/apps/web/src/contexts/current-event.ts
@@ -25,38 +25,6 @@ export type OptionScore = {
   no: string[];
 };
 
-export const useScoreByOptionId = () => {
-  const { data: responses = [] } = useCurrentPollResponses();
-  const { data: options = [] } = useCurrentPollOptions();
-  return React.useMemo(() => {
-    const res = options.reduce<Record<string, OptionScore>>((acc, option) => {
-      acc[option.id] = { yes: [], ifNeedBe: [], no: [] };
-      return acc;
-    }, {});
-
-    const votes = responses.flatMap((response) => response.votes);
-
-    for (const vote of votes) {
-      if (!res[vote.optionId]) {
-        res[vote.optionId] = { yes: [], ifNeedBe: [], no: [] };
-      }
-
-      switch (vote.type) {
-        case "yes":
-          res[vote.optionId].yes.push(vote.participantId);
-          break;
-        case "ifNeedBe":
-          res[vote.optionId].ifNeedBe.push(vote.participantId);
-          break;
-        case "no":
-          res[vote.optionId].no.push(vote.participantId);
-          break;
-      }
-    }
-    return res;
-  }, [responses, options]);
-};
-
 export const useCurrentPollOptions = () => {
   const pollId = useCurrentEventId();
   return trpc.polls.options.list.useQuery({ pollId });
diff --git a/apps/web/src/utils/trpc/types.ts b/apps/web/src/utils/trpc/types.ts
index 15365ad34..b91d6cccc 100644
--- a/apps/web/src/utils/trpc/types.ts
+++ b/apps/web/src/utils/trpc/types.ts
@@ -1,4 +1,4 @@
-import { User } from "@rallly/database";
+import { User, VoteType } from "@rallly/database";
 
 export type GetPollApiResponse = {
   id: string;
@@ -16,3 +16,8 @@ export type GetPollApiResponse = {
   createdAt: Date;
   deleted: boolean;
 };
+
+export type Vote = {
+  optionId: string;
+  type: VoteType;
+};
diff --git a/packages/backend/trpc/routers/polls/participants.ts b/packages/backend/trpc/routers/polls/participants.ts
index 2b976d23f..6f29a6575 100644
--- a/packages/backend/trpc/routers/polls/participants.ts
+++ b/packages/backend/trpc/routers/polls/participants.ts
@@ -21,7 +21,12 @@ export const participants = router({
           pollId,
         },
         include: {
-          votes: true,
+          votes: {
+            select: {
+              optionId: true,
+              type: true,
+            },
+          },
         },
         orderBy: [
           {