14.3 Tanstackin lisääminen pääsivulle | Antti/add-tanstack-library-index-page

TODO.md

@@ -10,19 +10,19 @@
 
 # Enter-näppäimellä EditModalin ja DeleteModalin hyväksyminen
 
-### </IDEOITA>
+# Jos tulee virhe vaikka lahjoja hakiessa, ehkä jokin nappula olisi hyvä tehdä, jolla voisi mahdollisesti kokeilla hakea uudestaan lahjoja
 
-TODO:
+# Kun lisää uuden lahjan / kun lahjoja haetaan, järjestetään ne uusin -> vanhin. Myöhemmin voidaan lisätä käyttäjälle mahdollisuus valita miten lahjat haluaa järjestää (vaikka vanhin -> uusin, aakkosjärjestys, ymsyms)
 
-Lisää /pages/login.tsx:n Kirjaudu sisään -nappulaan "select-none" jottei teksti tule maalatuksi jos silmää painaa muutaman kerran liian nopeasti
+# Tässä toteutustapa:const sortedArrayNewestToOldest = gifts.sort((a, b) =>new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),);
 
-Jos tulee virhe vaikka lahjoja hakiessa, ehkä jokin nappula olisi hyvä tehdä, jolla voisi mahdollisesti kokeilla hakea uudestaan lahjoja
+# Tanstackin requesteihin joku maksimiaika mitä odotetaan
 
-Kun lisää uuden lahjan / kun lahjoja haetaan, järjestetään ne uusin -> vanhin. Myöhemmin voidaan lisätä käyttäjälle mahdollisuus valita miten lahjat haluaa järjestää (vaikka vanhin -> uusin, aakkosjärjestys, ymsyms)
+### </IDEOITA>
+
+TODO:
 
-Tässä toteutustapa:
+1. Tee https://github.com/samuliasmala/lahjalista/pull/62#discussion_r1921024704 omaan branchiin
 
-const sortedArrayNewestToOldest = gifts.sort(
-(a, b) =>
-new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-);
+2.1 Vaihda "Kirjaudu sisään"- ja "Luo käyttäjätunnus" -nappuloihin pyörivä spinner-indikaattori "..." sijaan
+2.2 Lisää /pages/login.tsx:n Kirjaudu sisään -nappulaan "select-none" jottei teksti tule maalatuksi jos silmää painaa muutaman kerran liian nopeasti

components/Button.tsx

@@ -1,13 +1,17 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { errorWrapper } from '~/utils/utilFunctions';
 
-export function Button({
-  children,
-  className,
-  ...rest
-}: ButtonHTMLAttributes<HTMLButtonElement>) {
+type ButtonProps = ComponentPropsWithoutRef<'button'> & {
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
+  ) => void | Promise<void>;
+};
+
+export function Button({ children, onClick, className, ...rest }: ButtonProps) {
   return (
     <button
+      onClick={onClick === undefined ? undefined : errorWrapper(onClick)}
       className={twMerge(
         `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,

pages/index.tsx

@@ -42,10 +42,6 @@ export default function Home({
       }),
   });
 
-  const { isFetching, error } = useGetGifts();
-
-  useShowErrorToast(error);
-
   const queryClient = useQueryClient();
 
   async function handleSubmit(e: FormEvent<HTMLElement>) {
@@ -140,7 +136,11 @@ export default function Home({
                   <div className="text-red-500">Lahjansaaja on pakollinen</div>
                 )}
               </div>
-              <Button type="submit" className="mt-8" disabled={isFetching}>
+              <Button
+                type="submit"
+                className="mt-8"
+                disabled={createGiftQuery.isPending}
+              >
                 Lisää
                 {createGiftQuery.isPending ? (
                   <span className="absolute p-1">
@@ -172,7 +172,12 @@ function GiftList() {
 
   if (isFetching)
     return (
-      <p className="loading-dots mt-4 text-lg font-bold">Noudetaan lahjoja</p>
+      <p className="mt-4 text-lg font-bold">
+        Noudetaan lahjoja{' '}
+        <span className="absolute ml-2 mt-1.5">
+          <SvgSpinner width={18} height={18} className="animate-spin" />
+        </span>
+      </p>
     );
 
   if (error) return <p className="mt-5 bg-red-500 text-lg">{error.message}</p>;
@@ -246,10 +251,15 @@ function UserDetailModal({
 }) {
   const router = useRouter();
 
+  const queryClient = useQueryClient();
+
   const { isPending, error, mutateAsync } = useMutation({
     mutationKey: QueryKeys.LOGOUT,
     mutationFn: async () => await axios.post('/api/auth/logout'),
-    onSuccess: () => router.push('/logout'),
+    onSuccess: () => {
+      queryClient.clear();
+      router.push('/logout').catch((e) => console.error(e));
+    },
   });
 
   useShowErrorToast(error);
@@ -274,9 +284,9 @@ function UserDetailModal({
           <div className="flex w-full justify-center">
             <Button
               className="mb-4 ml-3 mr-3 mt-4 flex h-8 w-full max-w-56 items-center justify-center rounded-md bg-primary text-sm font-medium"
-              onClick={() => {
+              onClick={async () => {
                 try {
-                  void mutateAsync();
+                  await mutateAsync();
                 } catch (e) {
                   handleErrorToast(handleError(e));
                 }

pages/login.tsx

@@ -16,7 +16,7 @@ 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 { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useShowErrorToast } from '~/hooks/useShowErrorToast';
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -48,11 +48,16 @@ export default function Login() {
 
   const router = useRouter();
 
+  const queryClient = useQueryClient();
+
   const { mutateAsync, isPending, error } = useMutation({
     mutationKey: QueryKeys.LOGIN,
     mutationFn: async (loginCredentials: UserLoginDetails) =>
       await axios.post('/api/auth/login', loginCredentials),
-    onSuccess: () => router.push('/'),
+    onSuccess: () => {
+      queryClient.clear();
+      router.push('/').catch((e) => console.error(e));
+    },
   });
 
   useShowErrorToast(error);

utils/utilFunctions.ts

@@ -10,3 +10,38 @@ export async function sleep(timeoutTimeInMs: number) {
 export function randomBoolean() {
   return !Math.round(Math.random());
 }
+
+/**
+ * A higher-order function that wraps a given function to handle both
+ * synchronous and asynchronous errors. Used to ensure that errors are
+ * caught in event handlers and other places where they would otherwise be
+ * uncaugh.
+ *
+ * @template A - The type of the arguments that the wrapped function accepts.
+ * @param {(...args: A) => Promise<void> | void} fn - The function to be
+ * wrapped. It can be either synchronous or asynchronous.
+ * @returns {(...args: A) => void} - A new function that wraps the original
+ * function and handles errors and returns a synchronous result.
+ *
+ * @example
+ * // Usage with an asynchronous function in click handler
+ * const handleClick = async () => { throw new Error('Asynchronous error'); };
+ *
+ * <Button onClick={errorWrapper(handleClick)}>Click me</Button>
+ */
+export function errorWrapper<A extends unknown[]>(
+  fn: (...args: A) => Promise<void> | void,
+): (...args: A) => void {
+  return (...args: A) => {
+    try {
+      const p = fn(...args);
+      // Check if the function returns a promise to catch async errors
+      if (p instanceof Promise)
+        p.catch((error: unknown) => {
+          console.error('Error thrown asynchronously', error);
+        });
+    } catch (error) {
+      console.error('Error thrown synchronously', error);
+    }
+  };
+}