Create modal/ pop up to display favorite feeds

src/App.css

@@ -1,4 +1,6 @@
 .App {
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
@@ -49,6 +51,14 @@ img {
   border: 1px solid #ccc;
 }
 
+.favorite{
+  cursor: pointer;
+  margin: 0.5rem auto;
+}
+.favorite:hover {
+  fill: rgb(250, 218, 148);
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -65,4 +75,85 @@ img {
   to {
     transform: rotate(360deg);
   }
+
+
+}
+
+.options-nav {
+  display: flex;
+}
+
+/* Favorites list section */
+.favorites-list-section {
+  /* padding: 1rem; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.favorite-item {
+  background-color: rgb(242, 242, 242);
+  border-radius: 2px;
+  margin: 1rem;
+  padding:1rem;
+  display: flex;
+  justify-content: space-between;
 }
+
+.favorite-item .action-container {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  /* height: 200px; */
+}
+
+.favorite-item .action-container > * {
+  margin: 5px;
+}
+
+.favorite-item .img-container {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 150px;
+  height: 150px;
+}
+
+.favorite-item .img-container > img {
+  max-height: 100%;
+  max-width: 100%;
+  object-position: center;
+  object-fit: cover;
+}
+
+.favorite-item .action-container .informations {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.favorite-item  .informations > .title {
+  font-weight: bold;
+  font-size: 21px;
+}
+
+.favorite-item  .informations > .description {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  /* CSS properties for ellipsis overflow after 5 lines of text */
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  max-height: 5 * 1.6rem;
+}
+
+@media screen and (max-width: 600px) {
+  .favorite-item {
+    flex-direction: column;
+  }
+
+  .favorite-item .action-container {
+    flex-direction: column;
+  }
+}

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Button,
   Dialog,
@@ -12,19 +12,25 @@ import "./App.css";
 import EpisodeList from "./components/EpisodeList";
 import UserForm from "./components/UserForm";
 import LoadingStatus from "./components/LoadingStatus";
+import FavoriteDialog from "./components/FavoriteDialog";
+import { useRef } from "react";
+import SearchHistory from "./components/SearchHistory";
 
 const App = ({ fetching }) => {
   const [fetched, setFetched] = useState({});
   const [onFetching, setFetching] = useState(false);
   const [previousFeeds, setPreviousFeeds] = useState([]);
   const [past, setPast] = useState(false);
   const [error, setError] = useState(false);
+  const [favoriteFeeds, setFavoriteFeeds] = useState([]);
+
+  const favoritesPopUpRef = useRef();
 
   const getFeed = (event) => {
     setFetching((prev) => !prev);
     if (event.preventDefault != null)
       event.preventDefault();
-    const feed_url = event.target.elements.feed_url.value;
+    const feed_url = formatUrl(event.target.elements.feed_url.value);
     const Parser = require("rss-parser");
     const parser = new Parser({
       customFields: {
@@ -43,6 +49,7 @@ const App = ({ fetching }) => {
             program_title: feed.title,
             program_image: feed.image.url,
             program_description: feed.description,
+            program_link: feed_url,
           });
           setFetching((prev) => !prev);
           setPreviousFeeds([...new Set([...previousFeeds, feed_url])]);
@@ -63,6 +70,20 @@ const App = ({ fetching }) => {
     }
   };
 
+  // Formatting method for URLs to avoid having duplicate favorites in localstorage as the key used is the URL
+  const formatUrl = (url) => {
+    let urlSequence;
+    let finalUrl;
+    if (url.includes('://')) {
+      urlSequence = url.split('://')[1];
+      finalUrl = 'https://' + urlSequence;
+    } else {
+      finalUrl = 'https://' + url;
+    }
+
+    return finalUrl;
+  };
+
   const handleClose = () => {
     setFetching(false);
     setError(false);
@@ -90,28 +111,53 @@ const App = ({ fetching }) => {
     </div>
   );
 
+  const isFavoriteSelected = (link) => {
+    return favoriteFeeds.some(el => el.program_link === link);
+  }
+
+  const updateFavoritesFeeds = () => {
+    let favorites = [];
+    for (let [key, value] of Object.entries(localStorage)) {
+      if (key.startsWith('favorite-')) {
+          favorites.push(JSON.parse(value));
+      }
+    } 
+    setFavoriteFeeds(favorites);
+  }
+
+  useEffect(() => {
+    updateFavoritesFeeds();
+  }, []);
+
   return (
     <div className="App">
       <header className="App-header">
         <h1 className="App-title">quick-feed</h1>
       </header>
       <UserForm
-        getFeed={getFeed}
-        onClick={() => setFetching(true)}
-        past={past}
-        previous_feeds={[...previousFeeds]}
-      />
+        getFeed={getFeed} />
+
+      {past ? <>
+          <nav className="options-nav">
+            <SearchHistory getFeed={getFeed} history={[...previousFeeds]} />
+            <div style={{ padding: "20px 0" }}><Button onClick={() => {favoritesPopUpRef.current.handleClickOpen()}}>Favorites Section</Button></div> 
+          </nav>
+          <EpisodeList
+            episodes={fetched.episodes}
+            program_title={fetched.program_title}
+            program_description={fetched.program_description}
+            program_image={fetched.program_image}
+            program_link={fetched.program_link}
+            isFavoriteSelected={isFavoriteSelected} 
+            updateFavorites={updateFavoritesFeeds}
+            />
+          </> : <p>Please enter an RSS feed</p>}
+
       {error ? renderAlert() : <div />}
-      {!past ? <p>Please enter an RSS feed</p> : <div></div>}
       <LoadingStatus fetching={onFetching} />
 
-      <EpisodeList
-        episodes={fetched.episodes}
-        program_title={fetched.program_title}
-        program_description={fetched.program_description}
-        program_image={fetched.program_image}
-        fetching={fetching}
-      />
+      {/* Favorite feeds list dialog component */}
+      <FavoriteDialog favoriteFeeds={favoriteFeeds} updateFavorites={updateFavoritesFeeds} getFeed={getFeed} isFavoriteSelected={isFavoriteSelected} ref={favoritesPopUpRef} />
     </div>
   );
 };

src/components/Episode.jsx

@@ -32,27 +32,4 @@ const Episode = ({ link, title }) => {
   );
 };
 
-// class Episode extends Component {
-//   divStyles = {
-//     width: "77vw",
-//     float: "right",
-//     marginRight: "1vw",
-//   };
-//   render() {
-//     return (
-//       <div className="list-group" style={this.divStyles}>
-//         <a
-//           href={this.props.link}
-//           className="list-group-item list-group-item-action text-left"
-//         >
-//           {this.props.title}
-//         </a>
-//         <Collapse>
-//           <p>{this.props.title}</p>
-//         </Collapse>
-//       </div>
-//     );
-//   }
-// }
-
 export default Episode;

src/components/EpisodeList.jsx

@@ -1,63 +1,79 @@
-import React, { Component } from "react";
+import React from "react";
+import FavoriteButton from "./FavoriteButton";
 import Episode from "./Episode";
+import { useState } from "react";
 
-class EpisodeList extends Component {
-  cardStyle = {
-    width: "20vw",
-    float: "left",
-  };
 
-  render() {
-    const {
+const EpisodeList = ({
+    program_title,
+    program_description,
+    program_image,
+    episodes,
+    program_link,
+    updateFavorites,
+    isFavoriteSelected
+  }) => {
+
+  // eslint-disable-next-line no-unused-vars
+  const [cardStyle, setCardStyle] = useState({width: "20vw", float: "left"});
+
+  const toggleFavorite = () => {
+    const feed_data = {
       program_title,
       program_description,
       program_image,
-      episodes,
-    } = this.props;
+      program_link,
+    };
+
+    isFavoriteSelected(program_link) ? localStorage.removeItem(`favorite-${program_link}`) : localStorage.setItem(`favorite-${program_link}`, JSON.stringify(feed_data));
+    updateFavorites();
+  }
 
-    return (
-      <div>
-        {episodes ? (
-          <div>
-            <div id="menu" styles={{ float: "left" }}></div>
-            <div className="card" style={this.cardStyle}>
-              <img
-                src={program_image}
-                className="card-img-top"
-                alt={program_title}
+  return (
+    <div>
+      {episodes ? (
+        <div>
+          <div id="menu" styles={{ float: "left" }}></div>
+          <div className="card" style={cardStyle}>
+            <img
+              src={program_image}
+              className="card-img-top"
+              alt={program_title}
+            />
+            <div className="card-body">
+              <h5 className="card-title">{program_title}</h5>
+              <FavoriteButton 
+                selected={isFavoriteSelected(program_link)}
+                onClickAction={toggleFavorite} />
+              <div
+                className="card-text"
+                dangerouslySetInnerHTML={{
+                  __html: program_description,
+                }}
               />
-              <div className="card-body">
-                <h5 className="card-title">{program_title}</h5>
-                <div
-                  className="card-text"
-                  dangerouslySetInnerHTML={{
-                    __html: program_description,
-                  }}
-                />
-              </div>
             </div>
-            {episodes.map((episode, i) => (
-              <Episode
-                key={Math.random() * i}
-                index={i}
-                title={episode.title}
-                enclosure={episode.enclosure}
-                link={
-                  episode.enclosure
-                    ? episode.enclosure.url
-                    : "json_data is null or undefined"
-                }
-                image={program_image}
-                description={episode.description}
-              />
-            ))}
           </div>
-        ) : (
-          <div />
-        )}
-      </div>
-    );
-  }
+          {episodes.map((episode, i) => (
+            <Episode
+              key={Math.random() * i}
+              index={i}
+              title={episode.title}
+              enclosure={episode.enclosure}
+              link={
+                episode.enclosure
+                  ? episode.enclosure.url
+                  : "json_data is null or undefined"
+              }
+              image={program_image}
+              description={episode.description}
+            />
+          ))}
+        </div>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
 }
 
 export default EpisodeList;