scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-169): get profile data from API

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-04-16 12:42:44 +02:00
parent d2c1887179
commit 55794034c5
44 changed files with 632 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/MyProfile/Profile/Container.tsx
View File

@@ -5,7 +5,7 @@ import Image from "@/components/Image"
import styles from "./profile.module.css"
import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
import type { ContainerProps } from "@/types/components/myPages/myProfile/container"
const profileStyles = cva(styles.profile)
@@ -14,7 +14,7 @@ export default function Container({
className,
user,
...props
}: ProfileProps) {
}: ContainerProps) {
return (
<Card className={profileStyles({ className })} {...props}>
<header className={styles.header}>

26
components/MyProfile/Profile/Edit/Form/Content.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import { useEffect } from "react"
import { useFormStatus } from "react-dom"
import { useWatch } from "react-hook-form"
import { _ } from "@/lib/translation"
import { useProfileStore } from "@/stores/edit-profile"
@@ -22,6 +23,7 @@ import type { EditFormContentProps } from "@/types/components/myPages/myProfile/
export default function FormContent({ control }: EditFormContentProps) {
const { pending } = useFormStatus()
const setIsPending = useProfileStore((store) => store.setIsPending)
const country = useWatch({ name: "address.country" })
useEffect(() => {
setIsPending(pending)
@@ -30,10 +32,10 @@ export default function FormContent({ control }: EditFormContentProps) {
return (
<>
<Field>
<Field.Icon>SE</Field.Icon>
<Field.Label htmlFor="country">*{_("Country")}</Field.Label>
<Field.Icon>{country}</Field.Icon>
<Field.Label htmlFor="address.country">*{_("Country")}</Field.Label>
<Field.Content>
<CountrySelect name="country" />
<CountrySelect name="address.country" />
</Field.Content>
</Field>
@@ -72,9 +74,9 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.Label htmlFor="phone">*{_("Phone")}</Field.Label>
<Field.Label htmlFor="phoneNumber">*{_("Phone")}</Field.Label>
<Field.Content>
<Phone name="phone" />
<Phone countrySelectName="address.country" name="phoneNumber" />
</Field.Content>
</Field>
@@ -82,12 +84,14 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="street">*{_("Address")}</Field.Label>
<Field.Label htmlFor="address.streetAddress">
*{_("Address")}
</Field.Label>
<Field.Content>
<Input
aria-label={_("Street")}
control={control}
name="street"
name="address.streetAddress"
placeholder={_("Street 123")}
registerOptions={{ required: true }}
/>
@@ -98,12 +102,12 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="city">*{_("City/State")}</Field.Label>
<Field.Label htmlFor="address.city">*{_("City/State")}</Field.Label>
<Field.Content>
<Input
aria-label={_("City")}
control={control}
name="city"
name="address.city"
placeholder={_("City")}
registerOptions={{ required: true }}
/>
@@ -114,12 +118,12 @@ export default function FormContent({ control }: EditFormContentProps) {
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="zip">*{_("Zip code")}</Field.Label>
<Field.Label htmlFor="address.zipCode">*{_("Zip code")}</Field.Label>
<Field.Content>
<Input
aria-label={_("Zip code")}
control={control}
name="zip"
name="address.zipCode"
placeholder={_("Zip code")}
registerOptions={{ required: true }}
/>

10
components/MyProfile/Profile/Edit/Form/index.tsx
View File

@@ -30,15 +30,7 @@ export default function Form({ user }: EditFormProps) {
)
const form = useForm<EditProfileSchema>({
defaultValues: {
country: user.country,
city: user.address.city,
dob: user.dob,
email: user.email,
phone: user.phone,
street: user.address.street,
zip: user.address.zipcode,
},
defaultValues: user,
criteriaMode: "all",
mode: "onTouched",
resolver: zodResolver(editProfileSchema),

18
components/MyProfile/Profile/Edit/Form/schema.ts
View File

@@ -4,26 +4,22 @@ import { _ } from "@/lib/translation"
import { phoneValidator } from "@/utils/phoneValidator"
export const editProfileSchema = z.object({
city: z
.string({ required_error: _("City is required") })
.min(1, { message: _("City is required") }),
country: z
"address.country": z
.string({ required_error: _("Country is required") })
.min(1, { message: _("Country is required") }),
"address.city": z.string().optional(),
"address.streetAddress": z.string().optional(),
"address.zipCode": z
.string({ required_error: _("Zip code is required") })
.min(1, { message: _("Zip code is required") }),
dob: z
.string({ required_error: _("Date of Birth is required") })
.min(1, { message: _("Date of Birth is required") }),
email: z.string().email(),
phone: phoneValidator(
phoneNumber: phoneValidator(
_("Phone is required"),
_("Please enter a valid phone number")
),
street: z
.string({ required_error: _("Address is required") })
.min(1, { message: _("Address is required") }),
zip: z
.string({ required_error: _("Zip code is required") })
.min(1, { message: _("Zip code is required") }),
})
export type EditProfileSchema = z.infer<typeof editProfileSchema>

11
components/MyProfile/Profile/Edit/index.tsx
View File

@@ -1,12 +1,13 @@
import { serverClient } from "@/lib/trpc/server"
import Container from "../Container"
import Form from "./Form"
import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
export default function EditProfile(props: ProfileProps) {
export default async function EditProfile() {
const user = await serverClient().user.get()
return (
<Container {...props}>
<Form user={props.user} />
<Container user={user}>
<Form user={user} />
</Container>
)
}

27
components/MyProfile/Profile/index.tsx
View File

@@ -1,4 +1,5 @@
import { _ } from "@/lib/translation"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
import {
CalendarIcon,
@@ -11,22 +12,27 @@ import Field from "../Field"
import styles from "./profile.module.css"
import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"
import { serverClient } from "@/lib/trpc/server"
export default function Profile(props: ProfileProps) {
export default async function Profile() {
const user = await serverClient().user.get()
const countryName = countries.find(
(country) => country.code === user.address.country
)
return (
<Container {...props}>
<Container user={user}>
<section className={styles.info}>
<Field>
<Field.Icon>SE</Field.Icon>
<Field.Icon>{user.address.country}</Field.Icon>
<Field.TextLabel>{_("Country")}</Field.TextLabel>
<Field.Content>Sweden</Field.Content>
<Field.Content>{countryName?.name}</Field.Content>
</Field>
<Field>
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
{/* TODO: Get this from user when API team adds it to payload */}
<Field.Content>27/05/1977</Field.Content>
</Field>
<Field>
@@ -34,35 +40,36 @@ export default function Profile(props: ProfileProps) {
<EmailIcon />
</Field.Icon>
<Field.TextLabel>{_("Email")}</Field.TextLabel>
<Field.Content>f*********@g****.com</Field.Content>
<Field.Content>{user.email}</Field.Content>
</Field>
<Field>
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.TextLabel>{_("Phone number")}</Field.TextLabel>
<Field.Content>+46 ******00</Field.Content>
<Field.Content>{user.phoneNumber}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("Address")}</Field.TextLabel>
<Field.Content>T***************</Field.Content>
<Field.Content>{user.address.streetAddress || "-"}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("City/State")}</Field.TextLabel>
<Field.Content>S*******</Field.Content>
{/* TODO: Get this from user when API team adds it to payload */}
<Field.Content>{user.address.city || "-"}</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.TextLabel>{_("Zip code")}</Field.TextLabel>
<Field.Content>1****</Field.Content>
<Field.Content>{user.address.zipCode}</Field.Content>
</Field>
</section>
</Container>