Feature/2014 Random surah ayah picker

[MFauzanAP]

Summary

Bismillah Al-Rahman Al-Rahim,
As salaam alaykum all.

I apologise in advance for any inconveniences or if this is not the ideal way of creating PRs, I don't contribute to open source projects very often.

With that being said, This PR aims to add a new feature where the site pick any surah or ayah for the user, including picking from a custom list.

I tried my best to maintain the current code style and design theme, add comments, and reuse existing components whenever I could. However, feel free to let me know if there could be some improvements in this department.

Closes #2014

Full Changes

Features

• New random picker UI, located in:
  • Command Bar
    • clicking on an option will also add it to the search history
    • the modal was also made slightly bigger for better visibility of the options
  • Quick Links
  • Search Drawer
• New /random page
  • This is used to specify which surahs to include in the randomizer
  • The user can select/deselect surahs to include as well as which ayat to go up to
  • It defaults to the latest surah logs if the user hasn't specified a custom selection
  • The user can search for a surah to include/exclude
  • A page was used instead of a simple modal for better UX and better compatibility for mobile/tablet devices
• New random.ts utility file
  • This file allows you to either
    • Pick a random surah id from all surahs
    • Pick a random ayah id from a given surah
    • Pick a random surah and ayah from all surahs
    • The previous options but for a given set of surahs and ayat
  • The file has also been tested with 100% coverage

Refactors

• Add surahLogs and customSelection keys to the readingTracker redux slice
  • surahLogs is similar to the currently-used recentReadingSessions with the difference being it stores the furthest ayat a user has reached instead of where they last left off
  • customSelection is used to specify which surahs/ayats the user wants to include in the randomizer if it does not exist, it falls back to surah logs
  • recentReadingSessions was kept intact to maintain stability and backwards-compatibility

New Translation Keys

• common.json
  • random
    • pick-random
    • any-surah
    • any-ayah
    • selected-surah
    • edit
• quick-links.json
  • pick-random
• random.json
  • all
  • desc
  • load-previous
  • reset-changes
  • save-randomize
  • search
  • selected
  • title

Test Plan

Below are the scenarios I tested for:

• New user with no surah logs or custom selection
• Existing user with some surah logs
• Existing user with both surah logs and custom selection

The new random.ts utility file has also been tested with 100% coverage using random.test.ts.

Future Work

As discussed in the original issue, this feature can be improved in the following ways:

• Better UX in /random, in particular quick-selecting multiple surahs at once
• Different selections/lists for different purposes for e.g revising a specific juz, memorizing recent surahs, etc.
• After picking a random list, the user should be able to keep clicking random in the Qur'an reader to continue choosing from that list
• The user could directly specify which surahs he has trouble with based on a rating, and the website would prioritise these choices more

Screenshots

Before	After

[vercel]

@MFauzanAP is attempting to deploy a commit to the Quran Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
quran-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 23, 2023 5:15am

[MFauzanAP]

As salaam alaykum.

Would it be worthwhile to add a "Next Random" button in the ChapterControls component? This result in better UX as it allows the user to quickly choose a random surah without opening the command bar or search drawer.

However, it would mean refactoring some of the current state to keep track of which choice was last picked by the user. Please let me know your thoughts and/or if you have a better solution.