Refactoring

Author: shashank6341

package-lock.json

@@ -16,6 +16,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.2.0",
     "react-infinite-scroll-component": "^6.0.0",
     "react-lazy-load-image-component": "^1.5.1",

package.json

@@ -3,7 +3,7 @@ import axios from "axios";
 const request = axios.create({
   baseURL: "https://youtube.googleapis.com/youtube/v3/",
   params: {
-    key: process.env.REACT_APP_YT_API_KEY,
+    key: "AIzaSyBAvopHSYNnReInKoAwj71iOJ4uJED3NAg",
   },
 });
 

src/api.js

@@ -19,6 +19,7 @@
         white-space: nowrap;
         border: 1.5px solid $text-color;
         border-radius: 999px;
+        cursor: pointer;
 
         &:hover {
             background-color: #374a59;

src/components/categoriesBar/_categoriesbar.scss

@@ -16,6 +16,7 @@ const Comments = ({ videoId, totalComments }) => {
   }, [videoId, dispatch]);
 
   const { loading, comments } = useSelector((state) => state.commentsList);
+  const { photoUrl } = useSelector((state) => state.auth?.user);
 
   const _comments = comments?.map(
     (comment) => comment.snippet.topLevelComment.snippet
@@ -35,7 +36,7 @@ const Comments = ({ videoId, totalComments }) => {
       <p>{totalComments} Comments</p>
       <div className="comments__form d-flex w-100 my-2">
         <img
-          src="https://cdn.icon-icons.com/icons2/1736/PNG/512/4043260-avatar-male-man-portrait_113269.png"
+          src={photoUrl}
           alt="avatar"
           className="rounded-circle mr-3"
         />

src/components/comments/Comments.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+
+const CustomHelmet = ({
+  title = "Youtube Clone - SV",
+  description = "A project with Youtube API and React JS",
+}) => {
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta name='description' content={description} />
+         <meta property='og:locale' content='en_US' />
+         <meta property='og:type' content='website' />
+         <meta property='og:title' content={title} />
+         <meta property='og:description' content={description} />
+    </Helmet>
+  );
+};
+
+export default CustomHelmet;

src/components/customHemlet/CustomHelmet.js

@@ -5,6 +5,8 @@ import { FaBars } from "react-icons/fa";
 import { AiOutlineSearch } from "react-icons/ai";
 import { MdNotifications, MdApps } from "react-icons/md";
 import { useHistory } from "react-router";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
 
 const Header = ({ handleToggleSidebar }) => {
   const [input, setInput] = useState("");
@@ -14,21 +16,25 @@ const Header = ({ handleToggleSidebar }) => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    history.push(`/search/${input}`)
+    history.push(`/search/${input}`);
   };
 
+  const { photoUrl } = useSelector((state) => state.auth?.user);
+
   return (
     <div className="header">
       <FaBars
         className="header__menu"
         size={26}
         onClick={() => handleToggleSidebar()}
       />
-      <img
-        src="http://pngimg.com/uploads/youtube/youtube_PNG2.png"
-        alt="Youtube Logo"
-        className="header__logo"
-      />
+      <Link to="/">
+        <img
+          src="http://pngimg.com/uploads/youtube/youtube_PNG2.png"
+          alt="Youtube Logo"
+          className="header__logo"
+        />
+      </Link>
       <form onSubmit={handleSubmit}>
         <input
           type="text"
@@ -44,10 +50,7 @@ const Header = ({ handleToggleSidebar }) => {
       <div className="header__icons">
         <MdNotifications size={28} />
         <MdApps size={28} />
-        <img
-          src="https://cdn.icon-icons.com/icons2/1736/PNG/512/4043260-avatar-male-man-portrait_113269.png"
-          alt="avatar"
-        />
+        <img src={photoUrl} alt="avatar" />
       </div>
     </div>
   );

src/components/header/Header.js

@@ -26,10 +26,12 @@ const Sidebar = ({ sidebar, handleToggleSidebar }) => {
       className={sidebar ? "sidebar open" : "sidebar"}
       onClick={() => handleToggleSidebar(false)}
     >
-      <li>
-        <MdHome size={23} />
-        <span>Home</span>
-      </li>
+      <Link to="/">
+        <li>
+          <MdHome size={23} />
+          <span>Home</span>
+        </li>
+      </Link>
 
       <Link to="/feed/subscriptions">
         <li>
@@ -54,7 +56,7 @@ const Sidebar = ({ sidebar, handleToggleSidebar }) => {
       </li>
       <li>
         <MdSentimentDissatisfied size={23} />
-        <span>Bhen 10</span>
+        <span>Report Issue</span>
       </li>
 
       <hr />

src/components/sidebar/Sidebar.js

@@ -15,6 +15,14 @@
     top: 10vh;
     left: 0;
 
+    a {
+        color: $text-color;
+        &:hover {
+            color: $text-color;
+            text-decoration: none;
+        }
+    }
+
     li {
         display: flex;
         align-items: center;

src/components/sidebar/_sidebar.scss

@@ -7,6 +7,7 @@
     &__left {
         position: relative;
         text-align: center;
+        padding-left: 0 !important;
     }
 
     &__thumbmnail {