토도 앱

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

function todoapp() {
    const [todovalue , settodovalue] = useState("");
    const [response, setresponsedata] = useState([]);

    const [updatenow, setupdatenow] = useState(false);
    const [data, setdata] = useState("");

    const submitdata = (e) => {
        e.preventDefault();
    }


    async function gettodo() {
        try {
            const response = await axios.get('http://localhost:8000/api/todo/show');
            const data = response.data;
            setresponsedata(data);
        } catch (error) {
            console.error(error);
        }
    }

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

    const adddata = async (e) => {
        if (todovalue === "") {
            alert("FIll something")
        } else {
            try {
                const data = await axios({
                    url: 'http://localhost:8000/api/todo/add',
                    method: "POST",
                    data: { title: todovalue }
                });
                if (data) {
                    settodovalue('');
                    gettodo();
                }
            } catch (error) {
                if (error) {
                    alert(error);
                }
            }
        }
}

    function deletetodo(theid) {
        axios(
            `http://localhost:8000/api/todo/delete/${theid}`, {
            method: 'post',
                data: theid
        }           
        ).then((r) => {
            console.log(r);
            gettodo();
            }).catch((e) => {
                console.log(e)
            });

    }

     const edittodo = (theid, title) => {
        settodovalue(title);
        setupdatenow(true);
        setdata(theid);
        console.log(data);
    }

    async function updatedata(data) {
       const updateji = await axios(
            `http://localhost:8000/api/todo/update/${data}`, {
            method: 'post',
               data: {"title": todovalue }
        }           
        ).then((r) => {
            setupdatenow(false);
            settodovalue("");
            gettodo();
            }).catch((e) => {
                console.log(e)
            });    
    }






  return (
      <>

          <div className='thetodoapp'>

              <h1>The Todo App</h1>

              <form method='post' onSubmit={submitdata} encType="multipart/form-data">
                  {updatenow ? (<><input type="text" name='todo' value={todovalue} onChange={(e)=> settodovalue(e.target.value)} />
                <input type="submit" onClick={()=> updatedata(data)} value= "update" /> </>) : (<><input type="text" name='todo' value={todovalue} onChange={(e)=> settodovalue(e.target.value)} />
                <input type="submit" onClick={ adddata} value= "Add" /> </>)}

            </form>
            <ul>
              {response.map((ct, index) => {
                  return (
                      <>

                              <li key={index}>
                                  {ct.title}
                                  <button onClick={(event) => deletetodo(ct._id)}>Delete</button>
                                  <button onClick={(event) => edittodo(ct._id,ct.title)}>edit</button>
                              </li>

                      </>
                  )
              })}
              </ul>
          </div>


          <style jsx>{`
          .thetodoapp {
    width: 30%;
    padding: 2em;
    margin: auto;
}

form {
    display: grid;
    grid-template-columns: 80% 20%;
}

input[type="text"] {
    padding: 1em;
}

input[type="submit"] {
    background: black;
    color: white;
}

li {
    display: grid;
    grid-template-columns: 60% 18% 18%;
    grid-gap: 2%;
    line-height: 2em;
    margin-bottom: .4em;
    text-transform: capitalize;
}

ul {
    padding: 0;
}

button {
    color: white;
    background: black;
    padding: 0.6em;
    text-transform: capitalize;
}` }</style>

      </>
  )
}

export default todoapp;