Superlikes list on Home Page shows time since it was made

Refactoring to prepare for SuperDislike button
Qortal · Jan 23, 2025 · 5d79576 · 5d79576
1 parent 4366306
commit 5d79576
Show file tree

Hide file tree

Showing 8 changed files with 456 additions and 22 deletions.
diff --git a/src/components/common/ContentButtons/SuperDislike.tsx b/src/components/common/ContentButtons/SuperDislike.tsx
diff --git a/src/components/common/ContentButtons/SuperLike.tsx b/src/components/common/ContentButtons/SuperLike.tsx
@@ -21,7 +21,7 @@ import {
 import {
   fontSizeLarge,
   fontSizeMedium,
-  minPriceSuperlike,
+  minPriceSuperLike,
 } from "../../../constants/Misc.ts";
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
 import { RootState } from "../../../state/store.ts";
@@ -52,7 +52,7 @@ export const SuperLike = ({
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const [superlikeDonationAmount, setSuperlikeDonationAmount] =
-    useState<number>(minPriceSuperlike);
+    useState<number>(minPriceSuperLike);
   const [currentBalance, setCurrentBalance] = useState<string>("");
 
   const [comment, setComment] = useState<string>("");
@@ -95,10 +95,10 @@ export const SuperLike = ({
         throw new Error("Could not retrieve content creator's address");
       if (
         !superlikeDonationAmount ||
-        superlikeDonationAmount < minPriceSuperlike
+        superlikeDonationAmount < minPriceSuperLike
       )
         throw new Error(
-          `The amount is ${superlikeDonationAmount}, but it needs to be at least ${minPriceSuperlike} QORT`
+          `The amount is ${superlikeDonationAmount}, but it needs to be at least ${minPriceSuperLike} QORT`
         );
 
       const listOfPublishes = [];
@@ -286,8 +286,8 @@ export const SuperLike = ({
               </InputLabel>
               <BoundedNumericTextField
                 addIconButtons={!isScreenSmall}
-                minValue={+minPriceSuperlike}
-                initialValue={minPriceSuperlike.toString()}
+                minValue={+minPriceSuperLike}
+                initialValue={minPriceSuperLike.toString()}
                 maxValue={numberToInt(+currentBalance)}
                 allowDecimals={false}
                 allowNegatives={false}

diff --git a/src/components/common/ListSuperLikes/ListSuperLikes.tsx b/src/components/common/ListSuperLikes/ListSuperLikes.tsx
@@ -1,17 +1,20 @@
-import * as React from "react";
+import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import { Box } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
+import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
-import Divider from "@mui/material/Divider";
-import ListItemText from "@mui/material/ListItemText";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
-import Avatar from "@mui/material/Avatar";
+import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import { Box } from "@mui/material";
+import * as React from "react";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../state/store";
 import { useNavigate } from "react-router-dom";
-import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
+import { fontSizeSmall } from "../../../constants/Misc.ts";
+import { RootState } from "../../../state/store";
+import { formatDate } from "../../../utils/time.ts";
+
 const truncateMessage = message => {
   return message.length > 40 ? message.slice(0, 40) + "..." : message;
 };
@@ -139,6 +142,9 @@ export default function ListSuperLikes({ superlikes }) {
                     {forName}
                   </Box>
                 )}
+                <span style={{ fontSize: fontSizeSmall }}>
+                  {formatDate(superlike.created)}
+                </span>
               </Box>
             </ListItem>
             <Box

diff --git a/src/components/common/Notifications/Notifications.tsx b/src/components/common/Notifications/Notifications.tsx
@@ -33,7 +33,7 @@ import {
   FOR_SUPER_LIKE,
   SUPER_LIKE_BASE,
 } from "../../../constants/Identifiers.ts";
-import { minPriceSuperlike } from "../../../constants/Misc.ts";
+import { minPriceSuperLike } from "../../../constants/Misc.ts";
 
 const generalLocal = localForage.createInstance({
   name: "q-tube-general",
@@ -141,7 +141,7 @@ export const Notifications = () => {
             if (!result) continue;
             const res = await getPaymentInfo(result);
             if (
-              +res?.amount >= minPriceSuperlike &&
+              +res?.amount >= minPriceSuperLike &&
               res.recipient === usernameAddress &&
               isTimestampWithinRange(res?.timestamp, comment.created)
             ) {

diff --git a/src/constants/Identifiers.ts b/src/constants/Identifiers.ts
@@ -1,4 +1,4 @@
-const useTestIdentifiers = false;
+export const useTestIdentifiers = false;
 export const QTUBE_VIDEO_BASE = useTestIdentifiers
   ? "MYTEST_vid_"
   : "qtube_vid_";

diff --git a/src/constants/Misc.ts b/src/constants/Misc.ts
@@ -1,4 +1,7 @@
-export const minPriceSuperlike = 1;
+import { useTestIdentifiers } from "./Identifiers.ts";
+
+export const minPriceSuperLike = 1;
+export const minPriceSuperDislike = 1;
 
 export const titleFormatter = /[\r\n]+/g;
 export const titleFormatterOnSave = /[\r\n/<>:"'\\*|?]+/g;

diff --git a/src/pages/ContentPages/VideoContent/VideoContent-State.ts b/src/pages/ContentPages/VideoContent/VideoContent-State.ts
@@ -4,7 +4,7 @@ import {
   SUPER_LIKE_BASE,
 } from "../../../constants/Identifiers.ts";
 import {
-  minPriceSuperlike,
+  minPriceSuperLike,
   titleFormatterOnSave,
 } from "../../../constants/Misc.ts";
 import { useFetchSuperLikes } from "../../../hooks/useFetchSuperLikes.tsx";
@@ -199,7 +199,7 @@ export const useVideoContentState = () => {
             if (!result) continue;
             const res = await getPaymentInfo(result);
             if (
-              +res?.amount >= minPriceSuperlike &&
+              +res?.amount >= minPriceSuperLike &&
               res.recipient === nameAddressParam &&
               isTimestampWithinRange(res?.timestamp, comment.created)
             ) {

diff --git a/src/wrappers/GlobalWrapper.tsx b/src/wrappers/GlobalWrapper.tsx
@@ -28,7 +28,7 @@ import { EditPlaylist } from "../components/Publish/EditPlaylist/EditPlaylist";
 import ConsentModal from "../components/common/ConsentModal";
 import { useFetchSuperLikes } from "../hooks/useFetchSuperLikes";
 import { SUPER_LIKE_BASE } from "../constants/Identifiers.ts";
-import { minPriceSuperlike } from "../constants/Misc.ts";
+import { minPriceSuperLike } from "../constants/Misc.ts";
 
 interface Props {
   children: React.ReactNode;
@@ -167,7 +167,7 @@ const GlobalWrapper: React.FC<Props> = ({ children, setTheme }) => {
                 if (!result) continue;
                 const res = await getPaymentInfo(result);
                 if (
-                  +res?.amount >= minPriceSuperlike &&
+                  +res?.amount >= minPriceSuperLike &&
                   isTimestampWithinRange(res?.timestamp, comment.created)
                 ) {
                   addSuperlikeRawDataGetToList({