();
+const [page, setPage] = useState(1);
+const {data: posts, error, isLoading} = usePosts(userId, page);
+if (isLoading) return Loading...
+if (error) return {error.message}
;
+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 (
-
- {posts.map((post) => (
+ <>
+ {
+ setUserId(parseInt(event.target.value));
+ setPage(1); // Reset to the first page when user changes
+ }
+ }
+ value={userId}
+ className='form-select mb-3'>
+ Select a post
+ User 1
+ User 2
+ User 3
+
+
+ {posts?.map((post) => (
{post.title}
))}
+
+
+ setPage((prev) => Math.max(prev - 1, 1))}
+ disabled={page === 1}
+ >
+ Previous
+
+ Page {page}
+ setPage((prev) => prev + 1)}
+ disabled={ (posts?.length ?? 0) < POSTS_PER_PAGE} // Disable if no more posts
+ >
+ Next
+
+
+
+
);
};
diff --git a/src/react-query/TodoList.tsx b/src/react-query/TodoList.tsx
index e397595d..14b52cb2 100644
--- a/src/react-query/TodoList.tsx
+++ b/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([]);
- 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 {error}
;
+ // const fetchTodos = () =>
+ // axios
+ // .get('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([]);
+ // const [error, setError] = useState('');
+
+ // useEffect(() => {
+ // axios
+ // .get('https://jsonplaceholder.typicode.com/todos')
+ // .then((res) => setTodos(res.data))
+ // .catch((error) => setError(error));
+ // }, []);
+
+ if (isLoading) return Loading...
;
+ if (error?.message) return {error.message}
;
return (
- {todos.map((todo) => (
+ {todos?.map((todo) => (
{todo.title}
diff --git a/src/routing/hooks/usePosts.ts b/src/routing/hooks/usePosts.ts
new file mode 100644
index 00000000..72c25659
--- /dev/null
+++ b/src/routing/hooks/usePosts.ts
@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+interface Post {
+ userId: number;
+ id: number;
+ title: string;
+ body: string;
+}
+
+const usePosts = (userId: number | undefined, page: number) => {
+ const fetchPosts = async (): Promise => {
+ const url = new URL('https://jsonplaceholder.typicode.com/posts')
+
+ // Add query parameters
+ if (userId !== undefined) {
+ url.searchParams.append('userId', userId.toString());
+ }
+
+ // pagination
+ url.searchParams.append('_page', page.toString());
+ url.searchParams.append('_limit', '10'); // Limit to 10 posts per page
+
+ const res = await fetch(url.toString());
+
+ if (!res.ok) {
+ // console.log("failed")
+ throw new Error(`Failed to fetch todos: ${res.statusText}`);
+ }
+ const data = await res.json();
+ // console.log(data)
+ return data as Post[];
+ };
+
+ return useQuery({
+ // need to take out
+ queryKey:['users',userId,'posts', page],
+ queryFn: fetchPosts,
+ // keepPreviousData: true, // Keep previous data while fetching new data
+ })
+}
+
+export default usePosts;
\ No newline at end of file
diff --git a/src/routing/hooks/useTodos.ts b/src/routing/hooks/useTodos.ts
new file mode 100644
index 00000000..2ce89a83
--- /dev/null
+++ b/src/routing/hooks/useTodos.ts
@@ -0,0 +1,28 @@
+import { useQuery } from "@tanstack/react-query";
+
+interface Todo {
+ id: number;
+ title: string;
+ userId: number;
+ completed: boolean;
+ }
+const useTodos = () => {
+ const fetchTodos = async (): Promise => {
+ const res = await fetch('https://jsonplaceholder.typicode.com/todos');
+ if (!res.ok) {
+ console.log("failed")
+ throw new Error(`Failed to fetch todos: ${res.statusText}`);
+ }
+ const data = await res.json();
+ console.log(data)
+ return data as Todo[];
+ };
+
+ return useQuery({
+ queryKey:['todos'],
+ queryFn: fetchTodos,
+ })
+
+}
+
+export default useTodos;
\ No newline at end of file