2020年04月18日

Firebase☓ReactでTODOリスト作成(Delete)

Firebase☓ReactでTODOリスト作成(Express)の続き

Express化したので細かいハンドリングで悩む必要がなくなったので以下をfunctions/index.jsに追加

app.delete('/todo/:id', async (req, res) => {
const newTodo = db.collection("todos").doc(req.params.id)
await newTodo.delete()
res.send("ok3");
})


React部分は以下のように変更すると削除が実装できる

function App() {
const [mode,changeMode] = useState("list");
const [editId,changeEditId] = useState(null);
const [todos,changeTodos] = useState([]);
const [title,changeTitle] = useState("");
const [comment,changeComment] = useState("");
useEffect(()=>{
fetchResponse()
},[])

// 一覧取得
const fetchResponse = async () => {
const res = await axios.get(PATH + 'todos')
changeTodos(res.data);
}

// 新規追加
const addTodo = async () => {
await axios.post(PATH + 'todo',{
title,
comment,
checked:false
})
fetchResponse()
changeTodos([])
changeTitle("")
changeComment("")
}

// 編集
const editTodo = async () => {
await axios.put(PATH + 'todo/' +editId ,{
title,
comment,
checked:false
})
fetchResponse()
changeTodos([])
changeTitle("")
changeComment("")
changeMode("list")
}

// 削除
const deleteTodo = async (id) => {
await axios.delete(PATH + 'todo/'+ id)
fetchResponse()
changeTodos([])
}

const changeEditMode = (id) =>{
changeMode("edit")
changeEditId(id)
const todo = todos.find(todo => todo.id===id)
changeTitle(todo.title)
changeComment(todo.comment)
}

return (
<div className="App">
{mode === 'list' && (
<div>
title:<input type="text" value={title} onChange={e => changeTitle(e.currentTarget.value)} /><br />
comment:<input type="text" value={comment} onChange={e => changeComment(e.currentTarget.value)} /><br />
<button onClick={() => addTodo()}>add</button><br />
<ul>
{todos && todos.map((todo)=>(
<li key={todo.id}>
<input type="button" value="edit" onClick={()=> changeEditMode(todo.id)}/ >
<input type="button" value="delte" onClick={()=> deleteTodo(todo.id)}/ >
{todo.title}
</li>
))}
</ul>
</div>
)}
{mode === 'edit' && (
<div>
title:<input type="text" value={title} onChange={e => changeTitle(e.currentTarget.value)} /><br />
comment:<input type="text" value={comment} onChange={e => changeComment(e.currentTarget.value)} /><br />
<button onClick={() => editTodo()}>edit</button><br />
</div>
)}
</div>
);
}
posted by ねこまんま at 17:04 | Firebase | 更新情報をチェックする