Technigo · malvinamaria · Apr 19, 2023 · Apr 20, 2023 · Apr 21, 2023 · Apr 24, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -4,14 +4,18 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@reduxjs/toolkit": "^1.9.4",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.10.0",
+    "sweetalert": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/android-chrome-192x192.png b/code/public/android-chrome-192x192.png
diff --git a/code/public/android-chrome-512x512.png b/code/public/android-chrome-512x512.png
diff --git a/code/public/apple-touch-icon.png b/code/public/apple-touch-icon.png
diff --git a/code/public/favicon.ico b/code/public/favicon.ico
diff --git a/code/public/favicon.svg b/code/public/favicon.svg
diff --git a/code/public/index.html b/code/public/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -14,6 +13,10 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Technigo React App</title>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   </head>
 
   <body>
@@ -30,5 +33,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/public/manifest.json b/code/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "ToDO",
+  "name": "ToDo",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,26 @@
+/* eslint-disable comma-dangle */
+import { ToDoList } from 'components/ToDoList';
 import React from 'react';
+import { Provider } from 'react-redux';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { tasks } from 'reducers/tasks';
+import { Header } from 'components/Header';
+import { AddNewTask } from 'components/AddNewTask';
+
+const reducer = combineReducers({
+  tasks: tasks.reducer,
+});
+
+const store = configureStore({ reducer });
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <Provider store={store}>
+      <div className="layout">
+        <Header />
+        <AddNewTask />
+        <ToDoList />
+      </div>
+    </Provider>
   );
-}
+};
diff --git a/code/src/components/AddNewTask.css b/code/src/components/AddNewTask.css
@@ -0,0 +1,32 @@
+.add-task-btn img {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 1rem;
+}
+.add-task-btn {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  color: rgb(48, 45, 43);
+  font-family: 'Sora', sans-serif;
+  padding: 10px;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Sora', sans-serif;
+  width: 400px;
+  margin: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 20px;
+  font-size: 16px;
+  box-shadow: 10px 5px rgb(245, 244, 242);
+  border: 1px solid;
+  background-color: rgb(187, 173, 255);
+  color: rgb(48, 45, 43);
+  font-family: 'Sora', sans-serif;
+  border-radius: 55px;
+}
diff --git a/code/src/components/AddNewTask.js b/code/src/components/AddNewTask.js
@@ -0,0 +1,78 @@
+/* eslint-disable comma-dangle */
+/* eslint-disable react/jsx-closing-bracket-location */
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { tasks } from 'reducers/tasks';
+import './AddNewTask.css';
+import swal from 'sweetalert';
+import plus from '../img/plus.png';
+
+function getOrdinalSuffix(day) {
+  if (day >= 11 && day <= 13) {
+    return 'th';
+  }
+  switch (day % 10) {
+    case 1:
+      return 'st';
+    case 2:
+      return 'nd';
+    case 3:
+      return 'rd';
+    default:
+      return 'th';
+  }
+}
+// Create a functional component named 'AddNewTask'
+export const AddNewTask = () => {
+  const date = new Date();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const day = date.getDate();
+  const ordinal = getOrdinalSuffix(day);
+  const year = date.getFullYear();
+  // Use the useDispatch hook to get access to the Redux dispatch function
+  const dispatch = useDispatch();
+  // Use the useState hook to declare a new state variable 'newTaskValue'
+  const [newTaskValue, setNewTaskValue] = React.useState('');
+
+  // Define a function to handle the form submission
+  const onFormSubmit = (event) => {
+    // Prevent the default form submission behavior
+    event.preventDefault();
+    // Check if the new task input field is empty
+    if (newTaskValue === '') {
+      // If it is, show an alert to the user
+      swal({
+        title: 'Please enter a task',
+        text: 'You need to enter a task to add it to your list',
+        icon: 'warning',
+      });
+      return;
+    }
+
+    // Dispatch an action to add the new task to the store
+    dispatch(tasks.actions.addTask(newTaskValue));
+    // Reset the value of the new task input field
+    setNewTaskValue('');
+  };
+  // Render a section with a class name of 'add-new-task'
+  return (
+    <form className="form-container" onSubmit={onFormSubmit}>
+      <h3>What do you need to do today?</h3>
+      <h4>{`${month} ${day}${ordinal}, ${year}`}</h4>{' '}
+      <label htmlFor="addTaskInput">
+        <input
+          className="add-task-input"
+          type="text"
+          value={newTaskValue}
+          onChange={(event) => setNewTaskValue(event.target.value)}
+          id="addTaskInput"
+          placeholder="Add new task here"
+        />
+      </label>
+      <button className="add-task-btn" type="submit">
+        Task
+        <img src={plus} alt="plus" />
+      </button>
+    </form>
+  );
+};
diff --git a/code/src/components/Header.css b/code/src/components/Header.css
@@ -0,0 +1,75 @@
+/* .header {
+  background-color: rgb(54, 50, 64);
+  min-height: 25vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+  font-family: 'Sora', sans-serif;
+} */
+.header {
+  background-color: rgb(54, 50, 64);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Sora', sans-serif;
+  width: 400px;
+  margin: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 20px;
+  font-size: 16px;
+  box-shadow: 10px 5px rgb(245, 244, 242);
+  border: 1px solid;
+  background-color: rgb(187, 173, 255);
+  color: rgb(48, 45, 43);
+  border-radius: 55px;
+}
+.clear-all-button {
+  display: flex;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: 'Sora', sans-serif;
+  color: rgb(48, 45, 43);
+  font-size: 1rem;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+  align-items: center;
+}
+
+.clear-all-button img {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 1rem;
+  text-align: center;
+}
+.clear-all {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Sora', sans-serif;
+}
+h4 {
+  margin: 5px;
+  padding: 10px;
+}
+h1 {
+  margin: 5px;
+}
+input {
+  background-color: #fff;
+  border-radius: 20px;
+  border: none;
+  color: black;
+  cursor: pointer;
+  padding: 10px 20px;
+  box-shadow: fff;
+}
+.header-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -0,0 +1,42 @@
+/* eslint-disable react/jsx-closing-bracket-location */
+import React from 'react';
+import { tasks } from 'reducers/tasks';
+import { useDispatch, useSelector } from 'react-redux';
+import './Header.css';
+import remove from '../img/remove.png';
+
+export const Header = () => {
+  const dispatch = useDispatch();
+  const numberOfTasks = useSelector((store) => store.tasks.length);
+  // const completedTasks = tasks.filter((task) => task.isComplete);
+
+  // const allDone = () => {
+  //   if (tasks.length === completedTasks.length) {
+  //     return 'You are all done!';
+  //   }
+  //   return `${completedTasks.length} out of ${tasks.length} tasks completed`;
+  // };
+
+  return (
+    <div className="header">
+      <div className="header-only">
+        <header>
+          <div className="header-container">
+            <h1>My To Do List ✅ </h1>
+            <h4># {numberOfTasks} remaining todos</h4>
+            <div className="clear-all">
+              <button
+                className="clear-all-button"
+                type="button"
+                onClick={() => dispatch(tasks.actions.clearAll())}
+              >
+                Clear all <img src={remove} alt="remove" />
+              </button>
+            </div>
+          </div>
+          <div className="all-done">{/* <h4>{allDone()}</h4> */}</div>
+        </header>
+      </div>
+    </div>
+  );
+};