Toast-ilmoitusten ajan nollaaminen | Antti/toast reset timer on hover

[anttiasmala]

Toastien ajan nollaamisen toteutus. Näin tuon ominaisuuden Bitwardenin toasteissa. Tykkäsin ideasta, joten halusin kokeilla lisätä itsekin sen.

react-toastify ei näyttäisi tukevan onHover-eventtiä, joten toteutin "itse". En löytänyt mitään ohjeita / toteutustapaa netistä tähän liittyen, joten tämä luultavasti on aika hirveän näköinen mutta katsotaan 🤣

Maininta kommentissa: #35 (comment)

[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	Oct 26, 2024 2:53pm

[anttiasmala]

Onko tämä tarpeellinen tsekkaus?

Puhuttiin silloin serverin puolen rendauksesta, eikö se voi tapahtua tätä funktiota kutsuessa? Silloinhan document ei pitäisi olla olemassa.

Jos tämä tsekkaus säilytetään, vaihtaisin paikkaa rivin 20 generatedToastID:n kanssa, jotta turhaan ei generoi ID:tä, jos sitä ei voidakaan käyttää. Käytännössä lienee turha muokkaus

[samuliasmala]

Tsekkaus ei ole tarpeellinen, koska handleErrorToast funktiota ei koskaan kutsuta serverillä.

[anttiasmala]

Varmistan vielä että ymmärsin oikein. Eli jos handleErrorToast kutsuttaisiinkin backendissä, silloin tarkistus on tarpeellinen?

Toinen kysymys vielä joka ei tähän varsinaisesti liity. Mutta useEffect-funktiota .tsx-päätteisissä tiedostoissa ei ajeta serverillä koskaan, jonka takia esimerkiksi seuraavia tsekkauksia ei tarvitse tehdä:

useEffect(() => {
   if(window){
   // code   
}
  }, []);

tai

useEffect(() => {
   if(document){
   // code   
}
  }, []);

window ja document ovat vain client-puolen funktioita / classeja / objekteja / tai millä nimellä kutsutaankaan

[samuliasmala]

Varmistan vielä että ymmärsin oikein. Eli jos handleErrorToast kutsuttaisiinkin backendissä, silloin tarkistus on tarpeellinen?

Kyllä, juurikin näin.

Toinen kysymys vielä joka ei tähän varsinaisesti liity. Mutta useEffect-funktiota .tsx-päätteisissä tiedostoissa ei ajeta serverillä koskaan, jonka takia esimerkiksi seuraavia tsekkauksia ei tarvitse tehdä:

useEffect(() => {
   if(window){
   // code   
}
  }, []);

tai

useEffect(() => {
   if(document){
   // code   
}
  }, []);

window ja document ovat vain client-puolen funktioita / classeja / objekteja / tai millä nimellä kutsutaankaan

Jep window ja document ovat objekteja jotka on määritetty cain client-puolella. Mutta koska useEffect kuten myös kaikki onClick handlerit ajetaan vain client-puolella niissä tarkistusta ei tarvitse tehdä.

[samuliasmala]

Tsekkaus ei ole tarpeellinen, koska handleErrorToast funktiota ei koskaan kutsuta serverillä.

[samuliasmala]

@anttiasmala Mun ehdotukset window.crypto.randomUUID:n käyttämiseksi ja handleErrorToast` muuttamiseksi olivat vain huomioita. Sun toteutus oli hyvä ja toimii joten ei tarvitse tehdä mitään muutoksia.

[anttiasmala]

@anttiasmala Mun ehdotukset window.crypto.randomUUID:n käyttämiseksi ja handleErrorToast` muuttamiseksi olivat vain huomioita. Sun toteutus oli hyvä ja toimii joten ei tarvitse tehdä mitään muutoksia.

Mun mielestä sun idea oli parempi! 👍

Jätin kuitenkin Toastien ID:n käyttämään meidän omaa tapaa (window.crypto.randomUUID()), koska se tuntuu hiukan paremmalta omaan makuun kuin mikä Toasteissa oletuksena on

Mergesin samalla main-branchin tähän 👍

[samuliasmala]

Hyvin toimii! 👍

[anttiasmala]

Valmista, mergetään!