feat: sort plays by Newest,Oldest,Most Liked,Random

[sudipkundu999]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Currently, the plays are arranged in the date-time sorted order. The recent play comes in the front.

• Adding Sort by:
  • Newest
  • Oldest
  • Most Liked
  • Random
• Saving this preference to localStorage

Fixes #1159

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

• Go to /plays
• You'll see a Sort by dropdown between the Banner and Play list. By default Newest is selected.
• Change the dropdown to Oldest,Most Liked, Random to see the plays sort by accordingly.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshots or example output

[vercel]

@sudipkundu999 is attempting to deploy a commit to a Personal Account owned by @reactplay on Vercel.

@reactplay first needs to authorize it.

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	f291eac
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/65002f451bc6bb0008a56289
😎 Deploy Preview	https://deploy-preview-1235--reactplayio.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 configuration.

[Angryman18]

is this PR ready for Review ? @sudipkundu999

[sudipkundu999]

Yes, this PR is ready for review @Angryman18

[sudipkundu999]

@Angryman18 @atapas Please review

[atapas]

@sudipkundu999 build fails.. please fix the lints locally first

[sudipkundu999]

@atapas I ran yarn lint and yarn format locally.
I'm not getting any error, these are 2 existing warnings. What step am I missing here?

[MrTea7171]

@atapas I ran yarn lint and yarn format locally. I'm not getting any error, these are 2 existing warnings. What step am I missing here?

you need to fix those warning that is the lint error we are talking about

[sudipkundu999]

@atapas I ran yarn lint and yarn format locally. I'm not getting any error, these are 2 existing warnings. What step am I missing here?

you need to fix those warning that is the lint error we are talking about

Hey, but I'm not seeing the error Callbacks must be listed after all other props when I run yarn lint
this is the error that is failing the build. How can I see this error locally?

Other warnings were from before. That shouldn't be the reason for build failing

[sudipkundu999]

@atapas I ran yarn lint and yarn format locally. I'm not getting any error, these are 2 existing warnings. What step am I missing here?

Also in this screenshot yarn lint throws a warning about the typescript version 5.2.2 which is the latest one and is unsupported by @typescript-eslint/typescript-estree

Shouldn't we freeze the typescript version instead of always picking the latest version?
In package.json we have "typescript": "*"

[atapas]

@sudipkundu999 please align this right..

[sudipkundu999]

@sudipkundu999 please align this right..

Done! This is how it looks!

[Angryman18]

Approved with some comments

[atapas]

@supminn Do you have further comments on this?

[supminn]

@supminn Do you have further comments on this?

no, It looks good.

[priyankarpal]

Looks Good 🎉