Start project

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/dayjs": "^2.13.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.6.2",
+    "@mui/x-date-pickers": "^5.0.0-alpha.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
@@ -10,6 +15,7 @@
     "@types/node": "^16.11.27",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
+    "dayjs": "^1.11.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -1,25 +1,191 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import { AppBar, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, TextField, Toolbar, Typography } from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import dayjs from 'dayjs';
+import { DatePicker } from '@mui/x-date-pickers';
+
+type Todo = {
+  name: string,
+  id: string,
+  done: boolean
+}
+
+function TodoItem({todo,setDone}: {todo: Todo, setDone: (done: boolean) => void}){
+  return (
+    <li>
+      {todo.name}
+     <input type="checkbox" checked={todo.done} onChange={(e) => setDone(e.target.checked)}></input>
+    </li>
+  )
+}
+
+function ChangeTodo({todo, setTodo, handleCancel}: {todo: Todo, setTodo: (todo: Todo) => void, handleCancel: () => void}){
+
+  const [name, setName] = React.useState<string>(todo.name)
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const [id, setId] = React.useState<string>(todo.id)
+
+  const [done, setDone] = React.useState<boolean>(todo.done)
+
+  const [from, setFrom] = React.useState<Date | null>(
+    new Date('2022-04-18T21:11:54'),
+  );
+  const handleFrom = (newValue: Date | null) => {
+    setFrom(newValue);
+  };
+  
+  const [to, setTo] = React.useState<Date | null>(
+    new Date('2022-05-18T21:11:54'),
+  );
+  const handleTo = (newValue: Date | null) => {
+    setTo(newValue);
+  };
+
+  const saveTodo=() => {
+    const newtodo = {
+      name: name,
+      id: id === "" ? Math.random().toString() : id,
+      done: done
+    };
+    setTodo(newtodo);
+  }
+
+  return (
+    <>
+    <DialogContent>
+      <TextField
+        id="name"
+        value={name}
+        label="Name"
+        onChange={handleChange}
+        />
+      <TextField
+        id="description"
+        label="Description"
+        />
+      <LocalizationProvider dateAdapter={AdapterDayjs} locale={dayjs().locale('de')}>
+        <DatePicker
+            mask={'__.__.____'}
+            label="From:"
+            value={from}
+            onChange={handleFrom}
+            renderInput={(params: any) => <TextField {...params} />}
+          />
+    </LocalizationProvider>
+      <LocalizationProvider dateAdapter={AdapterDayjs} locale={dayjs().locale('de')}>
+        <DatePicker
+            mask={'__.__.____'}
+            label="To:"
+            value={to}
+            onChange={handleTo}
+            renderInput={(params: any) => <TextField {...params} />}
+          />
+    </LocalizationProvider>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={handleCancel}>Cancel</Button>
+      <Button onClick={saveTodo}>Save</Button>
+    </DialogActions>
+    </>
+  )
+}
+
+function Todos() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const setDone=(i: number,todo: Todo) => (done: boolean) => setTodos([...todos.slice(0,i),{name: todo.name, id: todo.id, done: done},...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);
+};
+
+  return (
+    <div>
+      <Typography variant="h2">ToDo's</Typography>
+    <ul>
+      {todos.map((todo, i) => 
+        <TodoItem key={todo.id} todo={todo} setDone={setDone(i, todo)}></TodoItem>
+      )}
+    </ul>
+      <Button onClick={handleClickOpen}>Add Todo</Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>New Todo</DialogTitle>
+        <ChangeTodo todo={{id: "", name: "", done: false}} setTodo={setTodo} handleCancel={handleClose}></ChangeTodo>
+      </Dialog>
+    </div>
+  )
+}
+
+function Calendar(){
+return(
+      <Typography variant="h2">Calendar</Typography>
+)
+}
+
+function Dinos(){
+return(
+      <Typography variant="h2">Dinos</Typography>
+)
+}
+
+function Overview(){
+  return (
+    <div>
+      <Typography variant="h2">Overview</Typography>
+      <Grid 
+      container 
+      justifyContent="space-evenly"
+      alignItems="flex-start"
+      spacing={2}>
+          <Todos/>
+          <Todos/>
+      </Grid>
+</div>
+  )
+}
+
+const pages = ['Overview', 'Todos', 'Calendar', 'Dinos'];
 
 function App() {
+  const [page,setPage] = useState<string>("Overview");
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    <>
+    <AppBar>
+      <Toolbar>
+      <Typography variant="h5"
+            noWrap
+            component="div"
+            //sx={{ flexGrow: 0, display: { xs: 'flex', md: 'none' } }}
             >
-          Learn React
-        </a>
-      </header>
-    </div>
+              ToDinos
+            </Typography>
+        <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+        {pages.map((page) => 
+          <Button key={page} onClick={() => setPage(page)} sx={{ my: 2, color: 'white', display: 'block' }}>
+            {page}
+          </Button>
+        )}
+        </Box>
+      </Toolbar>
+    </AppBar>
+        {page === "Overview" && <Overview/>}
+        {page === "Todos" && <Todos/>}
+        {page === "Calendar" && <Calendar/>}
+        {page === "Dinos" && <Dinos/>}
+    </>
   );
 }