Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 43aeb40b20 |
Generated
-11
@@ -8,7 +8,6 @@
|
|||||||
"name": "store-client",
|
"name": "store-client",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"immer": "^11.1.8",
|
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
@@ -2055,16 +2054,6 @@
|
|||||||
"node": ">= 4"
|
"node": ">= 4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/immer": {
|
|
||||||
"version": "11.1.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
|
|
||||||
"integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/immer"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/import-fresh": {
|
"node_modules/import-fresh": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||||
|
|||||||
+1
-2
@@ -4,13 +4,12 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"immer": "^11.1.8",
|
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
|
|||||||
+37
-42
@@ -1,49 +1,44 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
import { useMutation, QueryClientProvider, QueryClient } from '@tanstack/react-query'
|
||||||
import { produce } from 'immer'
|
import PostAddForm from './components/PostAddForm'
|
||||||
|
|
||||||
|
/*
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: newUser => {
|
||||||
|
fetch('https://jsonplaceholder.typicode.com/users', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {'Content-type':'application/json'},
|
||||||
|
body: JSON.stringify(newUser),
|
||||||
|
}).then(res => res.json())
|
||||||
|
}
|
||||||
|
})
|
||||||
|
*/
|
||||||
|
|
||||||
|
const createQueryClient = () => {
|
||||||
|
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 App() {
|
function App() {
|
||||||
const [tasks,setTasks] = useState([])
|
|
||||||
const [input,setInput] = useState('')
|
|
||||||
|
|
||||||
const addTask = () => {
|
|
||||||
if(!input.trim()) return
|
|
||||||
|
|
||||||
setTasks(currentTasks => produce(currentTasks, draft => {
|
|
||||||
draft.push({
|
|
||||||
id: Date.now(),
|
|
||||||
text: input.trim(),
|
|
||||||
done: false
|
|
||||||
})
|
|
||||||
}))
|
|
||||||
setInput('')
|
|
||||||
}
|
|
||||||
const toggleTask = id => {
|
|
||||||
setTasks(currentTask => produce(currentTask, draft => {
|
|
||||||
const task = draft.find(t => t.id === id)
|
|
||||||
if(task) {
|
|
||||||
task.done = !task.done
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
const removeTask = id => {
|
|
||||||
setTasks(currentTask => produce(currentTask, draft => {
|
|
||||||
const index = draft.findIndex(t => t.id === id)
|
|
||||||
if (index !== -1)
|
|
||||||
draft.splice(index,1)
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Практика по созданию списка задач</h1>
|
{/* Добавьте тестовый контент для проверки */}
|
||||||
<input value={input} onChange={e=>setInput(e.target.value)} />
|
<h1>Hello, React!</h1>
|
||||||
<button onClick={addTask}>Добавить</button>
|
<QueryClientProvider client={createQueryClient}>
|
||||||
<ul>{tasks.map(({id,text,done}) => (
|
<PostAddForm />
|
||||||
<li key={id} style={{ textDecoration: done ? 'line-through' : 'none'}}>
|
</QueryClientProvider>
|
||||||
<input type="checkbox" checked={done} onChange={()=> toggleTask(id)} />
|
|
||||||
{text}
|
|
||||||
<button onClick={() => removeTask(id)}>Удалить</button>
|
|
||||||
</li>
|
|
||||||
))}</ul>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
export function MyComponent() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>Hello</h1>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default MyComponent
|
|
||||||
@@ -4,5 +4,7 @@ import { createRoot } from 'react-dom/client'
|
|||||||
import App from './App.jsx'
|
import App from './App.jsx'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
<App />
|
<App />
|
||||||
|
</StrictMode>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user