From fe42af87537cc3d1d39b330cd40b3e096d8cbd77 Mon Sep 17 00:00:00 2001
From: Jixiu Chang <JixiuChang2901@gmail.com>
Date: Thu, 14 Jul 2022 17:05:34 -0500
Subject: [PATCH] still in work Night Mode

---
 src/App.js               | 199 +++++++++++++++++++++------------------
 src/components/Header.js |  10 +-
 2 files changed, 117 insertions(+), 92 deletions(-)

diff --git a/src/App.js b/src/App.js
index 147e026..d5d9a5b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,119 +5,136 @@ import Footer from './components/Footer'
 import Tasks from './components/Tasks'
 import AddTask from './components/AddTask'
 import About from './components/About'
+import { createContext } from "react";
+
+
+export const ThemeContext = createContext(null);
 
 const App = () => {
+  const [theme, setTheme] = useState("light")
+  const toggleTheme = () => {
+    setTheme((theme === "light" ? "dark" : "light"))
+  }
+  
   const [showAddTask, setShowAddTask] = useState(false)
   const [tasks, setTasks] = useState([])
 
-  useEffect(() => {
-    const getTasks = async () => {
-      const tasksFromServer = await fetchTasks()
-      setTasks(tasksFromServer)
-    }
+    useEffect(() => {
+      const getTasks = async () => {
+        const tasksFromServer = await fetchTasks()
+        setTasks(tasksFromServer)
+      }
 
-    getTasks()
-  }, [])
+      getTasks()
+    }, [])
 
-  // Fetch Tasks
-  const fetchTasks = async () => {
-    const res = await fetch('http://localhost:5000/tasks')
-    const data = await res.json()
+    // Fetch Tasks
+    const fetchTasks = async () => {
+      const res = await fetch('http://localhost:3000/tasks')
+      const data = await res.json()
 
-    return data
-  }
+      return data
+    }
 
-  // Fetch Task
-  const fetchTask = async (id) => {
-    const res = await fetch(`http://localhost:5000/tasks/${id}`)
-    const data = await res.json()
+    // Fetch Task
+    const fetchTask = async (id) => {
+      const res = await fetch(`http://localhost:3000/tasks/${id}`)
+      const data = await res.json()
 
-    return data
-  }
+      return data
+    }
 
-  // Add Task
-  const addTask = async (task) => {
-    const res = await fetch('http://localhost:5000/tasks', {
-      method: 'POST',
-      headers: {
-        'Content-type': 'application/json',
-      },
-      body: JSON.stringify(task),
-    })
+    // Add Task
+    const addTask = async (task) => {
+      const res = await fetch('http://localhost:3000/tasks', {
+        method: 'POST',
+        headers: {
+          'Content-type': 'application/json',
+        },
+        body: JSON.stringify(task),
+      })
 
-    const data = await res.json()
+      const data = await res.json()
 
-    setTasks([...tasks, data])
+      setTasks([...tasks, data])
 
-    // const id = Math.floor(Math.random() * 10000) + 1
-    // const newTask = { id, ...task }
-    // setTasks([...tasks, newTask])
-  }
+      // const id = Math.floor(Math.random() * 10000) + 1
+      // const newTask = { id, ...task }
+      // setTasks([...tasks, newTask])
+    }
+
+    // Delete Task
+    const deleteTask = async (id) => {
+      const res = await fetch(`http://localhost:3000/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')
+    }
+    //Night Mode
 
-  // 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')
-  }
 
-  // Toggle Reminder
-  const toggleReminder = async (id) => {
-    const taskToToggle = await fetchTask(id)
-    const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder }
+    // Toggle Reminder
+    const toggleReminder = async (id) => {
+      const taskToToggle = await fetchTask(id)
+      const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder }
 
-    const res = await fetch(`http://localhost:5000/tasks/${id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-type': 'application/json',
-      },
-      body: JSON.stringify(updTask),
-    })
+      const res = await fetch(`http://localhost:3000/tasks/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-type': 'application/json',
+        },
+        body: JSON.stringify(updTask),
+      })
 
-    const data = await res.json()
+      const data = await res.json()
 
-    setTasks(
-      tasks.map((task) =>
-        task.id === id ? { ...task, reminder: data.reminder } : task
+      setTasks(
+        tasks.map((task) =>
+          task.id === id ? { ...task, reminder: data.reminder } : task
+        )
       )
-    )
-  }
+    }
 
-  return (
-    <Router>
-      <div className='container'>
-        <Header
-          onAdd={() => setShowAddTask(!showAddTask)}
-          showAdd={showAddTask}
-        />
-        <Routes>
-          <Route
-            path='/'
-            element={
-              <>
-                {showAddTask && <AddTask onAdd={addTask} />}
-                {tasks.length > 0 ? (
-                  <Tasks
-                    tasks={tasks}
-                    onDelete={deleteTask}
-                    onToggle={toggleReminder}
-                  />
-                ) : (
-                  'No Tasks To Show'
-                )}
-              </>
-            }
+    
+  
+    return (
+      <Router>
+         <ThemeContext.Provider value={{theme, toggleTheme}}>
+        <div className='container' id={theme} >
+          <Header
+            onAdd={() => setShowAddTask(!showAddTask)}
+            showAdd={showAddTask}
+            showNight={theme === 'dark'}
+            isNight={toggleTheme}
           />
-          <Route path='/about' element={<About />} />
-        </Routes>
-        <Footer />
-      </div>
-    </Router>
-  )
+          <Routes>
+            <Route
+              path='/'
+              element={
+                <>
+                  {showAddTask && <AddTask onAdd={addTask} />}
+                  {tasks.length > 0 ? (
+                    <Tasks
+                      tasks={tasks}
+                      onDelete={deleteTask}
+                      onToggle={toggleReminder}
+                    />
+                  ) : (
+                    <body>No Tasks To Show</body>
+                  )}
+                </>
+              }
+            />
+            <Route path='/about' element={<About />} />
+          </Routes>
+          <Footer />
+        </div>
+        </ThemeContext.Provider>
+      </Router>
+    )
 }
 
 export default App
diff --git a/src/components/Header.js b/src/components/Header.js
index 94d31fe..85f446c 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import { useLocation } from 'react-router-dom'
 import Button from './Button'
 
-const Header = ({ title, onAdd, showAdd }) => {
+const Header = ({ title, onAdd, showAdd, isNight, showNight, toggleTheme }) => {
   const location = useLocation()
 
   return (
@@ -15,6 +15,14 @@ const Header = ({ title, onAdd, showAdd }) => {
           onClick={onAdd}
         />
       )}
+      {location.pathname === '/' && (
+        <Button 
+        color={showNight ? 'gray' : 'Black'}
+        text={showNight ? 'On' : 'Off'}
+        onClick={toggleTheme}
+        />
+      )}
+      
     </header>
   )
 }