🐢 ユーザ削除機能

front/src/components/Buttons/ButtonDeleteUser.tsx

@@ -0,0 +1,25 @@
+import { Button, useDisclosure } from '@chakra-ui/react'
+import { ModalDeleteUser } from '@/components/Modals'
+
+type ButtonDeleteUserProps = {
+  id: string
+}
+
+export const ButtonDeleteUser = ({ id }: ButtonDeleteUserProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure()
+
+  return (
+    <>
+      <Button
+        onClick={onOpen}
+        color={'#FF4D4D'}
+        fontSize={'md'}
+        fontWeight={'bold'}
+        padding={0}
+      >
+        アカウント削除
+      </Button>
+      <ModalDeleteUser isOpen={isOpen} onClose={onClose} id={id} />
+    </>
+  )
+}

front/src/components/Buttons/index.ts

@@ -1,3 +1,4 @@
 export { Button } from '@/components/Buttons/Button'
 export { ButtonIconRound } from '@/components/Buttons/ButtonIconRound'
 export { ButtonSignIn } from '@/components/Buttons/ButtonSignIn'
+export { ButtonDeleteUser } from '@/components/Buttons/ButtonDeleteUser'

front/src/components/Forms/FormCreateUpdateLinks.tsx

@@ -11,10 +11,10 @@ import {
   Flex,
   Spacer,
   VisuallyHiddenInput,
-  Link,
-  Spinner
+  Link
 } from '@chakra-ui/react'
 import { useFormCreateUpdateLinks } from '@/hooks/form'
+import { useInputImage } from '@/hooks/input'
 import { TravelinkRequestType, UserType } from '@/types/db'
 import { InputDate } from '@/components/Inputs/InputDate'
 import { IconCamera, IconReturn } from '@/components/Icons'
