Branch conflict

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 (
-    <QueryClientProvider client={queryClient}>
+    <div>
+      <BackButton />
       <Component {...pageProps} />
       <ReactQueryDevtools />
-    </QueryClientProvider>
+    </div>
   );
 }
+
+const BackButton = () => {
+  const router = useRouter();
+
+  return (
+    <button
+      type="button"
+      className="bg-blue-600 p-2 w-fit rounded-full"
+      onClick={() => router.back()}
+    >
+      Back
+    </button>
+  );
+};

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' });

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 <Loader />;
-  }
-
-  if (isError) {
-    return <div>Something went wrong</div>;
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-4xl font-bold">Users</h1>
-      <ul className="flex flex-col gap-2">
-        {data.users.map((user) => (
-          <UserLine key={user.id} user={user} />
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-// 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<User[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
@@ -68,6 +32,9 @@ const HomeTest = () => {
   return (
     <div className="flex flex-col gap-4">
       <h1 className="text-4xl font-bold">Users</h1>
+      <Link href="/users/new" className="bg-blue-600 p-2 w-fit rounded-full">
+        New user
+      </Link>
       {isLoading && <Loader />}
       {isError && <div>Something went wrong</div>}
       <ul className="flex flex-col gap-2">
@@ -77,4 +44,4 @@ const HomeTest = () => {
       </ul>
     </div>
   );
-};
+}

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 (
+    <div className="mb-6">
+      <label
+        htmlFor="default-input"
+        className="block mb-2 text-sm font-medium  text-white"
+      >
+        {label}
+      </label>
+      <input
+        type="text"
+        id="default-input"
+        className="border  text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+        {...props}
+      />
+    </div>
+  );
+};

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}]}
+{"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}]}