From bb3a356db997decb1bf0f8a5831dc941e0da3a7c Mon Sep 17 00:00:00 2001
From: salt-dev <salt-dev@salt-devs-MacBook-Pro.local>
Date: Mon, 20 Feb 2023 13:22:08 +0100
Subject: [PATCH 1/3] refactor code to use functions instead of class

---
 src/components/Episode.jsx       | 23 --------
 src/components/EpisodeList.jsx   | 92 ++++++++++++++------------------
 src/components/LoadingStatus.jsx |  1 -
 src/components/SearchHistory.jsx | 11 ++--
 4 files changed, 48 insertions(+), 79 deletions(-)

diff --git a/src/components/Episode.jsx b/src/components/Episode.jsx
index aa79690..32bb374 100644
--- a/src/components/Episode.jsx
+++ b/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;
diff --git a/src/components/EpisodeList.jsx b/src/components/EpisodeList.jsx
index 280da89..41c0df9 100644
--- a/src/components/EpisodeList.jsx
+++ b/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 = {
+function 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;
diff --git a/src/components/LoadingStatus.jsx b/src/components/LoadingStatus.jsx
index 8bc4db3..02586a4 100644
--- a/src/components/LoadingStatus.jsx
+++ b/src/components/LoadingStatus.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-
 import logo from "../logo.svg";
 
 const LoadingStatus = ({ fetching }) => {
diff --git a/src/components/SearchHistory.jsx b/src/components/SearchHistory.jsx
index 1856814..006e668 100644
--- a/src/components/SearchHistory.jsx
+++ b/src/components/SearchHistory.jsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { Button, Menu, MenuItem } from "@material-ui/core";
 import "../App.css";
-export default function SearchHistory(props) {
+
+function SearchHistory({getFeed, history}) {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleClick = (event) => {
@@ -10,7 +11,7 @@ export default function SearchHistory(props) {
 
   const handleClose = (event) => {
     if (event.currentTarget.innerText != '') 
-      props.getFeed({target: {elements: {feed_url: {value: 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;

From eee389f1c979004985553b82c08ef529b7808675 Mon Sep 17 00:00:00 2001
From: salt-dev <salt-dev@salt-devs-MacBook-Pro.local>
Date: Mon, 20 Feb 2023 13:24:25 +0100
Subject: [PATCH 2/3] make function so all components are structured the same

---
 src/components/Episode.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Episode.jsx b/src/components/Episode.jsx
index 32bb374..fcf7519 100644
--- a/src/components/Episode.jsx
+++ b/src/components/Episode.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import ReactAudioPlayer from "react-audio-player";
 import { Collapse } from "@material-ui/core";
 
-const Episode = ({ link, title }) => {
+function Episode({ link, title }) {
   const [open, setOpen] = useState(false);
 
   const divStyles = {

From c959c7c2ad5f85080cdd4bae3749d21bbc490c00 Mon Sep 17 00:00:00 2001
From: salt-dev <salt-dev@salt-devs-MacBook-Pro.local>
Date: Mon, 20 Feb 2023 13:47:24 +0100
Subject: [PATCH 3/3] use arrow functions instead of function

---
 src/components/Episode.jsx       | 2 +-
 src/components/EpisodeList.jsx   | 2 +-
 src/components/SearchHistory.jsx | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Episode.jsx b/src/components/Episode.jsx
index fcf7519..32bb374 100644
--- a/src/components/Episode.jsx
+++ b/src/components/Episode.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import ReactAudioPlayer from "react-audio-player";
 import { Collapse } from "@material-ui/core";
 
-function Episode({ link, title }) {
+const Episode = ({ link, title }) => {
   const [open, setOpen] = useState(false);
 
   const divStyles = {
diff --git a/src/components/EpisodeList.jsx b/src/components/EpisodeList.jsx
index 41c0df9..733d3a1 100644
--- a/src/components/EpisodeList.jsx
+++ b/src/components/EpisodeList.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Episode from "./Episode";
 
-function EpisodeList({ program_title, program_description, program_image, episodes }) {
+const EpisodeList = ({ program_title, program_description, program_image, episodes }) => {
   const cardStyle = {
     width: "20vw",
     float: "left",
diff --git a/src/components/SearchHistory.jsx b/src/components/SearchHistory.jsx
index 006e668..08ea2c4 100644
--- a/src/components/SearchHistory.jsx
+++ b/src/components/SearchHistory.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button, Menu, MenuItem } from "@material-ui/core";
 import "../App.css";
 
-function SearchHistory({getFeed, history}) {
+const SearchHistory = ({ getFeed, history }) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleClick = (event) => {
@@ -10,8 +10,8 @@ function SearchHistory({getFeed, history}) {
   };
 
   const handleClose = (event) => {
-    if (event.currentTarget.innerText != '') 
-      getFeed({target: {elements: {feed_url: {value: event.currentTarget.innerText}}}});
+    if (event.currentTarget.innerText != '')
+      getFeed({ target: { elements: { feed_url: { value: event.currentTarget.innerText } } } });
     setAnchorEl(null);
   };