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

components/DeleteModal.tsx

@@ -1,36 +1,37 @@
-import { Dispatch, SetStateAction } from 'react';
 import { Gift } from '~/shared/types';
 import { Modal } from './Modal';
 import { Button } from './Button';
 import { deleteGift } from '~/utils/apiRequests';
 import { handleError } from '~/utils/handleError';
 import { handleErrorToast } from '~/utils/handleToasts';
+import { toast } from 'react-toastify';
 
 type DeleteModal = {
   gift: Gift;
   refreshGiftList: () => void;
-  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+  closeModal: () => void;
 };
 
 export function DeleteModal({
   gift,
   refreshGiftList,
-  setIsModalOpen,
+  closeModal,
 }: DeleteModal) {
   async function handleDeletion() {
     try {
+      closeModal();
+      toast('Test', { type: 'info' });
       await deleteGift(gift.uuid);
     } catch (e) {
       handleErrorToast(handleError(e));
     }
     refreshGiftList();
-    setIsModalOpen(false);
   }
 
   return (
     <Modal
       className="max-w-80"
-      closeModal={() => setIsModalOpen(false)}
+      closeModal={() => closeModal()}
       title="Poista lahja:"
     >
       <div className="max-w-80">
@@ -42,7 +43,7 @@ export function DeleteModal({
         <div className="mt-6 flex flex-row items-center justify-end">
           <Button
             className={`mb-6 mt-0 h-8 w-20 bg-white pb-1 pl-4 pr-4 pt-1 text-sm text-primaryText`}
-            onClick={() => setIsModalOpen(false)}
+            onClick={() => closeModal()}
             type="button"
           >
             Peruuta

components/EditModal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FormEvent, SetStateAction, useState } from 'react';
+import { FormEvent, useState } from 'react';
 import { Gift } from '~/shared/types';
 import { Modal } from './Modal';
 import { Button } from './Button';
@@ -10,14 +10,10 @@ import { handleErrorToast } from '~/utils/handleToasts';
 type EditModal = {
   gift: Gift;
   refreshGiftList: () => void;
-  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+  closeModal: () => void;
 };
 
-export function EditModal({
-  gift,
-  refreshGiftList,
-  setIsModalOpen,
-}: EditModal) {
+export function EditModal({ gift, refreshGiftList, closeModal }: EditModal) {
   const [giftReceiver, setGiftReceiver] = useState(gift.receiver);
   const [giftName, setGiftName] = useState(gift.gift);
 
@@ -29,12 +25,12 @@ export function EditModal({
       handleErrorToast(handleError(e));
     }
     refreshGiftList();
-    setIsModalOpen(false);
+    closeModal();
   }
   return (
     <Modal
       className="max-w-80"
-      closeModal={() => setIsModalOpen(false)}
+      closeModal={() => closeModal()}
       title="Muokkaa lahjaideaa:"
     >
       <form onSubmit={(e) => void handleEdit(e)}>
@@ -57,7 +53,7 @@ export function EditModal({
           <div className="mt-8 flex flex-row items-center justify-end">
             <Button
               className="mt-0 h-8 w-20 bg-white p-0 text-sm text-primaryText"
-              onClick={() => setIsModalOpen(false)}
+              onClick={() => closeModal()}
               type="button"
             >
               Peruuta

pages/index.tsx

@@ -206,9 +206,7 @@ function GiftList({
   giftData: Gift[];
   refreshGiftList: () => void;
 }) {
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [deleteModalGiftData, setDeleteModalGiftData] = useState<Gift>();
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [editModalGiftData, setEditModalGiftData] = useState<Gift>();
   const { isPending, isFetching, error } = giftQuery;
 
@@ -241,7 +239,6 @@ function GiftList({
                   className="trigger-underline col-start-2 row-start-1 mr-8 justify-self-end align-middle text-stone-600 hover:cursor-pointer"
                   onClick={() => {
                     setEditModalGiftData(giftItem);
-                    setIsEditModalOpen(true);
                   }}
                 />
 
@@ -252,25 +249,24 @@ function GiftList({
                   className="trigger-line-through col-start-2 row-start-1 justify-self-end align-middle text-stone-600 hover:cursor-pointer"
                   onClick={() => {
                     setDeleteModalGiftData(giftItem);
-                    setIsDeleteModalOpen(true);
                   }}
                 />
               </div>
             </div>
           ))}
-          {isEditModalOpen && editModalGiftData && (
+          {editModalGiftData && (
             <EditModal
+              closeModal={() => setEditModalGiftData(undefined)}
               gift={editModalGiftData}
               refreshGiftList={() => void refreshGiftList()}
-              setIsModalOpen={setIsEditModalOpen}
             />
           )}
 
-          {isDeleteModalOpen && deleteModalGiftData && (
+          {deleteModalGiftData && (
             <DeleteModal
+              closeModal={() => setDeleteModalGiftData(undefined)}
               gift={deleteModalGiftData}
               refreshGiftList={() => void refreshGiftList()}
-              setIsModalOpen={setIsDeleteModalOpen}
             />
           )}
         </div>

pages/login.tsx

@@ -16,6 +16,7 @@ import { Label } from '~/components/Label';
 import { GetServerSidePropsContext } from 'next';
 import { handleErrorToast } from '~/utils/handleToasts';
 import { ErrorParagraph } from '~/components/ErrorParagraph';
+import { useQuery } from '@tanstack/react-query';
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const cookieData = await validateRequest(context.req, context.res);
@@ -46,6 +47,12 @@ export default function Login() {
 
   const router = useRouter();
 
+  const loginQuery = useQuery({
+    queryKey: ['loginQuery'],
+    enabled: false,
+    queryFn: async () => handleLogin({ email, password, rememberMe }),
+  });
+
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     try {
@@ -79,17 +86,24 @@ export default function Login() {
         return;
       }
 
-      const loginCredentials: UserLoginDetails = {
-        email: emailValidation.data || '',
-        password: password,
-        rememberMe: rememberMe,
-      };
+      await loginQuery.refetch();
+    } catch (e) {
+      console.error(e);
+      handleErrorToast(handleError(e));
+    }
+  }
+
+  async function handleLogin(loginCredentials: UserLoginDetails) {
+    try {
       await axios.post('/api/auth/login', loginCredentials);
       await router.push('/');
     } catch (e) {
       console.error(e);
       handleErrorToast(handleError(e));
     }
+    // useQuery requires a return that IS NOT undefined
+    // more: https://github.com/TanStack/query/discussions/4457
+    return 'loginQuery';
   }
 
   const SvgEye = showPassword ? SvgEyeSlash : SvgEyeOpen;
@@ -149,7 +163,18 @@ export default function Login() {
                   Muista minut
                 </Label>
               </div>
-              <Button type="submit">Kirjaudu sisään</Button>
+              {loginQuery.isFetching ? (
+                <Button
+                  type="submit"
+                  className="cursor-not-allowed bg-red-500"
+                  disabled
+                >
+                  Kirjaudutaan sisään
+                  <span className="loading-dots absolute" />
+                </Button>
+              ) : (
+                <Button type="submit">Kirjaudu sisään</Button>
+              )}
             </form>
             <p className={`mt-4 text-center text-xs text-gray-500`}>
               Ei vielä tunnuksia?{' '}

styles/globals.css

@@ -11,28 +11,31 @@
 }
 
 /* Used everywhere where password inputs are */
-.input-enlarge-password-mask-character-size{
+.input-enlarge-password-mask-character-size {
   font-family: Arial, Helvetica, sans-serif !important;
 }
 
-
 /* Used when loading gifts inside /pages/index.tsx */
 .loading-dots:after {
-      display: inline-block;
-      animation: dotty steps(1,end) 5s infinite;
-      content: '';
-    }
-
-    @keyframes dotty {
-        0%   { content: '.'; }
-        10%   { content: '..'; }
-        20%   { content: '...'; }
-        30%   { content: '....'; }
-        40%   { content: '.....'; }
-        50%   { content: '......'; }
-        60%   { content: '.......'; }
-        70%   { content: '........'; }
-        80%   { content: '.........'; }
-        90%   { content: '..........'; }
-        100% { content: ''; }
-      }
+  display: inline-block;
+  animation: dotty steps(1, end) 1s infinite;
+  content: '';
+}
+
+@keyframes dotty {
+  0% {
+    content: '';
+  }
+  25% {
+    content: '.';
+  }
+  50% {
+    content: '..';
+  }
+  75% {
+    content: '...';
+  }
+  100% {
+    content: '';
+  }
+}

utils/apiRequests.ts

@@ -36,6 +36,8 @@ export async function createGift(newObject: CreateGift) {
  * @param newObject should be given parts of Gift object type that are wanted to be updated
  */
 export async function updateGift(uuid: string, newObject: Partial<Gift>) {
+  console.log('updateGift called');
+  await new Promise((r) => setTimeout(r, 1000));
   return (await axios.patch(`${giftsBaseUrl}/${uuid}`, newObject)).data as Gift;
 }
 
@@ -44,6 +46,8 @@ export async function updateGift(uuid: string, newObject: Partial<Gift>) {
  * @param uuid should be given the id of the gift that is wanted to be deleted
  */
 export async function deleteGift(uuid: string) {
+  console.log('deleteGift called');
+  await new Promise((r) => setTimeout(r, 1000));
   await axios.delete(`${giftsBaseUrl}/${uuid}`);
   return;
 }