Mark as important

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

db.json

@@ -1,16 +1,3 @@
 {
-  "tasks": [
-    {
-      "id": 1,
-      "text": "Doctors Appointment",
-      "day": "Feb 5th at 2:30pm",
-      "reminder": true
-    },
-    {
-      "id": 2,
-      "text": "Meeting at School",
-      "day": "Feb 6th at 1:30pm",
-      "reminder": true
-    }
-  ]
+  "tasks": []
 }

src/App.js

@@ -5,6 +5,7 @@ import Footer from './components/Footer'
 import Tasks from './components/Tasks'
 import AddTask from './components/AddTask'
 import About from './components/About'
+import Details from './components/Details'
 
 const App = () => {
   const [showAddTask, setShowAddTask] = useState(false)
@@ -49,17 +50,14 @@ const App = () => {
 
     setTasks([...tasks, data])
 
-    // const id = Math.floor(Math.random() * 10000) + 1
-    // const newTask = { id, ...task }
-    // setTasks([...tasks, newTask])
+
   }
 
-  // Delete Task
+  // Delete Task~
   const deleteTask = async (id) => {
     const res = await fetch(`http://localhost:5000/tasks/${id}`, {
       method: 'DELETE',
     })
-    //We should control the response status to decide if we will change the state or not.
     res.status === 200
       ? setTasks(tasks.filter((task) => task.id !== id))
       : alert('Error Deleting This Task')
@@ -80,12 +78,42 @@ const App = () => {
 
     const data = await res.json()
 
+
+
     setTasks(
       tasks.map((task) =>
         task.id === id ? { ...task, reminder: data.reminder } : task
       )
     )
   }
+
+  // Toggle Important
+  const toggleImportant = async (id) => {
+    const taskToToggle = await fetchTask(id)
+    const updTask = { ...taskToToggle, important: !taskToToggle.important}
+
+    const res = await fetch(`http://localhost:5000/tasks/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-type': 'application/json',
+      },
+      body: JSON.stringify(updTask),
+    })
+
+    const data = await res.json()
+
+
+
+    setTasks(
+      tasks.map((task) =>
+        task.id === id ? { ...task, important: data.important } : task
+      )
+    )
+  }
+
+
+
+
 
   return (
     <Router>
@@ -105,6 +133,8 @@ const App = () => {
                     tasks={tasks}
                     onDelete={deleteTask}
                     onToggle={toggleReminder}
+                    onTurn={toggleImportant}
+
                   />
                 ) : (
                   'No Tasks To Show'
@@ -113,11 +143,12 @@ const App = () => {
             }
           />
           <Route path='/about' element={<About />} />
+          <Route path='/details' element={<Details />} />
         </Routes>
         <Footer />
       </div>
     </Router>
   )
 }
 
-export default App
+export default App

src/components/About.js

@@ -1,12 +1,12 @@
-import { Link } from 'react-router-dom'
-
-const About = () => {
-  return (
-    <div>
-      <h4>Version 1.0.0</h4>
-      <Link to='/'>Go Back</Link>
-    </div>
-  )
-}
-
-export default About
+import { Link } from 'react-router-dom'
+
+const About = () => {
+  return (
+    <div>
+      <h4>Version 1.0.0</h4>
+      <Link to='/'>Go Back</Link>
+    </div>
+  )
+}
+
+export default About

src/components/AddTask.js

@@ -1,58 +1,108 @@
-import { useState } from 'react'
-
-const AddTask = ({ onAdd }) => {
-  const [text, setText] = useState('')
-  const [day, setDay] = useState('')
-  const [reminder, setReminder] = useState(false)
-
-  const onSubmit = (e) => {
-    e.preventDefault()
-
-    if (!text) {
-      alert('Please add a task')
-      return
-    }
-
-    onAdd({ text, day, reminder })
-
-    setText('')
-    setDay('')
-    setReminder(false)
-  }
-
-  return (
-    <form className='add-form' onSubmit={onSubmit}>
-      <div className='form-control'>
-        <label>Task</label>
-        <input
-          type='text'
-          placeholder='Add Task'
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-        />
-      </div>
-      <div className='form-control'>
-        <label>Day & Time</label>
-        <input
-          type='text'
-          placeholder='Add Day & Time'
-          value={day}
-          onChange={(e) => setDay(e.target.value)}
-        />
-      </div>
-      <div className='form-control form-control-check'>
-        <label>Set Reminder</label>
-        <input
-          type='checkbox'
-          checked={reminder}
-          value={reminder}
-          onChange={(e) => setReminder(e.currentTarget.checked)}
-        />
-      </div>
-
-      <input type='submit' value='Save Task' className='btn btn-block' />
-    </form>
-  )
-}
-
-export default AddTask
+import { useState } from 'react'
+
+const AddTask = ({ onAdd }) => {
+  const [text, setText] = useState('')
+  const [day, setDay] = useState('')
+  const [reminder, setReminder,] = useState(false)
+  const [important, setImportant] = useState(false)
+  const [work, setWork] = useState(false)
+  const [school, setSchool] = useState(false)
+  const [other, setOther] = useState(false)
+  const [description, setDetail] = useState('')
+
+  const onSubmit = (e) => {
+    e.preventDefault()
+
+    if (!text) {
+      alert('Please add a task')
+      return
+    }
+
+    onAdd({ text, day, reminder, important, work, school, other, description })
+
+    setText('')
+    setDay('')
+    setReminder(false)
+    setImportant(false)
+    setWork(false)
+    setSchool(false)
+    setOther(false)
+    setDetail('')
+  }
+
+  return (
+    <form className='add-form' onSubmit={onSubmit}>
+      <div className='form-control'>
+        <label>Task</label>
+        <input
+          type='text'
+          placeholder='Add Task'
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+      </div>
+      <div className='form-control'>
+        <label>Day & Time</label>
+        <input
+          type='text'
+          placeholder='Add Day & Time'
+          value={day}
+          onChange={(e) => setDay(e.target.value)}
+        />
+      </div>
+      <div className='form-control'>
+        <label>
+          Description
+        </label>
+        <textarea value={description} onChange={(e) => setDetail(e.target.value)} /> 
+      </div>
+      <div className='form-control form-control-check'>
+        <label>Set Reminder</label>
+        <input
+          type='checkbox'
+          checked={reminder}
+          value={reminder}
+          onChange={(e) => setReminder(e.currentTarget.checked)}
+        />
+        </div>
+
+      <div className='form-control form-control-check'>
+
+        <label>Mark as Important</label>
+        <input
+        type = 'checkbox'
+        checked={important}
+        value={important}
+        onChange={(e) => setImportant(e.currentTarget.checked)}
+        />
+
+      </div>
+
+      <div className='form-control form-control-check'>
+                <label className = 'work-label'>Set Work</label>
+                <input type='checkbox'
+                checked={work} 
+                value={work} 
+                onChange={(e) => setWork(e.currentTarget.checked)}/>
+      </div>
+      <div className='form-control form-control-check'>
+            <label className = 'school-label'>Set School</label>
+            <input type='checkbox'
+            checked={school} 
+            value={school} 
+            onChange={(e) => setSchool(e.currentTarget.checked)}/>
+      </div>
+      <div className='form-control form-control-check'>
+            <label className = 'other-label'>Set Other</label>
+            <input type='checkbox'
+            checked={other} 
+            value={other} 
+            onChange={(e) => setOther(e.currentTarget.checked)}/>
+      </div>
+
+      <input type='submit' value='Save Task' className='btn btn-block' />
+    </form>
+  )
+}
+
+export default AddTask

src/components/Button.js

@@ -1,25 +1,25 @@
-import PropTypes from 'prop-types'
-
-const Button = ({ color, text, onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      style={{ backgroundColor: color }}
-      className='btn'
-    >
-      {text}
-    </button>
-  )
-}
-
-Button.defaultProps = {
-  color: 'steelblue',
-}
-
-Button.propTypes = {
-  text: PropTypes.string,
-  color: PropTypes.string,
-  onClick: PropTypes.func,
-}
-
-export default Button
+import PropTypes from 'prop-types'
+
+const Button = ({ color, text, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{ backgroundColor: color }}
+      className='btn'
+    >
+      {text}
+    </button>
+  )
+}
+
+Button.defaultProps = {
+  color: 'steelblue',
+}
+
+Button.propTypes = {
+  text: PropTypes.string,
+  color: PropTypes.string,
+  onClick: PropTypes.func,
+}
+
+export default Button

src/components/Details.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
+
+const Details = ({ task }) => {
+  const location = useLocation()
+  const description = location.state
+
+  //returns the user's description input
+  return (
+    <div>
+      <p>
+        - {description}
+      </p>
+      <Link to='/'>Go Back</Link>
+    </div>
+  )
+}
+
+export default Details