Technigo · YlvaKarlsson · Apr 18, 2023 · Apr 18, 2023 · Apr 20, 2023 · Apr 20, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -12,10 +12,13 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "framer-motion": "^10.12.3",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
-    "react-redux": "^8.0.5"
+    "react-redux": "^8.0.5",
+    "styled-components.macro": "^1.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/favicon.ico b/code/public/favicon.ico
diff --git a/code/public/index.html b/code/public/index.html
@@ -5,6 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!--
+      Favicon provided free from Icons8 - here you can reed more about the usage of this in your own projects
+      https://icons8.com/license
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -13,7 +15,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>W11 - To-Do-App by Ylva</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,18 +1,24 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
-import AddToDo from 'components/AddToDo';
-import ToDoList from 'components/ToDoList';
-import todos from 'redux/reducers/todos'
+import { ToDoList } from 'components/ToDoList';
+import { todos } from 'redux/reducers/todos'
+import { GlobalStyle } from 'components/GlobalStyle';
+
+const reducer = combineReducers({
+  todos: todos.reducer
+});
+
+const store = configureStore({ reducer });
 
 export const App = () => {
-  const reducer = combineReducers({
-    todos: todos.reducer
-  });
-  const store = configureStore({ reducer });
+  // const reducer = combineReducers({
+  //   todos: todos.reducer
+  // });
+  // const store = configureStore({ reducer });
   return (
     <Provider store={store}>
-      <AddToDo />
+      <GlobalStyle />
       <ToDoList />
     </Provider>
   )

diff --git a/code/src/components/AddToDo.js b/code/src/components/AddToDo.js
@@ -1,32 +1,68 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable no-undef */
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import todos from 'redux/reducers/todos';
+import { todos } from 'redux/reducers/todos';
+import styled from 'styled-components';
 
-const AddToDo = () => {
+const NewToDo = styled.form`
+  line-height: 0.5rem;
+  padding-bottom: 0.8rem;
+`;
+
+const Input = styled.input`
+  background: #a83256;
+  border: none;
+  padding: 8px;
+  font-size: 18px;
+  font-family: 'Baloo 2', cursive;
+  border-bottom: 2px dashed;
+  :focus {
+    outline: none;
+  }
+`;
+
+const AddButton = styled.button`
+  font-family: 'Baloo 2', cursive;
+  font-size: 18px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+`;
+
+export const AddToDo = () => {
   const [inputValue, setInputValue] = useState('');
   const dispatch = useDispatch();
   const onFormSubmit = (event) => {
     event.preventDefault();
+
     const newToDo = {
       id: Date.now().toString(),
-      name: inputValue.charAt(0).toUpperCase() + inputValue.slice(1),
-      isNew: false
+      createdAt: new Date(),
+      text: inputValue.charAt(0).toUpperCase() + inputValue.slice(1),
+      isDone: false
     };
-    dispatch(todos.actions.addToDo(newToDo));
+    dispatch(todos.actions.addItem(newToDo));
     setInputValue('');
     // https://www.random.org
-  }
+  };
+
   return (
     <section>
-      <form onSubmit={onFormSubmit}>
-        <label htmlFor="addToDoTaskInput">
-          Add Your new To Do task here!
-          <input value={inputValue} onChange={(event) => setInputValue(event.target.value)} id="addToDoInput" type="text" />
+      <NewToDo onSubmit={onFormSubmit}>
+        <label>
+          {/* htmlFor={`new-todo-input${newToDo.id}`} */}
+          <p>New to do:</p>
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={(event) => setInputValue(event.target.value)} />
+          {/* id={`new-todo-input${newToDo.id}`} /> */}
         </label>
-        <button type="submit"> Add new To Do now</button>
-      </form>
+        <AddButton type="submit" disabled={inputValue.length === 0}>
+          Add new To Do now
+        </AddButton>
+      </NewToDo>
     </section>
-  )
-}
-
-export default AddToDo;
+  );
+};
diff --git a/code/src/components/GlobalStyle.js b/code/src/components/GlobalStyle.js
@@ -0,0 +1,50 @@
+import { createGlobalStyle } from 'styled-components/macro';
+import styled from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+body {
+    background-color: linear-gradient(to bottom, #3366ff 0%, #ff00ff 100%);
+    /* opacity: 50%; */
+    font-family: 'DynaPuff', cursive;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    }
+`;
+
+export const Wrapper = styled.div`
+    background: #3483eb;
+    width: 80vw;
+    text-align: center;
+    padding: 10px;
+    margin: 20px auto;
+    margin-bottom: 40px;
+    border-radius: 25px;
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+
+    @media (min-width: 668px) {
+    width: 55vw;
+  }
+`;
+
+export const SingleTodo = styled.div`
+  margin: 10px;
+  border-bottom: 1px solid black;
+  padding-bottom: 15px;
+  line-height: 1em;
+`;
+
+export const Button = styled.button`
+  font-size: 18px;
+  padding: 4px 13px;
+  margin: 8px;
+  font-family: 'Baloo 2', cursive;
+  background: #edca7f;
+  color: #fff;
+  border: solid 2px red;
+  border-radius: 30px;
+  cursor: pointer;
+  /* :hover {
+    opacity: 70%;
+  } */
+`;
diff --git a/code/src/components/ToDoItem.js b/code/src/components/ToDoItem.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { SingleTodo } from './GlobalStyle';
+
+const ToDoText = styled.div`
+cursor: pointer;
+text-decoration: ${(props) => (props.isDone ? 'line-through' : 'none')};
+font-size: 24px;
+`;
+
+const DateText = styled.div`
+  font-style: italic;
+  font-size: 14px;
+  margin: 7px;
+  opacity: 50%;
+`;
+
+const DeleteButton = styled.button`
+  background: #a83256;
+  border: none;
+  font-family: 'DynaPuff', cursive;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 0px 9px;
+`;
+
+export const ToDoItem = ({ todo, index, onDelete, onDone }) => {
+  return (
+    <SingleTodo>
+      <ToDoText onClick={() => onDone(todo.id)} key={todo.id} isDone={todo.isDone}>
+        <p>{todo.text}</p>
+        <DateText>Added {moment(todo.createdAt).format('HH:mm on MMM D, YYYY')}</DateText>
+      </ToDoText>
+      <DeleteButton onClick={() => onDelete(index)} type="button" title="Delete task">
+        {' '}
+        X
+      </DeleteButton>
+    </SingleTodo>
+  );
+};
diff --git a/code/src/components/ToDoList.js b/code/src/components/ToDoList.js
@@ -1,17 +1,76 @@
+/* eslint-disable no-undef */
+/* eslint-disable import/named */
+/* eslint-disable no-unused-vars */
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { todos } from 'redux/reducers/todos';
+import { ToDoItem } from './ToDoItem';
+import { AddToDo } from './AddToDo';
+
+export const ToDoList = () => {
+  const dispatch = useDispatch();
+  const allTodos = useSelector((store) => store.todos.items);
+
+  const onDone = (id) => {
+    dispatch(todos.actions.deleteItem(todoIndex));
+  };
+
+  const onDelete = (todoIndex) => {
+    dispatch(todos.actions.deleteItem(todoIndex));
+  };
+
+  const onCompleteAll = () => {
+    allTodos.forEach((todo) => {
+      if (!todo.isDone) {
+        dispatch(todos.actions.toggleItem(todo.id));
+      }
+    });
+  };
+
+  const onClearAll = () => {
+    if (window.confirm('Do you really want to delete all to-dos?')) {
+      dispatch(todos.actions.clearAll());
+    }
+  };
+
+  const todosTodo = allTodos.filter((todo) => !todo.isDone);
+  const doneTodos = allTodos.filter((todo) => todo.isDone);
 
-const ToDoList = () => {
-  const todoList = useSelector((store) => store.todos.items)
   return (
     <section>
-      <ul>
+      {/* <ul>
+        {allTodos.map((singleToDo) => {
+          return <li key={singleToDo.id}>{singleToDo.name}</li>
+        })}
+      </ul> */}
+      <h2>To-do ({todosTodo.length})</h2>
+
+      {todosTodo.lenghth === 0 && <p>All done - great job! ✨</p>}
+
+      {todosTodo.map((todo, index) => (
+        <ToDoItem todo={todo} index={index} key={todo.id} onDelete={onDelete} onDone={onDone} />
+      ))}
+
+      <AddToDo />
+
+      <h2>Done ({doneTodos.lenght})</h2>
+
+      <button type="button" onClick={onCompleteAll}>
+        Complete all to-dos
+      </button>
+
+      <button type="button" onClick={onClearAll}>
+        Clear all to-dos
+      </button>
+
+      {doneTodos.map((todo, index) => (
+        <ToDoItem todo={todo} index={index} key={todo.id} onDelete={onDelete} onDone={onDone} />
+      ))}
+      {/* <ul>
         {todoList.map((singleToDo) => {
           return <li key={singleToDo.id}>{singleToDo.name}</li>
         })}
-      </ul>
+      </ul> */}
     </section>
-  )
-}
-
-export default ToDoList;
+  );
+};
diff --git a/code/src/index.css b/code/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;600&display=swap');
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",