@@ -47,13 +47,13 @@ export const FormCreateUpdateLinks = ({
     onSubmit,
     errors,
     disabled,
-    isUploading,
-    currentThumbnail,
-    handleUploadFile,
+    image,
+    handleChangeImage,
     setCategories,
     categories,
     setValue
   } = useFormCreateUpdateLinks(travelinkData, userData)
+  const { inputRef, onClickImage } = useInputImage()
   const router = useRouter()
   const traveliId = router.query.traveliId
 
@@ -104,62 +104,29 @@ export const FormCreateUpdateLinks = ({
         <FormLabel marginTop={'1.6rem'} fontSize={'sm'} color={'#2D2D2D'}>
           サムネイル画像（任意）
         </FormLabel>
-        {isUploading ? (
-          <Flex
-            w={'100%'}
-            h={'12.9rem'}
-            justifyContent={'center'}
-            alignItems={'center'}
-            flexDirection={'column'}
-            bg={'gray'}
-            borderRadius={'1rem'}
-          >
-            <Spinner
-              thickness={'.4rem'}
-              speed={'.65s'}
-              emptyColor={'gray'}
-              color={'brandBlue'}
-              w={'6.4rem'}
-              h={'6.4rem'}
-            />
+        <VisuallyHiddenInput
+          ref={inputRef}
+          type={'file'}
+          accept="image/*"
+          onChange={handleChangeImage}
+        />
+        <Box
+          marginTop={'0.8rem'}
+          bgImage={image ? image : travelinkData ? travelinkData.thumbnail : ''}
+          bgRepeat={'no-repeat'}
+          bgSize={'cover'}
+          bgPosition={'center center'}
+          onClick={onClickImage}
+          w={'100%'}
+          h={'12.9rem'}
+          borderRadius={'1rem'}
+          bgColor={'#D2D6E1'}
+          filter={'drop-shadow(0.4rem 0.4rem 1rem #E4EBEE)'}
+        >
+          <Flex h={'12.9rem'} align={'center'} justify={'center'}>
+            <IconCamera zIndex={1} w={'4.8rem'} h={'4.8rem'} color={'white'} />
           </Flex>
-        ) : (
-          <Box
-            as={'label'}
-            display={'block'}
-            w={'100%'}
-            h={'12.9rem'}
-            borderRadius={'1rem'}
-            bgColor={'#D2D6E1'}
-            marginTop={'0.8rem'}
-            bgRepeat={'no-repeat'}
-            bgImage={
-              currentThumbnail
-                ? currentThumbnail
-                : travelinkData
-                ? travelinkData.thumbnail
-                : ''
-            }
-            bgSize={'cover'}
-            bgPosition={'center center'}
-            filter={'drop-shadow(0.4rem 0.4rem 1rem #E4EBEE)'}
-          >
-            <Flex h={'12.9rem'} align={'center'} justify={'center'}>
-              <IconCamera
-                zIndex={1}
-                w={'4.8rem'}
-                h={'4.8rem'}
-                color={'white'}
-              />
-            </Flex>
-            <VisuallyHiddenInput
-              type={'file'}
-              accept={'image/*'}
-              onChange={handleUploadFile}
-            />
-            <VisuallyHiddenInput {...register('thumbnail')} />
-          </Box>
-        )}
+        </Box>
       </FormControl>
 
       <Box margin={'1.6rem 0 0.8rem 0'}>リンク</Box>
@@ -198,7 +165,7 @@ export const FormCreateUpdateLinks = ({
           <Box
             as={'button'}
             fontSize={'md'}
-            type={'button'}
+            type="button"
             onClick={() => {
               // onChangeでsetStateしているので、初期値はこの段階で入れる
               setCategories((categories) => [...categories, 'その他'])

front/src/components/Forms/FormCreateUpdateUser.tsx → front/src/components/Forms/FormUserProfile.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import NextLink from 'next/link'
 import {
   Avatar,
@@ -10,8 +11,7 @@ import {
   Spacer,
   VisuallyHiddenInput,
   IconButton,
-  FormErrorMessage,
-  Spinner
+  FormErrorMessage
 } from '@chakra-ui/react'
 import { IconReturn } from '@/components/Icons'
 import { useFormCreateUpdateUser } from '@/hooks/form'
@@ -21,28 +21,32 @@ type FormUserProfileProps = {
   data: UserType
 }
 
-export const FormCreateUpdateUser = ({ data }: FormUserProfileProps) => {
+export const FormUserProfile = ({ data }: FormUserProfileProps) => {
   const {
     register,
     handleSubmit,
     onSubmit,
     errors,
     disabled,
-    handleUploadFile,
-    isFirst,
-    currentIcon,
-    isUploading
+    handleChangeImage,
+    image,
+    history
   } = useFormCreateUpdateUser(data)
 
+  const inputRef = useRef<HTMLInputElement>(null)
+  const onClickButton = () => {
+    inputRef.current?.click()
+  }
+
   return (
     <>
       <Box as={'form'} height={'100vh'} position={'relative'}>
         <Flex w={'100%'} h={'6.3rem'} justify={'center'} align={'center'}>
-          {!isFirst && (
+          {history !== '/' && (
             <NextLink href={'/home'} passHref>
               <IconButton
-                aria-label={'return'}
-                size={'lg'}
+                aria-label="return"
+                size="lg"
                 icon={<IconReturn w={'2.2rem'} h={'2.2rem'} />}
               />
             </NextLink>
@@ -62,45 +66,22 @@ export const FormCreateUpdateUser = ({ data }: FormUserProfileProps) => {
             marginBottom={'2.4rem'}
             bgColor={'base'}
           >
-            {isUploading ? (
-              <Flex
-                w={'12.9rem'}
-                h={'12.9rem'}
-                justifyContent={'center'}
-                alignItems={'center'}
-                flexDirection={'column'}
-                bg={'gray'}
-                rounded={'full'}
-              >
-                <Spinner
-                  thickness={'.4rem'}
-                  speed={'.65s'}
-                  emptyColor={'gray'}
-                  color={'brandBlue'}
-                  w={'6.4rem'}
-                  h={'6.4rem'}
-                />
-              </Flex>
-            ) : (
-              <Avatar
-                as={'label'}
-                w={'12.9rem'}
-                h={'12.9rem'}
-                defaultValue={data.icon ?? ''}
-                src={currentIcon}
-              >
-                <VisuallyHiddenInput
-                  onChange={handleUploadFile}
-                  id={'icon'}
-                  type={'file'}
-                  accept={'image/*'}
-                />
-                <VisuallyHiddenInput {...register('icon')} />
-              </Avatar>
-            )}
+            <Avatar
+              src={image ? image : data.icon}
+              w={'12.9rem'}
+              h={'12.9rem'}
+              onClick={onClickButton}
+            />
           </Box>
         </Flex>
 
+        <VisuallyHiddenInput
+          onChange={handleChangeImage}
+          ref={inputRef}
+          id="icon"
+          type="file"
+          accept="image/*"
+        />
         <FormControl isInvalid={errors.name ? true : false}>
           <FormLabel htmlFor="name" fontSize={'md'}>
             ニックネーム

front/src/components/Forms/index.ts

@@ -1,2 +1,2 @@
-export { FormCreateUpdateUser } from '@/components/Forms/FormCreateUpdateUser'
+export { FormUserProfile } from '@/components/Forms/FormUserProfile'
 export { FormCreateUpdateLinks } from '@/components/Forms/FormCreateUpdateLinks'

front/src/components/Modals/ModalDeleteUser.tsx

@@ -0,0 +1,70 @@
+import {
+  Modal,
+  Button,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  Text,
+  UnorderedList,
+  ListItem,
+  Box
+} from '@chakra-ui/react'
+import { useDeleteUser } from '@/hooks/firestore'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  id: string
+}
+
+export const ModalDeleteUser = ({ isOpen, onClose, id }: Props) => {
+  const { onClickDeleteUser } = useDeleteUser()
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent
+        margin={'auto 0'}
+        width={'90vw'}
+        maxW={'90vw'}
+        height={'auto'}
+        borderRadius={'3rem'}
+        padding={'1.5rem'}
+      >
+        <ModalHeader textAlign={'center'}>アカウント削除</ModalHeader>
+        {/* <ModalCloseButton margin={'1rem'} /> */}
+        <ModalBody>
+          <Text>削除すると以下の情報がすべて失われます</Text>
+          <Box
+            bgColor={'#f1f1f1'}
+            p={'1rem'}
+            borderRadius={'1rem'}
+            m={'1rem 0'}
+          >
+            <UnorderedList>
+              <ListItem>プロフィール情報</ListItem>
+              <ListItem>作成したトラべリンク</ListItem>
+              <ListItem>保存したトラべリンク</ListItem>
+            </UnorderedList>
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant={'outline'} size="md" mr={3} onClick={onClose}>
+            キャンセル
+          </Button>
+          <Button
+            colorScheme="alertRed"
+            size="md"
+            w={'5rem'}
+            h={'3rem'}
+            onClick={() => onClickDeleteUser(id)}
+          >
+            削除
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

front/src/components/Modals/ModalQrCode.tsx

@@ -75,6 +75,14 @@ export const ModalQrCode = ({
               value={`https://traveli-web.vercel.app/${path}`}
               size={168}
               includeMargin={false}
+              imageSettings={{
+                src: '/images/traveli-logo.svg',
+                x: undefined,
+                y: undefined,
+                height: 32,
+                width: 32,
+                excavate: true
+              }}
             />
           </Box>
           <Text textAlign={'center'} margin={'0 auto'} w={'24rem'}>

front/src/components/Modals/index.ts

@@ -1 +1,2 @@
 export { ModalQrCode } from '@/components/Modals/ModalQrCode'
+export { ModalDeleteUser } from '@/components/Modals/ModalDeleteUser'