feat: connect repositories page to API data and pagination #405

brandonroberts · 2022-09-20T16:23:41Z

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

Description

This PR connects the repositories page to more live data from the GS API.
Also connects pagination to the requested data

In Progress

Fetch and list first contributors per repos displayed
Connect Activity
Connect PR Velocity
Last 30 days of commits for sparkline graph

Related Tickets & Documents

fixes #384
#320

Mobile & Desktop Screenshots/Recordings

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 · 2022-09-20T16:23:46Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`475d6cc`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/632b778fce04090008ee0ad3
😎 Deploy Preview	https://deploy-preview-405--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 · 2022-09-20T16:24:31Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`475d6cc`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/632b7790807fe00009f3d7b9
😎 Deploy Preview	https://deploy-preview-405--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.

…rList hook

github-actions

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

npm-shrinkwrap.json
package.json

brandonroberts · 2022-09-21T15:48:27Z

@pixelsbyeryc I'll need some guidance on how to add the images for the up/down arrows

OgDev-01 · 2022-09-21T16:25:21Z

@pixelsbyeryc I'll need some guidance on how to add the images for the up/down arrows

I think I can help on this one...

On line 30 in the PullRequestOverview component file, were we have {churnDirection === "up" ? "+" : "-"}{churn}%
replace "+" and "-" with an icon component from Octicons library that matches the icon on the design.

I think that will do 👌.

components/molecules/PullRequestOverview/pull-request-overview.tsx

components/molecules/RepoRow/repo-row.tsx

components/molecules/StackedAvatar/stacked-avatar.tsx

eryc-cc

All components seem to be getting data from the backend, as they should! ✨

I won't approve because I don't have knowledge to evaluate if everything's good, but otherwise, looks saucy to me 🍕

added border to contributor avatars updated calculation for PRs merged

OgDev-01

Superb!! 🍕🍕

components/molecules/RepoRow/repo-row.tsx

eryc-cc

Also, on the Pill file, we can change the text color from light-amber-11 to light-amber-10, I think it'll look a bit less rough. 🙏

If you want, I can open an issue on these two things so it doesn't stagnate your PR.

Looks good to me 🍕

brandonroberts · 2022-09-21T20:44:49Z

@pixelsbyeryc no problem. I tweaked the color and icon

eryc-cc · 2022-09-21T21:04:55Z

@pixelsbyeryc no problem. I tweaked the color and icon

@brandonroberts sorry, I meant below the {icon}, there's a div that defines text-light-amber-11, we can make it 10.

As for the bg, we can leave it as 200...

     ...
      {icon}
      <div
        className={`
        ${color === "green" ? "text-light-grass-11" : color === "yellow" ? "text-light-amber-10" : color === "red" ? "text-light-red-11" : "text-light-slate-11"}
          font-medium text-sm leading-none`}>
        {text}
      </div>
    </div>

brandonroberts · 2022-09-21T21:11:00Z

Ahh I see. Go ahead and put a follow-up issue in and I'll fix it after this gets merged

bdougie · 2022-09-21T22:27:20Z

Not a review but an observation. At first glance this list looks inconclusive, but all the 0 PR projects would suggest that those projects are not maintained or taking contributions.

I am thinking that we should consider the sorting to not be based on stars, but instead based on last commit or activity. The most active projects will have the most data and despite the popularity of freeCodeCamp in stars, it doesn't belong on the top.

bdougie · 2022-09-21T23:03:02Z

This wasn't documented but the percents on the popular repos look weird.

React has 110 open PRs. Let's make this % a reflection of how many of the 110 PRs got commits in the last 30 days. This will provide an indication of how stale the PRs are getting.

bdougie

Looks good, just had one data question here, #405 (comment).

Can you update that calculation to see if it is a tad bit more readable. I also opened a bug issue, not related to this work but something I noticed.

OgDev-01 · 2022-09-22T12:06:18Z

@brandonroberts @bdougie I think I'll need this PR merged in order to complete #409 🙏🙏

brandonroberts · 2022-09-22T13:26:38Z

Merged! Will follow up with calculation and style fixes

## [1.7.0-beta.1](v1.6.1-beta.3...v1.7.0-beta.1) (2022-09-22) ### 🍕 Features * connect repositories page to API data and pagination ([#405](#405)) ([634de8e](634de8e)), closes [#320](#320) [#384](#384)

