Avancement

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) => {

tp/tp4/src/Lists.js

 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>;

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>