Remove footer in kanban + remove import function to function (setTask))

This commit is contained in:
sosokker 2023-11-23 13:55:19 +07:00
parent aa00fc1cb8
commit fc817d9677
2 changed files with 13 additions and 7 deletions

View File

@ -7,6 +7,7 @@ import { TaskCard } from "./taskCard";
import { axiosInstance } from "src/api/AxiosConfig"; import { axiosInstance } from "src/api/AxiosConfig";
export function KanbanBoard() { export function KanbanBoard() {
const [refreshKey, setRefreshKey] = useState(0);
const [columns, setColumns] = useState([]); const [columns, setColumns] = useState([]);
const [boardId, setBoardData] = useState(); const [boardId, setBoardData] = useState();
const [isLoading, setLoading] = useState(false); const [isLoading, setLoading] = useState(false);
@ -16,6 +17,10 @@ export function KanbanBoard() {
// ---------------- END STATE INITIATE ---------------- // ---------------- END STATE INITIATE ----------------
const refreshSortableContext = () => {
setRefreshKey((prevKey) => prevKey + 1);
};
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { useSensor(PointerSensor, {
activationConstraint: { activationConstraint: {
@ -25,7 +30,7 @@ export function KanbanBoard() {
); );
// ---------------- Task Handlers ---------------- // ---------------- Task Handlers ----------------
const handleTaskUpdate = (tasks, setTasks, updatedTask) => { const handleTaskUpdate = (tasks, updatedTask) => {
const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task)); const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task));
setTasks(updatedTasks); setTasks(updatedTasks);
}; };
@ -34,7 +39,7 @@ export function KanbanBoard() {
console.error(`Error ${action}:`, error); console.error(`Error ${action}:`, error);
}; };
const createTask = async (columnId, setTasks) => { const createTask = async (columnId) => {
try { try {
const response = await axiosInstance.post("todo/", { const response = await axiosInstance.post("todo/", {
title: `Task ${tasks.length + 1}`, title: `Task ${tasks.length + 1}`,
@ -55,13 +60,14 @@ export function KanbanBoard() {
content: response.data.title, content: response.data.title,
}; };
setTasks((tasks) => [...tasks, newTask]); setTasks((prevTasks) => [...prevTasks, newTask]);
refreshSortableContext();
} catch (error) { } catch (error) {
handleApiError(error, "creating task"); handleApiError(error, "creating task");
} }
}; };
const deleteTask = async (id, tasks, setTasks) => { const deleteTask = async (id, tasks) => {
try { try {
await axiosInstance.delete(`todo/${id}/`); await axiosInstance.delete(`todo/${id}/`);
const newTasks = tasks.filter((task) => task.id !== id); const newTasks = tasks.filter((task) => task.id !== id);
@ -71,7 +77,7 @@ export function KanbanBoard() {
} }
}; };
const updateTask = async (id, content, tasks, setTasks) => { const updateTask = async (id, content, tasks) => {
try { try {
if (content === "") { if (content === "") {
await deleteTask(id, tasks, setTasks); await deleteTask(id, tasks, setTasks);
@ -84,7 +90,7 @@ export function KanbanBoard() {
content: response.data.title, content: response.data.title,
}; };
handleTaskUpdate(tasks, setTasks, updatedTask); handleTaskUpdate(tasks, updatedTask);
} }
} catch (error) { } catch (error) {
handleApiError(error, "updating task"); handleApiError(error, "updating task");
@ -194,6 +200,7 @@ export function KanbanBoard() {
{createPortal( {createPortal(
<DragOverlay className="bg-white" dropAnimation={null} zIndex={20}> <DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
{/* Render the active task as a draggable overlay */}
{activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />} {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
</DragOverlay>, </DragOverlay>,
document.body document.body

View File

@ -29,7 +29,6 @@ export const KanbanPage = () => {
</div> </div>
</div> </div>
<KanbanBoard /> <KanbanBoard />
<div className="flex justify-center border-2 "></div>
</div> </div>
); );
}; };