github-actions · 2022-09-22T13:30:05Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.7.0](v1.6.0...v1.7.0) (2022-09-23) ### 🎨 Styles * added hover state style to footer links ([#420](#420)) ([3aa5f17](3aa5f17)) * change text font and icon size to xs(12px) ([#401](#401)) ([741288e](741288e)) * refactor show us button style to match design ([#419](#419)) ([b6c21b1](b6c21b1)), closes [#408](#408) ### 🐛 Bug Fixes * add tooltip message on information icon hover ([#421](#421)) ([12ff851](12ff851)), closes [#366](#366) * adds brandon to top5 ([8bb56cb](8bb56cb)) * correct beta branch checking beta gitsense api ([2c6f576](2c6f576)) * redirect from onboarding if already complete with custom hook ([#388](#388)) ([8600c76](8600c76)), closes [#387](#387) * update PR overview calculation to use active PRs in last 30 days / total PRs ([#423](#423)) ([05b48ff](05b48ff)), closes [#418](#418) ### 🍕 Features * add privacy and license terms ([#422](#422)) ([0dcc161](0dcc161)), closes [#377](#377) * connect repositories page to API data and pagination ([#405](#405)) ([634de8e](634de8e)), closes [#320](#320) [#384](#384) * create mobile version of repo table ([#409](#409)) ([9355968](9355968)) ### 🧑‍💻 Code Refactoring * check avatarURL for orange avatar background and update pill colors ([#424](#424)) ([c821cd5](c821cd5)), closes [#414](#414) [#416](#416) * Polish the Dashboard to match designs ([#427](#427)) ([f919c27](f919c27)) * Polish the Reports Page to match the design ([#425](#425)) ([87a2bdc](87a2bdc)) * Update text styles on Scatter Chart card ([#429](#429)) ([ab24703](ab24703))

github-actions · 2022-09-23T17:45:40Z

🎉 This PR is included in version 1.7.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.7.0-beta.1](open-sauced/app@v1.6.1-beta.3...v1.7.0-beta.1) (2022-09-22) ### 🍕 Features * connect repositories page to API data and pagination ([#405](open-sauced/app#405)) ([634de8e](open-sauced/app@634de8e)), closes [#320](open-sauced/app#320) [#384](open-sauced/app#384)

## [1.7.0](open-sauced/app@v1.6.0...v1.7.0) (2022-09-23) ### 🎨 Styles * added hover state style to footer links ([#420](open-sauced/app#420)) ([3aa5f17](open-sauced/app@3aa5f17)) * change text font and icon size to xs(12px) ([#401](open-sauced/app#401)) ([741288e](open-sauced/app@741288e)) * refactor show us button style to match design ([#419](open-sauced/app#419)) ([b6c21b1](open-sauced/app@b6c21b1)), closes [#408](open-sauced/app#408) ### 🐛 Bug Fixes * add tooltip message on information icon hover ([#421](open-sauced/app#421)) ([12ff851](open-sauced/app@12ff851)), closes [#366](open-sauced/app#366) * adds brandon to top5 ([8bb56cb](open-sauced/app@8bb56cb)) * correct beta branch checking beta gitsense api ([2c6f576](open-sauced/app@2c6f576)) * redirect from onboarding if already complete with custom hook ([#388](open-sauced/app#388)) ([8600c76](open-sauced/app@8600c76)), closes [#387](open-sauced/app#387) * update PR overview calculation to use active PRs in last 30 days / total PRs ([#423](open-sauced/app#423)) ([05b48ff](open-sauced/app@05b48ff)), closes [#418](open-sauced/app#418) ### 🍕 Features * add privacy and license terms ([#422](open-sauced/app#422)) ([0dcc161](open-sauced/app@0dcc161)), closes [#377](open-sauced/app#377) * connect repositories page to API data and pagination ([#405](open-sauced/app#405)) ([634de8e](open-sauced/app@634de8e)), closes [#320](open-sauced/app#320) [#384](open-sauced/app#384) * create mobile version of repo table ([#409](open-sauced/app#409)) ([9355968](open-sauced/app@9355968)) ### 🧑‍💻 Code Refactoring * check avatarURL for orange avatar background and update pill colors ([#424](open-sauced/app#424)) ([c821cd5](open-sauced/app@c821cd5)), closes [#414](open-sauced/app#414) [#416](open-sauced/app#416) * Polish the Dashboard to match designs ([#427](open-sauced/app#427)) ([f919c27](open-sauced/app@f919c27)) * Polish the Reports Page to match the design ([#425](open-sauced/app#425)) ([87a2bdc](open-sauced/app@87a2bdc)) * Update text styles on Scatter Chart card ([#429](open-sauced/app#429)) ([ab24703](open-sauced/app@ab24703))

brandonroberts added 2 commits September 20, 2022 11:26

feat: connect repositories page to API data

5bba6f9

chore: build fixes

9f3545f

brandonroberts force-pushed the feat-repositories-data branch from e5bbc31 to 9f3545f Compare September 20, 2022 16:32

brandonroberts added 6 commits September 20, 2022 12:22

feat: add contributors to repositories page, refactored useContributo…

6c17ec2

…rList hook

feat: display stacked avatars for contributors

7719410

feat: connect activity and commits

ed9c447

chore: add commits from last 30 days to Sparkline graph

7be767b

feat: add average PR velocity count

f5e9ef7

feat: add PR percent merged calculation

7ddbb8b

brandonroberts marked this pull request as ready for review September 21, 2022 15:27

brandonroberts requested review from chadstewart, eryc-cc, OgDev-01, 0-vortex and bdougie September 21, 2022 15:27

github-actions bot reviewed Sep 21, 2022

View reviewed changes

OgDev-01 reviewed Sep 21, 2022

View reviewed changes

components/molecules/PullRequestOverview/pull-request-overview.tsx Outdated Show resolved Hide resolved

