Skip to content

still in work Night Mode #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JixiuChang wants to merge 1 commit into
base: master
Choose a base branch
from
Open

still in work Night Mode #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 108 additions & 91 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
10 changes: 9 additions & 1 deletion src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
)
}
Expand Down