14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page

components/Button.tsx

@@ -9,7 +9,7 @@ export function Button({
   return (
     <button
       className={twMerge(
-        `mt-6 w-full rounded-md border border-lines bg-primary p-2 text-lg font-medium text-white`,
+        `mt-6 w-full rounded-md border border-lines bg-primary p-2 text-lg font-medium text-white disabled:bg-gray-300 disabled:text-gray-500`,
         className,
       )}
       {...rest}

components/DeleteModal.tsx

@@ -18,14 +18,13 @@ export function DeleteModal({ gift, setIsModalOpen }: DeleteModal) {
   async function handleDeletion() {
     try {
       await deleteGift(gift.uuid);
+      setIsModalOpen(false);
     } catch (e) {
       handleErrorToast(handleError(e));
     }
     await queryClient.invalidateQueries({
       queryKey: QueryKeys.GIFTS,
     });
-
-    setIsModalOpen(false);
   }
 
   return (

pages/index.tsx

@@ -151,8 +151,8 @@ export default function Home({
 
 function GiftList() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [deleteModalGiftData, setDeleteModalGiftData] = useState<Gift>();
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deleteModalGiftData, setDeleteModalGiftData] = useState<Gift>();
   const [editModalGiftData, setEditModalGiftData] = useState<Gift>();
 
   const { error, isFetching, data: giftData } = useGetGifts();
@@ -203,14 +203,14 @@ function GiftList() {
               </div>
             </div>
           ))}
-          {isEditModalOpen && editModalGiftData && (
+          {editModalGiftData && isEditModalOpen && (
             <EditModal
               gift={editModalGiftData}
               setIsModalOpen={setIsEditModalOpen}
             />
           )}
 
-          {isDeleteModalOpen && deleteModalGiftData && (
+          {deleteModalGiftData && isDeleteModalOpen && (
             <DeleteModal
               gift={deleteModalGiftData}
               setIsModalOpen={setIsDeleteModalOpen}

pages/login.tsx

@@ -9,13 +9,15 @@ import { Logo } from '~/components/Logo';
 import { TitleText } from '~/components/TitleText';
 import SvgEyeOpen from '~/icons/eye_open';
 import SvgEyeSlash from '~/icons/eye_slash';
-import { UserLoginDetails } from '~/shared/types';
+import { QueryKeys, UserLoginDetails } from '~/shared/types';
 import { handleError } from '~/utils/handleError';
 import { emailSchema } from '~/shared/zodSchemas';
 import { Label } from '~/components/Label';
 import { GetServerSidePropsContext } from 'next';
 import { handleErrorToast } from '~/utils/handleToasts';
 import { ErrorParagraph } from '~/components/ErrorParagraph';
+import { useMutation } from '@tanstack/react-query';
+import { useShowErrorToast } from '~/hooks/useShowErrorToast';
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const cookieData = await validateRequest(context.req, context.res);
@@ -46,6 +48,15 @@ export default function Login() {
 
   const router = useRouter();
 
+  const { mutateAsync, isPending, error } = useMutation({
+    mutationKey: QueryKeys.LOGIN,
+    mutationFn: async (loginCredentials: UserLoginDetails) =>
+      await axios.post('/api/auth/login', loginCredentials),
+    onSuccess: () => router.push('/'),
+  });
+
+  useShowErrorToast(error);
+
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     try {
@@ -78,14 +89,11 @@ export default function Login() {
       if (errorFound) {
         return;
       }
-
-      const loginCredentials: UserLoginDetails = {
-        email: emailValidation.data || '',
-        password: password,
-        rememberMe: rememberMe,
-      };
-      await axios.post('/api/auth/login', loginCredentials);
-      await router.push('/');
+      await mutateAsync({
+        email: emailValidation.data ?? '',
+        password,
+        rememberMe,
+      });
     } catch (e) {
       console.error(e);
       handleErrorToast(handleError(e));
@@ -149,7 +157,11 @@ export default function Login() {
                   Muista minut
                 </Label>
               </div>
-              <Button type="submit">Kirjaudu sisään</Button>
+
+              <Button type="submit" disabled={isPending}>
+                Kirjaudu sisään{' '}
+                {isPending && <span className="loading-dots absolute" />}
+              </Button>
             </form>
             <p className={`mt-4 text-center text-xs text-gray-500`}>
               Ei vielä tunnuksia?{' '}

shared/types.ts

@@ -156,7 +156,7 @@ export type KeyboardEventKeys =
 
 export const QueryKeys = {
   GIFTS: ['gifts'],
-
+  LOGIN: ['login'],
   // ei vielä käytössä
   //GIFT_DETAILS: (uuid: string) => ['gifts', uuid],
 };