draft work

package.json

@@ -19,7 +19,7 @@
  "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
  "html-to-image": "^1.9.0",
- "json-graphql-parser": "^0.0.20",
+ "json-graphql-parser": "^0.1.5",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",
@@ -37,6 +37,7 @@
  "redux": "^4.2.0",
  "redux-persist": "^6.0.0",
  "reselect": "^4.1.5",
+ "url": "^0.11.0",
  "web-vitals": "^2.1.0"
  },
  "scripts": {

src/common/hooks/useLikePlays.js

@@ -1,7 +1,7 @@
 import { submit } from "common/services/request";
 import {
  LikeIndividualPlay,
- dislikeIndividualPlay,
+ unlikeIndividualPlay,
 } from "common/services/request/query/like-play";
 
 const useLikePlays = () => {
@@ -14,16 +14,16 @@ const useLikePlays = () => {
  }
  };
 
- const dislikePlay = async (Obj) => {
+ const unLikePlay = async (Obj) => {
  try {
- const resp = await submit(dislikeIndividualPlay(Obj));
+ const resp = await submit(unlikeIndividualPlay(Obj));
  return Promise.resolve(resp);
  } catch (err) {
  return Promise.reject(err);
  }
  };
 
- return { likePlay, dislikePlay };
+ return { likePlay, unLikePlay };
 };
 
 export default useLikePlays;

src/common/playlists/PlayHeaderActions.jsx

@@ -16,21 +16,26 @@ const PlayHeaderActions = ({ play }) => {
  const { play_like } = play;
  const userId = useUserId();
 
- const { likePlay, dislikePlay } = useLikePlays();
+ const { likePlay, unLikePlay } = useLikePlays();
 
  const [showComment, setShowComment] = useState(false);
- const [showSignInMethods, setShowSignInMethods] = useState(false);
+ // const [showSignInMethods, setShowSignInMethods] = useState(false);
  const [likeObj, setLikeObj] = useState({});
- const [loading, setLoading] = useState(false)
+ const [loading, setLoading] = useState(false);
  // Other Hooks
  const isAuthenticated = useAuthenticated();
 
  const constructLikeData = useCallback(
  (userId) => {
  if (!play_like?.length) return { like: false, number: 0 };
- const ifLiked = play_like.find((obj) => obj.user_id === userId);
- if (ifLiked) return { like: true, number: play_like.length };
- return { like: false, number: play_like?.length };
+ const numberOflikes = play_like.reduce((a, b) => {
+ if (b.liked) return ++a;
+ return a;
+ }, 0);
+ console.log("number of likes are", numberOflikes);
+ const ifLiked = play_like.find((obj) => obj.user_id === userId)?.liked;
+ if (ifLiked) return { like: true, number: numberOflikes };
+ return { like: false, number: numberOflikes };
  },
  [play_like]
  );
@@ -40,25 +45,25 @@ const PlayHeaderActions = ({ play }) => {
  }, [userId, constructLikeData]);
 
  const handleLogin = (value) => {
- return window.location = NHOST.AUTH_URL(window.location.href, value)
+ return (window.location = NHOST.AUTH_URL(window.location.href, value));
  };
 
  const onLikeClick = async () => {
- if (!isAuthenticated) return setShowSignInMethods(!showSignInMethods);
+ if (!isAuthenticated) return handleLogin('github');
  try {
- setLoading(true)
+ setLoading(true);
  const mutationObj = { play_id: play.id, user_id: userId };
  if (!likeObj.like) {
  await likePlay(mutationObj);
  return setLikeObj((pre) => ({ like: true, number: ++pre.number }));
  } else {
- await dislikePlay(mutationObj);
- setLikeObj((pre) => ({ like: false, number: --pre.number }));
+ await unLikePlay(mutationObj);
+ return setLikeObj((pre) => ({ like: false, number: --pre.number }));
  }
  } catch (err) {
- console.log(err)
+ console.log(err);
  } finally {
- setLoading(false)
+ setLoading(false);
  }
  };
 
@@ -122,11 +127,11 @@ const PlayHeaderActions = ({ play }) => {
  </div>
  </div>
  )}
- <MuiModal
+ {/* <MuiModal
  open={showSignInMethods}
  handleClose={onLikeClick}
  component={<SignInMethods loginHandler={handleLogin} />}
- />
+ /> */}
  </>
  );
 };

src/common/services/request/query/fetch-plays.js

@@ -35,7 +35,7 @@ const BasiFetchParam = {
  "github",
  "id",
  "language",
- { play_like: ["play_id", "user_id"] },
+ { play_like: ["liked", "play_id", "user_id"] },
  { level: ["name"] },
  "name",
  "path",

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

@@ -1,36 +1,44 @@
 export const LikeIndividualPlay = (Obj) => {
  const { play_id, user_id } = Obj;
  return {
- display: "Create Play Like",
- name: "Insert_Play_Like_Mutation",
+ display: "Delete a tag",
+ name: "insert_play_like_one",
  function: "insert_play_like_one",
  write: true,
- object: { play_id, user_id },
+ object: {
+ play_id: play_id,
+ user_id: user_id,
+ liked: true,
+ },
+ return: ["id"],
  };
 };
 
-export const dislikeIndividualPlay = (Obj) => {
+export const unlikeIndividualPlay = (Obj) => {
  return {
- display: "Delete Play Like",
- name: "Delete_Play_Like_Mutation",
- function: "delete_play_like",
+ display: "Update Like",
+ name: "update_play_like",
+ function: "update_play_like",
  write: true,
  where: {
- operator: "and",
- clause: [
- {
- field: "play_id",
- operator: "eq",
- value: Obj.play_id,
- type: "string",
- },
- {
- field: "user_id",
- operator: "eq",
- value: Obj.user_id,
- type: "string",
- },
- ],
+ clause: {
+ conditions: [
+ {
+ field: "play_id",
+ operator: "eq",
+ value: Obj.play_id,
+ },
+ {
+ field: "user_id",
+ operator: "eq",
+ value: Obj.user_id,
+ },
+ ],
+ },
+ },
+ value: {
+ liked: false,
  },
+ return: ["affected_rows"],
  };
 };