🐛 Fix error thrown in handler when changing name (lukevella#598)

apps/web/src/components/profile/user-details.tsx

@@ -1,9 +1,10 @@
 import { m } from "framer-motion";
 import { useTranslation } from "next-i18next";
-import posthog from "posthog-js";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 
+import { usePostHog } from "@/utils/posthog";
+
 import { requiredString, validEmail } from "../../utils/form-validation";
 import { trpc } from "../../utils/trpc";
 import { Button } from "../button";
@@ -31,12 +32,12 @@ export const UserDetails: React.FunctionComponent<UserDetailsProps> = ({
  defaultValues: { name, email },
  });
 
- const { refresh } = useUser();
+ const posthog = usePostHog();
 
  const changeName = trpc.user.changeName.useMutation({
  onSuccess: (_, { name }) => {
- posthog.people.set({ name });
- refresh();
+ reset({ name, email });
+ posthog?.people.set({ name });
  },
  });
 
@@ -47,7 +48,6 @@ export const UserDetails: React.FunctionComponent<UserDetailsProps> = ({
  if (dirtyFields.name) {
  await changeName.mutateAsync({ userId, name: data.name });
  }
- reset(data);
  })}
  >
  <div className="flex items-center justify-between border-b px-3 py-2 shadow-sm">

apps/web/src/utils/posthog.ts

@@ -1,5 +1,6 @@
 import { usePostHog as usePostHogHook } from "posthog-js/react";
 
-// Seems silly but annoyingly typescript tries to import usePostHog from
-// posthog-js/react/dist/types which doesn't even work.
-export const usePostHog = usePostHogHook;
+export const usePostHog = () => {
+ const posthog = usePostHogHook();
+ return process.env.NEXT_PUBLIC_POSTHOG_API_KEY ? posthog : null;
+};