From c3c1bba49ec6bab0d2acfaf0e71bc5aaf306b705 Mon Sep 17 00:00:00 2001
From: Angryman18 <imsmahanta@gmail.com>
Date: Wed, 20 Jul 2022 15:46:37 +0530
Subject: [PATCH] progress

---
 src/common/components/Like/Like.jsx        | 28 ++++++++--------
 src/common/playlists/PlayHeaderActions.jsx | 39 ++++++++++++++++++++--
 src/common/playlists/PlayHeaderInfo.jsx    | 38 ---------------------
 3 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/src/common/components/Like/Like.jsx b/src/common/components/Like/Like.jsx
index 0697e234a..5ea58d481 100644
--- a/src/common/components/Like/Like.jsx
+++ b/src/common/components/Like/Like.jsx
@@ -1,25 +1,27 @@
 import "./Like.scss";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useLayoutEffect } from "react";
 import { useAuthenticated } from "@nhost/react";
 
-const Like = ({ onLikeClick }) => {
+const Like = ({ onLikeClick, likeStatus }) => {
   const [liked, setLiked] = useState(false);
   const isAuthenticated = useAuthenticated();
 
-  // const likeClickHandler = (e) => {
-  //   if (onLikeClick) {
-  //     if (isAuthenticated) {
-  //       setLiked(e.target.checked);
-  //     }
-  //     onLikeClick();
-  //   }
-  // };
-  const clickHandler = () => {
-    setLiked(!liked);
+  useLayoutEffect(() => {
+    setLiked(likeStatus);
+  }, [likeStatus])
+
+  const likeClickHandler = (e) => {
+    if (onLikeClick) {
+      if (isAuthenticated) {
+        setLiked(e.target.checked);
+      }
+      onLikeClick();
+    }
   };
+  
   return (
     <div className="like-container">
-      <div className="like-icon" onClick={clickHandler}>
+      <div className="like-icon" onClick={likeClickHandler}>
         <svg
           viewBox="-4 -8 42 42"
           className={`${liked ? "liked back" : "back"}`}
diff --git a/src/common/playlists/PlayHeaderActions.jsx b/src/common/playlists/PlayHeaderActions.jsx
index 82c21e227..24f60a4a0 100644
--- a/src/common/playlists/PlayHeaderActions.jsx
+++ b/src/common/playlists/PlayHeaderActions.jsx
@@ -1,20 +1,48 @@
 import React, { useState } from "react";
+import { useAuthenticated } from "@nhost/react";
 import { BsGithub } from "react-icons/bs";
 import { IoLogoYoutube } from "react-icons/io";
 import { AiOutlineRead } from "react-icons/ai";
 import { BiComment } from "react-icons/bi";
 import { MdClose } from "react-icons/md";
 import Like from "common/components/Like/Like";
-
+import SignInMethods from "./SignInMethods";
 import Comment from "common/components/Comment";
+import { NhostClient } from "@nhost/nhost-js";
+import MuiModal from "common/modal/MuiModal";
+
+const nhost = new NhostClient({
+  subdomain: process.env.REACT_APP_NHOST_SUBDOMAIN,
+  region: process.env.REACT_APP_NHOST_REGION,
+});
 
 const PlayHeaderActions = ({ play }) => {
-  console.log(play);
   const [showComment, setShowComment] = useState(false);
+  const [showSignInMethods, setShowSignInMethods] = useState(false);
+  const isAuthenticated = useAuthenticated();
+
+  // handle the Button Clicks
+  const handleLogin = async (value) => {
+    return await nhost.auth.signIn({
+      provider: value,
+      options: {
+        redirectTo: window.location.href,
+      },
+    });
+  };
+
+  // handles the modal
+  const modalHandler = (e) => {
+    if (!isAuthenticated) {
+      return setShowSignInMethods(!showSignInMethods);
+    }
+    console.log(isAuthenticated)
+    return null;
+  };
 
   return (
     <>
-      <Like />
+      <Like onLikeClick={modalHandler} />
       <button className="action badged" onClick={() => setShowComment(true)}>
         <BiComment className="icon" size="24px" />
         {/*<div className="badge-count">99</div>*/}
@@ -72,6 +100,11 @@ const PlayHeaderActions = ({ play }) => {
           </div>
         </div>
       )}
+      <MuiModal
+        open={showSignInMethods}
+        handleClose={modalHandler}
+        component={<SignInMethods loginHandler={handleLogin} />}
+      />
     </>
   );
 };
diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx
index 299f13f8d..f1770859c 100644
--- a/src/common/playlists/PlayHeaderInfo.jsx
+++ b/src/common/playlists/PlayHeaderInfo.jsx
@@ -1,16 +1,6 @@
 import { IoMdArrowBack } from "react-icons/io";
 import { Link } from "react-router-dom";
 import LevelBadge from "common/components/LevelBadge";
-import { NhostClient } from "@nhost/nhost-js";
-import MuiModal from "common/modal/MuiModal";
-import { useAuthenticated } from "@nhost/react";
-import SignInMethods from "./SignInMethods";
-import { useState } from "react";
-
-const nhost = new NhostClient({
-  subdomain: process.env.REACT_APP_NHOST_SUBDOMAIN,
-  region: process.env.REACT_APP_NHOST_REGION,
-});
 
 const Author = ({ user, githubUsername }) => {
   return (
@@ -47,29 +37,6 @@ const Tags = ({ tags }) => {
 };
 
 const PlayHeaderInfo = ({ play }) => {
-  const [showSignInMethods, setShowSignInMethods] = useState(false);
-  const isAuthenticated = useAuthenticated();
-
-  // handle the Button Clicks
-  const handleLogin = async (value) => {
-    return await nhost.auth.signIn({
-      provider: value,
-      options: {
-        redirectTo: window.location.href,
-      },
-    });
-  };
-
-  // handles the modal
-  const modalHandler = (e) => {
-    if (!isAuthenticated) {
-      return setShowSignInMethods(!showSignInMethods);
-    }
-    return null;
-  };
-
-  // actual lik
-
   return (
     <div className="header-leftcol overflow-hidden">
       <div className="header-leftcol-action">
@@ -92,11 +59,6 @@ const PlayHeaderInfo = ({ play }) => {
           )}
         </div>
       </div>
-      <MuiModal
-        open={showSignInMethods}
-        handleClose={modalHandler}
-        component={<SignInMethods loginHandler={handleLogin} />}
-      />
     </div>
   );
 };