chore: delete used files
This commit is contained in:
Ricardo Campos
@@ -1,27 +0,0 @@
|
||||
.fade {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
width: 90%;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import styles from './Modal.module.css';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Modal: React.FC<{ children: React.ReactNode }> = ({ children }: Props) => {
|
||||
const closeModal = (): void => {
|
||||
const modal = document.querySelector('#modal');
|
||||
modal!.classList.add('hide');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div id="modal" className="hide">
|
||||
<button
|
||||
type="button"
|
||||
className={styles.fade}
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<div className={styles.modal}>
|
||||
<h2>Modal text</h2>
|
||||
{ children }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
@@ -1,37 +0,0 @@
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form input {
|
||||
padding: 8px 15px;
|
||||
margin-bottom: 1.5em;
|
||||
border-radius: 0;
|
||||
border: 1px solid #282c34;
|
||||
}
|
||||
|
||||
.form input[type="submit"] {
|
||||
background-color: #61dafb;
|
||||
border: 1px solid #61dafb;
|
||||
color: #000;
|
||||
transition: .5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form input[type="submit"]:hover {
|
||||
background-color: #fff;
|
||||
border-color: #282c34;
|
||||
}
|
||||
|
||||
.input_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input_container label {
|
||||
font-weight: bold;
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
import React, {
|
||||
useState,
|
||||
ChangeEvent,
|
||||
FormEvent,
|
||||
useEffect
|
||||
} from 'react';
|
||||
|
||||
// CSS
|
||||
import styles from './TaskForm.module.css';
|
||||
|
||||
// Interface
|
||||
import { ITask } from '../interfaces/Task';
|
||||
|
||||
interface Props {
|
||||
btnText: string;
|
||||
taskList: ITask[];
|
||||
setTaskList?: React.Dispatch<React.SetStateAction<ITask[]>>;
|
||||
task?: ITask | null;
|
||||
handleUpdate?(id: number, title: string, difficulty: number): void;
|
||||
}
|
||||
|
||||
const TaskForm = ({
|
||||
btnText,
|
||||
taskList,
|
||||
setTaskList,
|
||||
task,
|
||||
handleUpdate
|
||||
}: Props) => {
|
||||
const [id, setId] = useState<number>(0);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [difficulty, setDifficulty] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (task) {
|
||||
setId(task.id);
|
||||
setTitle(task.title);
|
||||
setDifficulty(task.difficulty);
|
||||
}
|
||||
}, [task]);
|
||||
|
||||
const addTaskHandler = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (handleUpdate) {
|
||||
handleUpdate(id, title, difficulty);
|
||||
} else {
|
||||
const newId: number = Math.floor(Math.random() * 1000);
|
||||
const newTask: ITask = {
|
||||
id: newId,
|
||||
title,
|
||||
difficulty
|
||||
};
|
||||
|
||||
setTaskList!([...taskList, newTask]);
|
||||
setTitle('');
|
||||
setDifficulty(0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.name === 'title') {
|
||||
setTitle(e.target.value);
|
||||
} else {
|
||||
setDifficulty(parseInt(e.target.value, 10));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={addTaskHandler} className={styles.form}>
|
||||
<div className={styles.input_container}>
|
||||
<label htmlFor="title">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
placeholder="Task title"
|
||||
onChange={handleChange}
|
||||
value={title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.input_container}>
|
||||
<label htmlFor="difficulty">Difficulty</label>
|
||||
<input
|
||||
type="text"
|
||||
name="difficulty"
|
||||
placeholder="Task difficulty"
|
||||
onChange={handleChange}
|
||||
value={difficulty}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input type="submit" value={btnText} />
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskForm;
|
||||
@@ -1,38 +0,0 @@
|
||||
.task {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.details {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.details h4 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
margin-bottom: .5em;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
background-color: #282c34;
|
||||
color: #fff;
|
||||
padding: .4em;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.actions button:hover {
|
||||
color: #61dafb;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
// Interface
|
||||
import { ITask } from '../interfaces/Task';
|
||||
|
||||
// CSS
|
||||
import styles from './TaskList.module.css';
|
||||
|
||||
interface Props {
|
||||
taskList: ITask[];
|
||||
handleDelete(id: number): void;
|
||||
handleEdit(task: ITask): void;
|
||||
}
|
||||
|
||||
const TaskList = ({ taskList, handleDelete, handleEdit }: Props): JSX.Element => {
|
||||
if (taskList.length) {
|
||||
return (
|
||||
<>
|
||||
{taskList.map((task) => (
|
||||
<div key={task.id} className={styles.task}>
|
||||
<div className={styles.details}>
|
||||
<h4>{task.title}</h4>
|
||||
<p>
|
||||
Difficulty:
|
||||
{task.difficulty}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className="bi bi-pencil"
|
||||
onClick={() => { handleEdit(task); }}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bi bi-trash"
|
||||
onClick={() => { handleDelete(task.id); }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <p>There's no task records</p>;
|
||||
};
|
||||
|
||||
export default TaskList;
|
||||
Reference in New Issue
Block a user