Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 43aeb40b20 |
+31
-37
@@ -1,50 +1,44 @@
|
|||||||
import { useState, useReducer } from 'react'
|
import { useMutation, QueryClientProvider, QueryClient } from '@tanstack/react-query'
|
||||||
|
import PostAddForm from './components/PostAddForm'
|
||||||
|
|
||||||
function counterReducer(state, action) {
|
/*
|
||||||
switch (action.type) {
|
const mutation = useMutation({
|
||||||
case 'increment':
|
mutationFn: newUser => {
|
||||||
return state + 1
|
fetch('https://jsonplaceholder.typicode.com/users', {
|
||||||
case 'decrement':
|
method: 'GET',
|
||||||
return state - 1
|
headers: {'Content-type':'application/json'},
|
||||||
case 'reset':
|
body: JSON.stringify(newUser),
|
||||||
return 0
|
}).then(res => res.json())
|
||||||
case 'set_value':
|
|
||||||
return action.value
|
|
||||||
default:
|
|
||||||
return state
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
*/
|
||||||
|
|
||||||
function Counter() {
|
const createQueryClient = () => {
|
||||||
const [count, dispatch] = useReducer(counterReducer,0);
|
new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
return (
|
queries: {
|
||||||
<div>
|
staleTime: 5 * 60*1000,
|
||||||
<span>Счетчик: {count}</span>
|
retry: 1,
|
||||||
<button onClick={()=> dispatch({type: 'increment'})}>+</button>
|
gcTime: 10*60*1000,
|
||||||
<button onClick={()=> dispatch({type: 'decrement'})}>-</button>
|
refetchOnWindowFocus: false,
|
||||||
<button onClick={()=> dispatch({type: 'reset'})}>reset</button>
|
},
|
||||||
<button onClick={()=> dispatch({type: 'set_value', value: 5})}>set 5</button>
|
mutations: {
|
||||||
</div>
|
retry:0,
|
||||||
)
|
onError: error => {console.error('Mutation error:',error.message)}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [tasks, setTasks] = useState([])
|
|
||||||
const [filter, setFilter] = useState('all')
|
|
||||||
const [sortBy,setSortBy] = useState('date')
|
|
||||||
|
|
||||||
const addTask = newTask => {
|
|
||||||
setTasks([...tasks,newTask])
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Добавьте тестовый контент для проверки */}
|
{/* Добавьте тестовый контент для проверки */}
|
||||||
<h1>Hello, React!</h1>
|
<h1>Hello, React!</h1>
|
||||||
<Counter />
|
<QueryClientProvider client={createQueryClient}>
|
||||||
|
<PostAddForm />
|
||||||
|
</QueryClientProvider>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +0,0 @@
|
|||||||
.container {
|
|
||||||
/* display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: nowrap;*/
|
|
||||||
height: 500px;
|
|
||||||
overflow: auto;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
font-size: 16pt;
|
|
||||||
border: 1px dotted gray;
|
|
||||||
/*margin: 5px 10px;
|
|
||||||
padding: 10px;*/
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user