feat: add highlights to user profile page #859

OgDev-01 · 2023-02-09T20:57:11Z

What type of PR is this? (check all applicable)

Description

This PR:

Implements user highlights display on profile page
implements create highlights on user profile page
creates a generateApiPrUrl functions in utils to generate valid endpoint to fetch users PR using GitHub API
Adds PR card preview on valid PR link added to the highlights body on creations
Adds loading skeleton for highlights loading state
Fix the responsiveness issue with the profile header
Adds implementation for sharing on Twitter and LinkedIn

Notes

The emoji selections is still static
Github api fetcher (octokit) was used https://docs.github.com/en/rest/pulls/pulls?apiVersion=2022-11-28#get-a-pull-request

Related Tickets & Documents

Closes #830

Mobile & Desktop Screenshots/Recordings

Invalid PR link

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2023-02-09T20:57:16Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`6e1bdea`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/63efc0766aae980008d481f8
😎 Deploy Preview	https://deploy-preview-859--oss-insights.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 settings.

netlify · 2023-02-09T20:57:16Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`6e1bdea`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/63efc0760d9e4800081b47fe
😎 Deploy Preview	https://deploy-preview-859--design-insights.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 settings.

bdougie · 2023-02-09T21:24:55Z

Realized this will need this component when there is no highlights.

https://www.figma.com/file/OpVX6WT7dmWqnwRuEvADMF/OpenSauced-%E2%80%94-Insights-(insights.opensauced.pizza)?node-id=6579%3A8814&t=R24oIhwcD3cC7R9s-1

OgDev-01 · 2023-02-09T21:42:43Z

Realized this will need this component when there is no highlights.

https://www.figma.com/file/OpVX6WT7dmWqnwRuEvADMF/OpenSauced-%E2%80%94-Insights-(insights.opensauced.pizza)?node-id=6579%3A8814&t=R24oIhwcD3cC7R9s-1

I can include in this PR as well

0-vortex

Added some important stuff to change before you spend too much work on it! 🔥

components/atoms/Tabs/tabs.tsx

components/molecules/ContributorHighlight/contributor-highlight-card.tsx

package.json

0-vortex · 2023-02-11T08:53:28Z

tailwind.config.js

@@ -3,7 +3,8 @@ module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
-        autodesktop: "repeat(auto-fit, minmax(410px, 1fr))", automobile: "repeat(auto-fit, minmax(300px, 1fr))"
+        autodesktop: "repeat(auto-fit, minmax(410px, 1fr))",


remove this as we are not using grid across the application, we are using flex

components/organisms/ContributorProfileTab/contributor-profile-tab.tsx

lib/utils/github.ts

bdougie · 2023-02-13T18:44:56Z

Mobile screen is not there.

lib/utils/cn.ts

…uced/insights into 830-profile-hight=lights

components/molecules/HighlightInput/highlight-input-form.tsx

OgDev-01 · 2023-02-16T08:37:22Z

@getaheaddev could potential draw us an "uh oh" or 404 image.

I can do that!

How soon can this be ready?

getaheaddev · 2023-02-16T14:12:02Z

@getaheaddev could potential draw us an "uh oh" or 404 image.

I can do that!

How soon can this be ready?

I can get this today

components/molecules/ContributorHighlight/contributor-highlight-card.tsx

…t-card.tsx Co-authored-by: Brandon Roberts <robertsbt@gmail.com>

…uced/insights into 830-profile-hight=lights

## [1.30.0-beta.4](v1.30.0-beta.3...v1.30.0-beta.4) (2023-02-17) ### 🍕 Features * add highlights to user profile page ([#859](#859)) ([4b01376](4b01376)), closes [#830](#830)

github-actions · 2023-02-17T19:15:37Z

🎉 This PR is included in version 1.30.0-beta.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.30.0-alpha.2](v1.30.0-alpha.1...v1.30.0-alpha.2) (2023-02-17) ### 🍕 Features * add highlights to user profile page ([#859](#859)) ([4b01376](4b01376)), closes [#830](#830) * add dropdown for topics in Explore ([#877](#877)) ([9579902](9579902)), closes [#533](#533) * disable create insight page button if the page name is missing ([#857](#857)) ([95da564](95da564)), closes [#852](#852) ### 🐛 Bug Fixes * enable displaying/editing of insight page repos from API ([f4cc62f](f4cc62f)) * formatting ([065ede0](065ede0)) * reset text input fields when clear button is clicked ([#869](#869)) ([783098d](783098d)), closes [#858](#858)

github-actions · 2023-02-17T21:55:30Z

