diff --git a/react-express-mongodb/frontend/src/App.js b/react-express-mongodb/frontend/src/App.js index 78df4d0..faaa127 100644 --- a/react-express-mongodb/frontend/src/App.js +++ b/react-express-mongodb/frontend/src/App.js @@ -1,55 +1,47 @@ -import React from "react"; -import axios from "axios"; +import React, { useState, useEffect } from "react"; import "./App.scss"; import AddTodo from "./components/AddTodo"; import TodoList from "./components/TodoList"; -export default class App extends React.Component { - constructor(props) { - super(props); +const MainApp = () => { + const [todos, setTodos] = useState([]); - this.state = { - todos: [], - }; - } + async function getTodos() { + try { + const todoListResponse = await fetch("/api", { + method: "GET", + }); - componentDidMount() { - axios - .get("/api") - .then((response) => { - this.setState({ - todos: response.data.data, - }); - }) - .catch((e) => console.log("Error : ", e)); + if (!todoListResponse.ok) { + console.log("Fetch failed"); + } else { + const updatedTodos = await todoListResponse.json(); + setTodos([...updatedTodos.data]); + } + } catch (error) { + console.log("Error :", error); + } } - handleAddTodo = (value) => { - axios - .post("/api/todos", { text: value }) - .then(() => { - this.setState({ - todos: [...this.state.todos, { text: value }], - }); - }) - .catch((e) => console.log("Error : ", e)); - }; + useEffect(() => { + getTodos(); + }, []); - render() { - return ( -