User following

apps/hasura/metadata/databases/masterbots/tables/public_social_following.yaml

@@ -9,6 +9,15 @@ object_relationships:
     using:
       foreign_key_constraint_on: follower_id
 insert_permissions:
+  - role: moderator
+    permission:
+      check:
+        follower_id:
+          _eq: X-Hasura-User-Id
+      columns:
+        - followee_id
+        - follower_id
+    comment: ""
   - role: user
     permission:
       check:
@@ -22,19 +31,60 @@ insert_permissions:
         - follower_id
     comment: ""
 select_permissions:
+  - role: anonymous
+    permission:
+      columns:
+        - created_at
+        - followee_id
+        - follower_id
+      filter: {}
+    comment: ""
+  - role: moderator
+    permission:
+      columns:
+        - created_at
+        - followee_id
+        - follower_id
+      filter: {}
+    comment: ""
+  - role: user
+    permission:
+      columns:
+        - followee_id
+        - follower_id
+      filter: {}
+    comment: ""
+update_permissions:
+  - role: moderator
+    permission:
+      columns:
+        - followee_id
+        - follower_id
+      filter:
+        follower_id:
+          _eq: X-Hasura-User-Id
+      check: null
+    comment: ""
   - role: user
     permission:
       columns:
         - followee_id
         - follower_id
       filter:
-        _or:
+        _and:
           - follower_id:
               _eq: X-Hasura-User-Id
           - followee_id:
-              _eq: X-Hasura-User-Id
+              _neq: X-Hasura-User-Id
+      check: null
     comment: ""
 delete_permissions:
+  - role: moderator
+    permission:
+      filter:
+        follower_id:
+          _eq: X-Hasura-User-Id
+    comment: ""
   - role: user
     permission:
       filter:

apps/masterbots.ai/components/routes/profile/user-card.tsx

@@ -1,6 +1,6 @@
 import { Separator } from '@/components/ui/separator'
 import Image from 'next/image'
-import { BookUser, BotIcon, MessageSquareHeart,   Wand2, ImagePlus, Loader } from 'lucide-react'
+import { BookUser, BotIcon, MessageSquareHeart, Wand2, ImagePlus, Loader, UserIcon, Users } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { User } from 'mb-genql'
 import { useProfile } from '@/lib/hooks/use-profile'
@@ -11,7 +11,10 @@ import toast from 'react-hot-toast'
 import { UserPersonalityPrompt } from '@/lib/constants/prompts'
 import {  ChangeEvent, useCallback, useEffect, useState } from 'react'
 import { useUploadImagesCloudinary } from '@/lib/hooks/use-cloudinary-upload'
