Merge pull request #729 from WatchItDev/app/fix/redux

fix: issues

Author: geolffreym

src/components/LoadingFade.tsx

@@ -0,0 +1,79 @@
+import {
+  ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { AnimatePresence, m } from 'framer-motion';
+
+export interface LoadingFadeProps {
+  loading: boolean;
+  skeleton: ReactNode;
+  children: ReactNode;
+  durationMs?: number;   // fade (default 300 ms)
+  delayMs?: number;      // delay before fade starts (default 0 ms)
+}
+
+export const LoadingFade = ({
+                              loading,
+                              skeleton,
+                              children,
+                              durationMs = 300,
+                              delayMs = 0,
+                            }: LoadingFadeProps) => {
+  const durationSec = durationMs / 1000;
+  const delaySec    = delayMs    / 1000;
+
+  const skelRef = useRef<HTMLDivElement>(null);
+  const [minHeight, setMinHeight] = useState<number>();
+  const [overlaySkeleton, setOverlaySkeleton] = useState(false);
+
+  useLayoutEffect(() => {
+    if (loading && skelRef.current && minHeight === undefined) {
+      const h = skelRef.current.getBoundingClientRect().height;
+      if (h) {
+        setMinHeight(h);
+        setOverlaySkeleton(true);
+      }
+    }
+  }, [loading, minHeight]);
+
+  const handleSkeletonExit = () => {
+    setMinHeight(undefined);
+    setOverlaySkeleton(false);
+  };
+
+  return (
+    <div style={{ position: 'relative', width: '100%', minHeight }}>
+      <AnimatePresence onExitComplete={handleSkeletonExit}>
+        {loading && (
+          <m.div
+            key="skeleton"
+            ref={skelRef}
+            initial={{ opacity: 1 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: durationSec, delay: delaySec }}
+            style={{
+              position: overlaySkeleton ? 'absolute' : 'static',
+              inset: overlaySkeleton ? 0 : 'unset',
+              width: '100%',
+              pointerEvents: 'none',
+            }}
+          >
+            {skeleton}
+          </m.div>
+        )}
+      </AnimatePresence>
+
+      <m.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: loading ? 0 : 1 }}
+        transition={{ duration: durationSec, delay: delaySec }}
+        style={{ width: '100%' }}
+      >
+        {children}
+      </m.div>
+    </div>
+  );
+};

src/components/carousel/variants/carousel-top-titles.tsx

@@ -25,15 +25,13 @@ export default function CarouselTopTitles({ posts, category }: Readonly<Carousel
           alignItems: 'stretch',
         },
         '.slick-slide': {
-          height: 'auto',
+          height: 'fit-content',
         },
         '.slick-list': {
           height: 'auto',
         },
         '.slick-slide > div': {
-          height: '100%',
-          minHeight: '100%',
-          maxHeight: '100%',
+          height: 'auto',
         },
       }}
     >
