Merge pull request #93 from Qortal/bugfix/like-identifier-change

fix like identifier

src/components/common/ContentButtons/LikeAndDislike.tsx

@@ -1,11 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ThumbUpOffAltOutlinedIcon from '@mui/icons-material/ThumbUpOffAltOutlined';
 import ThumbDownOffAltOutlinedIcon from '@mui/icons-material/ThumbDownOffAltOutlined';
 import { Box } from '@mui/material';
 import { objectToBase64 } from '../../../utils/PublishFormatter.ts';
-import { LIKE_BASE } from '../../../constants/Identifiers.ts';
+import {
+  LIKE_BASE,
+  trigger_like_identifier,
+} from '../../../constants/Identifiers.ts';
 import { CustomTooltip } from './CustomTooltip.tsx';
 import {
   formatLikeCount,
@@ -13,7 +16,7 @@ import {
   getCurrentLikeType,
   LikesAndDislikes,
 } from './LikeAndDislike-functions.ts';
-import { useAuth } from 'qapp-core';
+import { hashWordWithoutPublicSalt, useAuth } from 'qapp-core';
 import { useSetAtom } from 'jotai';
 import {
   AltertObject,
@@ -24,6 +27,7 @@ import { useTranslation } from 'react-i18next';
 interface LikeAndDislikeProps {
   name: string;
   identifier: string;
+  created: number;
 }
 export enum LikeType {
   Like = 1,
@@ -33,19 +37,46 @@ export enum LikeType {
 export const LIKE = LikeType.Like;
 export const DISLIKE = LikeType.Dislike;
 export const NEUTRAL = LikeType.Neutral;
-export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
+export const LikeAndDislike = ({
+  name,
+  identifier,
+  created,
+}: LikeAndDislikeProps) => {
+  const [likeIdentifier, setLikeIdentifier] = useState<null | string>(null);
   const { t } = useTranslation(['core']);
 
   const { name: username } = useAuth();
   const [likeCount, setLikeCount] = useState<number>(0);
   const [dislikeCount, setDislikeCount] = useState<number>(0);
   const [currentLikeType, setCurrentLikeType] = useState<LikeType>(NEUTRAL);
-  const likeIdentifier = `${LIKE_BASE}${identifier.slice(0, 39)}`;
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const setNotification = useSetAtom(setNotificationAtom);
 
+  const createLikeIdentifier = useCallback(async (i, n, c) => {
+    try {
+      if (c < trigger_like_identifier) {
+        setLikeIdentifier(`${LIKE_BASE}${identifier.slice(0, 39)}`);
+        return;
+      } else {
+        const createdLikeIdentifier = await hashWordWithoutPublicSalt(
+          i + n,
+          20
+        );
+        setLikeIdentifier(createdLikeIdentifier);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+
   useEffect(() => {
-    if (!username) return;
+    if (identifier && name && created) {
+      createLikeIdentifier(identifier, name, created);
+    }
+  }, [identifier, name, created]);
+
+  useEffect(() => {
+    if (!username || !likeIdentifier) return;
     type PromiseReturn = [LikeType, LikesAndDislikes | undefined];
 
     Promise.all([
@@ -58,7 +89,7 @@ export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
       setDislikeCount(likesAndDislikes?.dislikes || 0);
       setIsLoading(false);
     });
-  }, [username]);
+  }, [username, likeIdentifier]);
 
   const updateLikeDataState = (newLikeType: LikeType) => {
     const setSuccessNotification = (msg: string) => {
@@ -102,6 +133,14 @@ export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
 
       return;
     }
+    if (!likeIdentifier) {
+      const notificationObj: AltertObject = {
+        msg: 'Unable to construct like identifier',
+        alertType: 'error',
+      };
+      setNotification(notificationObj);
+      return;
+    }
     try {
       if (!username) throw new Error('You need a name to publish');
       if (!name) throw new Error("Could not retrieve content creator's name");

src/constants/Identifiers.ts

@@ -17,3 +17,7 @@ export const COMMENT_BASE = useTestIdentifiers
 export const FOR = useTestIdentifiers ? 'FORTEST5' : 'FOR096';
 export const FOR_SUPER_LIKE = useTestIdentifiers ? 'MYTEST_sl' : `qtube_sl`;
 export const FOR_LIKE = useTestIdentifiers ? 'MYTEST_like' : `qtube_like`;
+
+// updates trigger
+
+export const trigger_like_identifier = 1759360823338;

src/pages/ContentPages/VideoContent/VideoActionsBar.tsx

@@ -97,7 +97,11 @@ export const VideoActionsBar = ({
       >
         {videoData && (
           <>
-            <LikeAndDislike name={videoData?.user} identifier={videoData?.id} />
+            <LikeAndDislike
+              created={videoData?.created}
+              name={videoData?.user}
+              identifier={videoData?.id}
+            />
             <SuperLike
               numberOfSuperlikes={numberOfSuperlikes}
               totalAmount={calculateAmountSuperlike}