Antti/modal #2

anttiasmala · 2023-10-25T07:53:43Z

Ensimmäinen prototyyppi modalista tehty.

…heck for type

…ibute to SVG elements"

…fresh giftList.

…el buttons changes color when mouse is on the element

….svg file

…r is on the accept button

…ponent

… index.tsx from Modal.tsx

…clineModal.tsx

…nged DeleteModal to appear only once when opened in index.tsxinstead of number of gifts

vercel · 2023-10-25T07:53:51Z

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	Dec 19, 2023 8:30am

anttiasmala · 2023-10-25T08:00:22Z

Näköjään tuo TODO.md tuli mukana, vaikka laitoin sen .gitignore-tiedostoon. Eipä siinä mitään salaista ole 😄

Committin tekstejä ei taida pystyä enää jälkikäteen muuttamaan? Huomasin, että olin huonosti laittanut tuon yhden commitin "Changed AcceptDeclineModal to DeleteModal". Kysessä oli .tsx-tiedoston nimen vaihtaminen, tuosta ainakin itse saan käsityksen, että ainoastaan komponentin nimi vaihtui

…ng packages in antti/modal branch

…cline buttons to *_button-icon.svg. Created React components from SVG images

…anged styling of the buttons a bit

samuliasmala · 2023-11-19T11:19:53Z

Näköjään tuo TODO.md tuli mukana, vaikka laitoin sen .gitignore-tiedostoon. Eipä siinä mitään salaista ole 😄

Luultavasti lisäsit sen committiin mukaan ennen kuin muokkasit .gitignorea.

Committin tekstejä ei taida pystyä enää jälkikäteen muuttamaan? Huomasin, että olin huonosti laittanut tuon yhden commitin "Changed AcceptDeclineModal to DeleteModal". Kysessä oli .tsx-tiedoston nimen vaihtaminen, tuosta ainakin itse saan käsityksen, että ainoastaan komponentin nimi vaihtui

git rebase ja git amend komennoilla commitin tekstiä voi muuttaa, mutta em. komennon käyttö korvaa muutettavan commitin ja kaikki sen jälkeen tulevat commitit uusilla, joten jos commitit on jo pushattu repoon pitää ne force pushata sinne. Ja jos joku on jo ehtinyt pullaamaan ne, niin tulee konflikteja --> em. komentoja on syytä käyttää vain committeihin, joita ei ole vielä pushannut.

samuliasmala · 2023-11-19T11:58:28Z

Olisiko järkevämpää heti alusta asti tehdä esimerkiksi tästä DeleteModal:sta "globaali", elikkä että sitä voisi käyttä muissa tilanteissa tässä projektissa myös?

Toistaiseksi ei. Sitten jos myöhemmin tulee tarve toiselle vastaavalle, niin voi miettiä siirtääkö joitakin osia DeleteModal:ista yhteiseen ConfirmModal tms. komponenttiin. Mutta yleensä ei kannata kovin paljon tehdä etukäteen vaan vasta kun tarve tulee.

Tämä components/DeleteModal.tsx on toimiva vain tässä lahjaidean poistamisessa eikä se toimi missään muussa tilanteessa.

Onko tämä ihan okei, vai pitäisikö tuosta tehdä "globaali" vaihtamalla esim gift-proppi --> data jne?
Nykyinen on ok.

Jos tuo on ihan okei, että DeleteModal.tsx toimii vain lahjaidean poistamisessa, pitäisikö sille tehdä oma folderi tuonne components-kansion sisään? Esim: components/lahjaidea/DeleteModal.tsx tai muu vastaava, jotta tietää missä DeleteModal.tsx on käytössä / missä se toimii pelkästään?

Ei kannata, nykyinen hakemistorakenne on hyvä.

Esimerkiksi tuo components/Modal.tsx on "globaali" jo nyt, sillä data tulee children-propsina ja kahdelle containerille voi antaa tyylit tarvittaessa className-propsina.

Hmm, onkohan sulla jäänyt pushaamatta jotain? Ainakaan repossa olevassa versiossa tyylejä ei voi antaa className propin avulla.

samuliasmala

Alla joitakin kommentteja. Tuo antti/modal_github-action-error-fix minkä meinasit toisessa PR:ssä mergetä lokaalisti taitaa olla vielä pushaama repoon?

components/Modal.tsx

components/DeleteModal.tsx

samuliasmala · 2023-11-19T11:48:41Z

components/DeleteModal.tsx