-
+import { formatNumber, Ifollowed } from '@/lib/utils'
+import { useSession } from 'next-auth/react'
+import { userFollowOrUnfollow } from '@/services/hasura/hasura.service';
+import type { SocialFollowing } from 'mb-genql'
 
 interface UserCardProps {
   user: User | null
@@ -28,8 +31,9 @@ export function UserCard({ user, loading }: UserCardProps) {
   const [userProfilePicture, setUserProfilePicture] = useState<string | null | undefined>(user?.profilePicture)
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const { uploadFilesCloudinary, error: cloudinaryError } = useUploadImagesCloudinary();
+  const { data: session } = useSession();
+  const [userData, setUserData] = useState<User | null>(user)
 
-
   const userQuestions = user?.threads.map((thread) => {
 
     if (!thread.messages?.length) {
@@ -159,9 +163,71 @@ export function UserCard({ user, loading }: UserCardProps) {
     // update bio and topic when user changes
     setBio(user?.bio)
     setFavouriteTopic(user?.favouriteTopic)
+    setUserData(user)
   }
   , [user])
 
+
+
+  const handleFollowUser = async () => {
+    try {
+      // if no session is found, redirect to login
+      if (!session) {
+        toast.error('Please sign in to follow user')
+        setTimeout(() => {
+          window.location.href = '/auth/signin'
+        } , 2000)
+        return
+      }
+      const followerId = session.user?.id
+      const followeeId = user?.userId
+
+     const {success, error, follow} =  await userFollowOrUnfollow({followerId, followeeId, jwt: session.user.hasuraJwt as string})
+      if(!success){
+        console.error('Failed to follow/Unfolow user:', error)
+        return
+      }
+
+      if(follow){
+        setUserData(prevUser => {
+          if (!prevUser) return prevUser;
+
+          const newFollower: SocialFollowing = {
+            followerId,
+            followeeId,
+            createdAt: new Date().toISOString(),
+            user: prevUser,
+            userByFollowerId: prevUser,
+            __typename: 'SocialFollowing'
+          };
+
+          return {
+            ...prevUser,
+            followers: [...(prevUser.followers || []), newFollower]
+          } as User;  // Assert the entire object as User type
+        });
+        toast.success(`You are now following ${user?.username}`)
+      }else{
+        setUserData(prevUser => {
+          if (!prevUser) return prevUser;
+
+          return {
+            ...prevUser,
+            followers: prevUser.followers.filter(
+              follower => follower.followerId !== followerId || follower.followeeId !== followeeId
+            )
+          };
+        });
+        toast.success(`You have unfollowed ${user?.username}`)
+      }
+    } catch (error) {
+      toast.error('Failed to follow user')
+      console.error('Failed to follow user:', error)
+    }
+  }
+
+  const followed =  Ifollowed({followers: userData?.followers, userId: session?.user?.id || ''}) 
+
   return (
     <div
       className="dark:bg-[#09090B] bg-white rounded-lg  md:w-[600px]
@@ -255,31 +321,33 @@ export function UserCard({ user, loading }: UserCardProps) {
             </div>
           </div>
            {/* Implementation for this comes next :) */}
-          {/* <div className=' flex flex-col  items-center md:mt-0 mt-7  space-y-3'>
+        <div className=' flex flex-col  items-center md:mt-0 mt-7  space-y-3'>
            {!isOwner && (
-          <button aria-label={`Follow ${user?.username}`} className="px-10 py-1 text-sm text-white  rounded-md bg-[#BE17E8] hover:bg-[#BE17E8] dark:bg-[#83E56A] dark:hover:bg-[#83E56A] dark:text-black transition-colors">
+          <button onClick={handleFollowUser} aria-label={`Follow ${user?.username}`} className="px-10 py-1 text-sm text-white  rounded-md bg-[#BE17E8] hover:bg-[#BE17E8] dark:bg-[#83E56A] dark:hover:bg-[#83E56A] dark:text-black transition-colors">
             Follow
+            {
+             followed? 'ing' : ''
+            }
           </button>
           )}
           <div className="flex space-x-6 md:pt-2 ">
             <div className="flex flex-col items-center">
               <span className="text-sm">Following</span>
               <div className='flex items-center space-x-1'>
                 <UserIcon className="w-4 h-4" />
-                <span className="text-sm text-gray-500">313</span>
+                <span className="text-sm text-gray-500">{ formatNumber(userData?.following?.length || 0)}</span>
               </div>
 
             </div>
             <div className="flex flex-col items-center">
               <span className="text-sm">Followers</span>
               <div className='flex items-center space-x-1'>
                 <Users className="w-4 h-4" />
-                <span className="text-sm text-gray-500">3.2k</span>
+                <span className="text-sm text-gray-500">{ formatNumber(userData?.followers?.length || 0)}</span>
               </div>
             </div>
           </div>
-          </div> */}
-
+          </div> 
           </div>
         </div>
 

apps/masterbots.ai/lib/utils.ts

@@ -1,7 +1,7 @@
 import { cleanPrompt } from '@/lib/helpers/ai-helpers'
 import type { Message as AIMessage } from 'ai/react'
 import { type ClassValue, clsx } from 'clsx'
-import type { Message } from 'mb-genql'
+import type { Message, SocialFollowing } from 'mb-genql'
 import { customAlphabet } from 'nanoid'
 import { twMerge } from 'tailwind-merge'
 import type { ReactNode } from 'react'
@@ -318,3 +318,40 @@ export function parseClickableText(fullText: string): ParsedText {
 export function cleanClickableText(text: string): string {
   return text.replace(/(:|\.|\,)\s*$/, '')
 }
+
+
+ export const formatNumber = (num: number) => {
+  const lookup = [
+    { value: 1e9, symbol: 'B' },
+    { value: 1e6, symbol: 'M' },
+    { value: 1e3, symbol: 'K' }
+  ];
+
+  // Handle negative numbers
+  const isNegative = num < 0;
+  const absNum = Math.abs(num);
+
+  // Find the appropriate suffix
+  const item = lookup.find(item => absNum >= item.value);
+
+  if (!item) {
+    // If number is smaller than 1000, return as is
+    return isNegative ? `-${absNum}` : absNum.toString();
+  }
+
+  // Calculate the formatted value with one decimal place
+  const formattedValue = (absNum / item.value).toFixed(1);
+
+  // Remove .0 if it exists
+  const cleanValue = formattedValue.replace('.0', '');
+
+  return `${isNegative ? '-' : ''}${cleanValue}${item.symbol}`;
+};
+
+interface IProps {
+  followers: SocialFollowing[] | undefined;
+  userId: string;
+}
+export const Ifollowed = ({followers, userId} : IProps) => {
+  return followers?.some(follower => follower.followerId === userId);
+}

apps/masterbots.ai/services/hasura/hasura.service.ts

@@ -819,27 +819,21 @@ export async function getUserBySlug({ slug, isSameUser }: { slug: string, isSame
             content: true
           }
         },
-        // followers: {
-        //   followeeId: true,
-        //   followerId: true,
-        //   userByFollowerId: {
-        //     username: true
-        //   }
-        // },
-        // follower: {
-        //   followeeId: true,
-        //   followerId: true,
-        //   userByFollowerId: {
-        //     username: true
-        //   }
-        // },
-        // following: {
-        //   followeeId: true,
-        //   followerId: true,
-        //   userByFollowerId: {
-        //     username: true
-        //   }
-        // }
+        followers: {
+          followeeId: true,
+          followerId: true,
+          userByFollowerId: {
+            username: true
+          }
+        },
+
+        following: {
+          followeeId: true,
+          followerId: true,
+          userByFollowerId: {
+            username: true
+          }
+        }
       } 
     } as const)
 
@@ -944,3 +938,82 @@ export async function subtractChatbotMetadataLabels(
 
   return cleanResult(response)
 }
+
+
+export async function userFollowOrUnfollow({
+  followerId,
+  followeeId,
+  jwt
+}: {
+  followerId: string;
+  followeeId: string;
+  jwt: string;
+}) {
+  try {
+    if (!jwt) {
+      throw new Error('Authentication required to follow/unfollow user');
+    }
+
+    const client = getHasuraClient({ jwt });
+
+    // First check if follow relationship exists
+    const { socialFollowing } = await client.query({
+      socialFollowing: {
+        __args: {
+          where: {
+            followerId: { _eq: followerId },
+            followeeId: { _eq: followeeId }
+          }
+        },
+        followeeId: true,
+        followerId: true,
+      }
+    });
+
+    if (!socialFollowing?.length) {
+      // Create new follow relationship
+      await client.mutation({
+        insertSocialFollowingOne: {
+          __args: {
+            object: {
+              followerId,
+              followeeId
+            }
+          },
+          followeeId: true,
+          followerId: true,
+          userByFollowerId: {
+            username: true
+          }
+        }
+      });
+      return { success: true, follow: true };
+    }
+
+    // Delete existing follow relationship
+    await client.mutation({
+      deleteSocialFollowing: {
+        __args: {
+          where: {
+            followerId: { _eq: followerId },
+            followeeId: { _eq: followeeId }
+          }
+        },
+        affectedRows: true,
+        returning:{
+          followeeId: true,
+          followerId: true
+        }
+      }
+    });
+
+    return { success: true, follow: false };
+
+  } catch (error) {
+    console.error('Error following/unfollowing user:', error);
+    return { 
+      success: false, 
+      error: error instanceof Error ? error.message : 'Failed to follow/unfollow user.'
+    };
+  }
+}