Создает приложение список дел. Применяет router, redux и material-ui

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.6",
+    "@reduxjs/toolkit": "^2.3.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,6 +16,8 @@
     "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-redux": "^7.1.34"
   }
 }

src/App.css

@@ -1,9 +1,20 @@
-.box {
+.box-menu {
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 160px;
-  height: 120px;
-  border: 1px solid silver;
-  padding: 10px;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  border-bottom: 1px solid silver;
+
+  .box-user {
+    div {
+      margin-right: 5px;
+    }
+  }
 }
+
+.note-add {
+  padding: 10px 10px 10px 0;
+
+  div {
+    margin-right: 5px;
+  }
+}

src/App.tsx

@@ -1,56 +1,38 @@
-import React from 'react';
 import './App.css';
+import { BrowserRouter, Route, Routes  } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { Menu } from './Menu';
+import { Store } from './Store';
+import { NoteAdd, NoteList } from './Note';
 
-function App() {
-  return (
-    <Form />
-  );
+function MainPage() {
+  return <>
+    <Menu />
+    <NoteAdd />
+    <NoteList />
+  </>
 }
 
-interface IUser {
-  name: string;
-  username: string;
-  email: string;
+function ListPage() {
+  return <>
+    <Menu />
+    <NoteList />
+  </>
 }
 
-function Form() {
-
-  function fillForm(data:IUser):void {
-    let form = document.querySelector<HTMLFormElement>('.box');
-    if(form == null) return;
 
-    form.querySelector<HTMLInputElement>('input[name="name"]')!.value = data.name;
-    form.querySelector<HTMLInputElement>('input[name="username"]')!.value = data.username;
-    form.querySelector<HTMLInputElement>('input[name="email"]')!.value = data.email;    
-  }
-
-  function clickHandler(): void {
-    fetch('https://jsonplaceholder.typicode.com/users/10')
-      .then(response => response.json())
-      .then(data => {
-        console.log(data);
-        fillForm(data);
-      });
-  }
-
-  return <>
-   <form className='box'>
-      <div>
-        <label>Имя</label>
-        <input name='name'></input>
-      </div>
-      <div>
-        <label>Логин</label>
-        <input name='username'></input>
-      </div>
-      <div>
-        <label>Почта</label>
-        <input name='email'></input>
-      </div>      
-    </form>
-    <button onClick={clickHandler}>получить данные</button>
-  </>
-
+function App() {
+  return (
+    <Provider store={Store}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MainPage/>} />
+          <Route path="/list" element={<ListPage/>} />
+          <Route path="*" element={<h1>Страница не найдена!</h1>} />
+        </Routes>
+      </BrowserRouter>
+    </Provider>
+  );
 }
 
 export default App;

src/Menu.tsx

@@ -0,0 +1,24 @@
+import './App.css';
+import { ButtonGroup, Button } from '@mui/material';
+import { useNavigate  } from 'react-router-dom';
+import { UserBox } from './User';
+
+function Pages() {
+    const navigate = useNavigate();
+    return <ButtonGroup variant='outlined' aria-label='меню' >
+      <Button onClick={ () => navigate('/') }>Главная</Button>
+      <Button onClick={ () => navigate('/list') }>Список дел</Button>
+      <Button onClick={ () => navigate('*') }>Не найдена</Button>
+    </ButtonGroup>
+  }
+
+  function Menu() {
+    return <>
+      <div className="box-menu">
+        <Pages />
+        <UserBox />
+      </div>
+    </>
+  }
+
+export { Menu }

src/Note.tsx

@@ -0,0 +1,45 @@
+import './App.css';
+import { Store, noteSlice, type Note, type AppDispatch } from './Store';
+import { useSelector, useDispatch } from 'react-redux';
+import { Button, TextField } from '@mui/material';
+import { useState } from 'react';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+
+function NoteAdd() {
+    const dispatch = useDispatch<AppDispatch>();
+    const { add } = noteSlice.actions;
+    const [noteText, setNoteText] = useState<string>("");
+
+    function saveNote() {
+        if(noteText.trim() === '') return;
+        const note = { text: noteText, date: new Date().toLocaleTimeString() };
+        dispatch(add(note));
+        setNoteText("");
+    }
+
+        return <>
+        <div className='note-add'>
+            <TextField onChange={(e) => setNoteText(e.target.value)} value={noteText} variant="outlined" size='small' />
+            <Button onClick={(e) => saveNote() } variant='contained'>Добавить</Button>
+        </div>
+    </>
+}
+
+function NoteList() {
+    type RootState = ReturnType<typeof Store.getState>;
+    const notes = useSelector((state: RootState) => state.notes.notes);
+
+    return <>
+        <List aria-label="main mailbox folder">
+            {
+                notes.map((note:Note, index) => <ListItemButton key={index}><ListItemText primary={ note.date + ": " + note.text} /></ListItemButton> )
+            }
+        </List>
+    </>
+}
+
+export {
+    NoteAdd, NoteList
+}

src/Store.tsx

@@ -0,0 +1,51 @@
+import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+type Note = {
+  text: string;
+  date: string;
+}
+
+type NoteState = {
+  notes: Note[];
+}
+
+const initialStateNote: NoteState = {
+  notes: []
+}
+
+const noteSlice = createSlice({
+  name: 'noteSlice',
+  initialState: initialStateNote,
+  reducers: {
+    add: (state, action: PayloadAction<Note>) => { state.notes.push(action.payload); return state; }
+  }
+});
+
+type User = {
+  name: string;
+  username: string;
+}
+
+const initialStateUser: User = {
+  name: "",
+  username: "",
+}
+
+const userSlice = createSlice({
+    name: 'userSlice',
+    initialState: initialStateUser,
+    reducers: {
+      set: (state, action: PayloadAction<User>) => state = action.payload,
+    }
+});
+
+const Store = configureStore({
+    reducer: {
+      notes: noteSlice.reducer,
+      users: userSlice.reducer,
+    }
+});
+
+type AppDispatch = typeof Store.dispatch;
+
+export { Store, type AppDispatch, userSlice, noteSlice, type Note }

src/User.tsx

@@ -0,0 +1,41 @@
+import { Button, TextField } from '@mui/material';
+import { Store, userSlice } from './Store';
+import { useSelector, useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+
+function UserBox() {
+    type AppDispatch = typeof Store.dispatch;
+    const dispatchUser = useDispatch<AppDispatch>();
+
+    useEffect(() => {
+        fetch('https://jsonplaceholder.typicode.com/users/10')
+          .then(response => response.json())
+          .then(data => {
+            const { set } = userSlice.actions;
+            let user = { name: data.name, username: data.username };
+            dispatchUser(set(user)); 
+          });
+    }, [dispatchUser]);
+
+    function clickHandler(): void {
+      fetch('https://jsonplaceholder.typicode.com/users/1')
+        .then(response => response.json())
+        .then(data => {
+          const { set } = userSlice.actions;
+          dispatchUser(set({ name: data.name, username: data.username })); 
+        });
+    }
+
+    type RootState = ReturnType<typeof Store.getState>;
+    const user = useSelector((state: RootState) => state.users);
+
+    return <>
+     <div className='box-user'>
+        <TextField label="Имя" variant="outlined" size='small' value={user.name} />
+        <TextField label="Логин" variant="outlined" size='small' value={user.username} />
+        <Button onClick={clickHandler} variant='contained'>получить данные</Button>
+      </div>  
+    </>    
+}
+
+export { UserBox }