How can I fix an issue in Next.js?
"use client"
import React, { useState, useEffect } from "react"
import { useFinalDataFromForm } from "@/store/useEventAddingData"
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
import { MdDelete, MdDragIndicator } from "react-icons/md"
import InputField from "@/components/CustomComponents/InputField"
import { IoMdAdd } from "react-icons/io"
import { HiEllipsisVertical } from "react-icons/hi2"
import { HiOutlineDuplicate } from "react-icons/hi"
import { BiEditAlt } from "react-icons/bi"
import { InputArrProps } from "@/types/propsType"
const Page = () => {
const finalData = useFinalDataFromForm((state) => state.finalData)
const [stateFinalData, setStateFinalData] = useState<InputArrProps[]>([])
const settingsRef = React.useRef<HTMLUListElement | any>(null)
console.log(stateFinalData)
// change server side to client side persist data
useEffect(() => {
setStateFinalData(finalData)
}, [finalData])
// drag and drop position change
const handleOnDragEnd = (result: any) => {
if (!result.destination) return
if (
result.source.index === result.destination.index &&
result.source.draggableId === result.destination.draggableId
)
return
const newItems = [...stateFinalData]
const [reorderedItem] = newItems.splice(result.source.index, 1)
newItems.splice(result.destination.index, 0, reorderedItem)
setStateFinalData(newItems)
}
// changing all openSettings to false when user click outside the settings
useEffect(() => {
const handle = (e: MouseEvent) => {
if (!settingsRef?.current?.contains(e.target)) {
setStateFinalData(
stateFinalData.map((item) => ({ ...item, openSettings: false }))
)
}
}
window.addEventListener("mousedown", handle)
return () => window.removeEventListener("mousedown", handle)
}, [])
// based on the Type HTML Input will be rendered
const handleType = (type: string, placeholder: string) => {
switch (type) {
case "text":
return (
<div className="flex flex-col gap-[2px]">
<label htmlFor={placeholder} className="text-xs font-medium">
{placeholder}
</label>
<InputField
disabled
type={type}
id={placeholder}
name={placeholder}
inputClassName="disabled:bg-text-icon/5 border border-primary-one w-full lg:w-[300px] xl:w-[500px]"
/>
</div>
)
case "number":
return (
<div className="flex flex-col gap-[2px]">
<label htmlFor={placeholder} className="text-xs font-medium">
{placeholder}
</label>
<InputField
disabled
type="number"
id={placeholder}
name={placeholder}
inputClassName="disabled:bg-text-icon/5 border border-primary-one w-full lg:w-[300px] xl:w-[500px]"
/>
</div>
)
case "para":
return <textarea className="border-2 border-black rounded-lg p-2" />
case "radio":
return (
<>
<input type="radio" name={type} id={type} />
<label htmlFor={type} className="mt-1 ml-4">
something
</label>
</>
)
default:
return (
<div className="flex flex-col">
<label htmlFor={placeholder} className="text-xs">
{placeholder}
</label>
<InputField
type="text"
id={placeholder}
name={placeholder}
className="border-2 border-black rounded-lg p-2"
/>
</div>
)
}
}
// Toogle edit and delete settings
const handleSettings = (id: number) => {
const newCustomInput = stateFinalData.map((item) => {
if (item.id === id) {
return {
...item,
openSettings: !item.openSettings,
}
} else {
return { ...item, openSettings: false }
}
})
setStateFinalData(newCustomInput)
}
// delete the input
// const handleDelete = (id: number) => {
// setStateFinalData((prev) => prev.filter((item) => item.id !== id))
// console.log("del")
// }
return (
<>
<main className="w-full h-[93vh] px-16 py-12">
<section>
<h1 className="text-base font-medium mb-5">Form Overview</h1>
<section className="bg-white shadow-xl px-16 py-12 w-full rounded-lg min-h-screen">
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="main-container">
{(provider) => (
<div
{...provider.droppableProps}
ref={provider.innerRef}
className="w-[70%] min-h-screen rounded-md px-4 py-2"
>
{stateFinalData.map((item: any, index: number) => (
<Draggable
key={item?.id}
draggableId={item?.id.toString()}
index={index}
>
{(provided, snapshot) => (
<div
key={index}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div
className={`group flex items-center border-black px-3 py-2 rounded-md relative
${
snapshot.isDragging && "bg-[#f9f9f9] shadow-xl"
}`}
>
<div className="flex">
<IoMdAdd className="text-lg -mt-1 invisible group-hover:visible cursor-pointer" />
<MdDragIndicator className="text-lg -mt-1 invisible group-hover:visible cursor-pointer" />
</div>
<div className="cursor-pointer">
{handleType(item.type, item.name)}
</div>
<div
className="cursor-pointer hover:bg-primary-one/5 rounded-md"
onClick={() => handleSettings(item.id)}
>
<HiEllipsisVertical className="text-xl" />
</div>
{item.openSettings && (
<ul
className="bg-white text-xs p-2 flex flex-col absolute -right-6 gap-1 top-4 rounded-lg z-[20]
shadow-[1px_1px_15px_0px_rgba(106,107,108,0.18),0px_8px_10px_-6px_rgba(0,0,0,0.1)] cursor-pointer"
ref={settingsRef}
>
<li
className="flex gap-2 p-1 items-center rounded-md bg-primary-one/5 hover:bg-primary-one/40
hover:text-white "
>
<HiOutlineDuplicate />
<span>Duplicate</span>
</li>
<li
className="flex gap-2 p-1 items-center rounded-md text-primary-one bg-primary-one/10
hover:bg-primary-one hover:text-white"
>
<BiEditAlt />
Edit
</li>
<li
className="flex gap-2 p-1 items-center rounded-md text-red-400 bg-red-300/20
hover:bg-red-400 hover:text-white"
// onClick={() => handleDelete(item.id)}
>
<MdDelete />
Delete
</li>
</ul>
)}
</div>
</div>
)}
</Draggable>
))}
{provider.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</section>
</section>
</main>
</>
)
}
export default Page
Iam have issue in the above code . whenever i try to drag the specfic id based element is shows error in the console Invariant failed: Cannot find draggable entry with id [id-number] and data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js(APP ROUNTER 13.4.4)
Help me to fix it
HAPPY CODING
Iam have issue in the above code . whenever i try to drag the specfic id based element is shows error in the console Invariant failed: Cannot find draggable entry with id [id-number] and data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js(APP ROUNTER 13.4.4)
Help me to fix it
HAPPY CODING
Iam have issue in the above code . whenever i try to drag the specfic id based element is shows error in the console Invariant failed: Cannot find draggable entry with id [id-number] and data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js(APP ROUNTER 13.4.4)
Help me to fix it
HAPPY CODING
Iam have issue in the above code . whenever i try to drag the specfic id based element is shows error in the console Invariant failed: Cannot find draggable entry with id [id-number] and data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js(APP ROUNTER 13.4.4)
Help me to fix it
HAPPY CODING
