Maya Herrscher
3 years ago
6 changed files with 302 additions and 165 deletions
@ -0,0 +1,183 @@ |
|||
import React, {useState } from 'react'; |
|||
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItem, TextField, Typography } from '@mui/material'; |
|||
import { DatePicker } from '@mui/x-date-pickers'; |
|||
import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded'; |
|||
import EditRoundedIcon from '@mui/icons-material/EditRounded'; |
|||
import { useLocalStorage } from '../hooks/useLocalStorage'; |
|||
|
|||
type Todo = { |
|||
id: string, |
|||
name: string, |
|||
done: boolean, |
|||
description: string, |
|||
from?: string, |
|||
to?: string, |
|||
} |
|||
|
|||
|
|||
function TodoItem({todo}: {todo: Todo}){ |
|||
return ( |
|||
<ListItem> |
|||
<Box sx={{display: "flex", flexDirection: "column"}}> |
|||
<Typography variant="h5">{todo.name}</Typography> |
|||
{todo.description && <span>Description: {todo.description}</span>} |
|||
{todo.from && <span>From: {(new Date(todo.from)).toLocaleDateString()}</span>} |
|||
{todo.to && <span>To: {(new Date(todo.to)).toLocaleDateString()}</span>} |
|||
</Box> |
|||
</ListItem> |
|||
) |
|||
} |
|||
|
|||
function ChangeTodo({todo, setTodo, handleCancel}: {todo: Todo, setTodo: (todo: Todo) => void, handleCancel: () => void}){ |
|||
|
|||
const [name, setName] = React.useState<string>(todo.name) |
|||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
|||
setName(event.target.value); |
|||
}; |
|||
|
|||
const [id, setId] = React.useState<string>(todo.id) |
|||
|
|||
const [description, setDescription] = React.useState<string>(todo.description) |
|||
const handleDescChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
|||
setDescription(event.target.value); |
|||
}; |
|||
|
|||
const [done, setDone] = React.useState<boolean>(todo.done) |
|||
|
|||
const [from, setFrom] = React.useState<Date | null>(todo.from ? new Date(todo.from) : null); |
|||
const handleFrom = (newValue: Date | null) => { |
|||
setFrom(newValue); |
|||
}; |
|||
|
|||
const [to, setTo] = React.useState<Date | null>(todo.to ? new Date(todo.to) : null); |
|||
|
|||
const handleTo = (newValue: Date | null) => { |
|||
setTo(newValue); |
|||
}; |
|||
|
|||
const saveTodo=() => { |
|||
const newtodo = { |
|||
name: name, |
|||
id: id === "" ? Math.random().toString() : id, |
|||
done: done, |
|||
description: description, |
|||
to: to?.toISOString(), |
|||
from: from?.toISOString() |
|||
}; |
|||
setTodo(newtodo); |
|||
} |
|||
|
|||
return ( |
|||
<> |
|||
<DialogContent> |
|||
<Box component="form" |
|||
sx={{ |
|||
'& > :not(style)': { m: 2, width: '50ch' }, |
|||
}}> |
|||
<TextField |
|||
id="name" |
|||
value={name} |
|||
label="Name" |
|||
onChange={handleNameChange} |
|||
/> |
|||
<TextField |
|||
id="description" |
|||
value={description} |
|||
label="Description" |
|||
onChange={handleDescChange} |
|||
/> |
|||
<DatePicker |
|||
mask={'__.__.____'} |
|||
label="From:" |
|||
value={from} |
|||
onChange={handleFrom} |
|||
renderInput={(params: any) => <TextField {...params} />} |
|||
/> |
|||
<DatePicker |
|||
mask={'__.__.____'} |
|||
label="To:" |
|||
value={to} |
|||
onChange={handleTo} |
|||
renderInput={(params: any) => <TextField {...params} />} |
|||
/> |
|||
</Box> |
|||
</DialogContent> |
|||
<DialogActions> |
|||
<Button onClick={handleCancel}>Cancel</Button> |
|||
<Button onClick={saveTodo}>Save</Button> |
|||
</DialogActions> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
export function Todos({style}: {style?: any}) { |
|||
const [todos, setTodos] = useLocalStorage<Todo[]>("todos",[]); |
|||
const setDone=(i: number,todo: Todo, done: boolean) => |
|||
setTodos([...todos.slice(0,i), |
|||
{name: todo.name, id: todo.id, done: done, description: todo.description, to: todo.to, from: todo.from}, |
|||
...todos.slice(i+1)]); |
|||
|
|||
const deleteTodo=(i: number,todo: Todo) => |
|||
setTodos([...todos.slice(0,i), |
|||
...todos.slice(i+1)]); |
|||
|
|||
const setTodo= (todo: Todo) => { |
|||
handleClose(); |
|||
setTodos([...todos, todo]); |
|||
} |
|||
|
|||
const [open, setOpen] = useState(false); |
|||
const handleClickOpen = () => { |
|||
setOpen(true); |
|||
}; |
|||
const handleClose = () => { |
|||
setOpen(false); |
|||
}; |
|||
|
|||
const [open2, setOpen2] = useState(false); |
|||
const [edit, setEdit] = useState<Todo>({name: "", description: "", done: false, id: ""}); |
|||
const [editI, setEditI] = useState<number>(0); |
|||
const handleClickOpen2 = (todo: Todo, i: number) => { |
|||
setOpen2(true); |
|||
setEdit(todo); |
|||
setEditI(i); |
|||
}; |
|||
const handleClose2 = () => { |
|||
setOpen2(false); |
|||
}; |
|||
|
|||
const editTodo= (todo: Todo) => { |
|||
handleClose2(); |
|||
setTodos([...todos.slice(0,editI), |
|||
todo, |
|||
...todos.slice(editI+1)]); |
|||
} |
|||
|
|||
return ( |
|||
<div style={{...style, textAlign: "left"}}> |
|||
<Typography variant="h3">ToDo's</Typography> |
|||
<Button onClick={handleClickOpen}>Add Todo</Button> |
|||
<List> |
|||
{todos.map((todo, i) => |
|||
<> |
|||
<Box sx={{display: "flex", flexDirection: "columns"}}> |
|||
<TodoItem key={todo.id} todo={todo}/> |
|||
<input type="checkbox" checked={todo.done} onChange={(e) => setDone(i, todo,e.target.checked)}></input> |
|||
<Button onClick={() => handleClickOpen2(todo, i)}><EditRoundedIcon/></Button> |
|||
<Button onClick={() => deleteTodo}><DeleteOutlineRoundedIcon/></Button> |
|||
</Box> |
|||
{(i + 1) < todos.length && <Divider/>} |
|||
</> |
|||
)} |
|||
</List> |
|||
<Dialog open={open} onClose={handleClose}> |
|||
<DialogTitle>New Todo</DialogTitle> |
|||
<ChangeTodo todo={{id: "", name: "", done: false, description: ""}} setTodo={setTodo} handleCancel={handleClose}></ChangeTodo> |
|||
</Dialog> |
|||
<Dialog open={open2} onClose={handleClose2}> |
|||
<DialogTitle>Edit Todo</DialogTitle> |
|||
<ChangeTodo todo={edit} setTodo={editTodo} handleCancel={handleClose2}></ChangeTodo> |
|||
</Dialog> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
|
|||
function useLocalStorage<T>(storageKey: string, fallbackState: T): [T, (val: T) => void] { |
|||
const [value, setValue] = useState( |
|||
JSON.parse(localStorage.getItem(storageKey)!) ?? fallbackState |
|||
); |
|||
|
|||
useEffect(() => { |
|||
localStorage.setItem(storageKey, JSON.stringify(value)) |
|||
}, [value, storageKey]); |
|||
|
|||
return [value, setValue]; |
|||
} |
|||
|
|||
export {useLocalStorage} |
|||
Loading…
Reference in new issue