🎉 This PR is included in version 1.30.0-alpha.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.30.0](v1.29.0...v1.30.0) (2023-02-21) ### 🍕 Features * add highlights to user profile page ([#859](#859)) ([4b01376](4b01376)), closes [#830](#830) * add dropdown for topics in Explore ([#877](#877)) ([9579902](9579902)), closes [#533](#533) * disable create insight page button if the page name is missing ([#857](#857)) ([95da564](95da564)), closes [#852](#852) ### 🐛 Bug Fixes * disable create page button only if insight page name is empty ([#893](#893)) ([ed52399](ed52399)), closes [#892](#892) * hide non-functional elements in highlights card ([#881](#881)) ([ba1bd5e](ba1bd5e)) * rename 404 image file ([4e5171f](4e5171f)) * replace `PRSocialCard` component with GitHub OpenGraph image ([#889](#889)) ([3bfc5a4](3bfc5a4)), closes [#883](#883) * reset text input fields when clear button is clicked ([#869](#869)) ([783098d](783098d)), closes [#858](#858) * user profile interest pill UI fix ([#890](#890)) ([4cbff36](4cbff36))

github-actions · 2023-02-21T17:20:47Z

🎉 This PR is included in version 1.30.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.30.0-beta.4](open-sauced/app@v1.30.0-beta.3...v1.30.0-beta.4) (2023-02-17) ### 🍕 Features * add highlights to user profile page ([#859](open-sauced/app#859)) ([4b01376](open-sauced/app@4b01376)), closes [#830](open-sauced/app#830)

## [1.30.0-alpha.2](open-sauced/app@v1.30.0-alpha.1...v1.30.0-alpha.2) (2023-02-17) ### 🍕 Features * add highlights to user profile page ([#859](open-sauced/app#859)) ([4b01376](open-sauced/app@4b01376)), closes [#830](open-sauced/app#830) * add dropdown for topics in Explore ([#877](open-sauced/app#877)) ([9579902](open-sauced/app@9579902)), closes [#533](open-sauced/app#533) * disable create insight page button if the page name is missing ([#857](open-sauced/app#857)) ([95da564](open-sauced/app@95da564)), closes [#852](open-sauced/app#852) ### 🐛 Bug Fixes * enable displaying/editing of insight page repos from API ([f4cc62f](open-sauced/app@f4cc62f)) * formatting ([065ede0](open-sauced/app@065ede0)) * reset text input fields when clear button is clicked ([#869](open-sauced/app#869)) ([783098d](open-sauced/app@783098d)), closes [#858](open-sauced/app#858)

## [1.30.0](open-sauced/app@v1.29.0...v1.30.0) (2023-02-21) ### 🍕 Features * add highlights to user profile page ([#859](open-sauced/app#859)) ([4b01376](open-sauced/app@4b01376)), closes [#830](open-sauced/app#830) * add dropdown for topics in Explore ([#877](open-sauced/app#877)) ([9579902](open-sauced/app@9579902)), closes [#533](open-sauced/app#533) * disable create insight page button if the page name is missing ([#857](open-sauced/app#857)) ([95da564](open-sauced/app@95da564)), closes [#852](open-sauced/app#852) ### 🐛 Bug Fixes * disable create page button only if insight page name is empty ([#893](open-sauced/app#893)) ([ed52399](open-sauced/app@ed52399)), closes [#892](open-sauced/app#892) * hide non-functional elements in highlights card ([#881](open-sauced/app#881)) ([ba1bd5e](open-sauced/app@ba1bd5e)) * rename 404 image file ([4e5171f](open-sauced/app@4e5171f)) * replace `PRSocialCard` component with GitHub OpenGraph image ([#889](open-sauced/app#889)) ([3bfc5a4](open-sauced/app@3bfc5a4)), closes [#883](open-sauced/app#883) * reset text input fields when clear button is clicked ([#869](open-sauced/app#869)) ([783098d](open-sauced/app@783098d)), closes [#858](open-sauced/app#858) * user profile interest pill UI fix ([#890](open-sauced/app#890)) ([4cbff36](open-sauced/app@4cbff36))

OgDev-01 added 4 commits February 9, 2023 21:51

chore: add radix us primitives for tabs

1d3cd4d

feat: create reusable tab component

4caccb0

feat: refactor contributor profile page to use tabs

0fb9f26

chore: install tailwind class name and merger

df7ce4e

OgDev-01 added 7 commits February 10, 2023 22:42

chore: add DbHighlights to global interfaces

2bd8e14

feat: create pull request highlight card

41973a3

chore: add fetch user highlights hooks

da4dc40

fix: build error

2e6aa5c

refactor: update github utils function

1d39c0d

feat: create github pull info fetch hook

c55d9bd

refactor: update highlight card props

