Very Weird Bug
Unanswered
Russian Blue posted this in #help-forum
Russian BlueOP
I have an edit form, when I click to open, data for other objects is being shown, the thing is I have pagination, so if I open the form on page 1 for the first item, and then go to page 2 and open the item in the same location, data from the first page would appear, even for all other items in the page.
5 Replies
Russian BlueOP
import Search from "./_components/Search";
import TasksTable from "./_components/TasksTable";
import Pagination from "./_components/Pagination";
import { fetchTasksPages } from "@/services/taskServices";
import Filters from "./_components/Filters";
import { TaskCategory } from "@prisma/client";
const TasksPage = async ({
searchParams,
}: {
searchParams?: {
query?: string;
page?: string;
};
}) => {
const query = searchParams?.query || "";
const currentPage = Number(searchParams?.page) || 1;
const params = new URLSearchParams(searchParams);
const categoryParam = params.getAll("category")[0];
const categories = categoryParam
? categoryParam.split(",").map((category) => category as TaskCategory)
: [];
const totalPages = await fetchTasksPages(query, categories);
return (
<div className="flex flex-col gap-2">
<Search placeholder="Search for your tasks..." />
<Filters />
<TasksTable
categories={categories}
query={query}
currentPage={currentPage}
/>
<div className="mt-5 flex w-full justify-center">
<Pagination totalPages={totalPages} />
</div>
</div>
);
};
export default TasksPage;
import { Task, TaskCategory } from "@prisma/client";
import TaskCard from "./TaskCard";
import { fetchFilteredTasks } from "@/services/taskServices";
const TasksTable = async ({
query,
currentPage,
categories,
}: {
query: string;
currentPage: number;
categories: TaskCategory[] | null;
}) => {
const tasks = await fetchFilteredTasks(query, currentPage, categories);
return (
<div className="w-full h-full grid grid-cols-4 grid-rows-2 gap-4 p-4">
{tasks.map((task: Task) => (
<TaskCard key={task.id} task={task} />
))}
{tasks.length === 0 && <h1>Sorry..No results found</h1>}
</div>
);
};
export default TasksTable;
import { Task } from "@prisma/client";
import TaskDeleteIcon from "./TaskDeleteIcon";
import TaskEditIcon from "./TaskEditIcon";
import { Button } from "@/components/ui/button";
import Link from "next/link";
const TaskCard = ({ task }: { task: Task }) => {
return (
<div className="bg-gray-100 rounded-md p-3 w-[200px] h-[200px] flex flex-row">
<div>
<h1 className="text-xl">{task.title}</h1>
<span className="bg-green-500 p-0.5 text-white rounded">
{task.category}
</span>
<h6>{task.description}</h6>
<p className="text-gray-500">{task.createdAt.toDateString()}</p>
<Link href={`/tasks/${task.id}`}>
<Button className="w-full"> View</Button>
</Link>
</div>
<div className="flex h-fit rounded">
<TaskDeleteIcon taskId={task.id} />
<TaskEditIcon task={task} />
</div>
</div>
);
};
export default TaskCard;
"use client";
import { FaPencil } from "react-icons/fa6";
import { deleteTask } from "../action";
import { toast } from "sonner";
import { useState, useTransition } from "react";
import { EditTaskForm } from "./edit-task-form";
import { Task } from "@prisma/client";
const TaskEditIcon = ({ task }: { task: Task }) => {
const [isVisible, setisVisible] = useState<boolean>(false);
return (
<>
<FaPencil
className="w-6 h-6 cursor-pointer p-[2px] rounded"
onClick={() => setisVisible(!isVisible)}
/>
<EditTaskForm
task={task}
isVisible={isVisible}
onClose={() => setisVisible(false)}
/>
</>
);
};
export default TaskEditIcon;
client
export const EditTaskForm = ({
task,
isVisible,
onClose,
}: {
task: Task;
isVisible: boolean;
onClose: any;
}) => {
const handleClose = (e: any) => {
if (e.target.id === "wrapper") onClose();
};
const [isPending, startTransition] = useTransition();
const form = useForm<z.infer<typeof TaskSchema>>({
resolver: zodResolver(TaskSchema),
defaultValues: {
title: task.title,
description: task.description,
},
});
const onSubmit = (values: z.infer<typeof TaskSchema>) => {
startTransition(() => {
updateTask(values, task)
.then((data) => {
if (data?.error) {
form.reset();
toast.error(data.error);
}
if (data?.success) {
form.reset();
toast.success(data.success);
onClose();
}
})
.catch(() => toast.error("Something went wrong!"));
});
};
if (!isVisible) return null;
<Form>
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col "
>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<Input
{...field}
disabled={isPending}
placeholder="Wash the dishes"
/>
/>
<FormField
control={form.control}
name="description"
render={({ field }) =><Input
{...field}
disabled={isPending}
placeholder="3 plates, 4 spoons, and 5 mugs!"
)}
/>
<button
type="submit"
>
Update Task
<button
className="text-black text-xl flex flex-col"
onClick={() => onClose()}
>
X
</button>