14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page #58

anttiasmala · 2024-11-06T09:21:08Z

Login-sivuun lisätty Tanstack

…hing to show

…rary-index-file-toasts

…o format code

…ake user experience better. Changes in login.tsx

vercel · 2024-11-06T09:21:11Z

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	Jan 16, 2025 11:26am

pages/login.tsx

utils/apiRequests.ts

anttiasmala · 2024-11-06T09:40:23Z

TÄHÄN VASTATTU, TÄMÄ OK

Tämä saatta olla jo viides kerta kun kysyn branchien mergeämisestä / siihen liittyvästä tavasta, pahoittelut siitä.

Ajattelin tehdä nyt niin, että teen jokaisen sivun yksi kerrallaan omassa branchissa ja mergeän ne sitten tähän niin sanottuun "pääbranchiin". Huomasin, että helpottaa tosi paljon omaa hommaa, kun on monta "pientä" taskia vs yksi "jättitaski" 😄

Jatkanko tällä tavalla (Tanstack-taskin kohdalla pelkästään), että teen monta PR:ää mutta tosi pieniä niistä. Vai että mergeän omalla koneella kaikki pikkubranchit yhteen "pääbranchiin" (esim. antti/add-tanstack-library) ja teen sitten vain yhden PR:n?

Laitoin myöskin tämän branchin (antti/add-tanstack-library-login-page) menemään antti/add-tanstack-library-branchiin enkä main-branchiin. Ajattelin että mergeää sitten antti/add-tanstack-libraryn main-branchiin kun kaikki sivut on saatu tehtyä. Eli ns valmis branch

…-login-page

…quests and mutations for others

…rary-login-page

anttiasmala · 2025-01-09T10:54:05Z

pages/login.tsx

+              {isPending ? (
+                <Button
+                  type="submit"
+                  className="cursor-not-allowed bg-red-500"
+                  disabled
+                >
+                  Kirjaudutaan sisään
+                  <span className="loading-dots absolute" />
+                </Button>
+              ) : (
+                <Button type="submit">Kirjaudu sisään</Button>
+              )}


Tein tämmöisen pienen if/else-renderöinnin.

Jos kirjautumisyritys on tehty, tehdään seuraavat toimenpiteet:

estetään napin painaminen

vaihdetaan väri (ei välttämättä hyvä idea, mutta olkoon tässä alussa nyt näin)

laitetaan kursoriksi not-allowed, jotta käyttäjä tietää miksi klikkausta ei rekistöröidä (en tiedä onko tämä hyvä tapa)

Vaihdoin tekstiksi Kirjaudutaan sisään ja lisäsin spanin, jolla asetetaan "pistelatausindikaattori".

Syy absolute-classNamen käyttöön on se, että ilman sitä Kirjaudutaan sisään -teksti liikkui edestakaisin pisteiden mukaan. Se ei näyttänyt hyvältä 😅

Jos ei ole kirjauduttu niin sitten ihan tavallinen kirjautumisnappula näytetään 👍

Onko conditional rendering tässä tapauksessa ok vai olisiko hyvä tehdä esimerkiksi sisäinen komponentti kirjautumisnappulasta?

Conditional rendering on ihan ok, mutta yleensä ei renderöidä näissä tilanteissa kahta eri nappia vaan muutetaan propseja. Punainen ei myöskään ole hyvä väri, vaan disabloitu on yleensä harmaa. Lisäksi yleensä napin tekstiä ei muuteta, vaan nappi disabloidaan, muutetaan harmaaksi ja lisätään joku latausindikaattori (kolme pistettä, spinneri tms.)

Eli voisit tehdä esim. näin:

<Button type="submit" disabled={isLoading}> Kirjaudu sisään {isLoading && <span className="loading-dots absolute" />} </Button>

Sitten disablointityyliä ei kannata määrittää tässä, vaan Button-komponentissa, eli sinne lisäät classNameen disabled:bg-lighterGray disabled:text-middleGray missä korvaat lighterGray ja middleGray sopivilla disablointi-väreillä.

Tämä on hyvä, kiitos! 👍

Tästä Tailwindin disabled:iin en ollut törmännyt aiemmin. Se on näppärä 👍

Värien kanssa en ole ihan 100 varma että ovatko hyvät. Kommentoin sen kun oon pushannut 👍

Hyvältä näyttää!

shared/types.ts

pages/login.tsx

anttiasmala · 2025-01-09T11:13:29Z

pages/index.tsx

