From 743de131d817ae667ee80042e04eabc909efa102 Mon Sep 17 00:00:00 2001 From: David Katrinka Date: Thu, 14 Aug 2025 18:34:58 +0200 Subject: [PATCH] more practice for interview --- package-lock.json | 27 +++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 19 +++++++++++++------ src/api/types.ts | 6 ++++++ src/api/users.ts | 14 ++++++++++++++ src/components/Header.tsx | 5 ++++- src/components/UserList.tsx | 23 +++++++++++++++++++++++ src/context/UserContext.ts | 7 +++++++ src/query/users.ts | 21 +++++++++++++++++++++ 9 files changed, 116 insertions(+), 7 deletions(-) create mode 100644 src/api/types.ts create mode 100644 src/api/users.ts create mode 100644 src/components/UserList.tsx create mode 100644 src/context/UserContext.ts create mode 100644 src/query/users.ts diff --git a/package-lock.json b/package-lock.json index bf296a9..c0304ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "reac-moment", "version": "0.0.0", "dependencies": { + "@tanstack/react-query": "^5.85.0", "axios": "^1.10.0", "react": "^19.1.0", "react-dom": "^19.1.0" @@ -1348,6 +1349,32 @@ "win32" ] }, + "node_modules/@tanstack/query-core": { + "version": "5.83.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.83.1.tgz", + "integrity": "sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.85.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.0.tgz", + "integrity": "sha512-t1HMfToVMGfwEJRya6GG7gbK0luZJd+9IySFNePL1BforU1F3LqQ3tBC2Rpvr88bOrlU6PXyMLgJD0Yzn4ztUw==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.83.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", diff --git a/package.json b/package.json index 6f99b05..87bb729 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@tanstack/react-query": "^5.85.0", "axios": "^1.10.0", "react": "^19.1.0", "react-dom": "^19.1.0" diff --git a/src/App.tsx b/src/App.tsx index fd25a87..08be310 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,13 +4,17 @@ import Header from './components/Header' import PostList from './components/PostList' import type { Post } from './components/types' import axios from 'axios' +import UserContext from './context/UserContext' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import UserList from './components/UserList' function App() { - + const [username, setUsername] = useState('david'); const [posts, setPosts] = useState([]); const [searchTerm, setSearchTerm] = useState(""); + const queryClient = new QueryClient; const fetchPosts = async () => { @@ -49,7 +53,7 @@ function App() { } ); - },[posts, searchTerm]); + }, [posts, searchTerm]); @@ -61,13 +65,16 @@ function App() { return ( - <> + + -
+
+ + - + + - ) } diff --git a/src/api/types.ts b/src/api/types.ts new file mode 100644 index 0000000..b91d1be --- /dev/null +++ b/src/api/types.ts @@ -0,0 +1,6 @@ +export interface User { + id: number, + name: string, + username: string, + email: string +} \ No newline at end of file diff --git a/src/api/users.ts b/src/api/users.ts new file mode 100644 index 0000000..44938b7 --- /dev/null +++ b/src/api/users.ts @@ -0,0 +1,14 @@ +import axios from "axios"; +import type { User } from "./types"; + +export const getUsersAPI = async () => { + const response = await axios.get('https://jsonplaceholder.typicode.com/users'); + + return response.data; +} + +export const getUser = async (id: number) => { + const response = await axios.get('https://jsonplaceholder.typicode.com/users/' + id); + + return response.data; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6cee6f8..33763ad 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,12 +1,15 @@ import Block from "./Block"; import type { HeaderProps } from "./types"; import styles from "./Header.module.css"; +import { useContext } from "react"; +import UserContext from "../context/UserContext"; function Header({setRefresh, searchTerm, setSearchTerm}:HeaderProps) { - + const user = useContext(UserContext); return ( + {user.username}
diff --git a/src/components/UserList.tsx b/src/components/UserList.tsx new file mode 100644 index 0000000..9ec45cf --- /dev/null +++ b/src/components/UserList.tsx @@ -0,0 +1,23 @@ +import { useUsers, useUser } from "../query/users"; +import Block from "./Block"; + +function UserList(){ + const {data, isLoading, isFetching} = useUsers(); + const {data: user1data, isLoading: user1Loading} = useUser(1); + + if(isLoading || user1Loading) + return
Loading...
+ + return( + +

User List

+ {data?.map(user =>

{user.username}

)} + +

USer info

+

{user1data?.email}

+ + ) +} + + +export default UserList; \ No newline at end of file diff --git a/src/context/UserContext.ts b/src/context/UserContext.ts new file mode 100644 index 0000000..3ccb255 --- /dev/null +++ b/src/context/UserContext.ts @@ -0,0 +1,7 @@ +import { createContext } from "react"; + +const UserContext = createContext({ + username: "david" +}) + +export default UserContext; \ No newline at end of file diff --git a/src/query/users.ts b/src/query/users.ts new file mode 100644 index 0000000..99ed9b4 --- /dev/null +++ b/src/query/users.ts @@ -0,0 +1,21 @@ +import { useQuery } from "@tanstack/react-query"; +import { getUser, getUsersAPI } from "../api/users"; + +export const useUsers = () => { + const { data, isFetching, isLoading } = useQuery({ + queryKey: ['users'], + queryFn: getUsersAPI + }); + + return {data, isFetching, isLoading}; +} + +export const useUser = (id: number) => { + const{data, isFetching, isLoading} = useQuery({ + queryKey: ['user', id], + queryFn: () => getUser(id) + }) + + return {data, isLoading, isFetching}; +} +