chore: fixes for the modal version

Author: emwp

src/components/Selector.tsx

@@ -8,16 +8,14 @@ import { swrLibreriesFetcher } from '../lib/fetcher'
 import { getLibraryListQuery } from '../lib/graphql/queries'
 import RasterImage from './Image'
 import XMark from './icons/XMark'
-import { arrayMove } from '@dnd-kit/sortable'
 
 import type { DragEndEvent, DragStartEvent, UniqueIdentifier } from '@dnd-kit/core'
 import { DndContext, closestCenter, DragOverlay } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { useSelectedPhotosStore } from '../lib/store/useSelectedPhotosStore'
 
 type Props = {
 	ctx: RenderModalCtx
-	selectedPhotos: any[]
-	setSelectedPhotos: (photos: any) => void
 }
 
 interface SortableItemProps {
@@ -54,11 +52,17 @@ function SortableItem({ id, children, isDragging }: SortableItemProps) {
 	)
 }
 
-const Selector = ({ ctx, selectedPhotos, setSelectedPhotos }: Props) => {
+const Selector = ({ ctx }: Props) => {
 	const [libraries, setLibraries] = useState<Library[]>([])
 	const [selectedLibrary, setSelectedLibrary] = useState<Library | null>(null)
 	const [selectedVersions, setSelectedVersions] = useState<string[]>([])
 
+	const [selectedPhotos, reorderPhotos, setPhoto] = useSelectedPhotosStore((state) => [
+		state.selectedPhotos,
+		state.reorderPhotos,
+		state.setPhoto,
+	])
+
 	const { orgId, apiKey } = ctx.plugin.attributes.parameters
 
 	const { data } = useSWR(
@@ -103,14 +107,7 @@ const Selector = ({ ctx, selectedPhotos, setSelectedPhotos }: Props) => {
 	const handleDragEnd = (event: DragEndEvent) => {
 		setActiveId(null)
 		setIsDragging(false)
-		const { active, over } = event
-		if (active && over && active.id !== over.id) {
-			setSelectedPhotos((items: Image[]) => {
-				const oldIndex = items.findIndex((item) => item.id === active.id)
-				const newIndex = items.findIndex((item) => item.id === over.id)
-				return arrayMove([...items], oldIndex, newIndex)
-			})
-		}
+		reorderPhotos(event)
 	}
 
 	const handleDragStart = (event: DragStartEvent) => {
@@ -132,7 +129,7 @@ const Selector = ({ ctx, selectedPhotos, setSelectedPhotos }: Props) => {
 						<button
 							className="w-fit h-fit bg-green hover:bg-green-dark text-white px-3 py-2 rounded font-medium transition-colors"
 							type="button"
-							onClick={() => ctx.resolve(selectedPhotos)}
+							onClick={() => ctx.resolve(JSON.stringify(selectedPhotos))}
 						>
 							Confirm
 						</button>
@@ -179,14 +176,10 @@ const Selector = ({ ctx, selectedPhotos, setSelectedPhotos }: Props) => {
 											>
 												<button
 													type="button"
-													onClick={() =>
-														setSelectedPhotos((prev: any[]) =>
-															prev.filter((photo) => photo.id !== image.id)
-														)
-													}
+													onClick={() => setPhoto(image)}
 													aria-label="Remove image"
 													className={clsx(
-														'z-10 text-white border-[3px] border-white absolute -top-2.5 -right-2.5 h-8 w-8 flex justify-center items-center bg-primary rounded-full p-1 hover:bg-primary-dark transition-colors',
+														'z-50 text-white border-[3px] border-white absolute -top-2.5 -right-2.5 h-8 w-8 flex justify-center items-center bg-primary rounded-full p-1 hover:bg-primary-dark transition-colors',
 														{ 'opacity-0': isDragging }
 													)}
 												>
@@ -257,7 +250,7 @@ const Selector = ({ ctx, selectedPhotos, setSelectedPhotos }: Props) => {
 					<button
 						className="w-fit h-fit bg-green hover:bg-green-dark text-white px-3 py-2 rounded font-medium transition-colors"
 						type="button"
-						onClick={() => ctx.resolve(selectedPhotos)}
+						onClick={() => ctx.resolve(JSON.stringify(selectedPhotos))}
 					>
 						Confirm
 					</button>

src/components/SelectorField.tsx

@@ -26,9 +26,8 @@ const SelectorField = ({ ctx }: Props) => {
 			},
 		})
 		if (result) {
-			const parsedResult = JSON.parse(result as string)
-			setInitialValue(parsedResult)
-			ctx.setFieldValue(ctx.fieldPath, parsedResult)
+			setInitialValue(result)
+			ctx.setFieldValue(ctx.fieldPath, result)
 		}
 	}
 

src/components/SelectorModal.tsx

@@ -1,22 +1,24 @@
 import { RenderModalCtx } from 'datocms-plugin-sdk'
 import { Canvas } from 'datocms-react-ui'
 import Selector from './Selector'
-import { useState, useEffect } from 'react'
+import { useSelectedPhotosStore } from '../lib/store/useSelectedPhotosStore'
+import { useEffect } from 'react'
 
 type Props = {
 	ctx: RenderModalCtx
 }
 
 const SelectorModal = ({ ctx }: Props) => {
-	const [selectedPhotos, setSelectedPhotos] = useState<any>(ctx.parameters.selectedPhotos || [])
+	const [setInitialValue] = useSelectedPhotosStore((state) => [state.setInitialValue])
 
 	useEffect(() => {
-		setSelectedPhotos(ctx.parameters.selectedPhotos || [])
-	}, [ctx.parameters.selectedPhotos])
+		const { selectedPhotos: initialValue } = ctx.parameters ?? {}
+		setInitialValue(initialValue)
+	}, [ctx.parameters, setInitialValue])
 
 	return (
 		<Canvas ctx={ctx}>
-			<Selector selectedPhotos={selectedPhotos} setSelectedPhotos={setSelectedPhotos} ctx={ctx} />
+			<Selector ctx={ctx} />
 		</Canvas>
 	)
 }

src/lib/store/useSelectedPhotosStore.ts

@@ -28,7 +28,7 @@ export const useSelectedPhotosStore = create<SelectedPhotos>()((set, get) => {
 			set({ selectedPhotos: JSON.parse(initialValue) as Image[] })
 			return
 		}
-		set({ selectedPhotos: [] })
+		set({ selectedPhotos: initialValue as Image[] })
 	}
 
 	const reorderPhotos = (event: DragEndEvent) => {