wip: github components kit #66

sidmohanty11 · 2022-01-29T10:17:26Z

Added a new GithubIssuesList Component taking inspiration from discourse ranked list component
Used markedjs to parse the markdown text given in issue body and created a new MDPreview component which can be reused.
Likes are based on no. of upvotes / +1s
Comments are the no. of comments
For now, it's showing upto 10 issues
Shows upto 20 words max and then truncates (of issue body)

app/pages/index.js

debdutdeb · 2022-01-29T18:47:11Z

Forcing workflow run.

Sing-Li

Add a compact mode for the component. Full page components are NOT THAT useful. We may as well just create a route for it. Imagine it is embedded as one of 4 components in a row of the page, restyle the component under this circumstance.

Typically, this should also be the reactive mode display when the width is shrunk (or using mobile browser).

sidmohanty11 · 2022-01-30T08:17:01Z

@Sing-Li the way I am imagining it is,

we can make another reusable GithubIssueCard component which will be styled like a proper Github Issue and on the home page under "Trending issues" or something like that where we can add the top 4 or 5 issues (which can be sorted by most upvoted or comments)
then we can use that card component in the route we create (for example, /gh-issues) to show the top 10-15 issues
Also should I keep them in two columns or make them more compact? So we can use 3 columns and when we shrink the size, they get arranged as 2 then 1.

Please suggest your opinions and I'll start working on it!

Sing-Li · 2022-01-30T17:03:16Z

Great ideas @sidmohanty11 ! Really do like the two components idea. But please do name it consistent with bootstrap culture (I don't know if "card" is the right word in that design language - sounds very Material Design'ish). Also please name the two components appropriately so that the "large" one is for 1/3, 1/2, 1 page layouts where the "card?" one is for finer compositions.

As far as aesthetics and layout go - please confer in DM directly with @demonicirfan .... he's got some extreme "design chops" and may be able to figma you some workable ideas. Thanks.

debdutdeb

I think there is a lot of potential for github integration, and for that reason I suggested using octokit from that start.

Since we're now using octokit, imo it'd be better to not have a octokit library (which also confuses people with main octokit), but rather a collection of helper functions for grabbing common github resources.

debdutdeb · 2022-01-30T16:52:29Z

app/pages/index.js

+  const issues = await octokitClient('GET /repos/{owner}/{repo}/issues', {
+    owner: 'RocketChat',
+    repo: 'RC4Community'
+  });


Make this a separate function in lib/github

Suggested change

const issues = await octokitClient('GET /repos/{owner}/{repo}/issues', {

owner: 'RocketChat',

repo: 'RC4Community'

});

const issues = await getIssues(`RocketChat`, `RC4Community`)

debdutdeb · 2022-01-30T17:02:08Z

app/lib/octokit.js

@@ -0,0 +1,15 @@
+import { Octokit } from '@octokit/core';


Convert this whole to a github library of sorts.

debdutdeb · 2022-01-30T17:02:48Z

app/pages/index.js

@@ -9,6 +9,8 @@ import Growthcounters from '../components/growthcounters';
 import { Container, Col } from 'react-bootstrap';
 import { fetchAPI } from '../lib/api';
 import { withFirebaseAuthUser } from '../components/auth/firebase';
+import GithubIssuesList from '../components/githubissueslist';
+import { octokitClient } from '../lib/octokit'


Suggested change

import { octokitClient } from '../lib/octokit'

import { getIssues } from '../lib/github'

Consider these just suggestions, do it your own way, no need to commit these exact ones.

debdutdeb · 2022-01-30T17:18:21Z

@sidmohanty11 if you have any questions or need any clarifications for the changes I requested, feel free to ask :)

sidmohanty11 · 2022-01-30T17:36:18Z

@Sing-Li Got it!

I've already DMed him, as soon as he comes up with an idea I will start the execution part.

sidmohanty11 · 2022-01-30T17:46:01Z

@debdutdeb thank you so much for the suggestions!

Just so I am crystal clear, I am going to make a lib/github.js file where all the helper functions will reside like getIssues, getPRs (you can give some other suggestions too) etc? And return data as their purpose states directly by just passing in params? and export them all. Did I get it correctly?

For example,

