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
+);
 
-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>
 
-Tässä toteutustapa:
+TODO:
 
-const sortedArrayNewestToOldest = gifts.sort(
-(a, b) =>
-new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-);
+1. Tee https://github.com/samuliasmala/lahjalista/pull/62#discussion_r1921024704 omaan branchiin
+
+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,6 +1,41 @@
 import { ButtonHTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+/**
+ * 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);
+    }
+  };
+}
+
 export function Button({
   children,
   className,

pages/index.tsx

@@ -1,5 +1,5 @@
 import React, { FormEvent, HTMLAttributes, useState } from 'react';
-import { Button } from '~/components/Button';
+import { Button, errorWrapper } from '~/components/Button';
 import { TitleText } from '~/components/TitleText';
 import { Input } from '../components/Input';
 import { DeleteModal } from '~/components/DeleteModal';
@@ -168,7 +168,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>;
@@ -270,13 +275,13 @@ 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={errorWrapper(async () => {
                 try {
-                  void mutateAsync();
+                  await mutateAsync();
                 } catch (e) {
                   handleErrorToast(handleError(e));
                 }
-              }}
+              })}
               disabled={isPending}
             >
               {' '}