diff --git a/src/modules/place.module.tsx b/src/modules/place.module.tsx index f2a186e..1cfca18 100644 --- a/src/modules/place.module.tsx +++ b/src/modules/place.module.tsx @@ -1,5 +1,10 @@ import { useCallback, useEffect, useState } from "react"; -import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd"; +import { + DragDropContext, + Droppable, + Draggable, + DropResult, +} from "@hello-pangea/dnd"; import { Place, Tag } from "@/interfaces/place.interface"; import { Plus, X } from "lucide-react"; @@ -12,257 +17,248 @@ import { useDashboardStore } from "@/shared/stores/places.store"; import { uploadImageByUrl } from "@/shared/api/parse.api"; export const PlaceModule = ({ - inputPlace, - onSave, + inputPlace, + onSave, }: { - inputPlace: Place; - onSave: (place: Place) => void; + inputPlace: Place; + onSave: (place: Place) => void; }) => { - const [place, setPlace] = useState(inputPlace); + const [place, setPlace] = useState(inputPlace); - useEffect(() => { - setPlace(inputPlace); - }, [inputPlace]); + useEffect(() => { + setPlace(inputPlace); + }, [inputPlace]); - const { tags } = useDashboardStore(); + const { tags } = useDashboardStore(); - const handleInputChange = useCallback( - (e: React.ChangeEvent) => { - const { name, value } = e.target; - if (!place) return; + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + const { name, value } = e.target; + if (!place) return; - if (name === "lat" || name === "lon") { - const newLocation = { - ...place.location, - [name]: value, - }; - setPlace({ ...place, location: newLocation }); - } else { - setPlace({ ...place, [name]: value }); - } - }, - [place] - ); + if (name === "lat" || name === "lon") { + const newLocation = { + ...place.location, + [name]: value, + }; + setPlace({ ...place, location: newLocation }); + } else { + setPlace({ ...place, [name]: value }); + } + }, + [place] + ); - const handleAddPhoto = async () => { - if (!place) return; - const rawPhotoUrl = prompt("Enter the URL of the new photo:"); - if (rawPhotoUrl) { - const newPhotoUrl = await uploadImageByUrl(rawPhotoUrl); - if (newPhotoUrl.url) { - setPlace({ - ...place, - images: [...place.images, newPhotoUrl.url], - }); - } - } - }; + const handleAddPhoto = async () => { + if (!place) return; + const rawPhotoUrl = prompt("Enter the URL of the new photo:"); + if (rawPhotoUrl) { + const newPhotoUrl = await uploadImageByUrl(rawPhotoUrl); + if (newPhotoUrl.url) { + setPlace({ + ...place, + images: [...place.images, newPhotoUrl.url], + }); + } + } + }; - const handleRemovePhoto = (index: number) => { - if (!place) return; - const newImages = place.images.filter((_, i) => i !== index); - setPlace({ ...place, images: newImages }); - }; + const handleRemovePhoto = (index: number) => { + if (!place) return; + const newImages = place.images.filter((_, i) => i !== index); + setPlace({ ...place, images: newImages }); + }; - const toggleTag = (tag: Tag) => { - const isTagSelected = place.tags.some((t) => t.id === tag.id); - const updatedTags = isTagSelected - ? place.tags.filter((t) => t.id !== tag.id) - : [...place.tags, tag]; - handleTagChange(updatedTags); - }; + const toggleTag = (tag: Tag) => { + const isTagSelected = place.tags.some((t) => t.id === tag.id); + const updatedTags = isTagSelected + ? place.tags.filter((t) => t.id !== tag.id) + : [...place.tags, tag]; + handleTagChange(updatedTags); + }; - const handleTagChange = (updatedTags: Tag[]) => { - setPlace((prev) => ({ - ...prev, - tags: updatedTags, - })); - }; + const handleTagChange = (updatedTags: Tag[]) => { + setPlace((prev) => ({ + ...prev, + tags: updatedTags, + })); + }; - const handleSave = useCallback(() => { - onSave(place); - }, [place, onSave]); + const handleSave = useCallback(() => { + place.location.lon = Number(place.location.lon); + place.location.lat = Number(place.location.lat); + place.priceAvg = Number(place.priceAvg); + onSave(place); + }, [place, onSave]); - const handleDragEnd = (result: DropResult) => { - if (!result.destination) return; + const handleDragEnd = (result: DropResult) => { + if (!result.destination) return; - const reorderedImages = Array.from(place.images); - const [movedImage] = reorderedImages.splice(result.source.index, 1); - reorderedImages.splice(result.destination.index, 0, movedImage); + const reorderedImages = Array.from(place.images); + const [movedImage] = reorderedImages.splice(result.source.index, 1); + reorderedImages.splice(result.destination.index, 0, movedImage); - setPlace((prev) => ({ ...prev, images: reorderedImages })); + setPlace((prev) => ({ ...prev, images: reorderedImages })); - console.log(place); - }; + console.log(place); + }; - return place !== null ? ( -
-
- - - {(provided) => ( -
- {place.images.map((img, index) => ( - - {(provided) => ( -
- Place -
- handleRemovePhoto(index) - } - > - -
-
- )} -
- ))} - {provided.placeholder} -
-
- -
-
-
- )} -
-
-
-
-
-
-
- - -
-
- - -
-
- -