Redesign

db.json

@@ -2,45 +2,27 @@
   "todos": [
     {
       "id": 1,
-      "title": "Wohnung mieten"
+      "title": "Wohnung mieten",
+      "author": "Leon",
+      "complete": false
     },
     {
       "id": 2,
-      "title": "Geld verdienen"
+      "title": "Geld verdienen",
+      "author": "Elfriede",
+      "complete": false
     },
     {
+      "id": 3,
       "title": "Geh mal Bier holen",
-      "author": "Marwin",
-      "id": 3
+      "complete": false,
+      "author": "Marwin"
     },
     {
+      "id": 4,
       "title": "Wäsche Waschen",
-      "author": "Marwin",
-      "id": 4
-    },
-    {
-      "title": "Test",
-      "author": "Test",
-      "createdAt": 1597833561349,
-      "id": 5
-    },
-    {
-      "title": "asdas",
-      "author": "dfgsdf",
-      "createdAt": 1597841575189,
-      "id": 6
-    },
-    {
-      "title": "asd",
-      "author": "sdafsd",
-      "createdAt": 1597841601226,
-      "id": 7
-    },
-    {
-      "title": "saf",
-      "author": "asdf",
-      "createdAt": 1597841613951,
-      "id": 8
+      "complete": false,
+      "author": "Marwin"
     }
   ]
-}
+}

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/App.js

@@ -1,21 +1,24 @@
 import React from "react";
-import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Home from "./pages/Home";
-import AddTask from "./pages/AddTask";
+import AddTodo from "./pages/AddTodo";
+import GlobalStyles from "./GlobalStyles";
 
 function App() {
   return (
-    <Router>
-      <Switch>
-        <Route path="/add">
-          <AddTask />
-        </Route>
-        <Route path="/">
-          <Home />
-        </Route>
-      </Switch>
-    </Router>
+    <>
+      <GlobalStyles />
+      <Router>
+        <Switch>
+          <Route path="/add">
+            <AddTodo />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </Router>
+    </>
   );
 }
 

src/GlobalStyles.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Global, css } from "@emotion/core";
+
+function GlobalStyles() {
+  return (
+    <Global
+      styles={css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        body {
+          margin: 0;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+            "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+            "Helvetica Neue", sans-serif;
+        }
+      `}
+    />
+  );
+}
+
+export default GlobalStyles;

src/components/Todo.js

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import styled from "@emotion/styled";
+
+export default function Todo({ todo }) {
+  const [complete, setComplete] = useState(todo.complete);
+
+  function completeTodo() {
+    setComplete(true);
+  }
+
+  function resetTodo() {
+    setComplete(false);
+  }
+
+  return (
+    <Container complete={complete}>
+      <h2>{todo.title}</h2>
+      <Button onClick={completeTodo}>Complete</Button>
+      <ResetButton onClick={resetTodo}>Reset</ResetButton>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  background-color: ${(props) => (props.complete ? "#06d6a0" : "#ef476f")};
+  padding: 10px;
+  border-radius: 15px;
+  margin: 5px;
+`;
+
+const Button = styled.button`
+  margin: 3px;
+  font-size: 1rem;
+  background-color: #06d6a0;
+  border-radius: 5px;
+  border: solid 2px #010203;
+`;
+
+const ResetButton = styled(Button)`
+  background-color: #ef476f;
+`;

src/index.js

@@ -1,14 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change

src/pages/AddTask.js → src/pages/AddTodo.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { postTodo } from "../api/todos";
 
-function AddTask() {
+function AddTodo() {
   const [title, setTitle] = useState("");
   const [author, setAuthor] = useState("");
   const [loading, setLoading] = useState(false);
@@ -61,4 +61,4 @@ function AddTask() {
   );
 }
 
-export default AddTask;
+export default AddTodo;