Skip to content

Commit

Permalink
feat(user): able to update location
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjtim
cjtim committed Oct 21, 2022
1 parent 0bc272b commit 405d7a7
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 131 deletions.
118 changes: 63 additions & 55 deletions components/login/UserInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,82 @@
import { Avatar, AvatarBadge, Button, Center, Flex, Grid, GridItem, Img, Text } from '@chakra-ui/react'
import ButtonLink from 'components/global/ButtonLink'
import StaticMap from 'components/global/StaticMap'
import { User } from 'interfaces/User'

interface Props {
user: User
}

const UserInfo: React.FC<Props> = ({ user }) => (
<Grid templateColumns="repeat(4, 1fr)" gap={2} w="lg" borderRadius="lg" border="1px" borderColor="gray" p={4}>
<GridItem colSpan={4}>
<Center flexDir="column" gap={2}>
{user && user.picture_url && <Img src={user.picture_url || ''} borderRadius="full" w="24" />}
{user && !user.picture_url && (
<Avatar borderRadius="full" size="lg">
<AvatarBadge boxSize="1.25em" bg="green.500" />
</Avatar>
)}
<Text fontSize="2xl">{user?.name}</Text>
<Flex gap={4}>
<ButtonLink href="/user/update">
<Button colorScheme="green" variant="outline">
เเก้ไขข้อมูล
</Button>
</ButtonLink>
{user.is_org && (
<ButtonLink href="/user/password">
<Button colorScheme="red" variant="outline">
เปลี่ยนรหัสผ่าน
<Flex maxW="5xl" borderRadius="lg" border="1px" borderColor="gray">
<Grid templateColumns="repeat(4, 1fr)" gap={2} p={4}>
<GridItem colSpan={4}>
<Center flexDir="column" gap={2}>
{user && user.picture_url && <Img src={user.picture_url || ''} borderRadius="full" w="24" />}
{user && !user.picture_url && (
<Avatar borderRadius="full" size="lg">
<AvatarBadge boxSize="1.25em" bg="green.500" />
</Avatar>
)}
<Text fontSize="2xl">{user?.name}</Text>
<Flex gap={4}>
<ButtonLink href="/user/update">
<Button colorScheme="green" variant="outline">
เเก้ไขข้อมูล
</Button>
</ButtonLink>
)}
</Flex>
</Center>
</GridItem>
{user.is_org && (
<ButtonLink href="/user/password">
<Button colorScheme="red" variant="outline">
เปลี่ยนรหัสผ่าน
</Button>
</ButtonLink>
)}
</Flex>
</Center>
</GridItem>

<GridItem colSpan={1}>
<Text>ไอดี</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.id}</Text>
</GridItem>
<GridItem colSpan={1}>
<Text>ไอดี</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.id}</Text>
</GridItem>

<GridItem colSpan={1}>
<Text>อีเมล</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.email || '-'}</Text>
</GridItem>
<GridItem colSpan={1}>
<Text>อีเมล</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.email || '-'}</Text>
</GridItem>

<GridItem colSpan={1}>
<Text>รายละเอียด</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.description || '-'}</Text>
</GridItem>
<GridItem colSpan={1}>
<Text>รายละเอียด</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.description || '-'}</Text>
</GridItem>

<GridItem colSpan={1}>
<Text>โทรศัพท์</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.phone || '-'}</Text>
</GridItem>
<GridItem colSpan={1}>
<Text>โทรศัพท์</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.phone || '-'}</Text>
</GridItem>

<GridItem colSpan={1}>
<Text>ประเภทผู้ใช้</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.is_org ? 'สถานสงเคราะห์สัตว์' : 'ผู้ใช้งานทั่วไป'}</Text>
</GridItem>
</Grid>
<GridItem colSpan={1}>
<Text>ประเภทผู้ใช้</Text>
</GridItem>
<GridItem colSpan={3}>
<Text>{user?.is_org ? 'สถานสงเคราะห์สัตว์' : 'ผู้ใช้งานทั่วไป'}</Text>
</GridItem>
</Grid>
{user.lat && user.lng && (
<Flex w="xl" h="xl">
<StaticMap lat={user.lat} lng={user.lng} />
</Flex>
)}
</Flex>
)

