From f0f480348bdd7b0b0e91a72f83e13d203de4eec1 Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 04:24:02 +0530
Subject: [PATCH 1/8] Make underHeader an arrow function

---
 src/components/UnderHeader/UnderHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UnderHeader/UnderHeader.tsx b/src/components/UnderHeader/UnderHeader.tsx
index efc8edc..b551adb 100644
--- a/src/components/UnderHeader/UnderHeader.tsx
+++ b/src/components/UnderHeader/UnderHeader.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import "./UnderHeader.css";
 import Feature from "./Feature";
 
-function UnderHeader() {
+const UnderHeader = () => {
   return (
     <div className="curio_whatcurio section__margin" id="curio">
       <div className="curio_whatcurio-feature">
@@ -33,6 +33,6 @@ function UnderHeader() {
       </div>
     </div>
   );
-}
+};
 
 export default UnderHeader;

From 1d4f225cd0bedf087d75d051ae22f1acd9366e56 Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 04:29:13 +0530
Subject: [PATCH 2/8] Convert searchBar to a functional component

---
 src/components/UnderHeader/Searchbar.tsx | 81 ++++++++++--------------
 1 file changed, 34 insertions(+), 47 deletions(-)

diff --git a/src/components/UnderHeader/Searchbar.tsx b/src/components/UnderHeader/Searchbar.tsx
index 2b16c98..d665bb2 100644
--- a/src/components/UnderHeader/Searchbar.tsx
+++ b/src/components/UnderHeader/Searchbar.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent } from "react";
+import React, { FormEvent, useState } from "react";
 import { Input, Button } from "rsuite";
 import SearchIcon from "@rsuite/icons/Search";
 import "./SearchBar.css";
@@ -7,58 +7,45 @@ interface SearchbarProps {
   handleFormSubmit: (termFromSearchBar: string) => void;
 }
 
-interface SearchbarState {
-  term: string;
-}
-
-class Searchbar extends React.Component<SearchbarProps, SearchbarState> {
-  constructor(props: SearchbarProps) {
-    super(props);
-    this.state = {
-      term: "",
-    };
-  }
+const Searchbar: React.FC<SearchbarProps> = ({ handleFormSubmit }) => {
+  const [term, setTerm] = useState<string>("");
 
-  handleChange = (value: string) => {
-    this.setState({
-      term: value,
-    });
+  const handleChange = (value: string) => {
+    setTerm(value);
   };
 
-  handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    this.props.handleFormSubmit(this.state.term);
+    handleFormSubmit(term);
   };
 
-  render() {
-    return (
-      <div>
-        <form onSubmit={this.handleSubmit}>
-          <div className="curio__search">
-            <div className="curio__search__input">
-              <Input
-                onChange={this.handleChange}
-                value={this.state.term}
-                name="video-search"
-                type="text"
-                id="searchBar"
-                placeholder="Search Video..."
-              />
-              <Button
-                onClick={() => this.handleSubmit}
-                type="submit"
-                appearance="primary"
-                size="sm"
-                id="searchButton"
-              >
-                <SearchIcon />
-              </Button>
-            </div>
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <div className="curio__search">
+          <div className="curio__search__input">
+            <Input
+              onChange={handleChange}
+              value={term}
+              name="video-search"
+              type="text"
+              id="searchBar"
+              placeholder="Search Video..."
+            />
+            <Button
+              onClick={() => handleSubmit}
+              type="submit"
+              appearance="primary"
+              size="sm"
+              id="searchButton"
+            >
+              <SearchIcon />
+            </Button>
           </div>
-        </form>
-      </div>
-    );
-  }
-}
+        </div>
+      </form>
+    </div>
+  );
+};
 
 export default Searchbar;

From 4dca3b39adf7df7044de1cb85ae8949e9c424ece Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 04:37:46 +0530
Subject: [PATCH 3/8] Convert `APIError` to functional

---
 src/components/UnderHeader/APIError.tsx | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/UnderHeader/APIError.tsx b/src/components/UnderHeader/APIError.tsx
