Refreshing the list in a Next.js to-do application post-deletion: a step-by-step guide

Question

Refreshing the list in a Next.js to-do application post-deletion: a step-by-step guide

I am currently developing a basic to-do application using Next.js, TypeScript, and Axios. I have successfully implemented the delete functionality for tasks, but I am facing an issue with refreshing the tasks list after deletion. I would appreciate any suggestions or guidance on how to achieve this. Thank you!

// pages/index.tsx

import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";

// More code here...

// modules/hooks/useFetchTasks.ts

import { useState, useEffect, useCallback } from "react";

// More code here...

export const useFetchTasks = () => {
  const [tasks, setTasks] = useState<TasksResponse | null>(null);

  // More code here...

};

typescript axios next.js

Answer 1

Answer №1

To update your list after making an API call, you can pass the setTasks function from your useFetchTasks hook to your button.

const OperationButtons: React.VFC<OperationButtonProps> = (props) => {
    const handleDelete = async () => {
        try {
            await deleteTask(props.taskId);
            props.setTasks(prevTasks => prevTasks.tasks.filter(task => task.id !== props.taskId))
        } catch (e) {
            console.log(e);
        }
    };

    return (
        <Stack direction="row">
            <IconButton aria-label="edit">
                <EditIcon />
            </IconButton>
            <IconButton edge="end" aria-label="delete" onClick={handleDelete}>
                <DeleteIcon />
            </IconButton>
        </Stack>
    );
};

const IndexPage = () => {
    const { tasks, setTasks } = useFetchTasks();

    return (
        <>
            <Typography variant="h3" align="center" marginTop={3}>
                TODO LIST
            </Typography>
            {tasks && (
                <Container maxWidth="sm">
                    <List sx={{ width: '100%' }}>
                        {tasks.tasks.map((task) => (
                            <ListItem
                                key={task.id}
                                secondaryAction={<OperationButtons taskId={task.id} setTasks={setTasks} />}
                            >
                                <ListItemAvatar>
                                    <Avatar>
                                        <FactCheckIcon />
                                    </Avatar>
                                </ListItemAvatar>
                                <ListItemText
                                    primary={task.description}
                                    secondary={task.created_at}
                                />
                            </ListItem>
                        ))}
                    </List>
                </Container>
            )}
        </>
    );
};

export const useFetchTasks = () => {
    const [tasks, setTasks] = (useState < TasksResponse) | (null > null);

    const fetchTasks = useCallback(async () => {
        try {
            const { data } = await getTasks();
            setTasks(data);
        } catch (e) {
            console.log(e);
        }
    }, []);

    useEffect(() => {
        fetchTasks();
    }, []);

    return {
        tasks,
        fetchTasks,
        setTasks
    };
};

export default IndexPage;

Answer 2

To update your list after making an API call, you can pass the setTasks function from your useFetchTasks hook to your button.

const OperationButtons: React.VFC<OperationButtonProps> = (props) => {
    const handleDelete = async () => {
        try {
            await deleteTask(props.taskId);
            props.setTasks(prevTasks => prevTasks.tasks.filter(task => task.id !== props.taskId))
        } catch (e) {
            console.log(e);
        }
    };

    return (
        <Stack direction="row">
            <IconButton aria-label="edit">
                <EditIcon />
            </IconButton>
            <IconButton edge="end" aria-label="delete" onClick={handleDelete}>
                <DeleteIcon />
            </IconButton>
        </Stack>
    );
};

const IndexPage = () => {
    const { tasks, setTasks } = useFetchTasks();

    return (
        <>
            <Typography variant="h3" align="center" marginTop={3}>
                TODO LIST
            </Typography>
            {tasks && (
                <Container maxWidth="sm">
                    <List sx={{ width: '100%' }}>
                        {tasks.tasks.map((task) => (
                            <ListItem
                                key={task.id}
                                secondaryAction={<OperationButtons taskId={task.id} setTasks={setTasks} />}
                            >
                                <ListItemAvatar>
                                    <Avatar>
                                        <FactCheckIcon />
                                    </Avatar>
                                </ListItemAvatar>
                                <ListItemText
                                    primary={task.description}
                                    secondary={task.created_at}
                                />
                            </ListItem>
                        ))}
                    </List>
                </Container>
            )}
        </>
    );
};

export const useFetchTasks = () => {
    const [tasks, setTasks] = (useState < TasksResponse) | (null > null);

    const fetchTasks = useCallback(async () => {
        try {
            const { data } = await getTasks();
            setTasks(data);
        } catch (e) {
            console.log(e);
        }
    }, []);

    useEffect(() => {
        fetchTasks();
    }, []);

    return {
        tasks,
        fetchTasks,
        setTasks
    };
};

export default IndexPage;

Refreshing the list in a Next.js to-do application post-deletion: a step-by-step guide

Answer №1

Similar questions

When using NextJS <Link, mobile users may need to tap twice to navigate

Issue with DTO and a custom decorator in NestJS

Importing images in Typescript is a simple and effective

Confirm that the attributes of a JSON object align with an Enum

Steps for appending a string to a variable

Issues with NextJS detecting environmental variables

The issue persists in Angular 5 and asp.net MVC where the ID number continues to increase despite being deleted

What is the best way to incorporate an interface in TypeScript that is both callable and has properties?

Retrieve input value in Angular 8 using only the element's ID

Discovering the data types for node.js imports

Youtube video embedding showing cut edges on smaller screens

Can anyone provide guidance on how to trigger an HTTP 500 error in my React.js and Next.js applications?

What is the correct way to apply type in the .call() method?

Utilizing JSON API filtering within a Next.js application

Identifying Gmail line breaks in the clipboard using Angular

How can I find the "types" specific to modules within the "firebase" library?

Dealing with an empty array in a Next.js React application

Error: The object 'exports' is not defined in geotiff.js at line 3

What is the best way to create additional layouts for subdirectories in NextJS?

The next.js Incremental Static Regeneration feature can optimize response times to as fast as