separate chapterListItem component in reciter's chaperList

[omarKhatib]

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[vercel[bot]]

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

Name	Status	Preview	Updated
quran-com	✅ Ready (Inspect)	Visit Preview	Apr 26, 2022 at 8:08AM (UTC)

[omarKhatib]

@osamasayed Could you please review this.

[osamasayed]

@osamasayed Could you please review this.

Alsalamu Alikum, can you provide the purpose of this PR?

[omarKhatib]

WaAlaykoum Alsalam Wa Aahmato Allah Wa Barakatoh..

it's to make chaperList more readable and to avoid bad practices in react listing components since I noticed two coding problems could be written better :

1- isAudioPlayingThisChapter variable and onClick function were defined inside the map loop which means that they will be defined with each iteration https://github.com/quran/quran.com-frontend-next/blob/1a2dee0c10745ac51c29203d1718b70e56dab67f/src/components/Reciter/ChaptersList.tsx#L80-L89

2-it's recommended to make a separated chapterListItem component instead of putting everything inside chapterList component

check :

  {filteredChapters?.map((chapter) => (
    <ChapterListItem key={chapter?.id} chapter={chapter} selectedReciter={selectedReciter} />
  ))}

instead of :

https://github.com/quran/quran.com-frontend-next/blob/1a2dee0c10745ac51c29203d1718b70e56dab67f/src/components/Reciter/ChaptersList.tsx#L80-L153

thanks.

[omarKhatib]

@muhajirdev