Refactor admin and participant page (#464)

src/components/poll.tsx

@@ -1,5 +1,4 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
@@ -16,7 +15,7 @@ import DesktopPoll from "@/components/poll/desktop-poll";
 import MobilePoll from "@/components/poll/mobile-poll";
 import { preventWidows } from "@/utils/prevent-widows";
 
-import { trpc } from "../utils/trpc";
+import { trpc, trpcNext } from "../utils/trpc";
 import { useParticipants } from "./participants-provider";
 import ManagePoll from "./poll/manage-poll";
 import { useUpdatePollMutation } from "./poll/mutations";
@@ -31,28 +30,62 @@ import { usePoll } from "./poll-context";
 import Sharing from "./sharing";
 import { useUser } from "./user-provider";
 
-const PollPage: NextPage = () => {
-  const { poll, urlId, admin } = usePoll();
-  const { participants } = useParticipants();
-  const router = useRouter();
+const checkIfWideScreen = () => window.innerWidth > 640;
 
-  useTouchBeacon(poll.id);
+const useWideScreen = () => {
+  const [isWideScreen, setIsWideScreen] = React.useState(checkIfWideScreen);
 
+  React.useEffect(() => {
+    const listener = () => setIsWideScreen(checkIfWideScreen());
+
+    window.addEventListener("resize", listener);
+
+    return () => {
+      window.removeEventListener("resize", listener);
+    };
+  }, []);
+
+  return isWideScreen;
+};
+
+export const AdminControls = () => {
+  const { poll, urlId } = usePoll();
   const { t } = useTranslation("app");
 
+  const isWideScreen = useWideScreen();
+
+  const router = useRouter();
+  const [isSharingVisible, setSharingVisible] = React.useState(
+    !!router.query.sharing,
+  );
+
+  const queryClient = trpcNext.useContext();
+
   const session = useUser();
 
-  const queryClient = trpc.useContext();
-
   const { mutate: updatePollMutation } = useUpdatePollMutation();
 
+  React.useEffect(() => {
+    if (router.query.unsubscribe) {
+      updatePollMutation(
+        { urlId: urlId, notifications: false },
+        {
+          onSuccess: () => {
+            toast.success(t("notificationsDisabled"));
+            posthog.capture("unsubscribed from notifications");
+          },
+        },
+      );
+      router.replace(`/admin/${router.query.urlId}`, undefined, {
+        shallow: true,
+      });
+    }
+  }, [urlId, router, updatePollMutation, t]);
+
   const verifyEmail = trpc.useMutation(["polls.verification.verify"], {
     onSuccess: () => {
       toast.success(t("pollHasBeenVerified"));
-      queryClient.setQueryData(["polls.get", { urlId, admin }], {
-        ...poll,
-        verified: true,
-      });
+      queryClient.poll.invalidate();
       session.refresh();
       posthog.capture("verified email");
     },
@@ -73,27 +106,74 @@ const PollPage: NextPage = () => {
     }
   });
 
-  React.useEffect(() => {
-    if (router.query.unsubscribe) {
-      updatePollMutation(
-        { urlId: urlId, notifications: false },
-        {
-          onSuccess: () => {
-            toast.success(t("notificationsDisabled"));
-            posthog.capture("unsubscribed from notifications");
-          },
-        },
-      );
-      router.replace(`/admin/${router.query.urlId}`, undefined, {
-        shallow: true,
-      });
-    }
-  }, [urlId, router, updatePollMutation, t]);
+  return (
+    <>
+      <div className="mb-4 flex space-x-2 px-4 md:justify-end md:px-0">
+        <NotificationsToggle />
+        <ManagePoll placement={isWideScreen ? "bottom-end" : "bottom-start"} />
+        <Button
+          type="primary"
+          icon={<Share />}
+          onClick={() => {
+            setSharingVisible((value) => !value);
+          }}
+        >
+          {t("share")}
+        </Button>
+      </div>
+      <AnimatePresence initial={false}>
+        {isSharingVisible ? (
+          <motion.div
+            initial={{
+              opacity: 0,
+              scale: 0.8,
+              height: 0,
+            }}
+            animate={{
+              opacity: 1,
+              scale: 1,
+              height: "auto",
+              marginBottom: 16,
+            }}
+            exit={{
+              opacity: 0,
+              scale: 0.8,
+              height: 0,
+              marginBottom: 0,
+            }}
+            className="overflow-hidden"
+          >
+            <Sharing
+              onHide={() => {
+                setSharingVisible(false);
+              }}
+            />
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+      {poll.verified === false ? (
+        <div className="m-4 overflow-hidden rounded-lg border p-4 md:mx-0 md:mt-0">
+          <UnverifiedPollNotice />
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export const Poll = (props: { children?: React.ReactNode }) => {
+  const { t } = useTranslation("app");
+  const { poll } = usePoll();
+
+  useTouchBeacon(poll.id);
+
+  const { participants } = useParticipants();
+  const names = React.useMemo(
+    () => participants?.map(({ name }) => name) ?? [],
+    [participants],
+  );
 
   const checkIfWideScreen = () => window.innerWidth > 640;
 
-  const [isWideScreen, setIsWideScreen] = React.useState(checkIfWideScreen);
-
   React.useEffect(() => {
     const listener = () => setIsWideScreen(checkIfWideScreen());
 
@@ -104,16 +184,9 @@ const PollPage: NextPage = () => {
     };
   }, []);
 
+  const [isWideScreen, setIsWideScreen] = React.useState(checkIfWideScreen);
   const PollComponent = isWideScreen ? DesktopPoll : MobilePoll;
 
-  const names = React.useMemo(
-    () => participants?.map(({ name }) => name) ?? [],
-    [participants],
-  );
-
-  const [isSharingVisible, setSharingVisible] = React.useState(
-    !!router.query.sharing,
-  );
   return (
     <UserAvatarProvider seed={poll.id} names={names}>
       <div className="relative max-w-full py-4 md:px-4">
@@ -127,70 +200,7 @@ const PollPage: NextPage = () => {
             width: Math.max(768, poll.options.length * 95 + 200 + 160),
           }}
         >
-          {admin ? (
-            <>
-              <div className="mb-4 flex space-x-2 px-4 md:justify-end md:px-0">
-                <NotificationsToggle />
-                <ManagePoll
-                  placement={isWideScreen ? "bottom-end" : "bottom-start"}
-                />
-                <Button
-                  type="primary"
-                  icon={<Share />}
-                  onClick={() => {
-                    setSharingVisible((value) => !value);
-                  }}
-                >
-                  {t("share")}
-                </Button>
-              </div>
-              <AnimatePresence initial={false}>
-                {isSharingVisible ? (
-                  <motion.div
-                    initial={{
-                      opacity: 0,
-                      scale: 0.8,
-                      height: 0,
-                    }}
-                    animate={{
-                      opacity: 1,
-                      scale: 1,
-                      height: "auto",
-                      marginBottom: 16,
-                    }}
-                    exit={{
-                      opacity: 0,
-                      scale: 0.8,
-                      height: 0,
-                      marginBottom: 0,
-                    }}
-                    className="overflow-hidden"
-                  >
-                    <Sharing
-                      onHide={() => {
-                        setSharingVisible(false);
-                      }}
-                    />
-                  </motion.div>
-                ) : null}
-              </AnimatePresence>
-              {poll.verified === false ? (
-                <div className="m-4 overflow-hidden rounded-lg border p-4 md:mx-0 md:mt-0">
-                  <UnverifiedPollNotice />
-                </div>
-              ) : null}
-            </>
-          ) : null}
-          {!poll.admin && poll.adminUrlId ? (
-            <div className="mb-4 items-center justify-between rounded-lg px-4 md:flex md:space-x-4 md:border md:p-2 md:pl-4">
-              <div className="mb-4 font-medium md:mb-0">
-                {t("pollOwnerNotice", { name: poll.user.name })}
-              </div>
-              <a href={`/admin/${poll.adminUrlId}`} className="btn-default">
-                {t("goToAdmin")} &rarr;
-              </a>
-            </div>
-          ) : null}
+          {props.children}
           {poll.closed ? (
             <div className="flex bg-sky-100 py-3 px-4 text-sky-700 md:mb-4 md:rounded-lg md:shadow-sm">
               <div className="mr-2 rounded-md">
@@ -255,7 +265,6 @@ const PollPage: NextPage = () => {
               {participants ? <PollComponent /> : null}
             </React.Suspense>
           </div>
-
           <React.Suspense fallback={<div className="p-4">{t("loading")}</div>}>
             <Discussion />
           </React.Suspense>
@@ -264,5 +273,3 @@ const PollPage: NextPage = () => {
     </UserAvatarProvider>
   );
 };
-
-export default PollPage;