Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NW6| Rabia Avci | React Module Project | Feature Deck - Week1 #40

Merged
merged 4 commits into from
Mar 6, 2024

Conversation

RbAvci
Copy link
Owner

@RbAvci RbAvci commented Mar 3, 2024

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

Completed Deck component with 3 cards component(which data comes from fakeCards.json). Added tests for Deck feature.
I would be very happy if you review my code, comment and approve it.

@RbAvci RbAvci requested review from Ara225 and fikretellek March 3, 2024 22:07
Copy link
Collaborator

@Ara225 Ara225 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great 👍 Added a note worth reading up on if you have time, but it's not really an issue as such, more of a consideration.

return (
<div className="deck">
{cardsData.map((cardData, i) => (
<Card title={cardData.title} url={cardData.url} image={cardData.image} key={i} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work with the props :)

This doesn't really matter in this situation (it would only really matter when you're dealing with large amounts of components), but the key shouldn't really be an index. Have a read through the section here under "Keeping List Items in Order with Key" https://react.dev/learn/rendering-lists

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, id would be better solution 👍 Thank you!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done @RbAvci

const cardElement = cards[index];
expect(cardElement).toHaveTextContent(cardData.title);
expect(cardElement.querySelector("a")).toHaveAttribute("href", cardData.url);
expect(cardElement.querySelector("img")).toHaveAttribute("src", cardData.image);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work 👏

Copy link
Collaborator

@zelihapala zelihapala left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I liked your work.

return (
<div className="deck">
{cardsData.map((cardData, i) => (
<Card title={cardData.title} url={cardData.url} image={cardData.image} key={i} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done @RbAvci

Copy link

netlify bot commented Mar 6, 2024

Deploy Preview for cyf-react-hotel-project ready!

Name Link
🔨 Latest commit 3dce7c9
🔍 Latest deploy log https://app.netlify.com/sites/cyf-react-hotel-project/deploys/65e7c169f4fd47000829450e
😎 Deploy Preview https://deploy-preview-40--cyf-react-hotel-project.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@RbAvci RbAvci merged commit 5ad953e into main Mar 6, 2024
4 checks passed
@RbAvci RbAvci deleted the feature/Deck branch March 9, 2024 14:38
@RbAvci RbAvci restored the feature/Deck branch March 9, 2024 14:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants