Clean up poll props

components/poll/mobile-poll.tsx

@@ -6,41 +6,41 @@ import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import ChevronDown from "@/components/icons/chevron-down.svg";
+import Pencil from "@/components/icons/pencil.svg";
+import PlusCircle from "@/components/icons/plus-circle.svg";
+import Trash from "@/components/icons/trash.svg";
 import { usePoll } from "@/components/use-poll";
 
-import { decodeDateOption } from "../../../utils/date-time-utils";
+import { decodeDateOption } from "../../utils/date-time-utils";
-import { requiredString } from "../../../utils/form-validation";
+import { requiredString } from "../../utils/form-validation";
-import Button from "../../button";
+import Button from "../button";
-import DateCard from "../../date-card";
+import DateCard from "../date-card";
-import CheckCircle from "../../icons/check-circle.svg";
+import CheckCircle from "../icons/check-circle.svg";
-import ChevronDown from "../../icons/chevron-down.svg";
+import { styleMenuItem } from "../menu-styles";
-import Pencil from "../../icons/pencil.svg";
+import NameInput from "../name-input";
-import PlusCircle from "../../icons/plus-circle.svg";
+import TimeZonePicker from "../time-zone-picker";
-import Trash from "../../icons/trash.svg";
+import { useUserName } from "../user-name-context";
-import { styleMenuItem } from "../../menu-styles";
-import NameInput from "../../name-input";
-import TimeZonePicker from "../../time-zone-picker";
-import { useUserName } from "../../user-name-context";
 import {
   useAddParticipantMutation,
   useUpdateParticipantMutation,
-} from "../mutations";
+} from "./mutations";
-import TimeRange from "../time-range";
+import TimeRange from "./time-range";
-import { ParticipantForm, PollProps } from "../types";
+import { ParticipantForm, PollProps } from "./types";
-import { useDeleteParticipantModal } from "../use-delete-participant-modal";
+import { useDeleteParticipantModal } from "./use-delete-participant-modal";
-import UserAvater from "../user-avatar";
+import UserAvater from "./user-avatar";
-import VoteIcon from "../vote-icon";
+import VoteIcon from "./vote-icon";
 
 const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
   pollId,
-  timeZone,
-  options,
-  participants,
   highScore,
   targetTimeZone,
   onChangeTargetTimeZone,
-  role,
 }) => {
+  const poll = usePoll();
+
+  const { timeZone, options, participants, role } = poll;
+
   const [, setUserName] = useUserName();
 
   const participantById = participants.reduce<
@@ -88,8 +88,6 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
     <input type="checkbox" className="hidden" {...register("votes")} />
   );
 
-  const poll = usePoll();
-
   return (
     <form
       className="border-t border-b bg-white shadow-sm"

components/poll/mobile-poll/index.ts

@@ -1 +0,0 @@
-export { default } from "./mobile-poll";

components/poll/poll.tsx

@@ -60,16 +60,16 @@ const minSidebarWidth = 180;
 
 const Poll: React.VoidFunctionComponent<PollProps> = ({
   pollId,
-  role,
-  timeZone,
-  options,
-  participants,
   highScore,
   targetTimeZone,
   onChangeTargetTimeZone,
 }) => {
   const { t } = useTranslation("app");
 
+  const poll = usePoll();
+
+  const { timeZone, options, participants, role } = poll;
+
   const [ref, { width }] = useMeasure<HTMLDivElement>();
   const [editingParticipantId, setEditingParticipantId] =
     React.useState<string | null>(null);
@@ -131,8 +131,6 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
     );
   };
 
-  const poll = usePoll();
-
   return (
     <PollContext.Provider
       value={{
@@ -156,35 +154,33 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
       >
         <div className=" border-t border-b bg-white shadow-sm md:rounded-lg md:border">
           <div className="sticky top-0 z-10 rounded-t-lg border-b border-gray-200 bg-white/80 shadow-sm shadow-slate-50 backdrop-blur-md">
-            {role !== "readOnly" ? (
+            <div className="flex h-14 items-center justify-end space-x-4 rounded-t-lg border-b bg-gray-50 px-4">
-              <div className="flex h-14 items-center justify-end space-x-4 rounded-t-lg border-b bg-gray-50 px-4">
+              {timeZone ? (
-                {timeZone ? (
+                <div className="flex grow items-center">
-                  <div className="flex grow items-center">
+                  <div className="mr-2 text-sm font-medium text-slate-500">
-                    <div className="mr-2 text-sm font-medium text-slate-500">
+                    {t("timeZone")}
-                      {t("timeZone")}
-                    </div>
-                    <TimeZonePicker
-                      value={targetTimeZone}
-                      onChange={onChangeTargetTimeZone}
-                      className="grow"
-                    />
                   </div>
-                ) : null}
+                  <TimeZonePicker
-                <div className="flex shrink-0">
+                    value={targetTimeZone}
-                  {!shouldShowNewParticipantForm && !poll.closed ? (
+                    onChange={onChangeTargetTimeZone}
-                    <Button
+                    className="grow"
-                      type="primary"
+                  />
-                      icon={<PlusCircle />}
-                      onClick={() => {
-                        setShouldShowNewParticipantForm(true);
-                      }}
-                    >
-                      New Participant
-                    </Button>
-                  ) : null}
                 </div>
+              ) : null}
+              <div className="flex shrink-0">
+                {!shouldShowNewParticipantForm && !poll.closed ? (
+                  <Button
+                    type="primary"
+                    icon={<PlusCircle />}
+                    onClick={() => {
+                      setShouldShowNewParticipantForm(true);
+                    }}
+                  >
+                    New Participant
+                  </Button>
+                ) : null}
               </div>
-            ) : null}
+            </div>
             <div className="flex">
               <div
                 className="flex shrink-0 items-center py-4 pl-4 pr-2 font-medium"

components/poll/types.ts

@@ -1,17 +1,10 @@
-import { Option, Participant, Role, Vote } from "@prisma/client";
-
 export interface ParticipantForm {
   name: string;
   votes: string[];
 }
 export interface PollProps {
   pollId: string;
-  role: Role | "readOnly";
-  timeZone: string | null;
-  options: Array<Option & { votes: Vote[] }>;
-  participants: Array<Participant & { votes: Vote[] }>;
   highScore: number;
-  initialName?: string;
   onChangeTargetTimeZone: (timeZone: string) => void;
   targetTimeZone: string;
 }

pages/poll.tsx

@@ -292,10 +292,6 @@ const PollPage: NextPage = () => {
               <div className="mb-4 lg:mb-8">
                 <PollComponent
                   pollId={poll.urlId}
-                  role={poll.role}
-                  timeZone={poll.timeZone}
-                  options={sortedOptions}
-                  participants={poll.participants}
                   highScore={highScore}
                   targetTimeZone={targetTimeZone}
                   onChangeTargetTimeZone={setTargetTimeZone}