14.4 Tanstack DeleteModalin ja EditModaliin | Antti/add-tanstack-library-delete-and-edit-modals

[anttiasmala]

Tanstackin lisääminen DeleteModal ja EditModaliin

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lahjalista	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 18, 2025 10:29am

[anttiasmala]

Onko tämä ok? errorWrapper on Button-komponentissa jo ja mutateAsync() on ainoa funktio joka ajetaan onClickissä joten asynciä ei pitäisi tarvita 🤔

[samuliasmala]

Koska Button-komponentissa on errorWrapper ei voidia tarvita, vaan tuon voisi laittaa vain onClick={() => mutateAsync()}. Mutta jos mutateAsync voi heittää virhee (kuten se voi) niin sitten on parempi käyttää try-catch blokkia kuten teit. errorWrapper on ikään kuin varmuuden vuoksi, sinne ei tietoisesti pitäisi laittaa virheitä kuten tässä kävisi esim. requestin epäonnistuttua.

Edit: Nyt kun lisäsit errorToastit errorWrapperiin, niin sitä voi halutessaan käyttää myös muuten kuin varmuuden vuoksi.

[anttiasmala]

Oon saattanut tämän kysyä jo useasti, mutta varmistan vielä jotten ymmärtänyt väärin 😄

Onko tämmöisessä tilanteessa tarpeellista pitää awaitia? Tämä on kuitenkin ainoa asia, mitä ajetaan onSubmit-funktiossa (esim. ei hoideta virheitä)

[anttiasmala]

Kyseisen rivin voinee lyhentää seuraavasti, mutta menee omasta mielestä liian vaikea lukuiseksi verrattuna tuohon mikä nyt on 😄

Suggested change

	<form onSubmit={(e) => errorWrapper(async () => await handleEdit(e))}>
	<form onSubmit={errorWrapper(handleEdit)}>

[samuliasmala]

Joo voi lyhentää noin jos haluaa. Vähän makuasia mistä tykkää, itse pidän ihan ok:na tuota lyhennettyä versiota.

Tässä <form onSubmit={(e) => errorWrapper(async () => await handleEdit(e))}> ei tarvitse awaitia. Edellinen on sama kuin

<form onSubmit={(e) => errorWrapper(async () => { return await handleEdit(e); } )}>

Se onko edellisessä await vai ei vaikutta missä virheet käsitellään, mutta koska tuossa yllä ei ole try-catch blokkia tässä tapauksessa eroa ei ole. Kannattaa lukea tämä await vs return vs return await artikkeli, se selventää.

[anttiasmala]

Artikkeli oli hyvä, kiitos siitä! 👍

[anttiasmala]

Lyhensin funktion näin. Onko tämä ok? Molemmat tavat sopivat itselle. Käytän lyhyempää tapaa vain funktioissa, jotka eivät ota argumentteja vastaan.

Esimerkiksi Tallenna-Buttonissa oleva onClick voitaisiin lyhentää
tähän

onClick={handleEdit}

alkuperäisestä

onClick={(e) => void handleEdit(e)}

Mutta jokseenkin tuon e:n näkeminen / sisäistäminen helpottaa

[samuliasmala]

Kannattaa tehdä itselle sopivalla tavalla. onClick-propsi on määritetty niin, että siihen annettua funktiota kutsutaan ja parametrina on event. Koska alemmassa tuo parametri välitetaan suoraan handleEdit funktiolle ovat nuo kaksi sun kirjoittamaa tapaa identtiset. Sen sijaan jos kirjoittaa

onClick={(e) => void handleEdit()}

onClick={() => void handleEdit()}

niin nyt event e ei välity handleEdit funktiolle.

[samuliasmala]

Eli sun ensimmäinen tapa toimii jos handleEdit saa pelkän eventin parametriksi. Joskus funktio voi saada muutakin, jolloin lyhyt tapa ei toimi vaan pitää kirjoittaa esim. näin:

onClick={(e) => void handleEdit(userId, e)}

[anttiasmala]

Joo. Nopealla testauksella helpompi ja huomattavasti nopeampi tapa lukea koodia itselle on se, että jos annetaan parametreja, "pidetään ne esillä":

onClick={(e) => void handleEdit(e)}

ja jos ei anneta parametreja voi silloin lyhentää

onClick={() => closeModal()}

->

onClick={closeModal}

Kiitos! 👍

[anttiasmala]

Laitoin try/catch-blockin takaisin. Ilman tätä sivu ei toiminut

[samuliasmala]

Sivun kyllä olisi pitänyt toimia, mutta virheiden tulla vain konsoliin ennen sun muutosta errorWrapper-funktioon. Nyt kun errorToastit on errorWrapperissä, niin halutessaan tästä voi poistaa try-catch blokin ja käsitellä virheet siellä (kunhan ei laita voidia, jos sitä käyttää niin promise "hukataan" eikä virheitä käsitellä).

[anttiasmala]

Oot oikeassa! Syy oli voidissa! Palautan tähän tuon vanhan tavan takaisin, tosin ilman voidia.

Eli seuraava

onClick={() => mutateAsync()}

[samuliasmala]

👍