eryc-cc reviewed Sep 21, 2022

View reviewed changes

components/molecules/RepoRow/repo-row.tsx Outdated Show resolved Hide resolved

eryc-cc reviewed Sep 21, 2022

View reviewed changes

components/molecules/StackedAvatar/stacked-avatar.tsx Outdated Show resolved Hide resolved

eryc-cc reviewed Sep 21, 2022

View reviewed changes

brandonroberts added 2 commits September 21, 2022 13:51

chore: review fixes

d54097b

added border to contributor avatars updated calculation for PRs merged

fix: add trending icons for PR activity

e458e38

brandonroberts force-pushed the feat-repositories-data branch from 3662e82 to e458e38 Compare September 21, 2022 19:30

chore: add loading check for activity

f98322e

brandonroberts force-pushed the feat-repositories-data branch from 6b4ec1d to f98322e Compare September 21, 2022 19:39

chore: fix build error

90e5379

brandonroberts requested a review from OgDev-01 September 21, 2022 20:09

OgDev-01 approved these changes Sep 21, 2022

View reviewed changes

eryc-cc reviewed Sep 21, 2022

View reviewed changes

components/molecules/RepoRow/repo-row.tsx Outdated Show resolved Hide resolved

eryc-cc reviewed Sep 21, 2022

View reviewed changes

chore: adjust icon and color for medium activity pill

475d6cc

eryc-cc mentioned this pull request Sep 21, 2022

enhancement: Improve the yellow Pill style on Repositories page #414

Closed

This was referenced Sep 21, 2022

feat: Sort repos list by last commit date then popularity/activity #415

Closed

bug: Avatars without backgrounds are orange. #416

Closed

bdougie requested changes Sep 21, 2022

View reviewed changes

bdougie approved these changes Sep 21, 2022

View reviewed changes

bdougie mentioned this pull request Sep 21, 2022

feat: PR Overview % Calculation #418

Closed

OgDev-01 added the ready-to-merge label Sep 22, 2022

brandonroberts merged commit 634de8e into beta Sep 22, 2022

brandonroberts deleted the feat-repositories-data branch September 22, 2022 13:26

github-actions bot added the released on @beta label Sep 22, 2022

github-actions bot added the released label Sep 23, 2022

OgDev-01 mentioned this pull request Dec 22, 2022

feat: add support for goto page functionality #708

Merged

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: connect repositories page to API data and pagination #405

feat: connect repositories page to API data and pagination #405

brandonroberts commented Sep 20, 2022 •

edited by bdougie

Loading

netlify bot commented Sep 20, 2022 •

edited

Loading

netlify bot commented Sep 20, 2022 •

edited

Loading

github-actions bot left a comment •

edited

Loading

brandonroberts commented Sep 21, 2022

OgDev-01 commented Sep 21, 2022 •

edited

Loading

eryc-cc left a comment

OgDev-01 left a comment

eryc-cc left a comment •

edited

Loading

brandonroberts commented Sep 21, 2022

eryc-cc commented Sep 21, 2022 •

edited

Loading

brandonroberts commented Sep 21, 2022

bdougie commented Sep 21, 2022

bdougie commented Sep 21, 2022

bdougie left a comment

OgDev-01 commented Sep 22, 2022

brandonroberts commented Sep 22, 2022

github-actions bot commented Sep 22, 2022

github-actions bot commented Sep 23, 2022

feat: connect repositories page to API data and pagination #405

feat: connect repositories page to API data and pagination #405

Conversation

brandonroberts commented Sep 20, 2022 • edited by bdougie 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?

netlify bot commented Sep 20, 2022 • edited Loading

✅ Deploy Preview for oss-insights ready!

netlify bot commented Sep 20, 2022 • edited Loading

✅ Deploy Preview for design-insights ready!

github-actions bot left a comment • edited Loading

Choose a reason for hiding this comment

PR Compliance Checks

Watched Files

brandonroberts commented Sep 21, 2022

OgDev-01 commented Sep 21, 2022 • edited Loading

eryc-cc left a comment

Choose a reason for hiding this comment

OgDev-01 left a comment

Choose a reason for hiding this comment

eryc-cc left a comment • edited Loading

Choose a reason for hiding this comment

brandonroberts commented Sep 21, 2022

eryc-cc commented Sep 21, 2022 • edited Loading

brandonroberts commented Sep 21, 2022

bdougie commented Sep 21, 2022

bdougie commented Sep 21, 2022

bdougie left a comment

Choose a reason for hiding this comment

OgDev-01 commented Sep 22, 2022

brandonroberts commented Sep 22, 2022

github-actions bot commented Sep 22, 2022

github-actions bot commented Sep 23, 2022

brandonroberts commented Sep 20, 2022 •

edited by bdougie

Loading

netlify bot commented Sep 20, 2022 •

edited

Loading

netlify bot commented Sep 20, 2022 •

edited

Loading

github-actions bot left a comment •

edited

Loading

OgDev-01 commented Sep 21, 2022 •

edited

Loading

eryc-cc left a comment •

edited

Loading

eryc-cc commented Sep 21, 2022 •

edited

Loading