refactor(WIP): follow / unfollow and comments handling

src/components/follow-unfollow-button.tsx

@@ -19,6 +19,7 @@ import { useLazyProfile } from '@lens-protocol/react';
 // REDUX IMPORTS
 import { openLoginModal } from '@redux/auth';
 import { useDispatch } from 'react-redux';
+import { removeFollowing, addFollowing } from '@redux/followers';
 
 // NOTIFICATIONS IMPORTS
 import { useSnackbar } from 'notistack';
@@ -90,6 +91,12 @@ const FollowUnfollowButton = ({ profileId, size = 'medium', followButtonMinWidth
         await result.value.waitForCompletion();
         handleUpdateProfile();
 
+        // Update the following list
+        if(action === unfollow) {
+          dispatch(removeFollowing(profileId));
+        }else{
+          dispatch(addFollowing(profile));
+        }
 
         // Send notification to the profile being followed
         const notificationPayload = generatePayload('FOLLOW', {

src/components/login-modal/LoaderDuringCreationProfile.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@mui/system";
+import { Box, BoxProps } from "@mui/system";
 import { WatchitLoader } from "@src/components/watchit-loader";
 import { useSelector } from 'react-redux';
 import { COLORS } from "@src/layouts/config-layout.ts";
@@ -7,6 +7,10 @@ import TextMaxLine from "@src/components/text-max-line";
 import { IconCheck, IconLoader, IconSquare } from "@tabler/icons-react";
 import { styled, keyframes } from '@mui/material/styles';
 
+interface LoaderContainerProps extends BoxProps {
+  show: boolean;
+}
+
 const spin = keyframes`
   0% {
     transform: rotate(0deg);
@@ -24,7 +28,7 @@ const IconSquaredStyledFullyTransparent = styled(IconSquare)`
   opacity: 0;
 `;
 
-const LoaderContainer = styled(Box)`
+const LoaderContainer = styled(Box)<LoaderContainerProps>`
   display: ${({ show }) => (show ? 'flex' : 'none')};
   position: fixed;
   width: 100%;

src/redux/comments/index.ts

@@ -7,12 +7,16 @@ export type CommentsReducerState = {
   };
   hiddenComments: AnyPublication[];
   counterLikes: { [publicationId: string]: number };
+  comments: { [publicationId: string]: AnyPublication[] };
+  pendingComments: { [publicationId: string]: AnyPublication[] };
 };
 
 const initialState: CommentsReducerState = {
   refetchTriggerByPublication: {},
   hiddenComments: [],
   counterLikes: {},
+  comments: {},
+  pendingComments: {},
 };
 
 const commentsSlice = createSlice({
@@ -45,6 +49,27 @@ const commentsSlice = createSlice({
         state.counterLikes[publicationId] -= 1;
       }
     },
+    addComment: (state, action: PayloadAction<{ publicationId: string; comment: AnyPublication }>) => {
+      const { publicationId, comment } = action.payload;
+      if (!state.comments[publicationId]) {
+        state.comments[publicationId] = [];
+      }
+      state.comments[publicationId].push(comment);
+    },
+    addPendingComment: (state, action: PayloadAction<{ publicationId: string; comment: AnyPublication }>) => {
+      const { publicationId, comment } = action.payload;
+      if (!state.pendingComments[publicationId]) {
+        state.pendingComments[publicationId] = [];
+      }
+      // Prepend new comment to the beginning of the list
+      state.pendingComments[publicationId] = [comment, ...state.pendingComments[publicationId]];
+    },
+    updateCommentStatus: (state, action: PayloadAction<{ publicationId: string; commentId: string; status: string }>) => {
+      const { publicationId, commentId, status } = action.payload;
+      const comment = state.comments[publicationId]?.find(comment => comment.id === commentId);
+      state.comments[publicationId] = state.comments[publicationId].filter(comment => comment.id !== commentId);
+
+    },
   },
 });
 
@@ -54,6 +79,9 @@ export const {
   setCounterLikes,
   incrementCounterLikes,
   decrementCounterLikes,
+  addComment,
+  addPendingComment,
+  updateCommentStatus,
 } = commentsSlice.actions;
 
 export default commentsSlice.reducer;

src/redux/followers/index.ts

@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Profile } from '@lens-protocol/api-bindings';
+
+interface FollowersState {
+  followers: Profile[];
+  followings: Profile[];
+}
+
+const initialState: FollowersState = {
+  followers: [],
+  followings: [],
+};
+
+const followersSlice = createSlice({
+  name: 'followers',
+  initialState,
+  reducers: {
+    setFollowers: (state, action: PayloadAction<Profile[]>) => {
+      state.followers = action.payload;
+    },
+    setFollowings: (state, action: PayloadAction<Profile[]>) => {
+      state.followings = action.payload;
+    },
+
+    addFollowing: (state, action: PayloadAction<Profile>) => {
+      state.followings.push(action.payload);
+    },
+
+    removeFollowing: (state, action: PayloadAction<string>) => {
+      state.followings = state.followings.filter(following => following.id !== action.payload);
+  },
+  },
+});
+
+export const { setFollowers, setFollowings, removeFollowing, addFollowing } = followersSlice.actions;
+
+export default followersSlice.reducer;

src/redux/reducer.ts

@@ -5,14 +5,16 @@ import authReducer from '@redux/auth/index';
 import notificationsReducer from '@redux/notifications/index';
 import bookmarkReducer from '@redux/bookmark/index';
 import commentsReducer from '@redux/comments/index';
+import followersReducer from '@redux/followers/index';
 
 const appReducer = combineReducers({
   minibar: minibarReducer,
   drawer: drawerReducer,
   auth: authReducer,
   bookmark: bookmarkReducer,
   comments: commentsReducer,
-  notifications: notificationsReducer
+  notifications: notificationsReducer,
+  followers: followersReducer,
 });
 
 const rootReducer = (state: any, action: any) => {

src/sections/publication/publication-comments-list.tsx

@@ -14,6 +14,7 @@ type Props = {
 };
 
 export default function PostCommentList({ publicationId: id, showReplies }: Props) {
+  const pendingComments = useSelector((state: any) => state.comments.pendingComments);
   const { data: comments, error, loading, execute } = useLazyPublications();
   const { hiddenComments, refetchTriggerByPublication } = useSelector((state: any) => state.comments);
   const refetchTrigger = refetchTriggerByPublication[id] || 0;
@@ -37,7 +38,13 @@ export default function PostCommentList({ publicationId: id, showReplies }: Prop
 
   if (error) return <p>Error loading comments: {error.message}</p>;
 
-  const commentsFiltered = (comments ?? [])
+  // Join the comments with the pending comments but append the pending comments at the beginning of the list
+  const commentsWithPending = pendingComments[id] ? [...pendingComments[id], ...(comments ?? [])] : comments;
+
+  console.log('comments', comments);
+  console.log('comments pending', pendingComments[id]);
+
+  const commentsFiltered = (commentsWithPending ?? [])
     .filter((comment) => !hiddenComments.some((hiddenComment: any) => hiddenComment.id === comment.id))
     .filter((comment) => !comment.isHidden)
 

src/sections/publication/publication-details-comment-form.tsx

@@ -22,9 +22,10 @@ import { ReadResult } from '@lens-protocol/react/dist/declarations/src/helpers/r
 import { uploadMetadataToIPFS, verifyIpfsData } from '@src/utils/ipfs';
 import uuidv4 from '@src/utils/uuidv4.ts';
 import { useDispatch } from 'react-redux';
-import { refetchCommentsByPublication } from '@redux/comments';
+import {refetchCommentsByPublication, addPendingComment, updateCommentStatus} from '@redux/comments';
 import {useNotifications} from "@src/hooks/use-notifications.ts";
 import { useNotificationPayload } from '@src/hooks/use-notification-payload.ts';
+import {AnyPublication} from "@lens-protocol/api-bindings";
 
 // Define the props types
 type MovieCommentFormProps = {
@@ -106,9 +107,11 @@ const MovieCommentForm = ({ commentOn, owner, root }: MovieCommentFormProps) =>
    */
   const onSubmit = handleSubmit(async (data) => {
     try {
+      const uuid = uuidv4();
+
       const metadata = textOnly({
         appId: 'watchit',
-        id: uuidv4(),
+        id: uuid,
         attributes: [
           { type: MetadataAttributeType.STRING, key: 'publication', value: commentOn },
           { type: MetadataAttributeType.STRING, key: 'creator', value: sessionData?.profile?.handle?.localName },
@@ -124,10 +127,55 @@ const MovieCommentForm = ({ commentOn, owner, root }: MovieCommentFormProps) =>
             { display_type: MarketplaceMetadataAttributeDisplayType.STRING, value: 'watchit' },
           ],
           description: data.comment,
-          external_url: `https://watchit.movie/comment/${uuidv4()}`,
+          external_url: `https://watchit.movie/comment/${uuid}`,
         }
       });
 
+      // Create a pending comment object
+      const pendingComment: AnyPublication = {
+        // @ts-ignore
+        id: uuid as string,
+        isHidden: false,
+        isHiddenByAuthor: false,
+        // @ts-ignore
+        // Add metadata to the comment but replace the content with the original comment
+        metadata: {
+          ...metadata,
+          content: data.comment,
+        },
+        // @ts-ignore
+        operations: {
+          hasUpvoted: false
+        },
+        status: 'pending',
+        by: sessionData?.profile,
+        createdAt: new Date().toISOString(),
+        __typename: 'Comment',
+        hashtagsMentioned: [],
+        profilesMentioned: [],
+        quoteOn: {
+          // @ts-ignore
+          __typename: 'CommentFields',
+          // @ts-ignore
+          id: commentOn,
+          createdAt: new Date().toISOString(),
+          // @ts-ignore
+          metadata,
+          by: sessionData?.profile,
+          stats: {
+            // @ts-ignore
+            totalAmountOfMirrors: 0,
+            totalAmountOfCollects: 0,
+            totalAmountOfComments: 0,
+            totalAmountOfUpvotes: 0,
+          },
+        },
+      };
+
+      reset(); // Reset the form
+      // Dispatch the addPendingComment action
+      dispatch(addPendingComment({ publicationId: commentOn, comment: pendingComment }));
+
       // Validate metadata against the schema
       const validation = PublicationMetadataSchema.safeParse(metadata);
       if (!validation.success) {
@@ -146,6 +194,8 @@ const MovieCommentForm = ({ commentOn, owner, root }: MovieCommentFormProps) =>
         commentOn: commentOn as any,
         metadata: uri,
       }).then(() => {
+        // Update the comment status to confirmed
+        dispatch(updateCommentStatus({ publicationId: commentOn, commentId: pendingComment.id, status: 'confirmed' }));
         // Send notifications to the author of the publication
         const notificationPayload = generatePayload('COMMENT', {
           id: owner?.id,

src/sections/user/profile-followers.tsx

@@ -4,24 +4,21 @@ import Typography from '@mui/material/Typography';
 
 // LENS IMPORTS
 import { Profile } from '@lens-protocol/api-bindings';
-import { useProfileFollowers } from '@lens-protocol/react';
 
 // LOCAL IMPORTS
 import { UserItem } from '@src/components/user-item';
+import { useSelector } from 'react-redux';
 
 // ----------------------------------------------------------------------
 
 interface Props {
-  profile: Profile;
   onActionFinished?: () => void;
 }
 
 // ----------------------------------------------------------------------
 
-const ProfileFollowers = ({ profile, onActionFinished }: Props) => {
-  const { data: followers } = useProfileFollowers({
-    of: profile.id,
-  });
+const ProfileFollowers = ({ onActionFinished }: Props) => {
+  const followers: Profile[] = useSelector((state: any) => state.followers.followers);
 
   return (
     <Box
@@ -42,7 +39,7 @@ const ProfileFollowers = ({ profile, onActionFinished }: Props) => {
       }}
     >
       {followers?.length ? (
-        followers.map((follower, index) => (
+        followers.map((follower: any, index: any) => (
           <UserItem
             key={`follower-${index}`}
             profile={follower}

src/sections/user/profile-following.tsx

@@ -8,19 +8,12 @@ import { useProfileFollowing } from '@lens-protocol/react';
 
 // LOCAL IMPORTS
 import { UserItem } from '@src/components/user-item';
+import {useSelector} from "react-redux";
 
 // ----------------------------------------------------------------------
 
-interface Props {
-  profile: Profile;
-}
-
-// ----------------------------------------------------------------------
-
-const ProfileFollowing = ({ profile }: Props) => {
-  const { data: following } = useProfileFollowing({
-    for: profile.id,
-  });
+const ProfileFollowing = () => {
+  const following: Profile[] = useSelector((state: any) => state.followers.followings);
 
   return (
     <Box