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>