export default UserInfo
128 changes: 68 additions & 60 deletions components/login/UserUpdateCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
import { Center, FormControl, FormLabel, Input, FormErrorMessage, Button, Stack, Text } from '@chakra-ui/react'
import {
Center,
FormControl,
FormLabel,
Input,
FormErrorMessage,
Button,
Stack,
Flex,
Heading,
Textarea,
} from '@chakra-ui/react'
import SelectLocationMap from 'components/global/SelectLocationMap'
import { User } from 'interfaces/User'
import { SubmitHandler, useForm } from 'react-hook-form'

Expand All @@ -12,73 +24,69 @@ const UserUpdateCard: React.FC<Props> = ({ onSubmitRegister, user, ...boxProps }
register,
handleSubmit,
formState: { errors, isSubmitting },
setValue,
} = useForm<User>({
defaultValues: user,
defaultValues: {
...user,
lat: user?.lat || 13.75,
lng: user?.lng || 100.5,
},
})
return (
<Stack w="sm" borderRadius="xl" borderColor="black" border="1px" alignItems="center" p={4} {...boxProps}>
<Text fontWeight="bold">แก้ไขข้อมูล</Text>
<form onSubmit={handleSubmit(onSubmitRegister)}>
<Center gap={4} flexDir="column" p={4}>
<FormControl isInvalid={Boolean(errors.name)} isRequired>
<FormLabel htmlFor="name">ชื่อผู้ใช้งาน</FormLabel>
<Input
id="name"
placeholder="ชื่อผู้ใช้งาน"
{...register('name', {
required: 'This is required',
minLength: { value: 1, message: 'Minimum length should be 1' },
})}
/>
<FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
</FormControl>

<FormControl isInvalid={Boolean(errors.description)}>
<FormLabel htmlFor="description">คำอธิบาย</FormLabel>
<Input id="description" placeholder="คำอธิบาย" {...register('description')} />
<FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage>
</FormControl>
const onSelectLocation = (lat: number, lng: number) => {
setValue('lat', lat)
setValue('lng', lng)
}

<FormControl isInvalid={Boolean(errors.phone)}>
<FormLabel htmlFor="phone">เบอร์โทรศัพท์</FormLabel>
<Input id="phone" placeholder="เบอร์โทรศัพท์" {...register('phone')} />
<FormErrorMessage>{errors.phone && errors.phone.message}</FormErrorMessage>
</FormControl>

{/* <FormControl isInvalid={Boolean(errors.password)} isRequired>
<FormLabel htmlFor="password">{t('password')}</FormLabel>
<Input
id="password"
placeholder={t('password')}
type="password"
{...register('password', {
required: 'This is required',
minLength: { value: 1, message: 'Minimum length should be 1' },
})}
/>
return (
<Stack borderRadius="xl" borderColor="black" border="1px" alignItems="center" p={4} {...boxProps}>
<Heading fontWeight="bold">แก้ไขบัญชี</Heading>
<form onSubmit={handleSubmit(onSubmitRegister)}>
<Flex w="5xl">
<Center gap={4} flexDir="column" p={4} w="2xl">
<FormControl isInvalid={Boolean(errors.name)} isRequired>
<FormLabel htmlFor="name">ชื่อผู้ใช้งาน</FormLabel>
<Input
id="name"
placeholder="ชื่อผู้ใช้งาน"
{...register('name', {
required: 'This is required',
minLength: { value: 1, message: 'Minimum length should be 1' },
})}
/>
<FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
</FormControl>

<FormErrorMessage>{errors.password && errors.password.message}</FormErrorMessage>
</FormControl> */}
<FormControl isInvalid={Boolean(errors.description)}>
<FormLabel htmlFor="description">รายละเอียด</FormLabel>
<Textarea id="description" placeholder="รายละเอียด" {...register('description')} />
<FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage>
</FormControl>

{/* <FormControl isInvalid={Boolean(errors.password)} isRequired>
<FormLabel htmlFor="confirm_password">{t('confirm_password')}</FormLabel>
<Input
id="confirm_password"
placeholder={t('confirm_password')}
type="password"
{...register('confirm_password', {
required: 'This is required',
minLength: { value: 1, message: 'Minimum length should be 1' },
})}
/>
<FormControl isInvalid={Boolean(errors.phone)}>
<FormLabel htmlFor="phone">เบอร์โทรศัพท์</FormLabel>
<Input id="phone" placeholder="เบอร์โทรศัพท์" {...register('phone')} />
<FormErrorMessage>{errors.phone && errors.phone.message}</FormErrorMessage>
</FormControl>

<FormErrorMessage>{errors.password && errors.password.message}</FormErrorMessage>
</FormControl> */}
<Button variant="brandSolid" isLoading={isSubmitting} type="submit">
แก้ไขข้อมูล
</Button>
</Center>

<Button variant="brandSolid" isLoading={isSubmitting} type="submit">
แก้ไขข้อมูล
</Button>
</Center>
<FormControl isInvalid={Boolean(errors.lng || errors.lat)} isRequired>
<FormLabel htmlFor="lat">ที่อยู่ของสถานสงเคราะห์</FormLabel>
<Flex w="100%" h="sm">
<SelectLocationMap
onChange={onSelectLocation}
defaultLocation={{ lat: user?.lat || 13.75, lng: user?.lng || 100.5 }}
/>
</Flex>
<FormErrorMessage>
{(errors.lng && errors.lng.message) || (errors.lat && errors.lat.message)}
</FormErrorMessage>
</FormControl>
</Flex>
</form>
</Stack>
)
Expand Down
36 changes: 21 additions & 15 deletions pages/shelters/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button, Center, Flex, Heading, Stack, Text } from '@chakra-ui/react'
import ButtonLink from 'components/global/ButtonLink'
import { Center, Flex, Heading, SimpleGrid, Stack, Text } from '@chakra-ui/react'
import Navbar from 'components/global/Navbar'
import PageLayout from 'components/global/PageLayout'
import StaticMap from 'components/global/StaticMap'
import TextLink from 'components/global/TextLink'
import UserImg from 'components/global/UserImg'
import { config } from 'config'
Expand Down Expand Up @@ -31,26 +31,32 @@ const ShelterDetails: NextPage<UserProps & Props> = ({ user, shelter, pets, crea
<Flex w="container.xl" alignItems="center" gap={2}>
<UserImg user={shelter} />
<Heading>{shelter?.name}</Heading>
<Flex marginLeft="auto">
<ButtonLink href={`/shelters/${shelter.id}`}>
<Button>Contact</Button>
</ButtonLink>
</Flex>
</Flex>
DETAILS
<Stack>
<Flex>
<Text>อีเมล </Text>
<Flex>
<SimpleGrid columns={2} spacing={1}>
<Text>อีเมล</Text>
<TextLink title={shelter.email} to={`mailto:${shelter.email}`} text={`${shelter.email}` || '-'} />
</Flex>

<Flex>
<Text>โทรศัพท์ </Text>
<Text color="gray"> {shelter.phone || '-'}</Text>
</Flex>
<Text>Facebook </Text>
<Text color="gray"> {shelter.phone || '-'}</Text>
<Text>Line</Text>
<Text color="gray"> {shelter.phone || '-'}</Text>
<Text>Website </Text>
<Text color="gray"> {shelter.phone || '-'}</Text>

<Text>เป็นสมาชิกเมื่อ {createdAt}</Text>
</Stack>
<Text>เป็นสมาชิกเมื่อ </Text>
<Text color="gray">{createdAt}</Text>
</SimpleGrid>

{shelter.lat && shelter.lng && (
<Flex w="xl" h="sm" marginLeft="auto">
<StaticMap lat={shelter.lat} lng={shelter.lng} />
</Flex>
)}
</Flex>
{/* TABLE */}
<Stack w="container.xl">
<Text fontWeight="bold">สัตว์เลี้ยงของผู้ใช้นี้</Text>
Expand Down
2 changes: 1 addition & 1 deletion pages/user/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const User: NextPage<UserProps> = ({ user }) => {
return (
<PageLayout title={t('navbar.profile')}>
<Navbar user={user} />
<Center h="80vh">{user && <UserInfo user={user} />}</Center>
<Center>{user && <UserInfo user={user} />}</Center>
</PageLayout>
)
}
Expand Down

0 comments on commit 405d7a7

Please sign in to comment.