From 4645bbcb75204a050f11c53c835f18b305c6f364 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Sat, 17 Sep 2022 03:40:27 +0100
Subject: [PATCH] Use refs for inputs, full_name label, un-hardcoded
 WEBSITE_URL (#4542)

---
 .../pages/v2/settings/my-account/profile.tsx  | 86 ++++---------------
 1 file changed, 19 insertions(+), 67 deletions(-)

diff --git a/apps/web/pages/v2/settings/my-account/profile.tsx b/apps/web/pages/v2/settings/my-account/profile.tsx
index 0745b3e7e4..f3a1fb8a8b 100644
--- a/apps/web/pages/v2/settings/my-account/profile.tsx
+++ b/apps/web/pages/v2/settings/my-account/profile.tsx
@@ -4,6 +4,7 @@ import { useRef, useState, BaseSyntheticEvent } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
@@ -159,73 +160,24 @@ const ProfileView = () => {
             )}
           />
         </div>
-        <Controller
-          control={formMethods.control}
-          name="username"
-          render={({ field: { value } }) => (
-            <div className="mt-8">
-              <TextField
-                data-testid="username-input"
-                name="username"
-                label={t("personal_cal_url")}
-                addOnLeading="https://cal.com/"
-                value={value}
-                onChange={(e) => {
-                  formMethods.setValue("username", e?.target.value);
-                }}
-              />
-            </div>
-          )}
-        />
-        <Controller
-          control={formMethods.control}
-          name="name"
-          render={({ field: { value, onChange } }) => (
-            <div className="mt-8">
-              <TextField
-                label={t("full_name")}
-                value={value}
-                onChange={(e) => {
-                  onChange(e?.target.value);
-                }}
-              />
-            </div>
-          )}
-        />
-        <Controller
-          control={formMethods.control}
-          name="email"
-          render={({ field: { value } }) => (
-            <div className="mt-8">
-              <TextField
-                name="email"
-                label={t("email")}
-                value={value}
-                hint={t("change_email_hint")}
-                onChange={(e) => {
-                  formMethods.setValue("email", e?.target.value);
-                }}
-              />
-            </div>
-          )}
-        />
-        <Controller
-          control={formMethods.control}
-          name="bio"
-          render={({ field: { value } }) => (
-            <div className="mt-8">
-              <TextField
-                name="bio"
-                label={t("about")}
-                hint={t("bio_hint")}
-                value={value}
-                onChange={(e) => {
-                  formMethods.setValue("bio", e?.target.value);
-                }}
-              />
-            </div>
-          )}
-        />
+        <div className="mt-8">
+          <TextField
+            data-testid="username-input"
+            label={t("personal_cal_url")}
+            addOnLeading={WEBSITE_URL + "/"}
+            {...formMethods.register("username")}
+          />
+        </div>
+        <div className="mt-8">
+          <TextField label={t("full_name")} {...formMethods.register("name")} />
+        </div>
+        <div className="mt-8">
+          <TextField label={t("email")} hint={t("change_email_hint")} {...formMethods.register("email")} />
+        </div>
+        <div className="mt-8">
+          <TextField label={t("about")} hint={t("bio_hint")} {...formMethods.register("bio")} />
+        </div>
+
         <Button color="primary" className="mt-8" type="submit" loading={mutation.isLoading}>
           {t("update")}
         </Button>