+        {dataToDeleteInfo}
+      </p>
+      <AcceptButtonSVG
+        alt="acceptButton"


alt-tekstin on tarkoitus korvata kuva jos kuvaa ei jostain syystä voi näyttää (nettiongelma, näkövammaiset), joten Parempi teksti tähän olisi ihmisen luettavaksi tehty esim. "Accept deletion".

samuliasmala · 2023-11-19T11:49:02Z

components/DeleteModal.tsx

+        }
+      />
+      <DeclineButtonSVG
+        alt="declineButton"


Tämä teksti voisi olla esim "Cancel"

pages/index.tsx

components/DeleteModal.tsx

anttiasmala · 2023-11-29T08:14:55Z

Hmm, onkohan sulla jäänyt pushaamatta jotain? Ainakaan repossa olevassa versiossa tyylejä ei voi antaa className propin avulla.

Oli jäänyt pushaamatta ja tuo versio, jossa propeilla pystyy antamaan className:lle arvoja onkin tehty tuonne antti/json-server -branchiin. Katson tuon vaikka Merge-vaiheessa, että onko tarpeellinen, luulen että ei.

…r undefined values

…to prevent issues

svg-icons/accept_button-icon.svg

svg-icons/decline_button-icon.svg

components/DeleteModal.tsx

pages/index.tsx

samuliasmala · 2023-12-18T07:29:30Z

icons/accept_button_icon.tsx

+type AcceptButtonType = SVGProps<SVGSVGElement> & {
+  backgroundFill?: string;
+  checkmarkFill?: string;
+};


Nyt svgr:n generoimaa koodia on muokattu lisäämällä custom-propit. Sikäli huono, että aina kun ajaa npm run svgr nuo häviävät ja pitää olla varovainen ettei niitä commitoi. @aleksiasmala olisiko sulla joku idea miten tämä kannattaisi tehdä?

Tätä pitää vielä miettiä voisiko jotenkin parantaa, mutta tehdään se myöhemmin.

…components. Changed the way how hovering buttons changes color

…anged the way how gifts' line-through works. Deleted DeleteModalConditionalRendering component. Added couple conditional checks for the DeleteModal render

…mages/icons

…not needed

samuliasmala

Nyt näyttää erinomaiselta! Nämä viimeisimmät muutokset selkeyttivät koodia merkittävästi! 👍

Antti Asmala added 20 commits October 19, 2023 13:37

Created a Modal.tsx file

e11def3

Adding code to Modal.tsx. Added type and the exportable function

3130737

Adding code to Modal.tsx. Added Button component, an useState and a c…

a995269

…heck for type

Refactoring index.tsx. Added rest frontend code to Modal.tsx

1814eb3

Refactoring index.tsx. Changed Button component to Modal component

7de98f6

Modified Modal.tsx. Added handleDeletion function. Added onClick attr…

ac9dc23

…ibute to SVG elements"

Refactoring index.tsx and Modal.tsx. Added an optional function to re…

78a87a2

…fresh giftList.

Refactoring index.tsx and Modal.tsx. Ran ESLint fix. Confirm and canc…

1527320

…el buttons changes color when mouse is on the element

Created images/icons folder inside public folder. Added accept_button…

1b06a7a

….svg file

Refactoring Modal.tsx. Created an own component for an SVG image

d801d96

Refactoring Modal.tsx. Added functionality to change color when curso…

d13e2dc

…r is on the accept button

Added an SVG image of decline button

0a3158c

Refactoring Modal.tsx. Changed SVG HTML element to decline button com…

1cd5af0

…ponent

Refactoring index.tsx and Modal.tsx. Moved delete button component to…

50eef54

… index.tsx from Modal.tsx

Refactoring index.tsx and Modal.tsx. Created a new component AcceptDe…

5253066

…clineModal.tsx

Merge branch 'main' into antti/modal

88deab2

Refactoring Modal.tsx. Deleted unnecessary lines of code

ebbb8a6

Refactoring index.tsx. Changed AcceptDeclineModal to DeleteModal. Cha…

234fe65

…nged DeleteModal to appear only once when opened in index.tsxinstead of number of gifts

Refactoring index.tsx and DeleteModal.tsx

6b3640e

Fixed errors ESLint gave

b147291

Antti Asmala and others added 8 commits October 25, 2023 11:38

Modified tsconfig.json. Added a new path into 'include' variable

1e40cbd

