Refactor

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,53 @@
-import React, { Component } from "react";
+import React from "react";
 import Episode from "./Episode";
 
-class EpisodeList extends Component {
-  cardStyle = {
+const EpisodeList = ({ program_title, program_description, program_image, episodes }) => {
+  const cardStyle = {
     width: "20vw",
     float: "left",
   };
 
-  render() {
-    const {
-      program_title,
-      program_description,
-      program_image,
-      episodes,
-    } = this.props;
-
-    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>
+              <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>
+  );
+
 }
 
 export default EpisodeList;

src/components/LoadingStatus.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import logo from "../logo.svg";
 
 const LoadingStatus = ({ fetching }) => {

src/components/SearchHistory.jsx

@@ -1,16 +1,17 @@
 import React from "react";
 import { Button, Menu, MenuItem } from "@material-ui/core";
 import "../App.css";
-export default function SearchHistory(props) {
+
+const SearchHistory = ({ getFeed, history }) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
   const handleClose = (event) => {
-    if (event.currentTarget.innerText != '') 
-      props.getFeed({target: {elements: {feed_url: {value: event.currentTarget.innerText}}}});
+    if (event.currentTarget.innerText != '')
+      getFeed({ target: { elements: { feed_url: { value: event.currentTarget.innerText } } } });
     setAnchorEl(null);
   };
 
@@ -23,7 +24,7 @@ export default function SearchHistory(props) {
   };
 
   const renderMenuItems = () => {
-    return <div>{props.history.map(renderItem)}</div>;
+    return <div>{history.map(renderItem)}</div>;
   };
 
   return (
@@ -43,8 +44,10 @@ export default function SearchHistory(props) {
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        {props.history ? renderMenuItems() : <div />}
+        {history ? renderMenuItems() : <div />}
       </Menu>
     </div>
   );
 }
+
+export default SearchHistory;