required changes

src/common/components/Like/Like.jsx

@@ -10,8 +10,8 @@ const Like = ({ onLikeClick, likeObj }) => {
 
  return (
  <button className="action counted -mr-0.5" onClick={likeClickHandler}>
- <AiOutlineLike size='24px' className={`${liked ? "hidden" : "icon"}`}/>
- <AiFillLike size='24px' className={`${liked ? "icon" : "hidden"}`}/>
+ <AiOutlineLike size='24px' className={liked ? "hidden" : "icon"}/>
+ <AiFillLike size='24px' className={liked ? "icon" : "hidden"}/>
  {number > 0 ? (<div className="count-value">{number}</div>):(<div></div>)}
 
  </button>

src/common/header/HeaderNav.jsx

@@ -10,7 +10,6 @@ import { GoX } from "react-icons/go";
 import { Modal, Box, Typography, Menu } from "@mui/material";
 import { useContext } from "react";
 import { SearchContext } from "common/search/search-context";
-// import LogOut from './Logout'
 
 const HeaderNav = ({ showBrowse }) => {
  const { showShareModal, setShowShareModal } = useContext(SearchContext);
@@ -153,7 +152,6 @@ const HeaderNav = ({ showBrowse }) => {
  <span className="btn-label">Share</span>
  </button>
  </li>
- {/* <LogOut /> */}
  <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
  <Box sx={{ p: 4, pt: 2, borderRadius: 2, width: "360px" }}>
  <h3 className="section-title">Show Love</h3>

src/common/hooks/useLikePlays.js

@@ -1,22 +1,22 @@
 import { submit } from "common/services/request";
 import {
- LikeIndividualPlay,
+ likeIndividualPlay,
  unlikeIndividualPlay,
 } from "common/services/request/query/like-play";
 
 const useLikePlays = () => {
- const likePlay = async (Obj) => {
+ const likePlay = async (obj) => {
  try {
- const likeExec = await submit(LikeIndividualPlay(Obj));
+ const likeExec = await submit(likeIndividualPlay(obj));
  return Promise.resolve(likeExec);
  } catch (err) {
  return Promise.reject(err);
  }
  };
 
- const unLikePlay = async (Obj) => {
+ const unLikePlay = async (obj) => {
  try {
- const resp = await submit(unlikeIndividualPlay(Obj));
+ const resp = await submit(unlikeIndividualPlay(obj));
  return Promise.resolve(resp);
  } catch (err) {
  return Promise.reject(err);

src/common/playlists/PlayHeaderActions.jsx

@@ -6,18 +6,11 @@ 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 MuiModal from "common/modal/MuiModal";
 import useLikePlays from "common/hooks/useLikePlays";
 import { NHOST } from "common/const";
+import countByProp from "common/utils/countByProp";
 
-// we cannot remove delete SignInMethods, MuiModal file since in future we will support
-// more authentication provider. so let us keep it.
-
-
-// we are not getting latest play_like object after liking or updating liking a play
-// thats y we need to track interations of the user
 const initialLikeObject = {
  liked: false,
  number: null,
@@ -26,23 +19,19 @@ const initialLikeObject = {
 
 const PlayHeaderActions = ({ play }) => {
  const { play_like } = play;
- const userId = useUserId();
 
+ const userId = useUserId();
  const { likePlay, unLikePlay } = useLikePlays();
-
  const [showComment, setShowComment] = useState(false);
- // const [showSignInMethods, setShowSignInMethods] = useState(false);
  const [likeObj, setLikeObj] = useState({ ...initialLikeObject });
  const [loading, setLoading] = useState(false);
- // Other Hooks
  const isAuthenticated = useAuthenticated();
 
- const countLike = (playLike) => playLike.reduce((a, b) => b?.liked ? ++a : a, 0);
-
  const constructLikeData = useCallback(
  (userId) => {
  if (!play_like?.length) return { liked: false, number: 0, interation: false };
- const numberOfLikes = countLike(play_like);
+ const numberOfLikes = countByProp(play_like, "liked", true);
+ console.log("number of likes are", numberOfLikes);
  const ifLiked = play_like.find((obj) => obj.user_id === userId);
  return ifLiked
  ? ifLiked?.liked
@@ -71,14 +60,14 @@ const PlayHeaderActions = ({ play }) => {
  await likePlay(mutationObj);
  setLikeObj((pre) => ({
  liked: true,
- number: ++pre.number,
+ number: pre.number + 1,
  interation: true,
  }));
  } else {
  await unLikePlay({ ...mutationObj, liked: !likeObj.liked });
  setLikeObj((pre) => ({
  liked: !pre.liked,
- number: !pre.liked ? ++pre.number : --pre.number,
+ number: !pre.liked ? pre.number + 1 : pre.number - 1,
  interation: true,
  }));
  }
@@ -94,7 +83,6 @@ const PlayHeaderActions = ({ play }) => {
  <Like onLikeClick={!loading ? onLikeClick : null} 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>
  </button>
 
@@ -123,12 +111,7 @@ const PlayHeaderActions = ({ play }) => {
  <span className='sr-only'>Blog</span>
  </a>
  {play.video && (
- <a
- target='_blank'
- rel='noopener noreferrer'
- className='action'
- href={play.video}
- >
+ <a target='_blank' rel='noopener noreferrer' className='action' href={play.video}>
  <IoLogoYoutube className='icon' size='24px' />
  <span className='sr-only'>Video</span>
  </a>
@@ -137,10 +120,7 @@ const PlayHeaderActions = ({ play }) => {
  <div className='play-details-comments'>
  <div className='comments-header'>
  <h3 className='header-title'>Comments</h3>
- <button
- className='header-action'
- onClick={() => setShowComment(false)}
- >
+ <button className='header-action' onClick={() => setShowComment(false)}>
  <MdClose size={24} className='icon' />
  </button>
  </div>
@@ -149,11 +129,6 @@ const PlayHeaderActions = ({ play }) => {
  </div>
  </div>
  )}
- {/* <MuiModal
- open={showSignInMethods}
- handleClose={onLikeClick}
- component={<SignInMethods loginHandler={handleLogin} />}
- /> */}
  </>
  );
 };

src/common/playlists/PlayThumbnail.jsx

@@ -6,6 +6,7 @@ import Shimmer from "react-shimmer-effect";
 import userImage from "images/user.png";
 import Like from "common/components/Like/Like";
 import { useUserId, useAuthenticated } from "@nhost/react";
+import countByProp from "common/utils/countByProp";
 
 const Author = ({ user }) => {
  return (
@@ -33,9 +34,9 @@ const PlayThumbnail = ({ play }) => {
  const isAuthenticated = useAuthenticated();
  const userId = useUserId();
 
- const LikeObject = () => {
+ const likeObject = () => {
  const { play_like } = play;
- const number = countLikes(play_like);
+ const number = countByProp(play_like, 'liked', true);
  if (isAuthenticated) {
  const liked = play_like.find((i) => i.user_id === userId)?.liked;
  return { liked, number };
@@ -67,9 +68,6 @@ const PlayThumbnail = ({ play }) => {
  }
  }, [play]);
 
- const countLikes = (Obj) => {
- return Obj?.reduce((a, b) => (b.liked ? ++a : a), 0);
- };
 
  return (
  <li key={play.id}>
@@ -88,7 +86,7 @@ const PlayThumbnail = ({ play }) => {
  <div className='mt-1 '>
  <Like
  onLikeClick={null}
- likeObj={LikeObject()}
+ likeObj={likeObject()}
  />
  <div className={`language language-${play.language || "js"}`}></div>
  </div>

src/common/services/request/query/like-play.js

@@ -1,5 +1,5 @@
-export const LikeIndividualPlay = (Obj) => {
- const { play_id, user_id } = Obj;
+export const likeIndividualPlay = (obj) => {
+ const { play_id, user_id } = obj;
  return {
  display: "Delete a tag",
  name: "insert_play_like_one",
@@ -14,7 +14,7 @@ export const LikeIndividualPlay = (Obj) => {
  };
 };
 
-export const unlikeIndividualPlay = (Obj) => {
+export const unlikeIndividualPlay = (obj) => {
  return {
  display: "Update Like",
  name: "update_play_like",
@@ -27,18 +27,18 @@ export const unlikeIndividualPlay = (Obj) => {
  {
  field: "play_id",
  operator: "eq",
- value: Obj.play_id,
+ value: obj.play_id,
  },
  {
  field: "user_id",
  operator: "eq",
- value: Obj.user_id,
+ value: obj.user_id,
  },
  ],
  },
  },
  value: {
- liked: Obj.liked,
+ liked: obj.liked,
  },
  return: ["affected_rows"],
  };

src/common/utils/countByProp.js

@@ -0,0 +1,6 @@
+
+
+
+export default function countByProp(obj, key, value) {
+ return obj.reduce((acc, item) => item?.[key] === value ? ++acc : acc, 0)
+}