Muokkaus-näppäin json-serveriin #9
Conversation
…es to be more clarifying which modal they're refering to. Created a new button for modifying the gift. Changed the way how jsonServerFunctions are exported.
…tionality in the edit button
…r more clarifying
…t should only get one gift due to IDs should be individual
…he correct object for updating it
…receiver as a first input
…e as the function itself. Removed an unnecessary check from the server if the gift that should be deleted exists. Added a catch method to check if got an error while deleting the gift
…> circleClassName in DeleteModal.tsx
…iftListRefreshFunction to refreshGiftList to match with the function name itself. Created a new useEffect to that takes key inputs. If ESC-key is pressed, closes the modal and refreshes the giftlist. Changed the way how gifts are getting updated. Added some basic styling into SVG images
…oves the input's cursor to the end
… cursor move to the end
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Muokkausnappula toimi hienost! 👍 Muutama koodin tyyliin liittyvä muutosehdotus.
Klikatessaan muokkaus-modalissa olevaa Input-elementtiä menee kursori tekstin eteen eikä taakse automaattisesti.
Mulla tämä toimii hienosti, eli kursori menee just siihen mihin hiirellä klikkaan.
components/EditModal.tsx
Outdated
| async function handleEdit(e: FormEvent<HTMLElement>) { | ||
| e.preventDefault(); | ||
|
|
||
| const newGift = gift; |
There was a problem hiding this comment.
Tässä newGift ei ole kopio vaan viittaa samaan objektiin muistissa. Sen seurauksena seuraavalla rivillä muokkaat alkuperäistä objektia eli muokkaat funktion parametria mikä ei ole hyvä, Täältä kannattaa lukea lisää value vs reference erosta, on tärkeä JavaScriptin käsite.
There was a problem hiding this comment.
Hyvä nosto! En edes tajunnut tuota!
const newGift = Object.assign({}, gift);
Tuo näyttäisi kopioivan, kun testailin. 👍
Edit: poistin lopulta tuon newGiftin, sitä ei pitäisi tarvita Patch-methodin takia 👍
There was a problem hiding this comment.
Jos kopioitava objekti ei sisällä sisäkkäisiä objekteja, niin silloin teen kopion näin (sama tulos kuin sun Object.assignilla):
const newGift = { ...gift};Jos taas kopioitavassa objektissa on sisäkkäisiä objekteja, niin ne eivät kopioidu tuolla. Silloin helpointa on käyttää structuredClone funktiota:
const newGift = structuredClone(gift);Mut tässä näitä ei tosiaan enää tarvitse, kun siirryit käyttämään patch-metodia.
…ng ESC will not refresh giftlist. Changed the way how updateGift gets its data. Added a try/catch block
components/DeleteModal.tsx
Outdated
| try { | ||
| await removeGift(gift.id); | ||
| } catch (e) { | ||
| console.log(e); |
There was a problem hiding this comment.
Tämä console.log on mielestäni tarpeeton, kun alla lokitetaan joka tapauksessa.
There was a problem hiding this comment.
Oli näköjään testi console.log jäänyt siihen 😅
components/EditModal.tsx
Outdated
| async function handleEdit(e: FormEvent<HTMLElement>) { | ||
| e.preventDefault(); | ||
|
|
||
| const newGift = gift; |
There was a problem hiding this comment.
Jos kopioitava objekti ei sisällä sisäkkäisiä objekteja, niin silloin teen kopion näin (sama tulos kuin sun Object.assignilla):
const newGift = { ...gift};Jos taas kopioitavassa objektissa on sisäkkäisiä objekteja, niin ne eivät kopioidu tuolla. Silloin helpointa on käyttää structuredClone funktiota:
const newGift = structuredClone(gift);Mut tässä näitä ei tosiaan enää tarvitse, kun siirryit käyttämään patch-metodia.
Muokkaus-nappula. Muutama lisäasia lisätty myös, kuten ESC-näppäin sulkee muokkaus-modalin. Klikatessaan muokkaus-modalissa olevaa Input-elementtiä menee kursori tekstin eteen eikä taakse automaattisesti. Myöskin jos lahjaa ei löydykkään palvelimelta, Axios-errorin ei pitäisi enää heittää fatal-erroria