✨ Skip user details step for logged in users (#602)

apps/web/src/components/create-poll.tsx

@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import React from "react";
-import { useSessionStorage } from "react-use";
 
 import { usePostHog } from "@/utils/posthog";
 
@@ -22,8 +21,6 @@ import { useUser } from "./user-provider";
 
 type StepName = "eventDetails" | "options" | "userDetails";
 
-const steps: StepName[] = ["eventDetails", "options", "userDetails"];
-
 const required = <T,>(v: T | undefined): T => {
   if (!v) {
     throw new Error("Required value is missing");
@@ -32,9 +29,6 @@ const required = <T,>(v: T | undefined): T => {
   return v;
 };
 
-const initialNewEventData: NewEventData = { currentStep: 0 };
-const sessionStorageKey = "newEventFormData";
-
 export interface CreatePollPageProps {
   title?: string;
   location?: string;
@@ -42,48 +36,35 @@ export interface CreatePollPageProps {
   view?: "week" | "month";
 }
 
-const Page: React.FunctionComponent<CreatePollPageProps> = ({
-  title,
-  location,
-  description,
-  view,
-}) => {
+const Page: React.FunctionComponent = () => {
   const { t } = useTranslation("app");
 
   const router = useRouter();
 
   const session = useUser();
 
-  const [persistedFormData, setPersistedFormData] =
-    useSessionStorage<NewEventData>(sessionStorageKey, {
-      currentStep: 0,
-      eventDetails: {
-        title,
-        location,
-        description,
-      },
-      options: {
-        view,
-      },
-      userDetails:
-        session.user?.isGuest === false
-          ? {
-              name: session.user.name,
-              contact: session.user.email,
-            }
-          : undefined,
-    });
-
-  const [formData, setTransientFormData] = React.useState(persistedFormData);
-
-  const setFormData = React.useCallback(
-    (newEventData: NewEventData) => {
-      setTransientFormData(newEventData);
-      setPersistedFormData(newEventData);
-    },
-    [setPersistedFormData],
+  const steps: StepName[] = React.useMemo(
+    () =>
+      session.user.isGuest
+        ? ["eventDetails", "options", "userDetails"]
+        : ["eventDetails", "options"],
+    [session.user.isGuest],
   );
 
+  const [formData, setFormData] = React.useState<NewEventData>({
+    currentStep: 0,
+  });
+
+  React.useEffect(() => {
+    const newStep = Math.min(steps.length - 1, formData.currentStep);
+    if (newStep !== formData.currentStep) {
+      setFormData((prevData) => ({
+        ...prevData,
+        currentStep: newStep,
+      }));
+    }
+  }, [formData.currentStep, steps.length]);
+
   const currentStepIndex = formData?.currentStep ?? 0;
 
   const currentStepName = steps[currentStepIndex];
@@ -100,7 +81,6 @@ const Page: React.FunctionComponent<CreatePollPageProps> = ({
         numberOfOptions: formData.options?.options?.length,
         optionsView: formData?.options?.view,
       });
-      setPersistedFormData(initialNewEventData);
       router.replace(`/admin/${res.urlId}`);
     },
   });
@@ -125,10 +105,12 @@ const Page: React.FunctionComponent<CreatePollPageProps> = ({
         type: "date",
         location: formData?.eventDetails?.location,
         description: formData?.eventDetails?.description,
-        user: {
-          name: required(formData?.userDetails?.name),
-          email: required(formData?.userDetails?.contact),
-        },
+        user: session.user.isGuest
+          ? {
+              name: required(formData?.userDetails?.name),
+              email: required(formData?.userDetails?.contact),
+            }
+          : undefined,
         timeZone: formData?.options?.timeZone,
         options: required(formData?.options?.options).map(encodeDateOption),
       });
@@ -197,7 +179,7 @@ const Page: React.FunctionComponent<CreatePollPageProps> = ({
                   disabled={isBusy}
                   onClick={() => {
                     setFormData({
-                      ...persistedFormData,
+                      ...formData,
                       currentStep: currentStepIndex - 1,
                     });
                   }}