3fcf68c

0-vortex suggested changes Feb 11, 2023

View reviewed changes

bdougie reviewed Feb 11, 2023

View reviewed changes

components/organisms/ContributorProfileTab/contributor-profile-tab.tsx Outdated Show resolved Hide resolved

bdougie mentioned this pull request Feb 12, 2023

Feature: Social Card for shareable insights #687

Closed

3 tasks

OgDev-01 added 2 commits February 13, 2023 15:30

refactor: improve textarea input

76c2ef3

feat: add create highlight function to libs

3a1e315

brandonroberts reviewed Feb 13, 2023

View reviewed changes

lib/utils/github.ts Outdated Show resolved Hide resolved

feat: create and implement dropdown

883288b

brandonroberts reviewed Feb 13, 2023

View reviewed changes

lib/utils/cn.ts Outdated Show resolved Hide resolved

OgDev-01 and others added 4 commits February 13, 2023 19:47

Merge branch 'beta' into 830-profile-hight=lights

220b89f

refactor: implement responsiveness on user profile

9815102

Merge branch '830-profile-hight=lights' of https://github.com/open-sa…

57aa9f1

…uced/insights into 830-profile-hight=lights

refactor: improve highlights form implementation

34d011a

brandonroberts reviewed Feb 14, 2023

View reviewed changes

components/molecules/HighlightInput/highlight-input-form.tsx Outdated Show resolved Hide resolved

refactor: imporove conditional checks

1e7a4e7

refactor: improve validation for github pull url

61ccf3a

brandonroberts requested changes Feb 16, 2023

View reviewed changes

brandonroberts added the requested changes label Feb 16, 2023

OgDev-01 and others added 10 commits February 16, 2023 19:09

Update components/molecules/ContributorHighlight/contributor-highligh…

8605a89

…t-card.tsx Co-authored-by: Brandon Roberts <robertsbt@gmail.com>

Update components/molecules/ContributorHighlight/contributor-highligh…

65abd30

…t-card.tsx Co-authored-by: Brandon Roberts <robertsbt@gmail.com>

Update components/molecules/ContributorHighlight/contributor-highligh…

c62d313

…t-card.tsx Co-authored-by: Brandon Roberts <robertsbt@gmail.com>

fix: github pull url validation error

dd21b59

Merge branch '830-profile-hight=lights' of https://github.com/open-sa…

e80a2ef

…uced/insights into 830-profile-hight=lights

refactor: remove classnames helper libs

8c21d43

chore: update github fetch method and add 404 image

8e302d0

refactor: logic refactor to fit new fetcher

4b32848

fix: add revalidate on highlights post

f6da627

chore: remove unused code

6e1bdea

brandonroberts approved these changes Feb 17, 2023

View reviewed changes

brandonroberts merged commit 4b01376 into beta Feb 17, 2023

brandonroberts deleted the 830-profile-hight=lights branch February 17, 2023 19:10

github-actions bot added the released on @beta label Feb 17, 2023

github-actions bot added the released on @alpha label Feb 17, 2023

github-actions bot added the released label Feb 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add highlights to user profile page #859

feat: add highlights to user profile page #859

OgDev-01 commented Feb 9, 2023 •

edited

netlify bot commented Feb 9, 2023 •

edited

netlify bot commented Feb 9, 2023 •

edited

bdougie commented Feb 9, 2023 •

edited

OgDev-01 commented Feb 9, 2023

0-vortex left a comment

0-vortex Feb 11, 2023

bdougie commented Feb 13, 2023

OgDev-01 commented Feb 16, 2023

getaheaddev commented Feb 16, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 21, 2023

feat: add highlights to user profile page #859

feat: add highlights to user profile page #859

Conversation

OgDev-01 commented Feb 9, 2023 • edited

What type of PR is this? (check all applicable)

Description

Notes

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Invalid PR link

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Feb 9, 2023 • edited

✅ Deploy Preview for oss-insights ready!

netlify bot commented Feb 9, 2023 • edited

✅ Deploy Preview for design-insights ready!

bdougie commented Feb 9, 2023 • edited

OgDev-01 commented Feb 9, 2023

0-vortex left a comment

Choose a reason for hiding this comment

0-vortex Feb 11, 2023

Choose a reason for hiding this comment

bdougie commented Feb 13, 2023

OgDev-01 commented Feb 16, 2023

getaheaddev commented Feb 16, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 17, 2023

github-actions bot commented Feb 21, 2023

OgDev-01 commented Feb 9, 2023 •

edited

netlify bot commented Feb 9, 2023 •

edited

netlify bot commented Feb 9, 2023 •

edited

bdougie commented Feb 9, 2023 •

edited