feat: profile publications

integrations/lens-protocol/components/profile/owned-profiles.tsx

@@ -40,7 +40,10 @@ export const OwnedProfiles = () => {
                       <button
                         className={isProfileSelected ? 'btn btn-primary text-sm' : 'btn btn-blue text-sm'}
                         disabled={isProfileSelected || isPending}
-                        onClick={() => switchActiveProfile(profile.id)}>
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          switchActiveProfile(profile.id)}
+                        }>
                         {isProfileSelected ? 'Current Profile' : 'Use Profile'}
                       </button>
                       <LinkComponent className="btn ml-4 text-sm" href={`/integration/lens-protocol/profiles/${profile.handle}`}>

integrations/lens-protocol/components/profile/profile-publications.tsx

@@ -0,0 +1,37 @@
+import { Post, ProfileId, PublicationTypes, useActiveProfile, usePublications } from "@lens-protocol/react-web"
+import { PublicationCard } from "../publications/publication-card"
+import { Spinner } from "../spinner"
+
+export const ProfilePublications =({profileId, publicationTypes, title}: {profileId: ProfileId, publicationTypes: PublicationTypes[]; title: string})=> {
+  const { data: activeProfile } = useActiveProfile()
+  const {
+    data: publications,
+    loading,
+    hasMore,
+    next,
+  } = usePublications({
+    profileId,
+    observerId: activeProfile?.id,
+    publicationTypes,
+    limit: 10,
+  })
+  return (
+    <div className="w-full flex flex-col">
+    <h2 className="font-semibold text-xs mb-2">{title}</h2>
+      {publications?.map((publication) => (
+        <PublicationCard key={publication.id} publication={publication as Post} />
+      ))}
+      {hasMore && (
+        <button className="btn btn-primary mt-4 w-auto mb-6 m-auto" disabled={loading} onClick={() => next()}>
+          Load more
+        </button>
+      )}
+      {loading && (
+        <div className="text-center w-full my-6">
+          <Spinner />
+        </div>
+      )}
+      {publications?.length === 0 && <span>No {title} yet.</span>}
+      </div>
+  )
+}

integrations/lens-protocol/components/profile/profile.tsx

@@ -1,4 +1,4 @@
-import { useActiveProfile, useProfile } from '@lens-protocol/react-web'
+import { PublicationTypes, useActiveProfile, useProfile } from '@lens-protocol/react-web'
 
 import { LinkComponent } from '@/components/shared/link-component'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
@@ -12,6 +12,8 @@ import { Spinner } from '../spinner'
 import { FollowUnfollowButton } from './follow-unfollow-button'
 import { ProfileRevenue } from './profile-revenue'
 import { ProfileStats } from './profile-stats'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ProfilePublications } from './profile-publications'
 
 export const Profile = ({ handle }: { handle: string }) => {
   const activeProfile = useActiveProfile()
@@ -61,13 +63,30 @@ export const Profile = ({ handle }: { handle: string }) => {
         <ProfileRevenue profileId={profile.id} />
       </div>
       <div className="w-full md:w-3/4 p-6">
+      <Tabs defaultValue="feed">
+      <div className="flex justify-center">
+        <TabsList className="dark:bg-neutral-800">
+          <TabsTrigger value="feed" className="dark:data-[state=active]:bg-neutral-900">Feed</TabsTrigger>
+          <TabsTrigger value="posts" className="dark:data-[state=active]:bg-neutral-900">Posts</TabsTrigger>
+          <TabsTrigger value="replies" className="dark:data-[state=active]:bg-neutral-900">Replies</TabsTrigger>
+        </TabsList>
+      </div>
+      <TabsContent value="feed" className="dark:border-neutral-700">
         <IsUserAuthenticated>
           <Feed profileId={profile.id} />
         </IsUserAuthenticated>
         <NotAuthenticatedYet>
           <div className="mb-2">You need to login to see the profile feed.</div>
           <LoginButton />
         </NotAuthenticatedYet>
+      </TabsContent>
+      <TabsContent value="posts" className="dark:border-neutral-700">
+        <ProfilePublications profileId={profile.id} publicationTypes={[PublicationTypes.Post, PublicationTypes.Mirror]} title="Posts"/>
+      </TabsContent>
+      <TabsContent value="replies" className="dark:border-neutral-700">
+        <ProfilePublications profileId={profile.id} publicationTypes={[PublicationTypes.Comment]}  title="Replies"/>
+      </TabsContent>
+      </Tabs>
       </div>
     </div>
   )

integrations/lens-protocol/components/publications/actions/like.tsx

@@ -22,7 +22,7 @@ const UnAuthorizedLikeButton = ({ publication, hideCount }: IActionButton) => {
   return (
     <ActionButton
       color="red"
-      count={publication.stats.totalUpvotes}
+      count={publication.stats?.totalUpvotes ?? 0}
       disabled={false}
       execute={() => showErrorToast()}
       hideCount={hideCount}
@@ -62,7 +62,7 @@ const AuthorizedLikeButton = ({ publication, hideCount, profile }: IActionButton
   return (
     <ActionButton
       color="red"
-      count={publication.stats.totalUpvotes}
+      count={publication.stats?.totalUpvotes ?? 0}
       disabled={false}
       execute={execute}
       hideCount={hideCount}

integrations/lens-protocol/components/publications/publication-card.tsx

@@ -115,7 +115,7 @@ export const PublicationCard = ({
             ((fullMode && !!publication.stats.commentsCount) || feedCommentMode) && bottomLine
           )}>
           <div className={cn('ml-2', compactMode && 'w-full flex flex-row justify-between items-center')}>
-            <div className={cn('w-full break-words pr-2', compactMode && 'flex-1')}>{publication.metadata.content}</div>
+            <div className={cn('w-full break-words pr-2', compactMode && 'flex-1')}>{publication.metadata?.content}</div>
             <div className={cn('w-full mt-4 text-xs text-slate-500 dark:text-gray-300', compactMode && 'w-auto mt-0 flex-0')}>
               {moment(publication.createdAt).format('HH:mm YY MMM DD')}
             </div>

integrations/lens-protocol/components/publications/search-publications.tsx

@@ -21,6 +21,7 @@ export const SearchPublications = ({ query }: { query: string }) => {
           <Spinner />
         </div>
       )}
+      {!publications?.length && <span>No publications found.</span>}
     </div>
   )
 }