Create modal/ pop up to display favorite feeds

[MargotRasamy]

Suggestion :

Creating a pop up / modal that shows the user's favorite feeds. In order to do that, we'll need :

• a toggle button to select and unselect a favorite feed
• a modal / pop up to show the favorite feeds
• a button to open the modal located on the menu, next to the 'Previous Feeds' button
• to save the favorite feeds. As the current app doesn't have an authentication service, we could just save the feeds reference in the browser (LocalStorage) so when users comes back to the website, they still have their favorites listed.
• call the method getFeed when users select one of their favorite feeds from the modal/ pop up to display their favorite feeds data.
• a method to format URLs saved in the LocalStorage to normalize users input as they could enter a link prefixed with "http://", "https://", "www.", ...etc. This way, we would avoid duplicate saved feeds.

We can save the favorite feeds reference in the LocalStorage in this format :

Key

Value

favorite-https://feeds.megaphone.fm/replyall

{ "program_description" : "A podcast about the internet' that is actually an unfailingly original exploration of modern life and how to survive it." - The Guardian. Hosted by Alex Goldman and Emmanuel Dzotsi from Gimlet.", "program_image" : "https://megaphone.imgix.net/podcasts/05f71746-a825-11e5-aeb5-a7a572df575e/image/uploads_2F1610700524297-f3e2p6fbm79-8b4536488226b56e93a99ce9f7b555b5_2FReplyAll_ShowArt.png?ixlib=rails-2.1.2&max-w=3000&max-h=3000&fit=crop&auto=format,compress", "program_link" : "https://feeds.megaphone.fm/replyall", "program_title" : "Reply All" }

We use the URL of the feed to identify each feed. We prefix the key with "favorite-" so we can iterate through the favorite feeds only and differenciate the favorites from other items, in case we would need to save other items in the LocalStorage.
We don't need to save the episodes in LocalStorage as we will make a RSS request call to get the feed when users select one of their favorite feeds.

Here are some images of how it is supposed to look like :