complete UI setup

Bhavika-Maurya · Jul 20, 2022 · 5c14977 · 5c14977
1 parent c3c1bba
commit 5c14977
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 55 deletions.
diff --git a/src/common/components/Like/Like.jsx b/src/common/components/Like/Like.jsx
@@ -1,30 +1,18 @@
 import "./Like.scss";
-import { useState, useEffect, useLayoutEffect } from "react";
-import { useAuthenticated } from "@nhost/react";
 
-const Like = ({ onLikeClick, likeStatus }) => {
- const [liked, setLiked] = useState(false);
- const isAuthenticated = useAuthenticated();
-
- useLayoutEffect(() => {
- setLiked(likeStatus);
- }, [likeStatus])
-
- const likeClickHandler = (e) => {
- if (onLikeClick) {
- if (isAuthenticated) {
- setLiked(e.target.checked);
- }
- onLikeClick();
- }
+const Like = ({ onLikeClick, likeObj }) => {
+ const {like, number} = likeObj
+
+ const likeClickHandler = () => {
+ if (onLikeClick) return onLikeClick();
  };
 
  return (
  <div className="like-container">
  <div className="like-icon" onClick={likeClickHandler}>
  <svg
  viewBox="-4 -8 42 42"
- className={`${liked ? "liked back" : "back"}`}
+ className={`${like ? "liked back" : "back"}`}
  >
  <path
  d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"
@@ -33,15 +21,15 @@ const Like = ({ onLikeClick, likeStatus }) => {
  </svg>
  <svg
  viewBox="-4 -8 42 42"
- className={`${liked ? "liked front" : "front"}`}
+ className={`${like ? "liked front" : "front"}`}
  >
  <path
  d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"
  stroke-width="2"
  />
  </svg>
  </div>
- <div className="like-count">10</div>
+ <div className="like-count">{number}</div>
  </div>
  );
 };

diff --git a/src/common/playlists/PlayHeaderActions.jsx b/src/common/playlists/PlayHeaderActions.jsx
@@ -19,9 +19,9 @@ const nhost = new NhostClient({
 const PlayHeaderActions = ({ play }) => {
  const [showComment, setShowComment] = useState(false);
  const [showSignInMethods, setShowSignInMethods] = useState(false);
+ const [likeObj, setLikeObj] = useState({ like: false, number: 5 });
  const isAuthenticated = useAuthenticated();
 
- // handle the Button Clicks
  const handleLogin = async (value) => {
  return await nhost.auth.signIn({
  provider: value,
@@ -31,71 +31,67 @@ const PlayHeaderActions = ({ play }) => {
  });
  };
 
- // handles the modal
- const modalHandler = (e) => {
- if (!isAuthenticated) {
- return setShowSignInMethods(!showSignInMethods);
- }
- console.log(isAuthenticated)
- return null;
+ const modalHandler = () => {
+ if (!isAuthenticated) return setShowSignInMethods(!showSignInMethods);
+ return setLikeObj(pre => ({like: !pre.like, number: !pre.like ? 6 : 5}));
  };
 
  return (
  <>
- <Like onLikeClick={modalHandler} />
- <button className="action badged" onClick={() => setShowComment(true)}>
- <BiComment className="icon" size="24px" />
+ <Like onLikeClick={modalHandler} likeObj={likeObj} />
+ <button className='action badged' onClick={() => setShowComment(true)}>
+ <BiComment className='icon' size='24px' />
  {/*<div className="badge-count">99</div>*/}
- <span className="sr-only">Comments</span>
+ <span className='sr-only'>Comments</span>
  </button>
 
  {play.path && (
  <a
- target="_blank"
- rel="noopener noreferrer"
- className="action"
+ target='_blank'
+ rel='noopener noreferrer'
+ className='action'
  href={`https://github.com/reactplay/react-play/tree/main/src${play.path}`}
  >
- <BsGithub className="icon" size="24px" />
- <span className="sr-only">GitHub</span>
+ <BsGithub className='icon' size='24px' />
+ <span className='sr-only'>GitHub</span>
  </a>
  )}
  <a
- target="_blank"
- rel="noopener noreferrer"
- className="action"
+ target='_blank'
+ rel='noopener noreferrer'
+ className='action'
  href={
  play.blog
  ? play.blog
  : `https://github.com/reactplay/react-play/tree/main/src${play.path}/Readme.md`
  }
  >
- <AiOutlineRead className="icon" size="24px" />
- <span className="sr-only">Blog</span>
+ <AiOutlineRead className='icon' size='24px' />
+ <span className='sr-only'>Blog</span>
  </a>
  {play.video && (
  <a
- target="_blank"
- rel="noopener noreferrer"
- className="action"
+ target='_blank'
+ rel='noopener noreferrer'
+ className='action'
  href={play.video}
  >
- <IoLogoYoutube className="icon" size="24px" />
- <span className="sr-only">Video</span>
+ <IoLogoYoutube className='icon' size='24px' />
+ <span className='sr-only'>Video</span>
  </a>
  )}
  {showComment && (
- <div className="play-details-comments">
- <div className="comments-header">
- <h3 className="header-title">Comments</h3>
+ <div className='play-details-comments'>
+ <div className='comments-header'>
+ <h3 className='header-title'>Comments</h3>
  <button
- className="header-action"
+ className='header-action'
  onClick={() => setShowComment(false)}
  >
- <MdClose size={24} className="icon" />
+ <MdClose size={24} className='icon' />
  </button>
  </div>
- <div className="comments-body">
+ <div className='comments-body'>
  <Comment />
  </div>
  </div>

diff --git a/src/common/playlists/PlayThumbnail.jsx b/src/common/playlists/PlayThumbnail.jsx
@@ -4,7 +4,6 @@ import { BsPlayCircleFill } from "react-icons/bs";
 import thumbPlay from "images/thumb-play.png";
 import Shimmer from "react-shimmer-effect";
 import userImage from "images/user.png";
-import Like from "common/components/Like/Like";
 
 const Author = ({ user }) => {
  return (
@@ -66,7 +65,6 @@ const PlayThumbnail = ({ play }) => {
  <div className="play-title">{play.name}</div>
  {play.user && <Author user={play.user} />}
  <div className="mt-1 ">
- <Like />
  <div className={`language language-${play.language || "js"}`}></div>
  </div>
  </div>