diff --git a/pages/_app.tsx b/pages/_app.tsx index 4bb2a29..385d34d 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,16 +1,29 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import type { AppProps } from 'next/app'; +import { useRouter } from 'next/router'; import '~/styles/globals.css'; -const queryClient = new QueryClient(); - export default function App({ Component, pageProps }: AppProps) { return ( - +
+ - +
); } + +const BackButton = () => { + const router = useRouter(); + + return ( + + ); +}; diff --git a/pages/api/users/index.ts b/pages/api/users/index.ts index 73ee226..44de066 100644 --- a/pages/api/users/index.ts +++ b/pages/api/users/index.ts @@ -3,7 +3,7 @@ import { db } from '~/src/store/store'; export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === 'POST') { - const { name, email } = req.body; + const { name, email } = JSON.parse(req.body); if (!name || !email) { res.status(400).json({ error: 'Missing name or email' }); diff --git a/pages/index.tsx b/pages/index.tsx index 4ee7bd2..6043f05 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import Link from 'next/link'; import { useEffect, useState } from 'react'; import { Loader } from '~/src/components/Loader'; import { UserLine } from '~/src/components/UserLine'; @@ -11,42 +11,6 @@ const getUsers = async () => .then(UsersResponseSchema.parse); export default function Home() { - const { data, isLoading, isError } = useQuery({ - queryFn: getUsers, - queryKey: ['users'], - }); - - if (isLoading) { - return ; - } - - if (isError) { - return
Something went wrong
; - } - - return ( -
-

Users

-
    - {data.users.map((user) => ( - - ))} -
-
- ); -} - -// Without useQuery -// Et la on ne gère pas : -/** - * Cache management - * Error management (store error) - * Cancel request - * Retry request - * etc.. - */ - -const HomeTest = () => { const [users, setUsers] = useState([]); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); @@ -68,6 +32,9 @@ const HomeTest = () => { return (

Users

+ + New user + {isLoading && } {isError &&
Something went wrong
}
    @@ -77,4 +44,4 @@ const HomeTest = () => {
); -}; +} diff --git a/pages/posts/[postId].tsx b/pages/posts/[postId].tsx deleted file mode 100644 index f06eb1f..0000000 --- a/pages/posts/[postId].tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { Loader } from '~/src/components/Loader'; -import { PostResponseSchema } from '~/src/schema/post.schema'; -import { UserResponseSchema } from '~/src/schema/user.schema'; - -const getPosts = async (postId: string) => { - await new Promise((resolve) => setTimeout(resolve, 3000)); - return fetch(`/api/posts/${postId}`) - .then((res) => res.json()) - .then(PostResponseSchema.parse); -}; - -const getUser = (userId: string) => - fetch(`/api/users/${userId}`) - .then((res) => res.json()) - .then(UserResponseSchema.parse); - -export default function UserPage() { - const router = useRouter(); - - const postId = router.query.postId as string; - - const { data, isLoading, isError } = useQuery({ - queryKey: ['posts', postId], - queryFn: () => getPosts(postId), - }); - - const { - data: user, - isLoading: userLoading, - isError: userError, - } = useQuery({ - enabled: Boolean(data?.post.userId), - queryKey: ['users', data?.post.userId], - queryFn: () => getUser(postId), - }); - - if (isLoading) { - return ; - } - - if (isError) { - return
Something went wrong
; - } - - return ( -
-

{data.post.name}

- {userLoading && } - {userError &&
Something went wrong
} - {user && ( - - By {user.user.name} - - )} -
-

{data.post.content}

-
- ); -} diff --git a/pages/users/[userId]/index.tsx b/pages/users/[userId]/index.tsx deleted file mode 100644 index 252cfec..0000000 --- a/pages/users/[userId]/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { Loader } from '~/src/components/Loader'; -import { PostsResponseSchema } from '~/src/schema/post.schema'; -import { UserResponseSchema } from '~/src/schema/user.schema'; - -const getUser = (userId: string) => - fetch(`/api/users/${userId}`) - .then((res) => res.json()) - .then(UserResponseSchema.parse); - -const getUserPosts = (userId: string) => - fetch(`/api/users/${userId}/posts`) - .then((res) => res.json()) - .then(PostsResponseSchema.parse); - -export default function UserPage() { - const router = useRouter(); - - const userId = router.query.userId as string; - - const { data, isLoading, isError } = useQuery({ - queryKey: ['users', userId], - queryFn: () => getUser(userId), - }); - - const { - data: posts, - isLoading: postsLoading, - isError: postsError, - } = useQuery({ - enabled: !isLoading, - queryKey: ['users', userId, 'posts'], - queryFn: () => getUserPosts(userId), - }); - - if (isLoading) { - return ; - } - - if (isError) { - return
Something went wrong
; - } - - return ( -
-

{data.user.name}

-

{data.user.email}

-
-

Posts

-
    - {postsLoading && } - {postsError &&
    Something went wrong
    } - {posts?.posts.map((post) => ( -
  • - - {post.name} - -
    • - ))} -
-
- ); -} diff --git a/pages/users/new.tsx b/pages/users/new.tsx deleted file mode 100644 index f76cec9..0000000 --- a/pages/users/new.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function CreateUser() { - return
CreateUser
; -} diff --git a/src/components/Input.tsx b/src/components/Input.tsx new file mode 100644 index 0000000..f7eec69 --- /dev/null +++ b/src/components/Input.tsx @@ -0,0 +1,24 @@ +import { ComponentPropsWithoutRef } from 'react'; + +type InputProps = ComponentPropsWithoutRef<'input'> & { + label: string; +}; + +export const Input = ({ label, ...props }: InputProps) => { + return ( +
+ + +
+ ); +}; diff --git a/src/store/store.txt b/src/store/store.txt index 660456a..c626711 100644 --- a/src/store/store.txt +++ b/src/store/store.txt @@ -1 +1 @@ -{"users":[{"id":1,"name":"Jean","email":"jean@google.com"},{"id":2,"name":"Pascal","email":"pascal@google.com"},{"id":3,"name":"Melvyn","email":"melvyn@google.com"},{"id":4,"name":"Michel","email":"michel@google.com"},{"id":5,"name":"Macron","email":"macron@google.com"}],"posts":[{"id":1,"name":"Comment faires des courses","content":"Il y a 3 moyens pour faire des courses, mais c'est compliqué","userId":1},{"id":2,"name":"5 tips pour grandir","content":"Le meilleur moyen de grandir est de prendre ses responsabilité une fois pour toute et arrêter de faire l'enfant !","userId":1},{"id":3,"name":"5 astuces pour être plus fort","content":"On parle souvent de muscu, mais le muscle le plus important c'est la force mental padawan.","userId":2}]} \ No newline at end of file +{"users":[{"id":1,"name":"Jean","email":"jean@google.com"},{"id":2,"name":"Pascal","email":"pascal@google.com"},{"id":3,"name":"Melvyn","email":"melvyn@google.com"},{"id":4,"name":"Michel","email":"michel@google.com"},{"id":5,"name":"Macron","email":"macron@google.com"},{"id":6,"name":"Test vidéo","email":"testvideo@google.com"},{"id":7,"name":"Youtube","email":"youtube@google.com"},{"id":8,"name":"test","email":"test@gmail.com"},{"id":9,"name":"Test !!!!","email":"Bonsoir !!!"}],"posts":[{"id":1,"name":"Comment faires des courses","content":"Il y a 3 moyens pour faire des courses, mais c'est compliqué","userId":1},{"id":2,"name":"5 tips pour grandir","content":"Le meilleur moyen de grandir est de prendre ses responsabilité une fois pour toute et arrêter de faire l'enfant !","userId":1},{"id":3,"name":"5 astuces pour être plus fort","content":"On parle souvent de muscu, mais le muscle le plus important c'est la force mental padawan.","userId":2}]} \ No newline at end of file