first commit

package.json

@@ -1,21 +1,22 @@
 {
   "name": "todoapp",
   "version": "0.1.0",
+  "homepage": "https://kenudeh.github.io/todoapp",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.0.0"
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,24 +1,89 @@
-import logo from './logo.svg';
 import './App.css';
+import Content from './Components/Content';
+import Edit from './Components/Edit';
+import { useState } from "react";
+import {Route, Routes, useNavigate} from 'react-router-dom';
+import Layout from './Layout';
+import Missing from './Components/Missing';
+
+
 
 function App() {
+
+  //States
+  const [items, setItems] = useState(JSON.parse(localStorage.getItem('dataStore')) || []);
+  const [newItem, setnewItem] = useState('');
+  const [search, setSearch] = useState('');
+  const [editPost, setEditPost] = useState('');
+
+
+  const navigate = useNavigate();
+
+
+
+  //Functions
+const addItem = (data)=>{
+  const id = items.length ? items[items.length -1].id + 1 : 1;
+  const myNewItem = {id, checked:false, data};
+  const listItems = [...items, myNewItem];
+  setItems(listItems);
+  localStorage.setItem('dataStore', JSON.stringify(listItems));
+}
+
+
+const handleEdit = (id) => {
+  const updatedPost = {id, checked:false, data:editPost}
+  setItems(items.map(item => item.id === id ? {...updatedPost} : item));
+
+  navigate('/')
+  setEditPost('')
+}
+
+
+const handleCheck = (id) => {
+    const listItem = items.map((item) =>
+        item.id === id ? {...item, checked: !item.checked} : item
+    );
+    setItems(listItem);
+    localStorage.setItem('dataStore', JSON.stringify(listItem));
+}
+
+const handleDelete = (id) => {
+    const listItem = items.filter((item) => item.id !== id);
+    setItems(listItem)
+    localStorage.setItem('dataStore', JSON.stringify(listItem));
+}
+
+
+
+const handleSubmit = (e) => {
+  e.preventDefault();
+  if(!newItem) return;
+  addItem(newItem);
+  setnewItem('')
+}
+
+
+
+//JSX
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Routes>
+        <Route path="/" element={<Layout items={items}/>}>
+          <Route index element={<Content 
+            items={items.filter(item => ((item.data).toLowerCase()).includes(search.toLowerCase()))}
+            setItems={setItems}
+            handleCheck={handleCheck}
+            handleDelete={handleDelete}
+            newItem={newItem}
+            setnewItem={setnewItem}
+            handleSubmit={handleSubmit}
+            search={search}
+            setSearch = {setSearch} />}/>
+          <Route path="edit" element={<Edit items={items} editPost={editPost} setEditPost={setEditPost} handleEdit={handleEdit}/>}/>
+          <Route path=":id" element={<Edit items={items} editPost={editPost} setEditPost={setEditPost} handleEdit={handleEdit}/>}/>
+          <Route path="*" element={<Missing />}/>
+        </Route>
+    </Routes>
   );
 }
 

src/Components/AddItem.js

@@ -0,0 +1,35 @@
+import { FaPlus } from 'react-icons/fa';
+import {useRef} from 'react';
+
+
+const AddItem = ({newItem, setnewItem, handleSubmit}) => {
+
+    const inputRef = useRef();
+
+    return (
+        <main className='addItem'>
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="add">Add Item</label>
+                <input 
+                    maxLength="100"
+                    id="add"
+                    type="text"
+                    placeholder="add item"
+                    autoFocus
+                    ref={inputRef}
+                    required
+                    value={newItem}
+                    onChange={(e)=>setnewItem(e.target.value)}
+                />
+                <button 
+                    type="submit" 
+                    aria-label="add-item"
+                    onClick={()=>inputRef.current.focus()}>
+                    <FaPlus />
+                </button>
+            </form>
+        </main>
+    );
+}
+
+export default AddItem;

src/Components/Content.js