-          {isEditModalOpen && editModalGiftData && (
+          {editModalGiftData && isEditModalOpen && (
            <EditModal
              gift={editModalGiftData}
              setIsModalOpen={setIsEditModalOpen}
            />
          )}

-          {isDeleteModalOpen && deleteModalGiftData && (
+          {deleteModalGiftData && isDeleteModalOpen && (


Nämä kaksi muutosta liittyy ideaan, jossa poistetaan isDeleteModalOpen ja isEditModalOpen. Tieto siitä pitäisikö Modalin olla auki saadaan tarkistamalla sisältääkö esimerkiksi deleteModalGiftData tietoja vai ei

Jep tarkistus voidaan hyvin tehdä noin, mikä onkin järkevää ja yksinkertaistaa asioita. Muuttujien järjestyksen muuttaminen ei taida sitä kuitenkaan vielä tehdä?

Joo, ei toimi vielä. Voisin tehdä muokkauksen siihen branchiin, missä lisään Tanstackin EditModal ja DeleteModalille.

Vai onko tämä tarkistus parempi lisätä vasta Tanstackin jälkeen?

Voit tehdä siinä samassa branchissä missä lisäät Tanstackin modaaliin.

samuliasmala

Hyvin toimi jo nyt!

samuliasmala · 2025-01-14T19:34:02Z

pages/login.tsx

+              {isPending ? (
+                <Button
+                  type="submit"
+                  className="cursor-not-allowed bg-red-500"
+                  disabled
+                >
+                  Kirjaudutaan sisään
+                  <span className="loading-dots absolute" />
+                </Button>
+              ) : (
+                <Button type="submit">Kirjaudu sisään</Button>
+              )}


Conditional rendering on ihan ok, mutta yleensä ei renderöidä näissä tilanteissa kahta eri nappia vaan muutetaan propseja. Punainen ei myöskään ole hyvä väri, vaan disabloitu on yleensä harmaa. Lisäksi yleensä napin tekstiä ei muuteta, vaan nappi disabloidaan, muutetaan harmaaksi ja lisätään joku latausindikaattori (kolme pistettä, spinneri tms.)

Eli voisit tehdä esim. näin:

<Button type="submit" disabled={isLoading}> Kirjaudu sisään {isLoading && <span className="loading-dots absolute" />} </Button>

Sitten disablointityyliä ei kannata määrittää tässä, vaan Button-komponentissa, eli sinne lisäät classNameen disabled:bg-lighterGray disabled:text-middleGray missä korvaat lighterGray ja middleGray sopivilla disablointi-väreillä.

components/DeleteModal.tsx

samuliasmala · 2025-01-14T19:38:12Z

pages/index.tsx

-          {isEditModalOpen && editModalGiftData && (
+          {editModalGiftData && isEditModalOpen && (
            <EditModal
              gift={editModalGiftData}
              setIsModalOpen={setIsEditModalOpen}
            />
          )}

-          {isDeleteModalOpen && deleteModalGiftData && (
+          {deleteModalGiftData && isDeleteModalOpen && (


Jep tarkistus voidaan hyvin tehdä noin, mikä onkin järkevää ja yksinkertaistaa asioita. Muuttujien järjestyksen muuttaminen ei taida sitä kuitenkaan vielä tehdä?

shared/types.ts

pages/login.tsx

…e handleLogin function

anttiasmala · 2025-01-16T11:29:25Z

components/Button.tsx

-        `mt-6 w-full rounded-md border border-lines bg-primary p-2 text-lg font-medium text-white`,
+        `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`,


Ovatko nuo värit yhtään sinnepäinkään mitä niiden kuuluisi olla? 😅

Oikein hyvät! 👍

components/DeleteModal.tsx

anttiasmala · 2025-01-16T11:30:47Z

pages/login.tsx

+  const { mutateAsync, isPending, error } = useMutation({
+    mutationKey: QueryKeys.LOGIN,
+    mutationFn: async (loginCredentials: UserLoginDetails) =>
+      await axios.post('/api/auth/login', loginCredentials),
+    onSuccess: () => router.push('/'),
+  });
+
+  useShowErrorToast(error);


mutationFn saa nyt tarvittavat tiedot parametreina. Lisäsin näemmä myös useShowErrorToast(error) käsittelemään mahdolliset virheet

samuliasmala

Oikein hyvä! 👍 Valmis mergettäväksi.

anttiasmala added 7 commits November 1, 2024 22:36

Remove isModalOpen etc, now it will display the Modal if it has somet…

8eb5a44

…hing to show

Merge branch 'antti/add-tanstack-library' into antti/add-tanstack-lib…

5565314

…rary-index-file-toasts

Change loading-dots back to 3 dots and run Prettier inside the file t…

6d45f0e

…o format code

Lower the animation duration due to less keyframes

9475ceb

Apply stash to DeleteModal.tsx

b4f276c

Add useQuery. Add a handler for login. Add conditional rendering to m…

8fa0406

…ake user experience better. Changes in login.tsx

ESLint and fixes

26703ec

anttiasmala changed the title ~~Antti/add-tanstack-library login page~~ 14. Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page Nov 6, 2024

vercel bot deployed to Preview November 6, 2024 09:22 View deployment

anttiasmala commented Nov 6, 2024

View reviewed changes

pages/login.tsx Outdated Show resolved Hide resolved

anttiasmala commented Nov 6, 2024

View reviewed changes

pages/login.tsx Outdated Show resolved Hide resolved

anttiasmala commented Nov 6, 2024

View reviewed changes

utils/apiRequests.ts Outdated Show resolved Hide resolved

anttiasmala commented Nov 6, 2024

View reviewed changes

utils/apiRequests.ts Outdated Show resolved Hide resolved

anttiasmala requested a review from samuliasmala November 6, 2024 09:32

Remove unnecessary debug lines of code

7c61f4a

anttiasmala changed the title ~~14. Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page~~ 14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page Nov 7, 2024

anttiasmala added 8 commits November 27, 2024 13:09

Merge branch antti/add-tanstack-library to antti/add-tanstack-library…

251f168

…-login-page

Change queryKey and change handleLogin to be awaited during query

d997664

Merge branch antti/add-tanstack-library to antti/add-tanstack-library…

79bfec7

…-login-page

Change useQuery to useMutate. useQuery should be used only for GET-re…

319b087

…quests and mutations for others

Remove unnecessary lines and console.logs

72977d7

Remove try/catch block

b934a7e

Merge branch 'antti/add-tanstack-library' into antti/add-tanstack-lib…

cf85967

…rary-login-page

Add isModalOpen to make them work

df21970

anttiasmala changed the base branch from antti/add-tanstack-library to main December 29, 2024 22:11

anttiasmala added 3 commits January 9, 2025 12:24

Merge branch 'main' into antti/add-tanstack-library-login-page

44387b3

Fix import on useShowErrorToast

41f536e

Remove unnecessary comment

ed3b883

ESLint and fixes

d19f801

vercel bot deployed to Preview January 9, 2025 10:42 View deployment

anttiasmala commented Jan 9, 2025

View reviewed changes

shared/types.ts Show resolved Hide resolved

anttiasmala commented Jan 9, 2025

View reviewed changes

pages/login.tsx Outdated Show resolved Hide resolved

anttiasmala commented Jan 9, 2025

View reviewed changes

pages/login.tsx Outdated Show resolved Hide resolved

anttiasmala commented Jan 9, 2025

View reviewed changes

anttiasmala mentioned this pull request Jan 9, 2025

14.2 Tanstackin lisääminen rekistöröintisivulle | Antti/add-tanstack-library-register-page #61

Merged

samuliasmala requested changes Jan 14, 2025

View reviewed changes

anttiasmala added 5 commits January 16, 2025 11:41

Change Login button's rendering method

846bd68

Add different colors while button is disabled

6166fbc

Change DeleteModal to not close if deleting request fails

41e15fc

Change mutationFn to take login credentials as a parameter. Remove th…

7eb7bba

…e handleLogin function

Change mutateAsync to use validated email instead of useState email

13adf91

vercel bot deployed to Preview January 16, 2025 11:26 View deployment

anttiasmala commented Jan 16, 2025

View reviewed changes

components/DeleteModal.tsx Show resolved Hide resolved

anttiasmala commented Jan 16, 2025

View reviewed changes

anttiasmala requested a review from samuliasmala January 16, 2025 11:31

samuliasmala approved these changes Jan 17, 2025

View reviewed changes

anttiasmala merged commit fc3afed into main Jan 17, 2025
5 checks passed

anttiasmala deleted the antti/add-tanstack-library-login-page branch January 17, 2025 19:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page #58

14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page #58

anttiasmala commented Nov 6, 2024 •

edited

Loading

vercel bot commented Nov 6, 2024 •

edited

Loading

anttiasmala commented Nov 6, 2024 •

edited

Loading

anttiasmala Jan 9, 2025

samuliasmala Jan 14, 2025

anttiasmala Jan 16, 2025

samuliasmala Jan 17, 2025

anttiasmala Jan 9, 2025

samuliasmala Jan 14, 2025

anttiasmala Jan 16, 2025

samuliasmala Jan 17, 2025

samuliasmala left a comment

samuliasmala Jan 14, 2025

samuliasmala Jan 14, 2025

anttiasmala Jan 16, 2025

samuliasmala Jan 17, 2025

anttiasmala Jan 16, 2025

samuliasmala left a comment

		`mt-6 w-full rounded-md border border-lines bg-primary p-2 text-lg font-medium text-white`,
		`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`,

14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page #58

14.1 Login-sivun lisääminen Tanstackiin | Antti/add-tanstack-library-login-page #58

Conversation

anttiasmala commented Nov 6, 2024 • edited Loading

vercel bot commented Nov 6, 2024 • edited Loading

anttiasmala commented Nov 6, 2024 • edited Loading

TÄHÄN VASTATTU, TÄMÄ OK

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuliasmala left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuliasmala left a comment

Choose a reason for hiding this comment

anttiasmala commented Nov 6, 2024 •

edited

Loading

vercel bot commented Nov 6, 2024 •

edited

Loading

anttiasmala commented Nov 6, 2024 •

edited

Loading