progress

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"}`}

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} />}
+ />
  </>
  );
 };

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>
  );
 };