index d1df752..b81c344 100644
--- a/src/components/UnderHeader/APIError.tsx
+++ b/src/components/UnderHeader/APIError.tsx
@@ -6,19 +6,17 @@ interface APIErrorProps {
   apiResponse: string;
 }
 
-class APIError extends React.Component<APIErrorProps> {
-  render() {
-    return (
-      <div className="apiErrorMessage_mainDiv">
-        {this.props.apiResponse !== "" && (
-          <Message className="apiErrorMessage__div">
-            <Message className="apiErrorMessage__header">API Error</Message>
-            <p>{this.props.apiResponse}</p>
-          </Message>
-        )}
-      </div>
-    );
-  }
-}
+const APIError: React.FC<APIErrorProps> = ({ apiResponse }) => {
+  return (
+    <div className="apiErrorMessage_mainDiv">
+      {apiResponse !== "" && (
+        <Message className="apiErrorMessage__div">
+          <Message className="apiErrorMessage__header">API Error</Message>
+          <p>{apiResponse}</p>
+        </Message>
+      )}
+    </div>
+  );
+};
 
 export default APIError;

From 8be00901d0bde5f52e18d78960179212d40eaeda Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 05:10:55 +0530
Subject: [PATCH 4/8] Make AddComment an arrow function

---
 src/components/comments/AddComment.tsx | 6 ++++--
 src/components/comments/Comments.tsx   | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 666ec8a..09ca02b 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import "./AddComment.scss";
 import { Form, Image, TextArea } from "semantic-ui-react";
 
-export function AddComment() {
+const AddComment = () => {
   return (
     <div className="add-comment">
       <Image
@@ -19,4 +19,6 @@ export function AddComment() {
       </Form>
     </div>
   );
-}
+};
+
+export default AddComment;
diff --git a/src/components/comments/Comments.tsx b/src/components/comments/Comments.tsx
index 6ba62af..f5fc4da 100644
--- a/src/components/comments/Comments.tsx
+++ b/src/components/comments/Comments.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { CommentsHeader } from "./CommentsHeader";
-import { AddComment } from "./AddComment";
+import AddComment from "./AddComment";
 import { Comment } from "./Comment";
 
 // Define a type for your comment objects

From 5fdffe8da5fb9af84875b2c39eb6f4c69d9524f3 Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 05:12:58 +0530
Subject: [PATCH 5/8] Make `CommentsHeader` an arrow function

---
 src/components/comments/Comments.tsx       | 2 +-
 src/components/comments/CommentsHeader.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/comments/Comments.tsx b/src/components/comments/Comments.tsx
index f5fc4da..89900f5 100644
--- a/src/components/comments/Comments.tsx
+++ b/src/components/comments/Comments.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CommentsHeader } from "./CommentsHeader";
+import CommentsHeader from "./CommentsHeader";
 import AddComment from "./AddComment";
 import { Comment } from "./Comment";
 
diff --git a/src/components/comments/CommentsHeader.tsx b/src/components/comments/CommentsHeader.tsx
index cd7caa9..e3a39c7 100644
--- a/src/components/comments/CommentsHeader.tsx
+++ b/src/components/comments/CommentsHeader.tsx
@@ -6,7 +6,7 @@ interface CommentsHeaderProps {
   amountComments: number;
 }
 
