added API

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.next
+.next
+data

package.json

@@ -15,7 +15,9 @@
     "@chakra-ui/core": "^0.7.0",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "axios": "^0.19.2",
     "emotion-theming": "^10.0.27",
+    "nedb": "^1.8.0",
     "next": "^9.3.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

pages/api/todos/[id].js

@@ -0,0 +1,20 @@
+import Database from "nedb";
+
+
+export default function todos(req, res) {
+  const db = new Database({ filename: './data' })
+  if (req.method === 'PUT') {
+    db.loadDatabase(() => {
+      db.update({ id: req.query.id }, { $set: { completed: req.body.completed } }, {}, (_, data) => {
+        res.stringifiedResponse = JSON.stringify(data)
+        res.setHeader('content-type', 'application/json')
+        res.end(stringifiedRespoanse)
+
+      })
+    })
+  } else {
+    res.statusCode = 404;
+    res.end('Please use a valid input method')
+  }
+
+}

pages/api/todos/index.js

@@ -0,0 +1,32 @@
+import Database from "nedb";
+
+export default function todos(req, res) {
+  const db = new Database({ filename: './data' })
+  if (req.method === 'POST') {
+    db.loadDatabase(() => {
+      const input = req.body;
+      db.insert(input, (_, data) => {
+        const stringifiedResponse = JSON.stringify(data);
+        res.setHeader('content-type', 'application/json');
+        res.end(stringifiedResponse);
+      })
+    })
+  } else if (req.method === 'GET') {
+    db.loadDatabase((err) => {
+      db.find({}, (_, data) => {
+        const stringifiedResponse = JSON.stringify(data);
+        res.setHeader('content-type', 'application/json');
+        res.end(stringifiedResponse)
+      })
+    })
+  } else {
+    res.statusCode = 404;
+    res.end('Please use a valid input method')
+
+
+
+
+
+
+  }
+}

pages/index.js

@@ -1,53 +1,50 @@
 import { Component } from 'react'
+import axios from 'axios'
 import Todos from './Todos'
 import AddTodo from './addForm'
 
 
 
 class App extends Component {
-    state = {
-        todos: [
-            { id: 1, content: "Learn Next.js", completed: false },
-            { id: 2, content: "Build a TO-DO app with Next.js", completed: false },
-            { id: 3, content: "Learn github actions", completed: false },
-            { id: 4, content: "Drink 56 glases of water this week", completed: false },
-            { id: 5, content: "Cook Stew", completed: false },
-            { id: 6, content: "Cook Jollof rice", completed: false },
-        ]
-    }
+    componentDidMount() {
+        axios.get('http://localhost:3000/api/todos')
+            .then(res => {
+                console.log(res)
+            })
 
-    deleteTodo = (id) => {
-        const newTodos = this.state.todos.map(todo => {
-            if (todo.id === id) {
-                return { ...todo, completed: !todo.completed }
-            } else {
-                return todo
-            }
-        });
-        console.table(newTodos)
-        this.setState({
-            todos: newTodos
-        })
-    }
+        deleteTodo = (id) => {
+            const newTodos = this.state.todos.map(todo => {
+                if (todo.id === id) {
+                    return { ...todo, completed: !todo.completed }
+                } else {
+                    return todo
+                }
+            });
+            console.table(newTodos)
+            this.setState({
+                todos: newTodos
+            })
+        }
 
-    addTodo = (todo) => {
-        todo.id = Math.random();
-        let todos = [...this.state.todos, todo];
-        this.setState({
-            todos: todos
-        })
-    }
-    render() {
-        return (
-            <div className="App">
-                <div className="Appwrapper">
-                    <h1>To-do this week!</h1>
-                    <AddTodo addTodo={this.addTodo} />
-                    <Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
+        addTodo = (todo) => {
+            todo.id = Math.random();
+            let todos = [...this.state.todos, todo];
+            this.setState({
+                todos: todos
+            })
+        }
+        render() {
+            return (
+                <div className="App">
+                    <div className="Appwrapper">
+                        <h1>To-do this week!</h1>
+                        <AddTodo addTodo={this.addTodo} />
+                        <Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
+                    </div>
                 </div>
-            </div>
-        );
+            );
+        }
     }
-}
 
+}
 export default App;