const issues = await getIssues('RocketChat', 'RC4Community'); // will return all issues
const prs = await getPRs('RocketChat', 'RC4Community'); // will return all PRs

Thank you

Sing-Li · 2022-01-30T18:01:14Z

@sidmohanty11 perhaps make this into a 3 components - Github components kit. If you add this component - I am sure it will eventually become the most used out of all the Github components 😃

We'll use it immediately on community.rocket.chat ;-) Static-gen preferred please.

sidmohanty11 · 2022-01-30T18:21:16Z

@Sing-Li Amazing suggestion! I will start working

Thank you

debdutdeb · 2022-01-30T18:25:07Z

@Sing-Li like the idea 💯

Just a suggestion, maybe we don't change and mix the goal of this pr, and merge it as it is, then move the component kit to a seperate pr?

Sing-Li · 2022-01-30T23:15:47Z

Thx 4 suggestion.

All the Github related components in one "kit" or PR is best, IMO. Each component is actually quite trivial at the moment - and they'll use many common APIs. Otherwise we might end up with too much to manage.

We've been doing 3 or 4 components PRs quite frequently so far. There will likely be another 30 to 40 to be done yet before we get a reasonable foundation for the project.

sidmohanty11 · 2022-01-31T06:10:34Z

Added new contributorslist component which shows the top 100 contributors,
Arranged all the github related components inside a separate github folder which can be useful for further expansion (for example addition of other components related to github integration)
Made some helper functions getIssues, getPRs, getContributors and exported it from lib/github.js @debdutdeb please let me know if I need to make some other changes
The re-styling of github issue "card" isn't completed yet

Thank you

Sing-Li · 2022-02-03T00:06:39Z

@sidmohanty11 really looks good. I'll give it a test now.

Sing-Li · 2022-02-03T02:34:40Z

@sidmohanty11 I've tested everything and basically working fine. I also liked how you've structured the code, making it very easy to migrate to the next step.

Which is to cache the data (issues, etc) through strapi, the headless CMS, like all the other getStaticProps() fetches.

Strapi's cron should be used for this task.

This step is important to lighten the load on Github API calls if the site re-generation frequency is high.

Please use the currently open Leaderboard component PR as an example. It should be quite easy now that you have your data fetch functions all under a lib directory.

Thanks.

sidmohanty11 · 2022-02-04T09:06:57Z

@Sing-Li I've added the cron job which will make fetch requests after an hour and an initial fetch request during initialisation of data(so that we don't wait for data for 1st 1hr). And I've checked that it will be very rare but if at any edge case situation we change the cron request time to 60secs or so.. we might get an error that says we have exceeded the fetch request quota. So for that I've just made a default issue template otherwise in this way the cron job will update the Issues accordingly. :-

if maxed out

normal fetch

Please give it a test and provide me some of your suggestions

Thank you

Sing-Li · 2022-02-04T17:29:37Z

This is awesome @sidmohanty11 ! I'll test this tonight or over the weekend.

