React router

package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "4.28",
+    "@tanstack/react-query-devtools": "4.28",
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",

src/App.tsx

@@ -1,7 +1,13 @@
 import './App.css';
+import PostList from './react-query/PostList';
+import TodoList from './react-query/TodoList';
 
 function App() {
-  return <h1>React Starter Project</h1>;
+  return <>
+  <h1>React Starter Project</h1>
+  {/* <TodoList/> */}
+  <PostList/>
+  </>
 }
 
 export default App;

src/main.tsx

@@ -1,13 +1,28 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import App from './App';
 import './index.css';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 3,
+      cacheTime: 300000,
+      staleTime: 10000
+    }
+  }
+});
 ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 ).render(
   <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
     <App />
+    <ReactQueryDevtools/>
+    </QueryClientProvider>
+
   </React.StrictMode>
 );

src/react-query/PostList.tsx

@@ -1,34 +1,59 @@
-import axios from 'axios';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import usePosts from '../routing/hooks/usePosts';
 
-interface Post {
-  id: number;
-  title: string;
-  body: string;
-  userId: number;
-}
 
 const PostList = () => {
-  const [posts, setPosts] = useState<Post[]>([]);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    axios
-      .get('https://jsonplaceholder.typicode.com/posts')
-      .then((res) => setPosts(res.data))
-      .catch((error) => setError(error));
-  }, []);
-
-  if (error) return <p>{error}</p>;
+const [userId, setUserId] = useState<number>();
+const [page, setPage] = useState(1);
+const {data: posts, error, isLoading} = usePosts(userId, page);
+if (isLoading) return <p>Loading...</p>
+if (error) return <p>{error.message}</p>;
+console.log("data.length", posts.length)
+console.log("page,page)", page)
 
+const POSTS_PER_PAGE = 10; // Same as the _limit in the API request
   return (
-    <ul className="list-group">
-      {posts.map((post) => (
+    <>
+    <select
+      onChange={(event) => {
+        setUserId(parseInt(event.target.value));
+        setPage(1); // Reset to the first page when user changes
+      }
+      }
+      value={userId}
+     className='form-select mb-3'>
+      <option value="">Select a post</option>
+      <option value="1">User 1</option>
+      <option value="2">User 2</option>
+      <option value="3">User 3</option>
+    </select>
+      <ul className="list-group">
+      {posts?.map((post) => (
         <li key={post.id} className="list-group-item">
           {post.title}
         </li>
       ))}
     </ul>
+
+    <div className="d-flex justify-content-between mt-3">
+        <button
+          className="btn btn-primary"
+          onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
+          disabled={page === 1}
+        >
+          Previous
+        </button>
+        <span>Page {page}</span>
+        <button
+          className="btn btn-primary"
+          onClick={() => setPage((prev) => prev + 1)}
+          disabled={ (posts?.length ?? 0) < POSTS_PER_PAGE} // Disable if no more posts
+        >
+          Next
+        </button>
+      </div>
+    </>
+
   );
 };
 

src/react-query/TodoList.tsx

@@ -1,29 +1,35 @@
-import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import useTodos from '../routing/hooks/useTodos';
 
-interface Todo {
-  id: number;
-  title: string;
-  userId: number;
-  completed: boolean;
-}
 
-const TodoList = () => {
-  const [todos, setTodos] = useState<Todo[]>([]);
-  const [error, setError] = useState('');
 
-  useEffect(() => {
-    axios
-      .get('https://jsonplaceholder.typicode.com/todos')
-      .then((res) => setTodos(res.data))
-      .catch((error) => setError(error));
-  }, []);
+const TodoList = ()=> {
 
-  if (error) return <p>{error}</p>;
+  // const fetchTodos = () => 
+  //   axios
+  //     .get<Todo[]>('https://jsonplaceholder.typicode.com/todos')
+  //     .then((res) => 
+  //      res.data);
+  // query gets back an object with properties like data, error, isLoading, etc.
+  // we get autore fetch, auto retry and caching
+  const {data: todos, error, isLoading} = useTodos();
+
+  // const [todos, setTodos] = useState<Todo[]>([]);
+  // const [error, setError] = useState('');
+
+  // useEffect(() => {
+  //   axios
+  //     .get('https://jsonplaceholder.typicode.com/todos')
+  //     .then((res) => setTodos(res.data))
+  //     .catch((error) => setError(error));
+  // }, []);
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error?.message) return <p>{error.message}</p>;
 
   return (
     <ul className="list-group">
-      {todos.map((todo) => (
+      {todos?.map((todo) => (
         <li key={todo.id} className="list-group-item">
           {todo.title}
         </li>