From 4c63485a5b90df103788d0813c3cddf4f01f9536 Mon Sep 17 00:00:00 2001 From: bagasbanuna Date: Mon, 2 Mar 2026 10:31:29 +0800 Subject: [PATCH] Clean Code Edit Maps Maps Edit Feature - app/(application)/(user)/maps/[id]/edit.tsx - components/Map/MapSelectedV2.tsx Docs - docs/prompt-for-qwen-code.md New Screen - screens/Maps/ScreenMapsEdit.tsx ### No Issue --- app/(application)/(user)/maps/[id]/edit.tsx | 243 +------------------ components/Map/MapSelectedV2.tsx | 1 + docs/prompt-for-qwen-code.md | 10 +- screens/Maps/ScreenMapsEdit.tsx | 245 ++++++++++++++++++++ 4 files changed, 254 insertions(+), 245 deletions(-) create mode 100644 screens/Maps/ScreenMapsEdit.tsx diff --git a/app/(application)/(user)/maps/[id]/edit.tsx b/app/(application)/(user)/maps/[id]/edit.tsx index 75f8894..c500870 100644 --- a/app/(application)/(user)/maps/[id]/edit.tsx +++ b/app/(application)/(user)/maps/[id]/edit.tsx @@ -1,244 +1,5 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -import { - BoxButtonOnFooter, - ButtonCenteredOnly, - ButtonCustom, - InformationBox, - LandscapeFrameUploaded, - Spacing, - TextInputCustom, - ViewWrapper, -} from "@/components"; -import API_IMAGE from "@/constants/api-storage"; -import DIRECTORY_ID from "@/constants/directory-id"; -import { apiMapsGetOne, apiMapsUpdate } from "@/service/api-client/api-maps"; -import { uploadFileService } from "@/service/upload-service"; -import pickFile, { IFileData } from "@/utils/pickFile"; -import { router, useFocusEffect, useLocalSearchParams } from "expo-router"; -import { useCallback, useState } from "react"; -import { StyleSheet, View } from "react-native"; -import MapView, { LatLng, Marker } from "react-native-maps"; -import Toast from "react-native-toast-message"; +import { Maps_ScreenMapsEdit } from "@/screens/Maps/ScreenMapsEdit"; -const defaultRegion = { - latitude: -8.737109, - longitude: 115.1756897, - latitudeDelta: 0.1, - longitudeDelta: 0.1, -}; export default function MapsEdit() { - const { id } = useLocalSearchParams(); - const [data, setData] = useState({ - id: "", - namePin: "", - latitude: "", - longitude: "", - imageId: "", - }); - const [selectedLocation, setSelectedLocation] = useState(null); - const [image, setImage] = useState(null); - const [isLoading, setLoading] = useState(false); - - useFocusEffect( - useCallback(() => { - onLoadData(); - }, [id]) - ); - - const onLoadData = async () => { - try { - const response = await apiMapsGetOne({ id: id as string }); - - if (response.success) { - setData({ - id: response.data.id, - namePin: response.data.namePin, - latitude: response.data.latitude, - longitude: response.data.longitude, - imageId: response.data.imageId, - }); - } - } catch (error) { - console.log("[ERROR]", error); - } - }; - - const handleMapPress = (event: any) => { - const { latitude, longitude } = event.nativeEvent.coordinate; - const location = { latitude, longitude }; - setSelectedLocation(location); - }; - - const handleSubmit = async () => { - let newData: any; - if (!data.namePin) { - Toast.show({ - type: "error", - text1: "Nama pin harus diisi", - }); - return; - } - - newData = { - namePin: data?.namePin, - latitude: selectedLocation?.latitude || data?.latitude, - longitude: selectedLocation?.longitude || data?.longitude, - }; - - try { - setLoading(true); - if (image) { - const responseUpload = await uploadFileService({ - dirId: DIRECTORY_ID.map_image, - imageUri: image?.uri, - }); - - if (!responseUpload?.data?.id) { - Toast.show({ - type: "error", - text1: "Gagal mengunggah gambar", - }); - return; - } - - const imageId = responseUpload?.data?.id; - - newData = { - namePin: data?.namePin, - latitude: selectedLocation?.latitude, - longitude: selectedLocation?.longitude, - newImageId: imageId, - }; - } - - const responseUpdate = await apiMapsUpdate({ - id: data?.id, - data: newData, - }); - - if (!responseUpdate.success) { - Toast.show({ - type: "error", - text1: "Gagal mengupdate map", - }); - return; - } - - Toast.show({ - type: "success", - text1: "Map berhasil diupdate", - }); - router.back(); - } catch (error) { - console.log("[ERROR]", error); - } finally { - setLoading(false); - } - }; - - const buttonFooter = ( - - - Update - - - ); - - return ( - - - - - - {selectedLocation ? ( - - ) : ( - - )} - - - - setData({ ...data, namePin: value })} - /> - - - - - - { - pickFile({ - allowedType: "image", - setImageUri(file) { - setImage(file); - }, - }); - }} - > - Upload - - - - ); + return ; } - -const styles = StyleSheet.create({ - container: { - width: "100%", - backgroundColor: "#f5f5f5", - overflow: "hidden", - borderRadius: 8, - marginBottom: 20, - }, - map: { - flex: 1, - }, -}); diff --git a/components/Map/MapSelectedV2.tsx b/components/Map/MapSelectedV2.tsx index c76e83e..286ce4a 100644 --- a/components/Map/MapSelectedV2.tsx +++ b/components/Map/MapSelectedV2.tsx @@ -81,6 +81,7 @@ export function MapSelectedV2({ (event: any) => { const coordinate = event?.geometry?.coordinates || event?.coordinates; if (coordinate && Array.isArray(coordinate) && coordinate.length === 2) { + console.log("[MapSelectedV2] coordinate", coordinate); onLocationSelect?.([coordinate[0], coordinate[1]]); } }, diff --git a/docs/prompt-for-qwen-code.md b/docs/prompt-for-qwen-code.md index 1f24be0..a7682cd 100644 --- a/docs/prompt-for-qwen-code.md +++ b/docs/prompt-for-qwen-code.md @@ -111,10 +111,12 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1" ( stri Jika butuh refrensi FlatList bisa lihat pada file components/_ShareComponent/NewWrapper.tsx -File Utama: screens/Admin/Investment/ScreenInvestmentStatus.tsx -Folder tujuan: screens/Admin/Investment -Reffrensi: screens/Admin/Donation/BoxDonationStatus.tsx -Buatkan box component baru pada file "File Utama" di bagian renderItem agar lebih rapi buat file baru dengan nama BoxInvestmentStatus.tsx +File Utama: app/(application)/(user)/maps/[id]/edit.tsx +Folder tujuan: screens/Maps +Nama file utama: ScreenMapsEdit.tsx +Nama function utama: Maps_ScreenMapsEdit + +Buatkan file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source" diff --git a/screens/Maps/ScreenMapsEdit.tsx b/screens/Maps/ScreenMapsEdit.tsx new file mode 100644 index 0000000..c451815 --- /dev/null +++ b/screens/Maps/ScreenMapsEdit.tsx @@ -0,0 +1,245 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { + BoxButtonOnFooter, + ButtonCenteredOnly, + ButtonCustom, + InformationBox, + LandscapeFrameUploaded, + Spacing, + TextInputCustom, + ViewWrapper, +} from "@/components"; +import API_IMAGE from "@/constants/api-storage"; +import DIRECTORY_ID from "@/constants/directory-id"; +import { apiMapsGetOne, apiMapsUpdate } from "@/service/api-client/api-maps"; +import { uploadFileService } from "@/service/upload-service"; +import pickFile, { IFileData } from "@/utils/pickFile"; +import { router, useFocusEffect, useLocalSearchParams } from "expo-router"; +import { useCallback, useState } from "react"; +import { StyleSheet, View } from "react-native"; +import MapView, { LatLng, Marker } from "react-native-maps"; +import Toast from "react-native-toast-message"; + +const defaultRegion = { + latitude: -8.737109, + longitude: 115.1756897, + latitudeDelta: 0.1, + longitudeDelta: 0.1, +}; + +export function Maps_ScreenMapsEdit() { + const { id } = useLocalSearchParams(); + const [data, setData] = useState({ + id: "", + namePin: "", + latitude: "", + longitude: "", + imageId: "", + }); + const [selectedLocation, setSelectedLocation] = useState(null); + const [image, setImage] = useState(null); + const [isLoading, setLoading] = useState(false); + + useFocusEffect( + useCallback(() => { + onLoadData(); + }, [id]) + ); + + const onLoadData = async () => { + try { + const response = await apiMapsGetOne({ id: id as string }); + + if (response.success) { + setData({ + id: response.data.id, + namePin: response.data.namePin, + latitude: response.data.latitude, + longitude: response.data.longitude, + imageId: response.data.imageId, + }); + } + } catch (error) { + console.log("[ERROR]", error); + } + }; + + const handleMapPress = (event: any) => { + const { latitude, longitude } = event.nativeEvent.coordinate; + const location = { latitude, longitude }; + setSelectedLocation(location); + }; + + const handleSubmit = async () => { + let newData: any; + if (!data.namePin) { + Toast.show({ + type: "error", + text1: "Nama pin harus diisi", + }); + return; + } + + newData = { + namePin: data?.namePin, + latitude: selectedLocation?.latitude || data?.latitude, + longitude: selectedLocation?.longitude || data?.longitude, + }; + + try { + setLoading(true); + if (image) { + const responseUpload = await uploadFileService({ + dirId: DIRECTORY_ID.map_image, + imageUri: image?.uri, + }); + + if (!responseUpload?.data?.id) { + Toast.show({ + type: "error", + text1: "Gagal mengunggah gambar", + }); + return; + } + + const imageId = responseUpload?.data?.id; + + newData = { + namePin: data?.namePin, + latitude: selectedLocation?.latitude, + longitude: selectedLocation?.longitude, + newImageId: imageId, + }; + } + + const responseUpdate = await apiMapsUpdate({ + id: data?.id, + data: newData, + }); + + if (!responseUpdate.success) { + Toast.show({ + type: "error", + text1: "Gagal mengupdate map", + }); + return; + } + + Toast.show({ + type: "success", + text1: "Map berhasil diupdate", + }); + router.back(); + } catch (error) { + console.log("[ERROR]", error); + } finally { + setLoading(false); + } + }; + + const buttonFooter = ( + + + Update + + + ); + + return ( + + + + + + {selectedLocation ? ( + + ) : ( + + )} + + + + setData({ ...data, namePin: value })} + /> + + + + + + { + pickFile({ + allowedType: "image", + setImageUri(file) { + setImage(file); + }, + }); + }} + > + Upload + + + + ); +} + +const styles = StyleSheet.create({ + container: { + width: "100%", + backgroundColor: "#f5f5f5", + overflow: "hidden", + borderRadius: 8, + marginBottom: 20, + }, + map: { + flex: 1, + }, +});