mirror of
https://github.com/FranP-code/noti.io.git
synced 2025-10-13 00:14:03 +00:00
Modularized code
This commit is contained in:
211
src/App.js
211
src/App.js
@@ -1,199 +1,62 @@
|
||||
import "./App.css";
|
||||
import React, {useState} from "react";
|
||||
import Header from './components/Header'
|
||||
import TaskList from "./components/TaskList";
|
||||
import AddTask from "./components/AddTask";
|
||||
|
||||
function App() {
|
||||
|
||||
document.title = 'Noti.io'
|
||||
document.title = 'Noti.io'
|
||||
|
||||
const [tasks, setTasks] = useState([{
|
||||
text: 'Test Task',
|
||||
id: 616
|
||||
}])
|
||||
text: 'Test Task',
|
||||
id: 616
|
||||
}])
|
||||
|
||||
const [text, setText] = useState('')
|
||||
const [messageInvalidText, setMessageInvalidText] = useState('')
|
||||
|
||||
const [counterInputs, setCounterInputs] = useState(1)
|
||||
|
||||
const [messageInvalidText, setMessageInvalidText] = useState('')
|
||||
|
||||
|
||||
const [formEditInput, setFormEditInput] = useState('')
|
||||
|
||||
const persistTasks = (modificatedTasks) => {
|
||||
localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
|
||||
}
|
||||
|
||||
const persistCounter = () => {
|
||||
localStorage.setItem('counter', JSON.stringify(counterInputs))
|
||||
}
|
||||
|
||||
const restoreTasks = () => {
|
||||
let tasksCache = localStorage.getItem('tasks')
|
||||
|
||||
tasksCache = JSON.parse(tasksCache)
|
||||
|
||||
setTasks(tasksCache)
|
||||
|
||||
}
|
||||
|
||||
const restoreCounter = () => {
|
||||
let counterInputCache = localStorage.getItem('counter')
|
||||
|
||||
counterInputCache = JSON.parse(counterInputCache)
|
||||
|
||||
setCounterInputs(counterInputCache + 1)
|
||||
}
|
||||
|
||||
const checkCache = () => {
|
||||
if (localStorage.getItem('tasks')) {
|
||||
restoreTasks()
|
||||
}
|
||||
|
||||
if (localStorage.getItem('counter')) {
|
||||
restoreCounter()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
checkCache()
|
||||
}
|
||||
|
||||
|
||||
const validateInput = (e, id = 0 ) => {
|
||||
e.preventDefault()
|
||||
|
||||
setMessageInvalidText('')
|
||||
|
||||
if (!text.trim()) {
|
||||
setMessageInvalidText('Text empty, please send a new task')
|
||||
return
|
||||
}
|
||||
|
||||
setTasks([...tasks,
|
||||
{
|
||||
text: text,
|
||||
id: counterInputs
|
||||
}
|
||||
])
|
||||
|
||||
setCounterInputs(counterInputs + 1)
|
||||
|
||||
setFormEditInput('')
|
||||
|
||||
e.target.reset()
|
||||
|
||||
persistTasks([...tasks,
|
||||
{
|
||||
text: text,
|
||||
id: counterInputs
|
||||
}
|
||||
])
|
||||
|
||||
persistCounter()
|
||||
//setText('')
|
||||
}
|
||||
|
||||
|
||||
const deleteInput = (id) => {
|
||||
const deleted_task = tasks.filter(task => task.id !== id)
|
||||
|
||||
setTasks(deleted_task)
|
||||
persistTasks(deleted_task)
|
||||
|
||||
}
|
||||
|
||||
const modifyInput = (id) => {
|
||||
setFormEditInput([true, id])
|
||||
}
|
||||
|
||||
const modifyInputTwo = (e) => {
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
if(!text.trim()) {
|
||||
setFormEditInput('')
|
||||
return
|
||||
}
|
||||
|
||||
const taskID = tasks.findIndex(task => task.id === formEditInput[1])
|
||||
|
||||
tasks[taskID].text = text
|
||||
|
||||
setTasks(tasks)
|
||||
setText('')
|
||||
setFormEditInput('')
|
||||
|
||||
persistTasks()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="main-header"><h1>Noti.io</h1></header>
|
||||
<Header />
|
||||
<div className="app">
|
||||
<div className="task-list">
|
||||
<div>
|
||||
{
|
||||
tasks.map (task => (
|
||||
<div className="task" key= {task.id}>
|
||||
<div className="task-info">
|
||||
<div className="task-text">
|
||||
<h2> { task.text } </h2>
|
||||
<span> ({task.id}) </span>
|
||||
</div>
|
||||
<div className="task-buttons">
|
||||
<button onClick={ () => modifyInput(task.id)} className="mini-button edit-button">Edit</button>
|
||||
<button button onClick={ () => deleteInput(task.id)} className="mini-button delete-button">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
<TaskList
|
||||
tasks={tasks}
|
||||
setTasks={setTasks}
|
||||
|
||||
<div className="space-edit-task">
|
||||
text={text}
|
||||
setText={setText}
|
||||
|
||||
{ formEditInput[0] && task.id === formEditInput[1] ?
|
||||
formEditInput={formEditInput}
|
||||
setFormEditInput={setFormEditInput}
|
||||
/>
|
||||
|
||||
<form onSubmit={modifyInputTwo}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Task"
|
||||
onChange={ (e) => setText(e.target.value) }
|
||||
className="input-edit-task"
|
||||
autoFocus
|
||||
autoComplete="off"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value="Edit Task"
|
||||
className="mini-button edit-task"
|
||||
/>
|
||||
</form>
|
||||
<AddTask
|
||||
tasks={tasks}
|
||||
setTasks={setTasks}
|
||||
|
||||
text={text}
|
||||
setText={setText}
|
||||
|
||||
formEditInput={formEditInput}
|
||||
setFormEditInput={setFormEditInput}
|
||||
|
||||
counterInputs={counterInputs}
|
||||
setCounterInputs={setCounterInputs}
|
||||
|
||||
messageInvalidText={messageInvalidText}
|
||||
setMessageInvalidText={setMessageInvalidText}
|
||||
|
||||
/>
|
||||
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="add-task">
|
||||
<h3 className="invalidInput"> {messageInvalidText} </h3>
|
||||
<form onSubmit={validateInput}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Task"
|
||||
id="task-name"
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value="Add Task"
|
||||
className="button-task submit-task"
|
||||
/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer>Made with 💓 by <a href="https://www.upwork.com/freelancers/~01d6fc06b8da216c2b">Francisco Pessano</a></footer>
|
||||
</>
|
||||
|
||||
11
src/components/AddList.jsx
Normal file
11
src/components/AddList.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const AddList = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddList
|
||||
105
src/components/AddTask.jsx
Normal file
105
src/components/AddTask.jsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React, {useState} from 'react'
|
||||
|
||||
const AddTask = (props) => {
|
||||
|
||||
|
||||
|
||||
const validateInput = (e, id = 0 ) => {
|
||||
e.preventDefault()
|
||||
|
||||
props.setMessageInvalidText('')
|
||||
|
||||
if (!props.text.trim()) {
|
||||
props.setMessageInvalidText('Text empty, please send a new task')
|
||||
return
|
||||
}
|
||||
|
||||
props.setTasks([...props.tasks,
|
||||
{
|
||||
text: props.text,
|
||||
id: props.counterInputs
|
||||
}
|
||||
])
|
||||
|
||||
props.setCounterInputs(props.counterInputs + 1)
|
||||
|
||||
props.setFormEditInput('')
|
||||
|
||||
e.target.reset()
|
||||
|
||||
persistTasks([...props.tasks,
|
||||
{
|
||||
text: props.text,
|
||||
id: props.counterInputs
|
||||
}
|
||||
])
|
||||
|
||||
persistCounter()
|
||||
//props.setText('')
|
||||
}
|
||||
|
||||
const persistTasks = (modificatedTasks) => {
|
||||
localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
|
||||
}
|
||||
|
||||
const persistCounter = () => {
|
||||
localStorage.setItem('counter', JSON.stringify(props.counterInputs))
|
||||
}
|
||||
|
||||
const restoreTasks = () => {
|
||||
let tasksCache = localStorage.getItem('tasks')
|
||||
|
||||
tasksCache = JSON.parse(tasksCache)
|
||||
|
||||
props.setTasks(tasksCache)
|
||||
|
||||
}
|
||||
|
||||
const restoreCounter = () => {
|
||||
let counterInputCache = localStorage.getItem('counter')
|
||||
|
||||
counterInputCache = JSON.parse(counterInputCache)
|
||||
|
||||
props.setCounterInputs(counterInputCache + 1)
|
||||
}
|
||||
|
||||
const checkCache = () => {
|
||||
if (localStorage.getItem('tasks')) {
|
||||
restoreTasks()
|
||||
}
|
||||
|
||||
if (localStorage.getItem('counter')) {
|
||||
restoreCounter()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
checkCache()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="add-task">
|
||||
<h3 className="invalidInput"> {props.messageInvalidText} </h3>
|
||||
<form onSubmit={validateInput}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Task"
|
||||
id="task-name"
|
||||
onChange={(e) => props.setText(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value="Add Task"
|
||||
className="button-task submit-task"
|
||||
/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddTask
|
||||
9
src/components/Header.jsx
Normal file
9
src/components/Header.jsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="main-header"><h1>Noti.io</h1></header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
26
src/components/States.jsx.txt
Normal file
26
src/components/States.jsx.txt
Normal file
@@ -0,0 +1,26 @@
|
||||
import React, {useState} from 'react'
|
||||
|
||||
export function States() {
|
||||
|
||||
const [messageInvalidText, setMessageInvalidText] = useState('')
|
||||
|
||||
const [tasks, setTasks] = useState([{
|
||||
text: 'Test Task',
|
||||
id: 616
|
||||
}])
|
||||
|
||||
const [formEditInput, setFormEditInput] = useState('')
|
||||
|
||||
const [text, setText] = useState('')
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
const [messageInvalidText, setMessageInvalidText] = useState('')
|
||||
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default States
|
||||
94
src/components/TaskList.jsx
Normal file
94
src/components/TaskList.jsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React, {useState} from 'react'
|
||||
|
||||
const TaskList = (props) => {
|
||||
|
||||
const persistTasks = (modificatedTasks) => {
|
||||
localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
|
||||
}
|
||||
|
||||
const deleteInput = (id) => {
|
||||
const deleted_task = props.tasks.filter(task => task.id !== id)
|
||||
|
||||
props.setTasks(deleted_task)
|
||||
persistTasks(deleted_task)
|
||||
|
||||
}
|
||||
|
||||
const modifyInput = (id) => {
|
||||
props.setFormEditInput([true, id])
|
||||
}
|
||||
|
||||
const modifyInputTwo = (e) => {
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
if(!props.text.trim()) {
|
||||
props.setFormEditInput('')
|
||||
return
|
||||
}
|
||||
|
||||
const taskID = props.tasks.findIndex(task => task.id === props.formEditInput[1])
|
||||
|
||||
props.tasks[taskID].text = props.text
|
||||
|
||||
props.setTasks(props.tasks)
|
||||
props.setText('')
|
||||
props.setFormEditInput('')
|
||||
|
||||
persistTasks()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="task-list">
|
||||
<div>
|
||||
{
|
||||
props.tasks.map (task => (
|
||||
<div className="task" key= {task.id}>
|
||||
<div className="task-info">
|
||||
<div className="task-text">
|
||||
<h2> { task.text } </h2>
|
||||
<span> ({task.id}) </span>
|
||||
</div>
|
||||
<div className="task-buttons">
|
||||
<button onClick={ () => modifyInput(task.id)} className="mini-button edit-button">Edit</button>
|
||||
<button button onClick={ () => deleteInput(task.id)} className="mini-button delete-button">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-edit-task">
|
||||
|
||||
{ props.formEditInput[0] && task.id === props.formEditInput[1] ?
|
||||
|
||||
<form onSubmit={modifyInputTwo}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Task"
|
||||
onChange={ (e) => props.setText(e.target.value) }
|
||||
className="input-edit-task"
|
||||
autoFocus
|
||||
autoComplete="off"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
value="Edit Task"
|
||||
className="mini-button edit-task"
|
||||
/>
|
||||
</form>
|
||||
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TaskList
|
||||
Reference in New Issue
Block a user