Added ./ at the beginning of the folder path in tsconfig.json

7a369d0

Created custom.d.ts file. Package-lock.json is modified due to updati…

3ad1e56

…ng packages in antti/modal branch

Declare all svg files as react components

032c645

Change typing to include more props for svg

02b63c9

Added a new script called svgr to package.json. Renamed accept and de…

df019b8

…cline buttons to *_button-icon.svg. Created React components from SVG images

Merge branch 'antti/modal_github-action-error-fix' into antti/modal

5153e6b

Refactoring DeleteModal.tsx. Added a button element on SVG images. Ch…

147f123

…anged styling of the buttons a bit

samuliasmala requested changes Nov 19, 2023

View reviewed changes

vercel bot deployed to Preview November 29, 2023 08:13 View deployment

Antti Asmala added 7 commits November 29, 2023 10:36

Added functionality to get the focus to Modal

7aedb4d

Deleted unnecessary attributes from ModalType

f8aaa6b

Changed optional types to be mandatory. Deleted unnecessary checks fo…

bf85a25

…r undefined values

Changed elements positions so blur works correctly

a3af971

Added a function to make conditional rendering have multiple checks

b265c0a

Changed openModal useState to isModalOpen to clarify things

6e82151

Changed isModalOpen to be setIsModalOpen

1d6d7d1

vercel bot deployed to Preview December 17, 2023 19:04 View deployment

Antti Asmala added 3 commits December 17, 2023 21:23

Moved DeleteModalConditionalRendering out from parent component Home …

2f73068

…to prevent issues

Created type for DeleteModalConditionalRendering

53da613

ESLint fixes

d700b45

anttiasmala requested a review from samuliasmala December 17, 2023 19:44

vercel bot deployed to Preview December 17, 2023 19:44 View deployment

samuliasmala requested changes Dec 18, 2023

View reviewed changes

Antti Asmala added 7 commits December 18, 2023 12:20

Deleted dataToDeleteInfo variable. Changed button elements to Button …

c8a39e0

…components. Changed the way how hovering buttons changes color

Changed Container components to div elements due to no difference. Ch…

2e76ad8

…anged the way how gifts' line-through works. Deleted DeleteModalConditionalRendering component. Added couple conditional checks for the DeleteModal render

Deleted svg-icons folder and its icons due to they exists in public/i…

01a4058

…mages/icons

Deleted TODO.md, not needed anymore. TODOs are found in GitHub

8bec35a

Deleted utils/generateId.ts file. Was not in use

b1972e4

Deleted types folder and its files. They were not in use

8d25494

Deleted removeLocalStorage function in localStorageFunctions.ts. Was …

37febb5

…not needed

vercel bot deployed to Preview December 19, 2023 08:30 View deployment

samuliasmala approved these changes Dec 19, 2023

View reviewed changes

anttiasmala merged commit d41111d into main Dec 20, 2023
4 checks passed

anttiasmala deleted the antti/modal branch December 20, 2023 12:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Antti/modal #2

Antti/modal #2

anttiasmala commented Oct 25, 2023

vercel bot commented Oct 25, 2023 •

edited

Loading

anttiasmala commented Oct 25, 2023

samuliasmala commented Nov 19, 2023 •

edited

Loading

samuliasmala commented Nov 19, 2023

samuliasmala left a comment

samuliasmala Nov 19, 2023

samuliasmala Nov 19, 2023

anttiasmala commented Nov 29, 2023

samuliasmala Dec 18, 2023

samuliasmala Dec 19, 2023

samuliasmala left a comment

Antti/modal #2

Antti/modal #2

Conversation

anttiasmala commented Oct 25, 2023

vercel bot commented Oct 25, 2023 • edited Loading

anttiasmala commented Oct 25, 2023

samuliasmala commented Nov 19, 2023 • edited Loading

samuliasmala commented Nov 19, 2023

samuliasmala left a comment

Choose a reason for hiding this comment

samuliasmala Nov 19, 2023

Choose a reason for hiding this comment

samuliasmala Nov 19, 2023

Choose a reason for hiding this comment

anttiasmala commented Nov 29, 2023

samuliasmala Dec 18, 2023

Choose a reason for hiding this comment

samuliasmala Dec 19, 2023

Choose a reason for hiding this comment

samuliasmala left a comment

Choose a reason for hiding this comment

vercel bot commented Oct 25, 2023 •

edited

Loading

samuliasmala commented Nov 19, 2023 •

edited

Loading