diff --git a/.gitignore b/.gitignore index 71ff1deca1b44dace125ae6f30e6992287fef7c7..81ffe0dc962b101957a09d3365d1b65beeaac867 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,25 @@ /tp/npm-debug.log* /tp/yarn-debug.log* /tp/yarn-error.log* + +# dependencies +/tp/tp4/node_modules +/tp/tp4/.pnp +/tp/tp4/.pnp.js + +# testing +/tp/tp4/coverage + +# production +/tp/tp4/build + +# misc +/tp/tp4/.DS_Store +/tp/tp4/.env.local +/tp/tp4/.env.development.local +/tp/tp4/.env.test.local +/tp/tp4/.env.production.local + +/tp/tp4/npm-debug.log* +/tp/tp4/yarn-debug.log* +/tp/tp4/yarn-error.log* diff --git a/tp/tp4/src/Item.js b/tp/tp4/src/Item.js index 5386bcb884055a31cc55a3c420237d9259bfb6f6..6f989dffd5b68e2c740f5f4425fcc167b19066bd 100644 --- a/tp/tp4/src/Item.js +++ b/tp/tp4/src/Item.js @@ -1,8 +1,9 @@ -import {useQuery, useMutation} from 'react-query'; +import {useQuery, useMutation, useQueryCache} from 'react-query'; import {useParams} from 'react-router-dom'; import {useState} from 'react'; let Item = () => { + const queryCache = useQueryCache(); let id = useParams().id; let fetchItems = async () =>{ let token = window.localStorage.getItem('token'); @@ -38,23 +39,27 @@ let Item = () => { let AddItemForm = () => { let [text, setText] = useState(""); - const [mutationCreate] = useMutation((item) => createItem(item)); - const onSubmit = event => { + const [mutationCreate] = useMutation(createItem, { + onSuccess: () => {queryCache.invalidateQueries('Items')} + }); + const handleSubmit = event => { event.preventDefault(); mutationCreate({ text: text }); }; - return <form onSubmit={onSubmit}> + return <form onSubmit={handleSubmit}> <input type="text" onChange={(e)=>{setText(e.target.value)}}/> <input type="submit" value="Add"/> </form>; }; const {data, status} = useQuery('Items', fetchItems); - const [mutationDelete] = useMutation((item) => deleteItem(item)); + const [mutationDelete] = useMutation(deleteItem, { + onSuccess: () => {queryCache.invalidateQueries('Items')} + }); return <div> - <h1>Items</h1> + <h1>Items of list</h1> {status ==='loading' && (<div>Loading data...</div>)} {status ==='error' && (<div>Error fetching data</div>)} {status ==='success' && ( diff --git a/tp/tp4/src/Lists.js b/tp/tp4/src/Lists.js index 2cf14fd661d67351fdfda5a30480111e9a186026..e4dfe3ab9ff1e1ea5a44ee08b94e7d1d86788b18 100644 --- a/tp/tp4/src/Lists.js +++ b/tp/tp4/src/Lists.js @@ -1,8 +1,10 @@ -import {useQuery, useMutation} from 'react-query'; +import {useQuery, useMutation, useQueryCache} from 'react-query'; import {useState} from 'react'; import {useHistory} from 'react-router-dom'; let Lists = () => { + + const queryCache = useQueryCache(); let createList = list => { return fetch("http://localhost:4200/list", { @@ -28,19 +30,21 @@ let Lists = () => { let AddListForm = () => { let [title, setTitle] = useState(""); - const [mutationCreate] = useMutation((list) => createList(list)); - const onSubmit = event => { + const [mutationCreate] = useMutation(createList, { + onSuccess: () => {queryCache.invalidateQueries('Lists')} + }); + const handleSubmit = event => { event.preventDefault(); mutationCreate({ title: title }); }; - return <form onSubmit={onSubmit}> + return <form onSubmit={handleSubmit}> <input type="text" onChange={(e)=>{setTitle(e.target.value)}}/> <input type="submit" value="Add"/> </form>; }; - let fetchList = async() =>{ + let fetchList = async () =>{ let token = window.localStorage.getItem('token'); let res = await fetch("http://localhost:4200/list", { headers: { @@ -51,7 +55,9 @@ let Lists = () => { }; const {data, status} = useQuery('Lists', fetchList); - const [mutationDelete] = useMutation((list) => deleteList(list)); + const [mutationDelete] = useMutation(deleteList, { + onSuccess: () => queryCache.invalidateQueries('Lists') + }); let history = useHistory(); return <div>