From 7b00e119b6ed79d01c7bc59ce4d1ae0663e0bc7d Mon Sep 17 00:00:00 2001
From: Vincent Seyller <vseyller@laposte.net>
Date: Mon, 18 Jan 2021 13:22:41 +0100
Subject: [PATCH] Avancement
---
tp/tp4/src/Item.js | 17 ++++++++++-------
tp/tp4/src/Lists.js | 30 +++++++++++++++++++-----------
tp/tp4/src/TP4.js | 32 +++++++++++++++-----------------
3 files changed, 44 insertions(+), 35 deletions(-)
diff --git a/tp/tp4/src/Item.js b/tp/tp4/src/Item.js
index 6f989dffd..8381b3dca 100644
--- a/tp/tp4/src/Item.js
+++ b/tp/tp4/src/Item.js
@@ -4,7 +4,8 @@ import {useState} from 'react';
let Item = () => {
const queryCache = useQueryCache();
- let id = useParams().id;
+ let id = parseInt(useParams().id);
+
let fetchItems = async () =>{
let token = window.localStorage.getItem('token');
let res = await fetch("http://localhost:4200/list/" + id + "/items", {
@@ -32,8 +33,7 @@ let Item = () => {
headers: {
'Authorization': 'Bearer ' + window.localStorage.getItem('token'),
'Content-Type': 'application/json'
- },
- body: JSON.stringify(item)
+ }
});
}
@@ -58,11 +58,14 @@ let Item = () => {
onSuccess: () => {queryCache.invalidateQueries('Items')}
});
+ let lists = queryCache.getQueryData('Lists');
+ let list = lists.find(l => l.id === id);
+
return <div>
- <h1>Items of list</h1>
- {status ==='loading' && (<div>Loading data...</div>)}
- {status ==='error' && (<div>Error fetching data</div>)}
- {status ==='success' && (
+ <h1>Items of list {list.title}</h1>
+ {status === 'loading' && (<div>Loading data...</div>)}
+ {status === 'error' && (<div>Error fetching data</div>)}
+ {status === 'success' && (
<div>
<ul>
{data.map((item, idx) => {
diff --git a/tp/tp4/src/Lists.js b/tp/tp4/src/Lists.js
index e4dfe3ab9..71ef779d1 100644
--- a/tp/tp4/src/Lists.js
+++ b/tp/tp4/src/Lists.js
@@ -1,6 +1,7 @@
import {useQuery, useMutation, useQueryCache} from 'react-query';
import {useState} from 'react';
-import {useHistory} from 'react-router-dom';
+import {Route, useHistory} from 'react-router-dom';
+import Item from './Item'
let Lists = () => {
@@ -66,16 +67,23 @@ let Lists = () => {
{status ==='error' && (<div>Error fetching data</div>)}
{status ==='success' && (
<div>
- <ul>
- {data.map((list, idx) => {
- return <li key={idx}>
- {list.title}
- <button onClick={() => history.push("/list/" + list.id)}>Details</button>
- <button onClick={() => mutationDelete(list)}>Remove</button>
- </li>
- })}
- </ul>
- <AddListForm />
+ <Route path='/lists' exact>
+ <div>
+ <ul>
+ {data.map((list, idx) => {
+ return <li key={idx}>
+ {list.title}
+ <button onClick={() => history.push("/list/" + list.id)}>Details</button>
+ <button onClick={() => mutationDelete(list)}>Remove</button>
+ </li>
+ })}
+ </ul>
+ <AddListForm />
+ </div>
+ </Route>
+ <Route path='/list/:id'>
+ <Item />
+ </Route>
</div>
)}
</div>;
diff --git a/tp/tp4/src/TP4.js b/tp/tp4/src/TP4.js
index 2227607ef..48cb1acaf 100644
--- a/tp/tp4/src/TP4.js
+++ b/tp/tp4/src/TP4.js
@@ -5,12 +5,12 @@ import {
useHistory
} from 'react-router-dom';
-import {useEffect, useState} from 'react';
+import {useEffect, useState, lazy, Suspense} from 'react';
import Signin from './Signin'
import Signup from './Signup'
-import Lists from './Lists'
-import Item from './Item'
+
+const Lists = lazy(() => import('./Lists'));
let TP4 = () => {
let history = useHistory();
@@ -106,20 +106,18 @@ let TP4 = () => {
}
</ul>
</nav>
- <Switch>
- <Route path='/signin'>
- <Signin signin={signin}/>
- </Route>
- <Route path='/signup'>
- <Signup signup={signup}/>
- </Route>
- <Route path='/lists'>
- <Lists />
- </Route>
- <Route path='/list/:id'>
- <Item />
- </Route>
- </Switch>
+
+ <Switch>
+ <Route path='/signin'>
+ <Signin signin={signin}/>
+ </Route>
+ <Route path='/signup'>
+ <Signup signup={signup}/>
+ </Route>
+ <Suspense fallback={<div>Loading...</div>}>
+ <Lists />
+ </Suspense>
+ </Switch>
</div>
}
</div>
--
GitLab