[NEW] LeaderBoard Component

[samad-yar-khan]

• I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
• I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Proposed changes (including videos or screenshots)

New Server Side Rendered LeaderBoard page and LeaderBoard table component which can be reused.

2022-01-29.02-08-02_Trim.mp4

Issue(s)

Fixes : #31

[lgtm-com]

This pull request introduces 1 alert when merging 1959356 into 8c2999d - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[Sing-Li]

Great work @samad-yar-khan ! 👏

Please add argument for TopN where say if N=10, then the component will change layout and only display the Top 10 ranked in a 1 bootstrap column by 3 bootsrap row format. Only display -- heading, ranking, avatar, and username. (no need for merge request counts etc)

It would be good if the width of the browser is shrunk (or when using mobile browser) that this component will reactively shrink down to a similar format.

[Sing-Li]

Need to make your component re-usable.

[Sing-Li]

No hard-coding of URL for re-usable components. Remember that other community builders will be going to their own (not Rocket.Chat's) leaderboard.

[samad-yar-khan]

Great work @samad-yar-khan ! 👏

Please add argument for TopN where say if N=10, then the component will change layout and only display the Top 10 ranked in a 1 bootstrap column by 3 bootsrap row format. Only display -- heading, ranking, avatar, and username. (no need for merge request counts etc)

It would be good if the width of the browser is shrunk (or when using mobile browser) that this component will reactively shrink down to a similar format.

Thanks a lot, I will add the feature to display top N, and reducing the number of columns for smaller screens. I will rename the css files as well.

[Sing-Li]

Make sure this file's name is the same as the CSS file --- Leaderboard

You can parameterize the Leaderboad component with the gsoc2022 URL.

[samad-yar-khan]

@Sing-Li I have a slight doubt, before I start programming the component again, just want to be sure if I am doing the right thing. As we want the component to be server rendered, shall I use the new React Server Components , because currently the server side rendering is happening from a getServerSideProps(){..} function, but this can only be called from a page. So shall I change my approach and use React Server Components ?

[debdutdeb]

Forcing workflow run

[samad-yar-khan]

@Sing-Li I have added the feature to show top N people and have also made the rest of the columns disappear smaller screen. Demo : Here in the end we can see only 5 users on the table because I changed the tableSize to 5 in the code.

2022-01-30.00-32-44.mp4

[Sing-Li]

@Sing-Li I have a slight doubt, before I start programming the component again, just want to be sure if I am doing the right thing. As we want the component to be server rendered, shall I use the new React Server Components , because currently the server side rendering is happening from a getServerSideProps(){..} function, but this can only be called from a page. So shall I change my approach and use React Server Components ?

I don't think so. But the component should be statically generatable! So you should have getInitial..

[Sing-Li]

@Sing-Li I have added the feature to show top N people and have also made the rest of the columns disappear smaller screen. Demo : Here in the end we can see only 5 users on the table because I changed the tableSize to 5 in the code.

2022-01-30.00-32-44.mp4

Please make the shrunk component compact. So that one can embed it together with other components on the same page. In the compact mode, it should NOT show the counts (as you already have now). But it should show an extra column with the rank ( 1 to 5 etc)

[lgtm-com]

This pull request introduces 1 alert when merging 076e7f5 into 7be8290 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[lgtm-com]

This pull request introduces 1 alert when merging 6f6850a into 7be8290 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[samad-yar-khan]

@Sing-Li I have added the feature to show top N people and have also made the rest of the columns disappear smaller screen. Demo : Here in the end we can see only 5 users on the table because I changed the tableSize to 5 in the code.
2022-01-30.00-32-44.mp4

Please make the shrunk component compact. So that one can embed it together with other components on the same page. In the compact mode, it should NOT show the counts (as you already have now). But it should show an extra column with the rank ( 1 to 5 etc)

@Sing-Li

• I have added the feature to show rank column and shrink the table for smaller screen.
• Have made function in lib which can render contributor data from the incoming API data (so that it can be re-used , makes the code look a bit cleaner).
• I still have some issues which we can maybe discuss over RocketChat 😅

2022-01-30.17-55-36.mp4

[samad-yar-khan]

@Sing-Li To make it easy for community builders to host their own leaderboard and keep everything server rendered, I have used dynamic paths. So all they have to do is add their own community name in the paths, and add the API link to their hosted leaderboard along with their community/organization name. After that their leaderboard will be server-rendered and validated after 10secs to avoid stale data.

So community builders will be able to use this leaderboard component pretty easily 😄 , with barely 3-4 lines of code.

The method can be seen below. And the leaderBoard will be accessible in the path - /gsoc/gsoc2022/socketChat

[Sing-Li]

Great idea @samad-yar-khan!! You're very very close. But I do still feel that you're missing our architecture, our "component orientation", and the vital role of the headless CMS (strapi) in this architecture. Yes, let's chat a bit on our Rocket.Chat team channels.

[samad-yar-khan]

Great idea @samad-yar-khan!! You're very very close. But I do still feel that you're missing our architecture, our "component orientation", and the vital role of the headless CMS (strapi) in this architecture. Yes, let's chat a bit on our Rocket.Chat team channels.

@Sing-Li Sure , I will join you over there :)

[samad-yar-khan]

@Sing-Li I am have made two collection ( Communities and GSoCContributors ) in the CMS which have a One-To-Many relationship. It will be easy for community builders to add their own Leader Board. Very easily and can easily fetch the data in NextJS and use the component anywhere. We can currently access different leaderboard using dynamic routes and communityId in query as shown in the above comment. Now the data flows into the application through our CMS.

[Sing-Li]

@samad-yar-khan this is VERY COOL! I wonder if there is any way to have the cron job "generated" from the code. Nothing urgent, please think about it a bit. One less place to update/worry about = greatly improved developer experience (in this case "community builder experience").

[samad-yar-khan]

@samad-yar-khan this is VERY COOL! I wonder if there is any way to have the cron job "generated" from the code. Nothing urgent, please think about it a bit. One less place to update/worry about = greatly improved developer experience (in this case "community builder experience").

@Sing-Li Thanks a lot for you constant support and guidance throughout this PR. I got to learn a lot by building this single component. It was a real fun process and I am grateful for what you guys are doing for developers and guiding rookies like us.

I was thinking about how I can improve the developer experience by generating cron jobs through some strapi itself, so its easier for developers to discover and enhance performance. This is what I had in mind :

• Make a cron job collections and generate them using strapi itself, like this. I will give it a little more thought and get back to you on this thread itself.
• We are currently using the prebuild strapi APIs and its fetching some unnecessary data in getStaticPaths(){...} and getStaticProps(){...} . So I was thinking of making two custom APIs for the queries fetching contributors lists and community names, so that only relevant data is fetched. This issue may not seem important right now, but when we have 1000s of communities with 100's of contributors ( 🤞 ), this can significantly improve performance and build time of these components ( (1000*100) documents fetched vs (100 or 1000) documents fetched ).

I will keep both of these in a single PR in the future. Would love to hear your thoughts.