Hacktoberfest: Limit the amount of displayed lines to 20

[petrvecera]

Difficulty: Easy
Getting started steps: https://github.com/cohstats/coh2stats#development

Add button switch to filter only top 20 lines from the array of bulletins.
On the stats page https://coh2stats.com/stats?range=month&statsSource=all&type=4v4&race=wermacht&timeStamp=1661990400
We have card for intel bulletins, to the header of the card, add switch which will display either all or top 20 only.

Implementation
There is component called bulletin card https://github.com/cohstats/coh2stats/blob/master/packages/web/src/pages/stats/components/bulletin-card.tsx

Add there a state, which will be default true - filter only top 20. Add switch https://ant.design/components/switch/ which will change the state, either filter or not. Data are in bulletinData, you will need to sort than cut.

How to put a switch into header of card can be found here https://github.com/cohstats/coh2stats/blob/master/packages/web/src/components/factions.tsx#L234

Feel free to ask any question. In case you pick the issue, write a comment so you can lock it.

[Giriraj-Roy]

Hello Sir,

I have gone through the repository and the given instructions. The issue seems to attract my interest and excites me to work on it. I humbly wait for you to assign the task to me if your analysis of my profile allows.

Yours Sincerely,
Giriraj Roy.

[Giriraj-Roy]

Thank you and I am excited to have got this issue assigned. Will start PRs once the hacktoberfest starts.

Giriraj Roy

[asi309]

If this is still open, I would like to take this up.

[petrvecera]

If this is still open, I would like to take this up.

Thank you for your interest but this is assigned to @Giriraj-Roy , we would let you know in case he can't finish it.

[Giriraj-Roy]

Hello sir,
I just wanted to keep you up to date. I am facing a little difficulty in cloning the repo. I will try some other ways at hand. If that doesn't work, I hope you will guide me accordingly.

Thank you,
Giriraj Roy

[petrvecera]

@Giriraj-Roy the steps are:

• fork the repo ( top right corner )
• git clone
• yarn install
• yarn web start

For developing the React FE

[Giriraj-Roy]

Update :

I have added the required button in the instructed position.
Do let me know if any styling is required.

The before and after images of clicking the button are attached.

Before

After

[petrvecera]

@Giriraj-Roy looks good ! 👍 But weed to do few more things.

I left the comments on the MR.

[petrvecera]

This issue is free to grab 👍