Merge pull request #68 from Curio-org/class-to-functional

Convert class based components to functional components.

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;

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;

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;

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;

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;

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;