feat: add home page and profile page #36

doaortu · 2023-04-26T06:13:57Z

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

Description

This PR add 2 pages to the extension popup/dropdown.
As written in the commit descriptions, here are the changes I made along with those two pages.

Add tailwind plugin to centering tailwind divider, it can be found at tailwind.config.cjs. More often than not, tailwind divider would not be centered between elements, we need to specify padding corrections. therefore, I search the internet and found that plugin to simplify the proccess.
Moving token retrieval to custom hooks so it can be used anywhere.
add custom hooks to check current tab is github profile url and opensauced user
add activeTab permission to manifest.json to check url of current tab from extension popup (this related to previous bullet point)
refactor routing logic to use context api, so it can be used anywhere without prop drilling
refactor setRenderedPage to accept props, because I need to pass username to profile page, this is another reason why I refactored the routing logic using context api, so I can pass props to setRenderedPage
wrap setRenderedPage with setCurrentPage function to make it easy if we want to update route state without passing props
add new util cacheFetch to be able cache data from api, reducing api calls.
add getUserData on fetchOpenSaucedApiData.ts to fetch more detailed user data
add getUserPRData to fetch user PR data

Note:
I use inline styling 'flexWrap' in profile page because when I use tailwind flex-wrap class, it's interfering with github page (again). maybe we should use shadow DOM approach?
I know another workaround that doesn't involve Shadow DOM, we use 2 different tailwind.config.cjs, and add prefix to tailwind classes used in content-scripts (prefix can be set from tailwind.config.cjs), so it doesn't conflict with github page styles anymore.

Another note:
I don't use real data for Avg PR velocity and Contributed Repos in extension dropdown profile page , I just mimic the UI from Opensauced user dashboard, I don't know where the data came from or how to calculate the data.

Suggestion:

Instead of manually writing routing logic, we could use react-chrome-extension-router , I use it in my submission and it's super simple to use.

Related Tickets & Documents

Fixes #28

Mobile & Desktop Screenshots/Recordings

This add 2 pages to extension popup/dropdown:
home page

@bdougie What do you think about this homepage? Is this the same as what you imagine?

and profile page

If current tab is on github profile page, the profile is opensauced user, then new button/link to show profile will be added to tools section.

and if the button is clicked, it will show the profile page with the profile data

Screen record:

extension-homepage-2023-04-26_13.09.18.mp4

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?

divider from tailiwind are based on border, often times it's not centered enough because the padding is not balanced between dividers, here I tried to balance it using this plugin. It also can adjust the amount padding needed.

+ move token retrieval in custom hooks useAuth + add custom hooks to check current tab is github profile url and opensauced user + add activeTab permission to manifest.json to check url of current tab from extension popup + refactor routing logic to use context api, so it can be used anywhere without prop drilling + refactor setRenderedPage to accept props, because I need to pass username to profile page + wrap setRenderedPage with setCurrentPage function to make it easy if we want to update route state without passing props + add new util cacheFetch to be able cache data from api, reducing api calls. + add isOpenSaucedUser function for ease of use and clarity

+ add getUserData on fetchOpenSaucedApiData to fetch more detailed user data + add getUserPRData to fetch user PR data Note: I use inline styling 'flexWrap' in profile page because it's interfering with github page (again) maybe we should use shadow DOM approach?

to make it work

Anush008 · 2023-04-26T06:58:09Z

@doaortu, thank you for this amazing contribution. It looks great. I'm on my phone at the moment. I'll test this out once I get home and will give you a review. Also, I took the liberty of doing some minor changes here, cdb3a94.

doaortu · 2023-04-26T10:27:14Z

Thank you for adding changes to this PR, I totally missed that.

and thank you for spending time to look into this PR.

src/pages/home.tsx

bdougie

This is great @doaortu. Some small copy fixes requested.

src/pages/profile.tsx

Anush008

Great stuff @doaortu. I've suggested some changes for you to consider.

src/pages/profile.tsx

src/utils/cache.ts

src/hooks/useAuth.ts

src/pages/profile.tsx

src/utils/fetchOpenSaucedApiData.ts

src/pages/home.tsx

diivi · 2023-04-26T14:45:12Z

