Use refs for inputs, full_name label, un-hardcoded WEBSITE_URL (#4542)

This commit is contained in:
Alex van Andel 2022-09-17 03:40:27 +01:00 committed by GitHub
parent 95b903110f
commit 4645bbcb75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>