#94 populate post

[laurenmcp]

94 Populate Post

Issue Number(s): #94.

What does this PR change and why?

Populate Post data into post modal

• No additional API calls
• Relevant post data is passed into Post Modal as props when user clicks on a post
• Post data populates the modal to match the information in the database

Update post modal styling to match new designs (In Progress)

• Change tag style from bubbles to bulleted lists
• Fix foster me button position
• List item even distribution on mobile
• Account for photos that don't stretch to cover on carousel

UI Screenshots (mobile styles and non-square photos) !

Checklist

• [ ] Requirements have been implemented
• [ ] Acceptance criteria are met
• [x] Database schema docs have been updated or are not necessary
• [ ] Code follows design and style guidelines
• [ ] Commits follow guidelines (concise, squashed, etc)
• [x] Relevant reviewers (Senior Dev/EM/Designers) have been assigned to this PR

Critical Changes

None

Related PRs

None

Testing

• Clicking on a post should open post modal and display data for that post as expected, matching designs on web and mobile
• If post information exceeds shown amount, foster me button is fixed to bottom of modal

[netlify[bot]]

✅ Deploy Preview for angels-among-us ready!

Name	Link
🔨 Latest commit	786f4c7e95ae681d81eb787e848b0fb470b291de
🔍 Latest deploy log	https://app.netlify.com/sites/angels-among-us/deploys/651cd5da6011d300082553da
😎 Deploy Preview	https://deploy-preview-144--angels-among-us.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[github-actions[bot]]

Coverage report for web

St.:grey_question:	Category	Percentage	Covered / Total
🔴	Statements	26.26% (-0.31% 🔻)	421/1603
🔴	Branches	13.29% (-0.08% 🔻)	63/474
🔴	Functions	13.25% (-0.45% 🔻)	64/483
🔴	Lines	21.73% (-0.19% 🔻)	302/1390

Show new covered files 🐣

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------- | :--------- | :------- | :-------- | :----- | | 🔴 |

`...` / PetPostListGroup.tsx

| 33.33% | 100% | 0% | 33.33% |

Show files with reduced coverage 🔻

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :------------------------------------------------------------- | :------------------------------------------------------------- | :-------------------------------------------------------------- | | 🟢 | utils/types/post.ts |

89.73% (-2.3% 🔻)

| 100% |

46.43% (-7.74% 🔻)

| 100% | | 🔴 |

`...` / Feed.tsx

|

40.86% (-1.36% 🔻)

|

17.86% (-0.66% 🔻)

|

43.9% (-1.1% 🔻)

|

42.22% (-1.46% 🔻)

| | 🔴 |

`...` / PetPostModal.tsx

|

31.25% (-40.18% 🔻)

| 100% | 0% |

32.26% (-44.67% 🔻)

| | 🟢 |

`...` / ImageSlider.tsx

|

75% (-2.78% 🔻)

| 0% | 0% |

85.71% (-1.79% 🔻)

| | 🔴 |

`...` / PetPostTagGroup.tsx

|

0% (-33.33% 🔻)

| 100% | 0% |

0% (-33.33% 🔻)

|

Test suite run success

37 tests passing in 4 suites.

Report generated by 🧪jest coverage report action from 786f4c7e95ae681d81eb787e848b0fb470b291de

[github-actions[bot]]

Coverage report for web

St.:grey_question:	Category	Percentage	Covered / Total
🔴	Statements	26.26% (-0.31% 🔻)	421/1603
🔴	Branches	13.29% (-0.08% 🔻)	63/474
🔴	Functions	13.25% (-0.45% 🔻)	64/483
🔴	Lines	21.73% (-0.19% 🔻)	302/1390

Show new covered files 🐣

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------- | :--------- | :------- | :-------- | :----- | | 🔴 |

`...` / PetPostListGroup.tsx

| 33.33% | 100% | 0% | 33.33% |

Show files with reduced coverage 🔻

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :------------------------------------------------------------- | :------------------------------------------------------------- | :-------------------------------------------------------------- | | 🟢 | utils/types/post.ts |

89.73% (-2.3% 🔻)

| 100% |

46.43% (-7.74% 🔻)

| 100% | | 🔴 |

`...` / Feed.tsx

|

40.86% (-1.36% 🔻)

|

17.86% (-0.66% 🔻)

|

43.9% (-1.1% 🔻)

|

42.22% (-1.46% 🔻)

| | 🔴 |

`...` / PetPostModal.tsx

|

31.25% (-40.18% 🔻)

| 100% | 0% |

32.26% (-44.67% 🔻)

| | 🟢 |

`...` / ImageSlider.tsx

|

75% (-2.78% 🔻)

| 0% | 0% |

85.71% (-1.79% 🔻)

| | 🔴 |

`...` / PetPostTagGroup.tsx

|

0% (-33.33% 🔻)

| 100% | 0% |

0% (-33.33% 🔻)

|

Test suite run success

37 tests passing in 4 suites.

Report generated by 🧪jest coverage report action from 786f4c7e95ae681d81eb787e848b0fb470b291de

[winniezhangg]

Looks great Lauren! One small thing, can you simply add a space between these two paragraphs:

to more match this:

so that there is a very clear and distinct view of what type of foster dog they are.

[winniezhangg]

One more thing, could the margins of the overall page be increased, the borders of the post are pretty thin and make all the information very large and slightly overwhelming. The foster me button is also really really close to the corner, so greater margins will give it more space around it.

[laurenmcp]

@winniezhangg I added more spacing and padding, please take a look and let me know if I need to add more! thank you for the feedback!

[winniezhangg]

Thanks, Lauren :) Sorry about the last-minute feedback. The spacing looks great! I think that you should remove the padding on top and keep left and right, so change the padding to 48px 0px instead of 48px 48px 0. The padding-top makes it so I have to scroll to reach the foster me button.