In the meantime, please add component kit documentation (following standard ReactJS component doc format, not the leaderboard component's format) here:

https://github.com/RocketChat/RC4Community/tree/master/docs/components

Thanks.

Sing-Li · 2022-02-05T20:03:27Z

@sidmohanty11 the URL to docs is updated above - https://github.com/RocketChat/RC4Community/tree/master/docs/components

sidmohanty11 · 2022-02-06T06:35:37Z

@Sing-Li sorry for the late reply, I went to visit Grandma this weekend. I will finish the work by today. Thank you

… integration

sidmohanty11 · 2022-02-06T08:05:36Z

@Sing-Li I've added the documentation and have tried to be as much descriptive as I could, still if I've missed something or for any improvements, I would love to get your suggestions

debdutdeb reviewed Jan 29, 2022

View reviewed changes

app/pages/index.js Outdated Show resolved Hide resolved

debdutdeb closed this Jan 29, 2022

debdutdeb reopened this Jan 29, 2022

Sing-Li requested changes Jan 29, 2022

View reviewed changes

debdutdeb requested changes Jan 30, 2022

View reviewed changes

Sing-Li changed the title ~~wip: githubissueslist component~~ wip: github components kit Jan 30, 2022

sidmohanty11 force-pushed the github-issues-integration branch from a3e0af8 to 543bb18 Compare January 31, 2022 05:59

sidmohanty11 force-pushed the github-issues-integration branch from 7ae1cea to f926dce Compare February 3, 2022 13:47

sidmohanty11 added 5 commits February 6, 2022 12:10

wip: githubissueslist component

86c1bde

using octokit and handling errors

223de76

new: contributors list component and some helper functions for github…

cb58083

… integration

restyling githubissues component

9604b02

using strapi cms to manage github fetch reqs by cron jobs

47a0fd1

fetching data in client and handling possible errors

35f88d8

sidmohanty11 force-pushed the github-issues-integration branch from 73a5340 to 35f88d8 Compare February 6, 2022 06:41

new: GitHub Components Kit docs

cb2e148

Sing-Li merged commit 6ea21e0 into RocketChat:master Feb 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wip: github components kit #66

wip: github components kit #66

sidmohanty11 commented Jan 29, 2022 •

edited

Loading

debdutdeb commented Jan 29, 2022

Sing-Li left a comment

sidmohanty11 commented Jan 30, 2022 •

edited

Loading

Sing-Li commented Jan 30, 2022

debdutdeb left a comment

debdutdeb Jan 30, 2022

debdutdeb Jan 30, 2022

debdutdeb Jan 30, 2022

debdutdeb commented Jan 30, 2022

sidmohanty11 commented Jan 30, 2022

sidmohanty11 commented Jan 30, 2022

Sing-Li commented Jan 30, 2022 •

edited

Loading

sidmohanty11 commented Jan 30, 2022 •

edited

Loading

debdutdeb commented Jan 30, 2022

Sing-Li commented Jan 30, 2022

sidmohanty11 commented Jan 31, 2022 •

edited

Loading

Sing-Li commented Feb 3, 2022

Sing-Li commented Feb 3, 2022 •

edited

Loading

sidmohanty11 commented Feb 4, 2022

Sing-Li commented Feb 4, 2022 •

edited

Loading

Sing-Li commented Feb 5, 2022

sidmohanty11 commented Feb 6, 2022

sidmohanty11 commented Feb 6, 2022

	import { octokitClient } from '../lib/octokit'
	import { getIssues } from '../lib/github'

wip: github components kit #66

wip: github components kit #66

Conversation

sidmohanty11 commented Jan 29, 2022 • edited Loading

debdutdeb commented Jan 29, 2022

Sing-Li left a comment

Choose a reason for hiding this comment

sidmohanty11 commented Jan 30, 2022 • edited Loading

Sing-Li commented Jan 30, 2022

debdutdeb left a comment

Choose a reason for hiding this comment

debdutdeb Jan 30, 2022

Choose a reason for hiding this comment

debdutdeb Jan 30, 2022

Choose a reason for hiding this comment

debdutdeb Jan 30, 2022

Choose a reason for hiding this comment

debdutdeb commented Jan 30, 2022

sidmohanty11 commented Jan 30, 2022

sidmohanty11 commented Jan 30, 2022

Sing-Li commented Jan 30, 2022 • edited Loading

sidmohanty11 commented Jan 30, 2022 • edited Loading

debdutdeb commented Jan 30, 2022

Sing-Li commented Jan 30, 2022

sidmohanty11 commented Jan 31, 2022 • edited Loading

Sing-Li commented Feb 3, 2022

Sing-Li commented Feb 3, 2022 • edited Loading

sidmohanty11 commented Feb 4, 2022

if maxed out

normal fetch

Sing-Li commented Feb 4, 2022 • edited Loading

Sing-Li commented Feb 5, 2022

sidmohanty11 commented Feb 6, 2022

sidmohanty11 commented Feb 6, 2022

sidmohanty11 commented Jan 29, 2022 •

edited

Loading

sidmohanty11 commented Jan 30, 2022 •

edited

Loading

Sing-Li commented Jan 30, 2022 •

edited

Loading

sidmohanty11 commented Jan 30, 2022 •

edited

Loading

sidmohanty11 commented Jan 31, 2022 •

edited

Loading

Sing-Li commented Feb 3, 2022 •

edited

Loading

Sing-Li commented Feb 4, 2022 •

edited

Loading