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

Add missing key prop and fix improper spacing in voter's list #210

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

prajwalkulkarni
Copy link

Issue Number

fixes #209

Describe the changes you've made

Added key prop that points to the user's id which is unique to each user, hence resolving the unique key prop error.
Regarding the improper spacing, I've created a new class vote-item that offsets the margin-left to 0 that otherwise would be 3em set by the .author-information class. So, only wherever this class is used the margin will be offset, hence no other parts of UI will be broken. This class is applied to the div container of the voter items in the voter's list (div containing the avatar and the username). This is used in 2 places.

  1. In the stories list component (within the Vote component).
  2. Story page timeline component.
    Above are the two places where the voter's list modal can be rendered.
    I've also reduced the padding-right from 6em to 3em. These changes have fixed the appearance and the key prop warning. The results were further tested on both desktop mode and throttled to smartphone resolution mode. At both the stances, the appearance seemed to be alright.

Describe if there is any unusual behavior (Any Warning) of your code(Write NA if there isn't)

NA

Additional context (OPTIONAL)

keyfix

Test plan (OPTIONAL)

A good test plan should give instructions that someone else can easily follow.

  1. Click on the vote count of any story with more than 1 vote.
  2. The modal should show the list of voters with proper spacing and no error logged on the console.

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • All new and existing tests passed.
  • The title of my pull request is a short description of the requested changes.

Provide a Deployed link of route/page that needs to review

Preview: Deploy preview link here with the appropriate route

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.

Missing key prop and improper spacing in Voter's list
1 participant