@@ -0,0 +1,56 @@
+import {AiOutlineEdit} from 'react-icons/ai'
+import {MdDeleteForever} from 'react-icons/md'
+import AddItem from './AddItem';
+import Search from './Search';
+import { Link } from 'react-router-dom';
+
+
+
+const Content = ({items, handleCheck, handleDelete, newItem, setnewItem, handleSubmit, search, setSearch}) => {
+
+
+
+    return (
+        <main className="Content">
+            <Search 
+                search={search}
+                setSearch={setSearch}
+            />
+            <AddItem 
+                newItem={newItem}
+                setnewItem={setnewItem}
+                handleSubmit={handleSubmit}
+            />
+            {items.length ?
+            (<ul>
+                {items.map(
+                    (item) => (
+                        <li className="list" key={item.id}> 
+                            <input 
+                                type="checkbox" 
+                                checked = {item.checked}
+                                onChange={()=>handleCheck(item.id)}
+                            />
+                            <label 
+                                className='listInput'
+                                onDoubleClick={()=>handleCheck(item.id)}
+                                style={(item.checked) ? {textDecoration:'line-through'} : null}
+                            >{item.data}
+                            </label>
+                            <div className='buttons'>
+                                <button className="edit"><Link to="edit"><AiOutlineEdit/></Link></button>
+                                <button 
+                                    className="delete"
+                                    onClick={()=>handleDelete(item.id)}>
+                                    <MdDeleteForever/>
+                                </button>
+                            </div>
+                        </li>
+                    )
+                )}
+            </ul>) : <p style={{marginTop:'20vh', fontWeight:'bold'}}>Your list is empty!</p>}
+        </main>
+    );
+}
+
+export default Content;

src/Components/Edit.js

@@ -0,0 +1,37 @@
+import { Link, useParams } from "react-router-dom";
+
+
+
+const Edit = ({items, editPost, setEditPost, handleEdit}) => {
+
+    const {id} = useParams();
+    const item = items.find(item => (item.id).toString() === id)
+
+
+    return (
+        <main className="Edit">
+            <form onSubmit={(e)=>e.preventDefault()}>
+                <label htmlFor="postTitle">Edit Post</label>
+                <input 
+                    id="postTitle"
+                    placeholder="enter new name"
+                    type="text"
+                    value={editPost}
+                    onChange={(e)=>setEditPost(e.target.value)}
+                    required
+                    autoFocus
+                />
+                <button 
+                    type="submit"
+                    aria-label="edit-item"
+                    onClick={()=>handleEdit(item.id)}
+                >
+                    Submit
+                </button>
+            </form>
+            <Link to="/"><button className="cancel">Cancel</button></Link>
+        </main>
+    );
+}
+
+export default Edit;

src/Components/Footer.js

@@ -0,0 +1,9 @@
+const Footer = ({items}) => {
+    return (
+        <main className="Footer">
+            <p>{items.length} list {items.length <=1 ? 'item' : 'items'}</p>
+        </main>
+    );
+}
+
+export default Footer;

src/Components/Header.js

@@ -0,0 +1,15 @@
+
+
+const Header = ({title}) => {
+    return (
+        <main className="Header">
+            <h2>{title}</h2>
+        </main>
+    );
+}
+
+Header.defaultProps ={
+    title: 'Default Title'
+}
+
+export default Header;

src/Components/Missing.js

@@ -0,0 +1,12 @@
+import { Link } from "react-router-dom";
+
+const Missing = () => {
+    return (
+        <main className="Missing"> 
+            <h3>Page does not exist</h3>
+            <p><Link to="/">Go Home</Link></p>
+        </main>
+    );
+}
+
+export default Missing;

src/Components/Search.js

@@ -0,0 +1,29 @@
+
+
+
+
+const Search = ({search, setSearch}) => {
+
+
+
+    return (
+        <main>
+            <form 
+                className="search" 
+                onSubmit={(e)=>e.preventDefualt()}
+            >
+                <label htmlFor="search">Search</label>
+                <input
+                    id="search"
+                    type="text"
+                    role="searchbox"
+                    placeholder="search items"
+                    input={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+            </form>
+        </main>
+    );
+}
+
+export default Search;