fix: resetting input on cancel and refactoring input fiedl (#5522)

* fix: resetting input on cancel and refactoring input fiedl

* feat: add username field in /usersettings

* chore: remove unused

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -1,13 +1,13 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TimezoneSelect } from "@calcom/ui";
 
-import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
 import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
@@ -24,11 +24,9 @@ const UserSettings = (props: IUserSettingsProps) => {
     register,
     handleSubmit,
     formState: { errors },
-    control,
   } = useForm({
     defaultValues: {
       name: user?.name || "",
-      username: user?.username || "",
     },
     reValidateMode: "onChange",
   });
@@ -50,27 +48,11 @@ const UserSettings = (props: IUserSettingsProps) => {
     });
   });
 
-  const [currentUsername, setCurrentUsername] = useState(user.username || "");
-
   return (
     <form onSubmit={onSubmit}>
       <div className="space-y-6">
         {/* Username textfield */}
-        <Controller
+        <UsernameAvailabilityField user={user} />
-          control={control}
-          name="username"
-          render={({ field: { value, ref, onChange } }) => (
-            <UsernameAvailability
-              readonly={true}
-              currentUsername={currentUsername}
-              setCurrentUsername={setCurrentUsername}
-              inputUsernameValue={value}
-              usernameRef={ref}
-              setInputUsernameValue={onChange}
-              user={user}
-            />
-          )}
-        />
 
         {/* Full name textfield */}
         <div className="w-full">

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -124,6 +124,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           <Input
             ref={usernameRef}
             name="username"
+            value={inputUsernameValue}
             autoComplete="none"
             autoCapitalize="none"
             autoCorrect="none"
@@ -133,7 +134,6 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
             )}
-            defaultValue={currentUsername}
             onChange={(event) => {
               event.preventDefault();
               setInputUsernameValue(event.target.value);

apps/web/components/ui/UsernameAvailability/index.tsx

@@ -1,6 +1,67 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { User } from "@calcom/prisma/client";
+import { TRPCClientErrorLike } from "@calcom/trpc/client";
+import { AppRouter } from "@calcom/trpc/server/routers/_app";
 
 import { PremiumTextfield } from "./PremiumTextfield";
 import { UsernameTextfield } from "./UsernameTextfield";
 
 export const UsernameAvailability = IS_SELF_HOSTED ? UsernameTextfield : PremiumTextfield;
+
+interface UsernameAvailabilityFieldProps {
+  onSuccessMutation?: () => void;
+  onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
+  user: Pick<
+    User,
+    | "username"
+    | "name"
+    | "email"
+    | "bio"
+    | "avatar"
+    | "timeZone"
+    | "weekStart"
+    | "hideBranding"
+    | "theme"
+    | "plan"
+    | "brandColor"
+    | "darkBrandColor"
+    | "timeFormat"
+    | "metadata"
+  >;
+}
+export const UsernameAvailabilityField = ({
+  onSuccessMutation,
+  onErrorMutation,
+  user,
+}: UsernameAvailabilityFieldProps) => {
+  const [currentUsername, setCurrentUsername] = useState(user.username ?? "");
+  const formMethods = useForm({
+    defaultValues: {
+      username: currentUsername,
+    },
+  });
+
+  return (
+    <Controller
+      control={formMethods.control}
+      name="username"
+      render={({ field: { ref, onChange, value } }) => {
+        return (
+          <UsernameAvailability
+            currentUsername={currentUsername}
+            setCurrentUsername={setCurrentUsername}
+            inputUsernameValue={value}
+            usernameRef={ref}
+            setInputUsernameValue={onChange}
+            onSuccessMutation={onSuccessMutation}
+            onErrorMutation={onErrorMutation}
+            user={user}
+          />
+        );
+      }}
+    />
+  );
+};

apps/web/pages/settings/my-account/profile.tsx

@@ -35,7 +35,7 @@ import {
 } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
-import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
 const SkeletonLoader = () => {
   return (
@@ -246,22 +246,10 @@ const ProfileView = () => {
           />
         </div>
         <div className="mt-8">
-          <Controller
+          <UsernameAvailabilityField
-            control={formMethods.control}
+            user={user}
-            name="username"
+            onSuccessMutation={onSuccessfulUsernameUpdate}
-            render={({ field: { ref, onChange, value } }) => {
+            onErrorMutation={onErrorInUsernameUpdate}
-              return (
-                <UsernameAvailability
-                  currentUsername={user?.username || ""}
-                  inputUsernameValue={value}
-                  usernameRef={ref}
-                  setInputUsernameValue={onChange}
-                  onSuccessMutation={onSuccessfulUsernameUpdate}
-                  onErrorMutation={onErrorInUsernameUpdate}
-                  user={user}
-                />
-              );
-            }}
           />
         </div>
         <div className="mt-8">