@@ -47,7 +45,7 @@ export default function CarouselTopTitles({ posts, category }: Readonly<Carousel
       >
         <Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
           {posts.map((post: Post) => (
-            <Box key={`${category}-${post.id}`} sx={{ px: 0.75 }}>
+            <Box key={`${category}-${post.id}`} sx={{ px: 0.75, height: '100%' }}>
               <PosterTopTitles post={post} />
             </Box>
           ))}

src/components/follow-unfollow-button.tsx

@@ -7,7 +7,6 @@ import LoadingButton from '@mui/lab/LoadingButton';
 // REDUX IMPORTS
 import { openLoginModal } from '@redux/auth';
 import { useDispatch } from 'react-redux';
-import { addFollower, removeFollower } from '@redux/followers';
 
 // LOCAL IMPORTS
 import Box from '@mui/material/Box';
@@ -31,6 +30,7 @@ import { User } from '@src/graphql/generated/graphql.ts';
 
 interface FollowUnfollowButtonProps {
   profileId: string;
+  onActionFinish?: () => void;
   followButtonMinWidth?: number;
   size?: 'small' | 'medium' | 'large';
 }
@@ -41,6 +41,7 @@ const FollowUnfollowButton = ({
   profileId,
   size = 'medium',
   followButtonMinWidth = 120,
+  onActionFinish = () => {},
 }: PropsWithChildren<FollowUnfollowButtonProps>) => {
   const dispatch = useDispatch();
   const [loadProfile, { data: profileData, loading: profileLoading }] = useGetUserLazyQuery();
@@ -86,12 +87,7 @@ const FollowUnfollowButton = ({
 
       setIsFollowed(result?.data?.toggleFollow);
       handleUpdateProfile();
-
-      if (result?.data?.toggleFollow) {
-        dispatch(addFollower(profile));
-      } else {
-        dispatch(removeFollower(profileId));
-      }
+      onActionFinish();
 
       // Send notification to the profile being followed
       const notificationPayload = generatePayload(

src/components/poster/variants/poster-top-titles.tsx

@@ -33,7 +33,7 @@ const PosterTopTitles = ({ post }: { post: Post }) => {
 
   return (
     <Stack
-      sx={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      sx={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', overflow: 'hidden' }}
       alignItems={'stretch'}
       spacing={{ xs: 1, sm: 2, md: 4 }}
     >
@@ -47,7 +47,7 @@ const PosterTopTitles = ({ post }: { post: Post }) => {
           top: 0,
           left: 0,
           width: '100%',
-          height: '100%',
+          height: '99%',
           opacity: 0.2,
           filter: "blur(5px) !important",
           backgroundSize: 'cover',

src/components/publication-detail-main/index.tsx

@@ -43,7 +43,7 @@ import { SubscribeToUnlockCard } from '@src/components/subscribe-to-unlock-card/
 import Popover from '@mui/material/Popover';
 import { useNotifications } from '@src/hooks/use-notifications.ts';
 import { openLoginModal } from '@redux/auth';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useNotificationPayload } from '@src/hooks/use-notification-payload.ts';
 import AvatarProfile from "@src/components/avatar/avatar.tsx";
 import { PublicationDetailProps } from '@src/components/publication-detail-main/types.ts';
@@ -56,8 +56,6 @@ import {
 } from '@src/graphql/generated/hooks.tsx';
 import { resolveSrc } from '@src/utils/image.ts';
 import { useBookmarks } from '@src/hooks/use-bookmark.ts';
-import { RootState } from '@redux/store.ts';
-import { decrementCounterLikes, incrementCounterLikes, setCounterLikes } from '@redux/comments';
 
 // ----------------------------------------------------------------------
 
@@ -73,8 +71,8 @@ export default function PublicationDetailMain({
   const [openConfirmModal, setOpenConfirmModal] = useState(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [hasLiked, setHasLiked] = useState(false);
-  const likesCount = useSelector((s: RootState) => s.comments.counterLikes[post.id] ?? post.likeCount);
-  const counters = useSelector((s: RootState) => s.comments.counterLikes);
+  const [likesCount, setLikesCount] = useState(post.likeCount);
+  const [commentCount, setCommentCount] = useState(post.commentCount);
 
   const router = useRouter();
   const theme = useTheme();
@@ -83,68 +81,61 @@ export default function PublicationDetailMain({
   const [ hidePost ] = useHidePostMutation();
   const { sendNotification } = useNotifications();
   const { generatePayload } = useNotificationPayload(sessionData);
-  const [getIsPostLiked, { data: postLikedData, loading: postLikedLoading }] = useGetIsPostLikedLazyQuery()
+  const [getIsPostLiked, { loading: postLikedLoading }] = useGetIsPostLikedLazyQuery()
   const [ togglePostLike, { loading: togglePostLikeLoading }  ] = useTogglePostLikeMutation()
   const { has, loading: loadingList } = useBookmarks();
   const { toggle, loading: loadingToggle } = useToggleBookmark();
-  const commentCount = useSelector((s: RootState) => s.comments.postCommentCount[post.id] ?? post.commentCount);
 
   const isBookmarked = has(post.id);
   const isLoading = togglePostLikeLoading || postLikedLoading
   const variants = theme.direction === 'rtl' ? varFade().inLeft : varFade().inRight;
   const openMenu = Boolean(anchorEl);
 
-  const toggleReaction = async () => {
+  const handleToggleLike = async () => {
     if (!sessionData?.authenticated) return dispatch(openLoginModal());
 
-    // Send a notification to the profile owner using the sendNotification function from useNotifications hook
-    const payloadForNotification = generatePayload(
-      'LIKE',
-      {
-        id: post.author.address,
-        displayName: post.author.displayName ?? 'Watchit',
-        avatar: resolveSrc(post.author.profilePicture || post.author.address, 'profile'),
-      },
-      {
-        rawDescription: `${sessionData?.user?.displayName} liked ${post.title}`,
-        root_id: post.id,
-        post_title: post.title,
-      }
-    );
-
     try {
-      const res = await togglePostLike({
-        variables: {
-          input: {
-            postId: post.id
-          }
-        }
-      });
+      const res = await togglePostLike({ variables: { input: { postId: post.id } } });
+      const isNowLiked = res.data?.togglePostLike ?? false;
 
-      const isLiked = res?.data?.togglePostLike ?? false;
+      setHasLiked(isNowLiked);
+      setLikesCount((prev) => prev + (isNowLiked ? 1 : -1));
 
-      setHasLiked(isLiked);
-      dispatch(isLiked ? incrementCounterLikes(post.id) : decrementCounterLikes(post.id));
+      if (isNowLiked) {
+        // Send a notification to the profile owner using the sendNotification function from useNotifications hook
+        const payloadForNotification = generatePayload(
+          'LIKE',
+          {
+            id: post.author.address,
+            displayName: post.author.displayName ?? 'Watchit',
+            avatar: resolveSrc(post.author.profilePicture || post.author.address, 'profile'),
+          },
+          {
+            rawDescription: `${sessionData?.user?.displayName} liked ${post.title}`,
+            root_id: post.id,
+            post_title: post.title,
+          }
+        );
 
-      // Send notification to the author when not already liked
-      if (res?.data?.togglePostLike) {
         sendNotification(post.author.address, sessionData?.user?.address ?? '', payloadForNotification);
       }
     } catch (err) {
-      console.error('Error toggling reaction:', err);
+      console.error(err);
     }
   };
 
-  useEffect(() => {
-    setHasLiked(postLikedData?.getIsPostLiked ?? false);
-  }, [postLikedData]);
+  const handleCommentSuccess = (wasReply = false) => {
+    if (!wasReply) {
+      // Es un comentario raíz → solo incrementamos el counter del post
+      setCommentCount((c) => (c ?? 0) + 1);
+    }
+  };
 
   useEffect(() => {
-    getIsPostLiked({ variables: { postId: post.id } });
-    if (post.likeCount !== undefined) {
-      dispatch(setCounterLikes({ publicationId: post.id, likes: post.likeCount }));
-    }
-  }, [post.likeCount, post.id]);
+    getIsPostLiked({ variables: { postId: post.id } }).then((res) =>
+      setHasLiked(res.data?.getIsPostLiked ?? false),
+    );
+  }, [post.id]);
 
   const handleHide = async () => {
     await hidePost({ variables: { postId: post.id } });
@@ -350,7 +341,7 @@ export default function PublicationDetailMain({
                     height: '40px',
                     minWidth: '40px',
                   }}
-                  onClick={toggleReaction}
+                  onClick={handleToggleLike}
                   disabled={isLoading}
                 >
                   {isLoading ? (
@@ -444,6 +435,7 @@ export default function PublicationDetailMain({
                       displayName: post.author.displayName ?? 'Watchit',
                       avatar: resolveSrc(post.author.profilePicture || post.author.address, 'profile'),
                     }}
+                    onSuccess={() => handleCommentSuccess(false)}
                   />
                 ) : (
                   <Typography
@@ -462,7 +454,7 @@ export default function PublicationDetailMain({
                 )}
               </Box>
               <Box sx={{ display: 'flex', flexDirection: 'column', mt: 2, pr: 1 }}>
-                <PostCommentList publicationId={post.id} showReplies />
+                <PostCommentList publicationId={post.id} showReplies onReplyCreated={() => handleCommentSuccess(true)} />
               </Box>
             </Box>
           )}

src/components/subscribe-to-unlock-card/subscribe-to-unlock-card.tsx

@@ -91,7 +91,7 @@ export const SubscribeToUnlockCard = ({
             size="lg"
           />
         )}
-        {isAuthorized && (
+        {isJoinButtonVisible && (
           <Box sx={{ mt: 3, borderRadius: 1 }}>
             <Typography variant="body2" color="textSecondary">
               Join now for just <strong>{totalCostMMC} MMC/month</strong> and access to{' '}

src/components/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface HandleActionErrorProps extends Error{
   requestedAmount?: {
     asset?: { symbol: string };
@@ -9,3 +11,10 @@ export interface ActivateSubscriptionProfileModalProps {
   isOpen: boolean;
   onClose: () => void;
 }
+
+export interface LoadingFadeProps {
+  loading: boolean;
+  skeleton: ReactNode;
+  children: ReactNode;
+  duration?: number;
+}

src/config-global.ts

@@ -38,6 +38,8 @@ export interface GlobalConstants {
   ATTESTATION_BASE_URL: string;
   FROM_BLOCK: bigint | string | number;
   GQL_ENDPOINT: string;
+  OPEN_COLLECTIVE: string;
+  TERMS_AND_CONDITIONS: string;
 }
 
 export const GLOBAL_CONSTANTS: GlobalConstants = {
@@ -101,6 +103,8 @@ export const GLOBAL_CONSTANTS: GlobalConstants = {
     process.env.VITE_URL_ATTESTATION_BASE || import.meta.env.VITE_URL_ATTESTATION_BASE || "",
   FROM_BLOCK: process.env.VITE_BLOCK_FROM || import.meta.env.VITE_BLOCK_FROM || 0n,
   GQL_ENDPOINT: process.env.VITE_GQL_ENDPOINT || import.meta.env.VITE_GQL_ENDPOINT || 'http://localhost:4000/graphql',
+  OPEN_COLLECTIVE: process.env.VITE_URL_OPEN_COLLECTIVE || import.meta.env.VITE_URL_OPEN_COLLECTIVE || '',
+  TERMS_AND_CONDITIONS: process.env.VITE_URL_TERMS_AND_CONDITIONS || import.meta.env.VITE_URL_TERMS_AND_CONDITIONS || '',
 };
 
 export const PATH_AFTER_LOGIN = paths.dashboard.root;