i dont know

src/App.jsx

@@ -1,78 +1,44 @@
-import { useState, createContext, useContext } from 'react'
+import { useMutation, QueryClientProvider, QueryClient } from '@tanstack/react-query'
-import styles from './App.module.scss'
+import PostAddForm from './components/PostAddForm'
 
-const UserContext = createContext('')
+/*
-
+const mutation = useMutation({
-function UserProvider({ children }) {
+    mutationFn: newUser => {
-    const [name,setName] = useState('');
+        fetch('https://jsonplaceholder.typicode.com/users', {
-    
+            method: 'GET',
-    const toggleName = (newName) => {
+            headers: {'Content-type':'application/json'},
-        setName(newName);
+            body: JSON.stringify(newUser),
+        }).then(res => res.json())
     }
-    
+})
-    return (
+*/
-        <UserContext.Provider value={{name, toggleName}}>
+
-            {children}
+const createQueryClient = () => {
-        </UserContext.Provider>
+    new QueryClient({
-    )
+        defaultOptions: {
+            queries: {
+                staleTime: 5 * 60*1000,
+                retry: 1,
+                gcTime: 10*60*1000,
+                refetchOnWindowFocus: false,
+            },
+            mutations: {
+                retry:0,
+                onError: error => {console.error('Mutation error:',error.message)}
+            }
+        }
+    })
 }
 
-function Form() {
+function App() {
-    const {name, toggleName} = useContext(UserContext)
-    const [newName,setNewName] = useState('');
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        toggleName(event.target[0].value)
-    }
-    const handlerChange = (event) => {
-        setNewName(event.target.value);
-    }
-    return (
-        <form onSubmit={handleSubmit}>
-        <input type='text' value={newName} onChange={handlerChange} />
-        <button type='submit'>Войти</button>
-        </form>
-    )
-}
-
-function ExitButton() {
-    const {name, toggleName} = useContext(UserContext)
-    
-    return (
-        <button onClick={() => toggleName('')}>Выход</button>
-    )
-}
-
-function Toolbar() {
-    const {name, toggleName} = useContext(UserContext)
-    return(
-        <div className={styles.container}>
-            <h3>Панель пользователя</h3>
-            {name && `Привет ${name}`}
-            {name ? <ExitButton /> : <Form /> }
-            
-        </div>
-    )
-}
-
-function Page() {
-    return (
-        <div>
-            <h1 style={{textAlign: 'center'}}>Главная страница</h1>
-            <Toolbar />
-        </div>
-    )
-}
-
-function App() {    
-    
 	return (
 		<>
 			{/* Добавьте тестовый контент для проверки */}
 			<h1>Hello, React!</h1>
-        <UserProvider>
+        <QueryClientProvider client={createQueryClient}>
-            <Page />
+            <PostAddForm />
-        </UserProvider>
+        </QueryClientProvider>
+            
 		</>
 	)
 }

src/App.module.scss

@@ -1,13 +0,0 @@
-.container {
-    height: 500px;
-    border: 1px solid black;
-    border-radius: 10px;
-    background-color: lightblue;
-}
-.item {
-    font-size: 16pt;
-    border: 1px dotted gray;
-    /*margin: 5px 10px;
-    padding: 10px;*/
-    border-radius: 5px;
-}