From 96e82980326467268302b0e7f85fe04ebf2c444b Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 00:44:37 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EC=8B=9C=20postAssets=EB=8F=84=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/maps/RecordFormImages.tsx | 19 -------------- .../src/components/maps/RecordPostForm.tsx | 25 ++++++++++++++++--- 2 files changed, 21 insertions(+), 23 deletions(-) delete mode 100644 packages/react-native/src/components/maps/RecordFormImages.tsx diff --git a/packages/react-native/src/components/maps/RecordFormImages.tsx b/packages/react-native/src/components/maps/RecordFormImages.tsx deleted file mode 100644 index efe7def6..00000000 --- a/packages/react-native/src/components/maps/RecordFormImages.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import useRecordFormState from '@/hooks/useRecordFormState'; -import ImageSelect from '../common/ImageSelect'; - -interface RecordFormImagesProps { - handlePressAddPhoto: () => Promise; -} - -export default function RecordFormImages({ - handlePressAddPhoto, -}: RecordFormImagesProps) { - const { images, removeImages } = useRecordFormState(); - return ( - - ); -} diff --git a/packages/react-native/src/components/maps/RecordPostForm.tsx b/packages/react-native/src/components/maps/RecordPostForm.tsx index 8a723325..f9d50aef 100644 --- a/packages/react-native/src/components/maps/RecordPostForm.tsx +++ b/packages/react-native/src/components/maps/RecordPostForm.tsx @@ -11,13 +11,21 @@ import useRecordFormState from '@/hooks/useRecordFormState'; import useGallery from '@/hooks/useGallery'; import useRecordMutation from '@/apis/mutations/useRecordMutation'; import RecordFormDescription from './RecordFormDescription'; -import RecordFormImages from './RecordFormImages'; import RecordFormCitySelect from './RecordFormCitySelect'; import { REGION_MAPPER } from '@/constants/CITY'; +import ImageSelect from '../common/ImageSelect'; export default function RecordPostForm() { - const { description, title, validate, resetImages, selectedCity, date } = - useRecordFormState(); + const { + description, + title, + validate, + resetImages, + selectedCity, + date, + images, + removeImages, + } = useRecordFormState(); const { params } = useRoute>(); const navigate = useNavigation>(); @@ -93,7 +101,16 @@ export default function RecordPostForm() { - + { + removeImages(image); + setImageAssets((prev) => + prev?.filter((asset) => asset.uri !== image), + ); + }} + /> From 5ae5716825112de7a146875ee031ab581457db22 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 00:45:41 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20patch=20api=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/mutations/useRecordMutation.ts | 32 +++++++++++++--- .../src/components/maps/RecordModifyForm.tsx | 37 ++++++++++++++----- 2 files changed, 54 insertions(+), 15 deletions(-) diff --git a/packages/react-native/src/apis/mutations/useRecordMutation.ts b/packages/react-native/src/apis/mutations/useRecordMutation.ts index c0271af5..55187063 100644 --- a/packages/react-native/src/apis/mutations/useRecordMutation.ts +++ b/packages/react-native/src/apis/mutations/useRecordMutation.ts @@ -21,11 +21,14 @@ interface PostRecordRequest { } interface PatchRecordRequest { - name?: string; - description?: string; - region: Region; - city?: CitySelectValue; - image?: string[]; + record: { + name?: string; + description?: string; + region: Region; + city?: CitySelectValue; + }; + images: string[]; + deleteImages?: string[]; } interface DeleteRecordRequest { @@ -81,7 +84,24 @@ export default function useRecordMutation({ const { mutateAsync: patchMutate, isPending: isPatchPending } = useMutation({ mutationFn: async (requestParams: PatchRecordRequest) => { - return requestParams; + const customForm = new CustomForm(); + Object.entries(requestParams.record).forEach(([key, value]) => { + customForm.append(key, value); + }); + + requestParams.images.forEach((image) => { + customForm.append('images', image); + }); + + requestParams.deleteImages?.forEach((image) => { + customForm.append('deleteImages', image); + }); + + await authAxios.patch('/api/record', customForm.getForm(), { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); }, onSuccess: invalidateRecords, }); diff --git a/packages/react-native/src/components/maps/RecordModifyForm.tsx b/packages/react-native/src/components/maps/RecordModifyForm.tsx index 553f06a9..60449232 100644 --- a/packages/react-native/src/components/maps/RecordModifyForm.tsx +++ b/packages/react-native/src/components/maps/RecordModifyForm.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { View } from 'react-native'; import { Button, Font } from 'design-system'; import { useNavigation, useRoute } from '@react-navigation/native'; @@ -6,18 +7,26 @@ import RecordFormTitle from '@/components/maps/RecordFormTitle'; import useRecordFormState from '@/hooks/useRecordFormState'; import useRecordMutation from '@/apis/mutations/useRecordMutation'; import { StackNavigation, StackRouteProps } from '@/types/navigation'; -import RecordFormImages from './RecordFormImages'; import useGallery from '@/hooks/useGallery'; import RecordFormCitySelect from './RecordFormCitySelect'; import { REGION_MAPPER } from '@/constants/CITY'; +import ImageSelect from '../common/ImageSelect'; export default function RecordModifyForm() { - const { validate, title, description, images, resetImages, selectedCity } = - useRecordFormState(); + const { + validate, + title, + description, + images, + resetImages, + selectedCity, + removeImages, + } = useRecordFormState(); const { getPhoto } = useGallery(); const { params } = useRoute>(); const navigate = useNavigation>(); const { patchMutate } = useRecordMutation({ location: params.location }); + const [deleteImages, setDeleteImage] = useState([]); const handlePressAddPhoto = async () => { const photos = await getPhoto({ @@ -32,11 +41,14 @@ export default function RecordModifyForm() { } await patchMutate({ - name: title, - description, - image: images, - city: selectedCity, - region: REGION_MAPPER[params.location], + record: { + name: title, + description, + city: selectedCity, + region: REGION_MAPPER[params.location], + }, + images, + deleteImages, }); navigate.navigate('Maps/Record', { @@ -56,7 +68,14 @@ export default function RecordModifyForm() { - + { + removeImages(image); + setDeleteImage((prev) => [...prev, image]); + }} + /> From efd8212c84c665c4132e418620ed7dfc9a1a504b Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 11:47:30 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=EC=A0=81=EC=9A=A9=EB=90=98=EC=A7=80?= =?UTF-8?q?=EC=95=8A=EC=9D=80=20city=20type=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/mutations/useRecordMutation.ts | 2 +- .../src/components/maps/RecordModifyForm.tsx | 2 +- .../react-native/src/hooks/useRecordFormState.tsx | 15 ++++++++++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/react-native/src/apis/mutations/useRecordMutation.ts b/packages/react-native/src/apis/mutations/useRecordMutation.ts index 55187063..ed4f4108 100644 --- a/packages/react-native/src/apis/mutations/useRecordMutation.ts +++ b/packages/react-native/src/apis/mutations/useRecordMutation.ts @@ -25,7 +25,7 @@ interface PatchRecordRequest { name?: string; description?: string; region: Region; - city?: CitySelectValue; + city?: City; }; images: string[]; deleteImages?: string[]; diff --git a/packages/react-native/src/components/maps/RecordModifyForm.tsx b/packages/react-native/src/components/maps/RecordModifyForm.tsx index 60449232..e5b5ded7 100644 --- a/packages/react-native/src/components/maps/RecordModifyForm.tsx +++ b/packages/react-native/src/components/maps/RecordModifyForm.tsx @@ -44,7 +44,7 @@ export default function RecordModifyForm() { record: { name: title, description, - city: selectedCity, + city: selectedCity?.value, region: REGION_MAPPER[params.location], }, images, diff --git a/packages/react-native/src/hooks/useRecordFormState.tsx b/packages/react-native/src/hooks/useRecordFormState.tsx index 783c4448..26c26396 100644 --- a/packages/react-native/src/hooks/useRecordFormState.tsx +++ b/packages/react-native/src/hooks/useRecordFormState.tsx @@ -2,6 +2,7 @@ import { createContext, ReactNode, useContext, useMemo, useState } from 'react'; import { RecordGetResponse } from '@/apis/queries/records/useRecordDetailQuery'; import { CitySelectValue } from '@/components/common/CitySelect'; import { DateSelectProps } from '@/components/common/DateSelect'; +import { getDisplayRegion } from '@/utils/getDisplayRegionName'; type RecordFormContextState = DateSelectProps & { title: string; @@ -32,7 +33,19 @@ export function RecordFormProvider({ const [description, setDescription] = useState( defaultProps?.description || '', ); - const [selectedCity, setSelectedCity] = useState(); + const [selectedCity, setSelectedCity] = useState( + defaultProps + ? { + value: defaultProps?.city, + label: + getDisplayRegion({ + locationEnum: defaultProps.region, + cityEnum: defaultProps.city, + onlyCity: true, + }) || '', + } + : undefined, + ); const [images, setImages] = useState(defaultProps?.images || []); From c313f6fb47e9ca5226e3229b50de5c710bac9de1 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 14:42:41 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20patch=EB=AA=85=EC=84=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/mutations/useRecordMutation.ts | 37 +++++++++++-------- .../src/components/maps/RecordModifyForm.tsx | 19 ++++++++-- .../src/pages/Maps/ModifyRecord.tsx | 2 +- 3 files changed, 38 insertions(+), 20 deletions(-) diff --git a/packages/react-native/src/apis/mutations/useRecordMutation.ts b/packages/react-native/src/apis/mutations/useRecordMutation.ts index ed4f4108..037ee0e4 100644 --- a/packages/react-native/src/apis/mutations/useRecordMutation.ts +++ b/packages/react-native/src/apis/mutations/useRecordMutation.ts @@ -2,7 +2,6 @@ import { useRef } from 'react'; import { Asset } from 'react-native-image-picker'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { City, Region } from '@/constants/CITY'; -import { CitySelectValue } from '@/components/common/CitySelect'; import useAuthAxios from '../useAuthAxios'; import { KoreaLocationName } from '@/types/map'; import QUERY_KEYS from '@/constants/QUERY_KEYS'; @@ -21,13 +20,14 @@ interface PostRecordRequest { } interface PatchRecordRequest { + id: number; record: { name?: string; description?: string; region: Region; city?: City; }; - images: string[]; + addImages?: Asset[]; deleteImages?: string[]; } @@ -85,23 +85,28 @@ export default function useRecordMutation({ const { mutateAsync: patchMutate, isPending: isPatchPending } = useMutation({ mutationFn: async (requestParams: PatchRecordRequest) => { const customForm = new CustomForm(); - Object.entries(requestParams.record).forEach(([key, value]) => { - customForm.append(key, value); - }); - - requestParams.images.forEach((image) => { - customForm.append('images', image); + customForm.append( + 'recordUpdate', + JSON.stringify({ + title: requestParams.record.name, + description: requestParams.record.description, + deleteImages: requestParams.deleteImages, + }), + ); + + requestParams.addImages?.forEach((image) => { + customForm.appendImage('addImage', image); }); - requestParams.deleteImages?.forEach((image) => { - customForm.append('deleteImages', image); - }); - - await authAxios.patch('/api/record', customForm.getForm(), { - headers: { - 'Content-Type': 'multipart/form-data', + await authAxios.patch( + `/api/record/${requestParams.id}`, + customForm.getForm(), + { + headers: { + 'Content-Type': 'multipart/form-data', + }, }, - }); + ); }, onSuccess: invalidateRecords, }); diff --git a/packages/react-native/src/components/maps/RecordModifyForm.tsx b/packages/react-native/src/components/maps/RecordModifyForm.tsx index e5b5ded7..baa30a48 100644 --- a/packages/react-native/src/components/maps/RecordModifyForm.tsx +++ b/packages/react-native/src/components/maps/RecordModifyForm.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { View } from 'react-native'; import { Button, Font } from 'design-system'; +import { Asset } from 'react-native-image-picker'; import { useNavigation, useRoute } from '@react-navigation/native'; import RecordFormDescription from '@/components/maps/RecordFormDescription'; import RecordFormTitle from '@/components/maps/RecordFormTitle'; @@ -12,7 +13,11 @@ import RecordFormCitySelect from './RecordFormCitySelect'; import { REGION_MAPPER } from '@/constants/CITY'; import ImageSelect from '../common/ImageSelect'; -export default function RecordModifyForm() { +interface RecordModifyFormProps { + id: number; +} + +export default function RecordModifyForm({ id }: RecordModifyFormProps) { const { validate, title, @@ -27,12 +32,19 @@ export default function RecordModifyForm() { const navigate = useNavigation>(); const { patchMutate } = useRecordMutation({ location: params.location }); const [deleteImages, setDeleteImage] = useState([]); + const [addImages, setAddImages] = useState(); const handlePressAddPhoto = async () => { const photos = await getPhoto({ selectionLimit: 10, + fullObject: true, }); - if (photos && Array.isArray(photos)) resetImages(photos); + + if (photos && Array.isArray(photos)) { + const photoUris = photos.map((photo) => photo.uri) as string[]; + resetImages([...images, ...photoUris]); + setAddImages([...photos]); + } }; const handlePress = async () => { @@ -41,13 +53,14 @@ export default function RecordModifyForm() { } await patchMutate({ + id, record: { name: title, description, city: selectedCity?.value, region: REGION_MAPPER[params.location], }, - images, + addImages, deleteImages, }); diff --git a/packages/react-native/src/pages/Maps/ModifyRecord.tsx b/packages/react-native/src/pages/Maps/ModifyRecord.tsx index ef35ccba..d78e2d80 100644 --- a/packages/react-native/src/pages/Maps/ModifyRecord.tsx +++ b/packages/react-native/src/pages/Maps/ModifyRecord.tsx @@ -17,7 +17,7 @@ export default withSuspense(function ModifyLog() {
- + ); From 4799c719154b1a30a3e946b0f435cc6fe8cd720e Mon Sep 17 00:00:00 2001 From: d0422 Date: Wed, 25 Sep 2024 01:09:50 +0900 Subject: [PATCH 5/6] =?UTF-8?q?chore:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20api?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/mutations/useRecordMutation.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react-native/src/apis/mutations/useRecordMutation.ts b/packages/react-native/src/apis/mutations/useRecordMutation.ts index 037ee0e4..600b3852 100644 --- a/packages/react-native/src/apis/mutations/useRecordMutation.ts +++ b/packages/react-native/src/apis/mutations/useRecordMutation.ts @@ -85,14 +85,10 @@ export default function useRecordMutation({ const { mutateAsync: patchMutate, isPending: isPatchPending } = useMutation({ mutationFn: async (requestParams: PatchRecordRequest) => { const customForm = new CustomForm(); - customForm.append( - 'recordUpdate', - JSON.stringify({ - title: requestParams.record.name, - description: requestParams.record.description, - deleteImages: requestParams.deleteImages, - }), - ); + + customForm.append('title', requestParams.record.name); + customForm.append('description', requestParams.record.description); + customForm.append('deleteImages', requestParams.deleteImages); requestParams.addImages?.forEach((image) => { customForm.appendImage('addImage', image); From d5cc06bae744033964e3df0aab4c3fca5bfac129 Mon Sep 17 00:00:00 2001 From: d0422 Date: Wed, 25 Sep 2024 01:54:03 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20api=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/apis/mutations/useRecordMutation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/src/apis/mutations/useRecordMutation.ts b/packages/react-native/src/apis/mutations/useRecordMutation.ts index 600b3852..5ff46274 100644 --- a/packages/react-native/src/apis/mutations/useRecordMutation.ts +++ b/packages/react-native/src/apis/mutations/useRecordMutation.ts @@ -91,7 +91,7 @@ export default function useRecordMutation({ customForm.append('deleteImages', requestParams.deleteImages); requestParams.addImages?.forEach((image) => { - customForm.appendImage('addImage', image); + customForm.appendImage('addImages', image); }); await authAxios.patch(