112 lines
2.8 KiB
TypeScript
112 lines
2.8 KiB
TypeScript
import {
|
|
Stack,
|
|
Heading,
|
|
HStack,
|
|
Avatar,
|
|
Button,
|
|
FormControl,
|
|
FormLabel,
|
|
Input,
|
|
Tooltip,
|
|
Flex,
|
|
Text,
|
|
} from '@chakra-ui/react'
|
|
import { UploadIcon } from 'assets/icons'
|
|
import { UploadButton } from 'components/shared/buttons/UploadButton'
|
|
import { useUser } from 'contexts/UserContext'
|
|
import React, { ChangeEvent, useState } from 'react'
|
|
|
|
export const PersonalInfoForm = () => {
|
|
const {
|
|
user,
|
|
updateUser,
|
|
saveUser,
|
|
hasUnsavedChanges,
|
|
isSaving,
|
|
isOAuthProvider,
|
|
} = useUser()
|
|
const [reloadParam, setReloadParam] = useState('')
|
|
|
|
const handleFileUploaded = async (url: string) => {
|
|
setReloadParam(Date.now().toString())
|
|
updateUser({ image: url })
|
|
}
|
|
|
|
const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
updateUser({ name: e.target.value })
|
|
}
|
|
|
|
const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
updateUser({ email: e.target.value })
|
|
}
|
|
|
|
return (
|
|
<Stack direction="row" spacing="10" justifyContent={'space-between'}>
|
|
<Heading as="h2" fontSize="xl">
|
|
Personal info
|
|
</Heading>
|
|
<Stack spacing="6" w="400px">
|
|
<HStack spacing={6}>
|
|
<Avatar
|
|
size="lg"
|
|
src={user?.image ? `${user.image}?${reloadParam}` : undefined}
|
|
name={user?.name ?? undefined}
|
|
/>
|
|
<Stack>
|
|
<UploadButton
|
|
size="sm"
|
|
filePath={`users/${user?.id}/avatar`}
|
|
leftIcon={<UploadIcon />}
|
|
onFileUploaded={handleFileUploaded}
|
|
>
|
|
Change photo
|
|
</UploadButton>
|
|
<Text color="gray.500" fontSize="sm">
|
|
.jpg or.png, max 1MB
|
|
</Text>
|
|
</Stack>
|
|
</HStack>
|
|
|
|
<FormControl>
|
|
<FormLabel htmlFor="name">Name</FormLabel>
|
|
<Input
|
|
id="name"
|
|
value={user?.name ?? ''}
|
|
onChange={handleNameChange}
|
|
/>
|
|
</FormControl>
|
|
<Tooltip
|
|
label="Can't update the email because it is linked to an OAuth service"
|
|
placement="left"
|
|
hasArrow
|
|
isDisabled={!isOAuthProvider}
|
|
>
|
|
<FormControl>
|
|
<FormLabel
|
|
htmlFor="email"
|
|
color={isOAuthProvider ? 'gray.500' : 'current'}
|
|
>
|
|
Email address
|
|
</FormLabel>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
isDisabled={isOAuthProvider}
|
|
value={user?.email ?? ''}
|
|
onChange={handleEmailChange}
|
|
/>
|
|
</FormControl>
|
|
</Tooltip>
|
|
|
|
{hasUnsavedChanges && (
|
|
<Flex justifyContent="flex-end">
|
|
<Button colorScheme="blue" onClick={saveUser} isLoading={isSaving}>
|
|
Save
|
|
</Button>
|
|
</Flex>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|