I fell extremely sick yesterday and wasn't able to contribute much, will try to review this tonight and catch up.

Co-authored-by: Brian Douglas <[email protected]>

Co-authored-by: Brian Douglas <[email protected]> Co-authored-by: Anush <[email protected]>

Co-authored-by: Brian Douglas <[email protected]>

Co-authored-by: Anush <[email protected]>

Changes: + Replaced || with ?? to avoid a falsy result when expiry is set to 0 seconds. + Replaced localStorage with chrome.storage.local . + Combined the text/*, application/json check into a single match() call. + Formatted the file with semi-colons(Linting will be added soon, so this shouldn't be a problem). Co-authored-by: Anush <[email protected]>

Co-authored-by: Anush <[email protected]>

Suggestion: Using Promise.all() will prove useful here as the calls can be made simultaneously Co-authored-by: Anush <[email protected]>

Anush008 · 2023-04-26T17:24:42Z

Anush008 · 2023-04-26T17:32:22Z

@doaortu, your suggestion to use https://www.npmjs.com/package/react-chrome-extension-router for routing through the extension pages can prove really beneficial as the extension pages grow. We'll definitely keep this option in mind moving forward. Thank you.

match api response

doaortu · 2023-04-26T17:39:47Z

Thank you for the detailed review @Anush008 @bdougie ,
I've applied the suggestions and already test it. I add a small change to fix small issue.

@diivi I hope you get well soon, mate.

@Anush008 thank you for approving the PR, and
sure, I'm glad if my suggestion can be helpful.

bdougie

Functionally this works. I think we can go with this and get user feedback from the discord.

bdougie · 2023-04-27T00:33:33Z

@doaortu thanks for the features. Please consider adding this PR to your highlights feed.

doaortu · 2023-04-27T09:46:37Z

Thank you for merging this PR..

Sure, I'll add PRs I've made in the highlights after this. Thanks for the suggestion.

## 1.0.0-beta.1 (2023-04-27) ### 📝 Documentation * README and LICENSE ([917f7b0](917f7b0)) * Updated the README.md ([#15](#15)) ([3e4dd69](3e4dd69)) ### 🐛 Bug Fixes * rename the. extension ([294e499](294e499)) * Update URLs ([5828e20](5828e20)) * make emails less creepy ([a08fa45](a08fa45)) * re-enable tailwind base class on extension popup ([#31](#31)) ([c081217](c081217)) * Wrapped the await call in an async() ([#26](#26)) ([357aab5](357aab5)) ### 🍕 Features * add home page and profile page ([#36](#36)) ([8a43288](8a43288)) * Added a configuration file ([#32](#32)) ([ec6722c](ec6722c)) * Auto PAT authentication ([#29](#29)) ([f4f8cf6](f4f8cf6)) * extension window navigation ([#21](#21)) ([b5ae9a6](b5ae9a6)) * GitHub page update listener ([#37](#37)) ([06b070f](06b070f)) * Invite to OpenSauced ([#20](#20)) ([0c8f222](0c8f222)) * PAT authentication ([#27](#27)) ([e726a93](e726a93)) * updated the extension logo ([#22](#22)) ([d19034d](d19034d)) * view on OpenSauced button ([#14](#14)) ([a447551](a447551)) ### 🔁 Continuous Integration * automated github releases ([#39](#39)) ([735fa66](735fa66)), closes [#16](#16)

github-actions · 2023-04-27T15:53:00Z

🎉 This PR is included in version 1.0.0-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## 1.0.0 (2023-05-13) ### 📝 Documentation * README and LICENSE ([917f7b0](917f7b0)) * Updated the README.md ([#15](#15)) ([3e4dd69](3e4dd69)) ### 🔁 Continuous Integration * automated github releases ([#39](#39)) ([735fa66](735fa66)), closes [#16](#16) ### 🧑‍💻 Code Refactoring * improved-auth-strategy ([#56](#56)) ([d8b27c3](d8b27c3)) ### 🍕 Features * add home page and profile page ([#36](#36)) ([8a43288](8a43288)) * add to highlights button ([#64](#64)) ([e2120a1](e2120a1)) * Added a configuration file ([#32](#32)) ([ec6722c](ec6722c)) * Added light mode to GH profile buttons ([#40](#40)) ([a7ea43a](a7ea43a)) * Added linting to the project. ([#49](#49)) ([1f73007](1f73007)) * Auto PAT authentication ([#29](#29)) ([f4f8cf6](f4f8cf6)) * extension window navigation ([#21](#21)) ([b5ae9a6](b5ae9a6)) * GitHub page update listener ([#37](#37)) ([06b070f](06b070f)) * Invite to OpenSauced ([#20](#20)) ([0c8f222](0c8f222)) * PAT authentication ([#27](#27)) ([e726a93](e726a93)) * updated the extension logo ([#22](#22)) ([d19034d](d19034d)) * view on OpenSauced button ([#14](#14)) ([a447551](a447551)) * vote repos ([#70](#70)) ([ff2c8f4](ff2c8f4)) ### 🐛 Bug Fixes * rename the. extension ([294e499](294e499)) * Update URLs ([5828e20](5828e20)) * attach dist folder to release assets ([#47](#47)) ([4f50e72](4f50e72)) * circular-deps in vote buttons ([675496c](675496c)) * Duplicate buttons on GH profile page ([#48](#48)) ([9ee2dca](9ee2dca)) * incorrect request for voting ([#72](#72)) ([7a35014](7a35014)) * make emails less creepy ([a08fa45](a08fa45)) * re-enable tailwind base class on extension popup ([#31](#31)) ([c081217](c081217)) * remove activeTab manifest.json ([#50](#50)) ([dd71480](dd71480)) * render emojis in user bio ([#68](#68)) ([d0158a5](d0158a5)) * set-output deprecation warning ([#51](#51)) ([486f84b](486f84b)) * unrecognized-manifest-key ([#55](#55)) ([d622500](d622500)) * Wrapped the await call in an async() ([#26](#26)) ([357aab5](357aab5))

github-actions · 2023-05-13T13:17:02Z

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## 1.0.0-beta.1 (2023-04-27) ### 📝 Documentation * README and LICENSE ([917f7b0](open-sauced/ai@917f7b0)) * Updated the README.md ([#15](open-sauced/ai#15)) ([3e4dd69](open-sauced/ai@3e4dd69)) ### 🐛 Bug Fixes * rename the. extension ([294e499](open-sauced/ai@294e499)) * Update URLs ([5828e20](open-sauced/ai@5828e20)) * make emails less creepy ([a08fa45](open-sauced/ai@a08fa45)) * re-enable tailwind base class on extension popup ([#31](open-sauced/ai#31)) ([c081217](open-sauced/ai@c081217)) * Wrapped the await call in an async() ([#26](open-sauced/ai#26)) ([357aab5](open-sauced/ai@357aab5)) ### 🍕 Features * add home page and profile page ([#36](open-sauced/ai#36)) ([8a43288](open-sauced/ai@8a43288)) * Added a configuration file ([#32](open-sauced/ai#32)) ([ec6722c](open-sauced/ai@ec6722c)) * Auto PAT authentication ([#29](open-sauced/ai#29)) ([f4f8cf6](open-sauced/ai@f4f8cf6)) * extension window navigation ([#21](open-sauced/ai#21)) ([b5ae9a6](open-sauced/ai@b5ae9a6)) * GitHub page update listener ([#37](open-sauced/ai#37)) ([06b070f](open-sauced/ai@06b070f)) * Invite to OpenSauced ([#20](open-sauced/ai#20)) ([0c8f222](open-sauced/ai@0c8f222)) * PAT authentication ([#27](open-sauced/ai#27)) ([e726a93](open-sauced/ai@e726a93)) * updated the extension logo ([#22](open-sauced/ai#22)) ([d19034d](open-sauced/ai@d19034d)) * view on OpenSauced button ([#14](open-sauced/ai#14)) ([a447551](open-sauced/ai@a447551)) ### 🔁 Continuous Integration * automated github releases ([#39](open-sauced/ai#39)) ([735fa66](open-sauced/ai@735fa66)), closes [#16](open-sauced/ai#16)

## 1.0.0 (2023-05-13) ### 📝 Documentation * README and LICENSE ([917f7b0](open-sauced/ai@917f7b0)) * Updated the README.md ([#15](open-sauced/ai#15)) ([3e4dd69](open-sauced/ai@3e4dd69)) ### 🔁 Continuous Integration * automated github releases ([#39](open-sauced/ai#39)) ([735fa66](open-sauced/ai@735fa66)), closes [#16](open-sauced/ai#16) ### 🧑‍💻 Code Refactoring * improved-auth-strategy ([#56](open-sauced/ai#56)) ([d8b27c3](open-sauced/ai@d8b27c3)) ### 🍕 Features * add home page and profile page ([#36](open-sauced/ai#36)) ([8a43288](open-sauced/ai@8a43288)) * add to highlights button ([#64](open-sauced/ai#64)) ([e2120a1](open-sauced/ai@e2120a1)) * Added a configuration file ([#32](open-sauced/ai#32)) ([ec6722c](open-sauced/ai@ec6722c)) * Added light mode to GH profile buttons ([#40](open-sauced/ai#40)) ([a7ea43a](open-sauced/ai@a7ea43a)) * Added linting to the project. ([#49](open-sauced/ai#49)) ([1f73007](open-sauced/ai@1f73007)) * Auto PAT authentication ([#29](open-sauced/ai#29)) ([f4f8cf6](open-sauced/ai@f4f8cf6)) * extension window navigation ([#21](open-sauced/ai#21)) ([b5ae9a6](open-sauced/ai@b5ae9a6)) * GitHub page update listener ([#37](open-sauced/ai#37)) ([06b070f](open-sauced/ai@06b070f)) * Invite to OpenSauced ([#20](open-sauced/ai#20)) ([0c8f222](open-sauced/ai@0c8f222)) * PAT authentication ([#27](open-sauced/ai#27)) ([e726a93](open-sauced/ai@e726a93)) * updated the extension logo ([#22](open-sauced/ai#22)) ([d19034d](open-sauced/ai@d19034d)) * view on OpenSauced button ([#14](open-sauced/ai#14)) ([a447551](open-sauced/ai@a447551)) * vote repos ([#70](open-sauced/ai#70)) ([ff2c8f4](open-sauced/ai@ff2c8f4)) ### 🐛 Bug Fixes * rename the. extension ([294e499](open-sauced/ai@294e499)) * Update URLs ([5828e20](open-sauced/ai@5828e20)) * attach dist folder to release assets ([#47](open-sauced/ai#47)) ([4f50e72](open-sauced/ai@4f50e72)) * circular-deps in vote buttons ([675496c](open-sauced/ai@675496c)) * Duplicate buttons on GH profile page ([#48](open-sauced/ai#48)) ([9ee2dca](open-sauced/ai@9ee2dca)) * incorrect request for voting ([#72](open-sauced/ai#72)) ([7a35014](open-sauced/ai@7a35014)) * make emails less creepy ([a08fa45](open-sauced/ai@a08fa45)) * re-enable tailwind base class on extension popup ([#31](open-sauced/ai#31)) ([c081217](open-sauced/ai@c081217)) * remove activeTab manifest.json ([#50](open-sauced/ai#50)) ([dd71480](open-sauced/ai@dd71480)) * render emojis in user bio ([#68](open-sauced/ai#68)) ([d0158a5](open-sauced/ai@d0158a5)) * set-output deprecation warning ([#51](open-sauced/ai#51)) ([486f84b](open-sauced/ai@486f84b)) * unrecognized-manifest-key ([#55](open-sauced/ai#55)) ([d622500](open-sauced/ai@d622500)) * Wrapped the await call in an async() ([#26](open-sauced/ai#26)) ([357aab5](open-sauced/ai@357aab5))

doaortu and others added 9 commits April 26, 2023 05:40

feat: add tailwind plugin to centering dividers

af04e54

divider from tailiwind are based on border, often times it's not centered enough because the padding is not balanced between dividers, here I tried to balance it using this plugin. It also can adjust the amount padding needed.

add real profile page

9306fb1

+ add getUserData on fetchOpenSaucedApiData to fetch more detailed user data + add getUserPRData to fetch user PR data Note: I use inline styling 'flexWrap' in profile page because it's interfering with github page (again) maybe we should use shadow DOM approach?

Merge branch 'main' into feat-add-home-page

a67302d

refactor: remove comments

40e42ee

fix: add target blank to links in profile page

e2b0d34

to make it work

chore: Replaced literals with config values

cdb3a94

chore: replaced literals with values from cofig

16dba36

Replaced literals in fetchOpenSaucedApiData.ts with config vals

2b35c76

bdougie requested a review from diivi April 26, 2023 12:05

bdougie reviewed Apr 26, 2023

View reviewed changes

src/pages/home.tsx Outdated Show resolved Hide resolved

bdougie reviewed Apr 26, 2023

View reviewed changes

src/pages/home.tsx Outdated Show resolved Hide resolved

bdougie reviewed Apr 26, 2023

View reviewed changes

src/pages/home.tsx Outdated Show resolved Hide resolved

bdougie requested changes Apr 26, 2023

View reviewed changes

src/pages/profile.tsx Outdated Show resolved Hide resolved

src/pages/profile.tsx Outdated Show resolved Hide resolved

Anush008 suggested changes Apr 26, 2023

View reviewed changes

doaortu and others added 8 commits April 27, 2023 00:02

fix dashboard url and link text as suggested

0b4debe

Co-authored-by: Brian Douglas <[email protected]>

clarify tools button text as suggested

63e7d57

Co-authored-by: Brian Douglas <[email protected]> Co-authored-by: Anush <[email protected]>

fix profile blog url as suggested

647c1ea

Co-authored-by: Brian Douglas <[email protected]>

patching user bio text in profile page as suggested

0e4697c

Co-authored-by: Anush <[email protected]>

removing console.log (s), as suggested

a3ef1fb

Co-authored-by: Anush <[email protected]>

removing console.log (s), as suggested

ac3812c

Co-authored-by: Anush <[email protected]>

refactor: use Promise.all for concurrent network calls, as suggested

08e5b60

Suggestion: Using Promise.all() will prove useful here as the calls can be made simultaneously Co-authored-by: Anush <[email protected]>

Anush008 approved these changes Apr 26, 2023

View reviewed changes

fix: user.blog_url to user.blog to

74f7fed

match api response

bdougie approved these changes Apr 27, 2023

View reviewed changes

bdougie merged commit 8a43288 into open-sauced:main Apr 27, 2023

github-actions bot added the released on @beta label Apr 27, 2023

github-actions bot added the released label May 13, 2023

Anush008 mentioned this pull request May 22, 2023

refactor: improved-extension-navigation #99

Merged

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add home page and profile page #36

feat: add home page and profile page #36

doaortu commented Apr 26, 2023 •

edited by Anush008

Loading

Anush008 commented Apr 26, 2023

doaortu commented Apr 26, 2023

bdougie left a comment

Anush008 left a comment

diivi commented Apr 26, 2023

Anush008 commented Apr 26, 2023

Anush008 commented Apr 26, 2023

doaortu commented Apr 26, 2023 •

edited

Loading

bdougie left a comment

bdougie commented Apr 27, 2023

doaortu commented Apr 27, 2023

github-actions bot commented Apr 27, 2023

github-actions bot commented May 13, 2023

feat: add home page and profile page #36

feat: add home page and profile page #36

Conversation

doaortu commented Apr 26, 2023 • edited by Anush008 Loading

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

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

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?

Anush008 commented Apr 26, 2023

doaortu commented Apr 26, 2023

bdougie left a comment

Choose a reason for hiding this comment

Anush008 left a comment

Choose a reason for hiding this comment

diivi commented Apr 26, 2023

Anush008 commented Apr 26, 2023

Anush008 commented Apr 26, 2023

doaortu commented Apr 26, 2023 • edited Loading

bdougie left a comment

Choose a reason for hiding this comment

bdougie commented Apr 27, 2023

doaortu commented Apr 27, 2023

github-actions bot commented Apr 27, 2023

github-actions bot commented May 13, 2023

doaortu commented Apr 26, 2023 •

edited by Anush008

Loading

doaortu commented Apr 26, 2023 •

edited

Loading