Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 2x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 4x 1x 1x 1x 1x 1x 4x 1x 4x 1x | // TaskAreaDialog.jsx
import React, { useState, useEffect } from 'react';
import './TaskAreaDialog.css';
const TaskAreaDialog = ({ item, type, onClose, onSave, onDelete }) => {
const [title, setTitle] = useState(item.content || '');
const [notes, setNotes] = useState(item.notes || '');
const [positive, setPositive] = useState(item.positive);
const [negative, setNegative] = useState(item.negative);
const [completed, setCompleted] = useState(item.completed);
const [price, setPrice] = useState(item.price);
const togglePositive = () => {
setPositive(!positive);
};
const toggleNegative = () => {
setNegative(!negative);
};
useEffect(() => {
// when item change the state will be updated
setTitle(item.content || '');
setNotes(item.notes || '');
setPrice(item.price);
}, [item]);
const handleSave = () => {
const updatedItem = {
...item,
content: title,
notes,
};
if (type === 'Habit') {
updatedItem.positive = positive;
updatedItem.negative = negative;
}
else Eif ((type === 'Daily') || (type === 'To-Do')) {
updatedItem.completed = completed;
}
else if (type === 'Reward'){
updatedItem.price = price;
}
onSave(updatedItem);
};
const handleDelete = () => {
onDelete(item);
};
return (
<div className="dialogBackdrop">
<div className="dialog">
<h2>{`Edit ${type}`}</h2>
<label>
Title*:
<input value={title} onChange={(e) => setTitle(e.target.value)} />
</label>
<label>
Notes:
<textarea value={notes} onChange={(e) => setNotes(e.target.value)} />
</label>
{(type === 'Reward') && (
<div className="dialogHeaderNotes">
<label>
Price*:
<input value={price} onChange={(e) => setPrice(e.target.value)} />
</label>
</div>
)}
<div className="dialogButtons">
<button onClick={handleDelete}>{`Delete this ${type}`}</button>
<button onClick={handleSave}>Save</button>
<button onClick={onClose}>Cancel</button>
</div>
<div className="dialogHeaderButtonsWrapper">
{type === 'Habit' && (
<div className="dialogHeaderButtons">
<button className={`pos ${positive ? 'active' : 'inactive'}`} onClick={togglePositive}>
Positive
</button>
<button className={`neg ${negative ? 'active' : 'inactive'}`} onClick={toggleNegative}>
Negative
</button>
</div>
)}
{((type === 'Daily') || (type === 'To-Do')) && (
<div className="dialogHeaderButtons">
<button className={`comp ${completed ? 'inactive' : 'active'}`} onClick={() => setCompleted(!completed)}>
{completed ? 'Mark as Incomplete' : 'Mark as Completed'}
</button>
</div>
)}
</div>
</div>
</div>
);
};
export default TaskAreaDialog;
|