-export function CommentsHeader(props: CommentsHeaderProps) {
+const CommentsHeader = (props: CommentsHeaderProps) => {
   return (
     <div className="comments-header">
       <h4>{props.amountComments} Comments</h4>
@@ -16,4 +16,6 @@ export function CommentsHeader(props: CommentsHeaderProps) {
       </Button>
     </div>
   );
-}
+};
+
+export default CommentsHeader;

From 3a1df6614742742ba203bf72615ea00a6d7a55af Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 05:14:25 +0530
Subject: [PATCH 6/8] Make `Comment` an arrow function

---
 src/components/comments/Comment.tsx  | 6 ++++--
 src/components/comments/Comments.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/comments/Comment.tsx b/src/components/comments/Comment.tsx
index c05663b..fe7e094 100644
--- a/src/components/comments/Comment.tsx
+++ b/src/components/comments/Comment.tsx
@@ -7,7 +7,7 @@ interface CommentProps {
   commentText: string;
 }
 
-export function Comment(props: CommentProps) {
+const Comment = (props: CommentProps) => {
   return (
     <div className="comment">
       <Image
@@ -22,4 +22,6 @@ export function Comment(props: CommentProps) {
       </div>
     </div>
   );
-}
+};
+
+export default Comment;
diff --git a/src/components/comments/Comments.tsx b/src/components/comments/Comments.tsx
index 89900f5..c38a410 100644
--- a/src/components/comments/Comments.tsx
+++ b/src/components/comments/Comments.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import CommentsHeader from "./CommentsHeader";
 import AddComment from "./AddComment";
-import { Comment } from "./Comment";
+import Comment from "./Comment";
 
 // Define a type for your comment objects
 interface CommentObject {

From 6459739dd0110bc15b226447cfe210be6bba3b91 Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 05:16:58 +0530
Subject: [PATCH 7/8] Convert `Comments` to functional component

---
 src/components/comments/Comments.tsx | 37 ++++++++++++++--------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/comments/Comments.tsx b/src/components/comments/Comments.tsx
index c38a410..cdd6724 100644
--- a/src/components/comments/Comments.tsx
+++ b/src/components/comments/Comments.tsx
@@ -3,7 +3,6 @@ import CommentsHeader from "./CommentsHeader";
 import AddComment from "./AddComment";
 import Comment from "./Comment";
 
-// Define a type for your comment objects
 interface CommentObject {
   userName: string;
   commentText: string;
@@ -14,22 +13,22 @@ interface CommentsProps {
   comments: CommentObject[];
 }
 
-export class Comments extends React.Component<CommentsProps> {
-  render() {
-    const commentComponents = this.props.comments.map((comment, index) => (
-      <Comment
-        key={index}
-        userName={comment.userName}
-        commentText={comment.commentText}
-      />
-    ));
+const Comments: React.FC<CommentsProps> = ({ amountComments, comments }) => {
+  const commentComponents = comments.map((comment, index) => (
+    <Comment
+      key={index}
+      userName={comment.userName}
+      commentText={comment.commentText}
+    />
+  ));
 
-    return (
-      <div>
-        <CommentsHeader amountComments={this.props.amountComments} />
-        <AddComment />
-        {commentComponents}
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <CommentsHeader amountComments={amountComments} />
+      <AddComment />
+      {commentComponents}
+    </div>
+  );
+};
+
+export default Comments;

From a62b97fea84b6b3cc1e3a8fcc185596936b1c3a0 Mon Sep 17 00:00:00 2001
From: "arjxn.py" <arjxn.py@gmail.com>
Date: Mon, 16 Oct 2023 05:26:18 +0530
Subject: [PATCH 8/8] Convert `App` to a functional component

---
 src/App.tsx | 138 ++++++++++++++++++++++------------------------------
 1 file changed, 58 insertions(+), 80 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0226268..9dc7665 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { AxiosError } from "axios";
 import HeaderCurio from "./components/Header/Header";
@@ -12,33 +12,28 @@ import Footer from "./components/Footer/Footer";
 import "./style/styles.css";
 import "./App.css";
 import UnderHeader from "./components/UnderHeader/UnderHeader";
-// import Awsup from './Awsup'
 
-class App extends React.Component {
-  state = {
-    videos: [],
-    vidId: "",
-    audioProps: {
-      playback: 1,
-      playing: false,
-      time: 0,
-      maxTime: 0,
-    },
-    showUnderHeader: true,
-    apiResponse: "",
-  };
+const App: React.FC = () => {
+  const [videos, setVideos] = useState<any[]>([]);
+  const [vidId, setVidId] = useState<string>("");
+  const [showUnderHeader, setShowUnderHeader] = useState<boolean>(true);
+  const [apiResponse, setApiResponse] = useState<string>("");
+  const [audioProps, setAudioProps] = useState<any>({
+    playback: 1,
+    playing: false,
+    time: 0,
+    maxTime: 0,
+  });
 
-  getAudio = () => {
-    return this.state.audioProps;
+  const getAudio = () => {
+    return audioProps;
   };
 
-  setAudio = (prop: any) => {
-    this.setState({
-      audioProps: prop,
-    });
+  const setAudio = (prop: any) => {
+    setAudioProps(prop);
   };
 
-  handleSubmit = async (termFromSearchBar: string) => {
+  const handleSubmit = async (termFromSearchBar: string) => {
     try {
       const response = await youtube.get("/search", {
         params: {
@@ -47,76 +42,59 @@ class App extends React.Component {
       });
 
       if (response.data.items.length === 0) {
-        this.setState({ showUnderHeader: true });
+        setShowUnderHeader(true);
       } else {
-        this.setState({ showUnderHeader: false });
+        setShowUnderHeader(false);
       }
 
-      this.setState({
-        videos: response.data.items,
-        apiResponse: "",
-      });
-      console.log("this is resp", response);
-    } catch (error) {
+      setVideos(response.data.items);
+      setApiResponse("");
+    } catch (error: any) {
       if (error && error instanceof AxiosError) {
-        this.setState({
-          apiResponse: error?.response?.data.error.message,
-        });
+        setApiResponse(error?.response?.data.error.message);
         console.log(error?.response?.data.error.message);
       }
     }
   };
-  setVidId = (vidId: string) => {
-    this.setState({ vidId: vidId });
-    window.location.href = `/play/${vidId}`;
-  };
-  setRecId = (vidId: string) => {
-    this.setState({ vidId: vidId });
+
+  const setRecId = (vidId: string) => {
+    setVidId(vidId);
     window.location.href = `/record/${vidId}`;
   };
 
-  render() {
-    return (
-      <>
-        <div className="gradient__bg">
-          <HeaderCurio />
-          {/* <Awsup /> */}
-          <Router>
-            <Switch>
-              <Route path="/play/:vidId">
-                <Player />
-              </Route>
+  return (
+    <div className="gradient__bg">
+      <HeaderCurio />
+      <Router>
+        <Switch>
+          <Route path="/play/:vidId">
+            <Player />
+          </Route>
 
-              <Route path="/record/:vidId">
-                <Player getAudio={this.getAudio} setAudio={this.setAudio} />
-                <RecordView
-                  getAudio={this.getAudio}
-                  setAudio={this.setAudio}
-                  vidId={this.state.vidId}
-                />
-              </Route>
+          <Route path="/record/:vidId">
+            <Player getAudio={getAudio} setAudio={setAudio} />
+            <RecordView getAudio={getAudio} setAudio={setAudio} vidId={vidId} />
+          </Route>
 
-              <Route path="/">
-                <div style={{ marginTop: "1em" }}>
-                  <SearchBar handleFormSubmit={this.handleSubmit} />
-                  {this.state.apiResponse !== "" ? (
-                    <APIError apiResponse={this.state.apiResponse} />
-                  ) : null}
-                  {this.state.showUnderHeader ? <UnderHeader /> : null}
-                  <VideoList
-                    setVidId={this.setVidId}
-                    setRecId={this.setRecId}
-                    videos={this.state.videos}
-                  />
-                </div>
-              </Route>
-            </Switch>
-          </Router>
-          <Footer />
-        </div>
-      </>
-    );
-  }
-}
+          <Route path="/">
+            <div style={{ marginTop: "1em" }}>
+              <SearchBar handleFormSubmit={handleSubmit} />
+              {apiResponse !== "" ? (
+                <APIError apiResponse={apiResponse} />
+              ) : null}
+              {showUnderHeader ? <UnderHeader /> : null}
+              <VideoList
+                setVidId={setVidId}
+                setRecId={setRecId}
+                videos={videos}
+              />
+            </div>
+          </Route>
+        </Switch>
+      </Router>
+      <Footer />
+    </div>
+  );
+};
 
 export default App;