Update grill widget

package.json

@@ -93,7 +93,7 @@
     "@subsocial/data-hub-sdk": "dappforce/subsocial-data-hub-sdk#staging",
     "@subsocial/definitions": "0.8.10",
     "@subsocial/elasticsearch": "0.8.10",
-    "@subsocial/grill-widget": "^0.0.13",
+    "@subsocial/grill-widget": "^0.1.3",
     "@subsocial/resource-discussions": "^0.0.4",
     "@subsocial/utils": "0.8.10",
     "@talismn/connect-wallets": "^1.2.5",

src/components/activity/AccountActivity.tsx

@@ -1,26 +1,33 @@
 import { PostWithSomeDetails, SpaceData } from '@subsocial/api/types'
-import { Tabs } from 'antd'
+import { Button, Tabs } from 'antd'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import config from 'src/config'
 import { ActivityCounts } from 'src/graphql/apis'
 import {
   useGetActivityCounts,
-  useGetAllActivities,
+  // useGetAllActivities,
   useGetCommentActivities,
-  useGetFollowActivities,
+  // useGetFollowActivities,
   useGetPostActivities,
-  useGetTweetActivities,
 } from 'src/graphql/hooks'
+import {
+  useFetchPosts,
+  useSelectPost,
+  useSelectSpace,
+  useSetChatEntityConfig,
+  useSetChatOpen,
+} from 'src/rtk/app/hooks'
 import { useIsMyAddress } from '../auth/MyAccountsContext'
 import WriteSomething from '../posts/WriteSomething'
-import { PostPreviewsOnSpace } from '../spaces/helpers'
+// import { PostPreviewsOnSpace } from '../spaces/helpers'
 import { Loading } from '../utils'
 import { createLoadMorePosts, FeedActivities } from './FeedActivities'
-import { createLoadMoreActivities, NotifActivities } from './Notifications'
+// import { createLoadMoreActivities, NotifActivities } from './Notifications'
 import { OnchainAccountActivity } from './OnchainAccountActivity'
 import { SpaceActivities } from './SpaceActivities'
+import styles from './style.module.sass'
 import { BaseActivityProps } from './types'
 
 const { TabPane } = Tabs
@@ -34,22 +41,23 @@ type ActivitiesByAddressProps = {
   address: string
   withSpacePosts?: WithSpacePosts
   withWriteSomethingBlock?: boolean
+  spaceId?: string
 }
 
-const AllActivities = (props: BaseActivityProps) => {
-  const getAllActivities = useGetAllActivities()
-  const loadMoreActivities = createLoadMoreActivities(getAllActivities)
-  return (
-    <NotifActivities
-      {...props}
-      showMuted
-      type='activities'
-      loadMore={loadMoreActivities}
-      noDataDesc='No activities yet'
-      loadingLabel='Loading activities...'
-    />
-  )
-}
+// const AllActivities = (props: BaseActivityProps) => {
+//   const getAllActivities = useGetAllActivities()
+//   const loadMoreActivities = createLoadMoreActivities(getAllActivities)
+//   return (
+//     <NotifActivities
+//       {...props}
+//       showMuted
+//       type='activities'
+//       loadMore={loadMoreActivities}
+//       noDataDesc='No activities yet'
+//       loadingLabel='Loading activities...'
+//     />
+//   )
+// }
 
 // const ReactionActivities = (props: BaseActivityProps) => {
 //   const getReactionActivities = useGetReactionActivities()
@@ -65,20 +73,20 @@ const AllActivities = (props: BaseActivityProps) => {
 //   )
 // }
 
-const FollowActivities = (props: BaseActivityProps) => {
-  const getFollowActivities = useGetFollowActivities()
-  const loadMoreFollows = createLoadMoreActivities(getFollowActivities)
-  return (
-    <NotifActivities
-      {...props}
-      showMuted
-      type='activities'
-      loadMore={loadMoreFollows}
-      noDataDesc='No follows yet'
-      loadingLabel='Loading follows...'
-    />
-  )
-}
+// const FollowActivities = (props: BaseActivityProps) => {
+//   const getFollowActivities = useGetFollowActivities()
+//   const loadMoreFollows = createLoadMoreActivities(getFollowActivities)
+//   return (
+//     <NotifActivities
+//       {...props}
+//       showMuted
+//       type='activities'
+//       loadMore={loadMoreFollows}
+//       noDataDesc='No follows yet'
+//       loadingLabel='Loading follows...'
+//     />
+//   )
+// }
 
 const CommentActivities = (props: BaseActivityProps) => {
   const getCommentActivities = useGetCommentActivities()
@@ -108,23 +116,23 @@ const PostActivities = (props: BaseActivityProps) => {
   )
 }
 
-const SpacePostsContent = (props: WithSpacePosts) => {
-  return <PostPreviewsOnSpace {...props} />
-}
+// const SpacePostsContent = (props: WithSpacePosts) => {
+//   return <PostPreviewsOnSpace {...props} />
+// }
 
-const TweetActivities = (props: BaseActivityProps) => {
-  const getTweetActivities = useGetTweetActivities()
-  const loadMorePosts = createLoadMorePosts(getTweetActivities)
-  return (
-    <FeedActivities
-      {...props}
-      showMuted
-      loadMore={loadMorePosts}
-      noDataDesc='No tweets yet'
-      loadingLabel='Loading tweets...'
-    />
-  )
-}
+// const TweetActivities = (props: BaseActivityProps) => {
+//   const getTweetActivities = useGetTweetActivities()
+//   const loadMorePosts = createLoadMorePosts(getTweetActivities)
+//   return (
+//     <FeedActivities
+//       {...props}
+//       showMuted
+//       loadMore={loadMorePosts}
+//       noDataDesc='No tweets yet'
+//       loadingLabel='Loading tweets...'
+//     />
+//   )
+// }
 
 const activityTabs = [
   'space-posts',
@@ -135,28 +143,43 @@ const activityTabs = [
   'follows',
   'spaces',
   'all',
+  'chat',
 ] as const
+
 type ActivityTab = (typeof activityTabs)[number]
+
 const getTab = (tab: ActivityTab) => tab
+
 const OffchainAccountActivity = ({
   address,
   withWriteSomethingBlock = true,
-  withSpacePosts,
+  spaceId,
 }: ActivitiesByAddressProps) => {
-  const initialActiveTab = withSpacePosts ? 'space-posts' : 'posts'
+  const initialActiveTab = 'posts'
 
   const isMyAddress = useIsMyAddress(address)
   const getActivityCounts = useGetActivityCounts()
   const router = useRouter()
   const [activeTab, setActiveTab] = useState<ActivityTab>(initialActiveTab)
   const [counts, setCounts] = useState<ActivityCounts>()
+  const setChatConfig = useSetChatEntityConfig()
+  const setChatOpen = useSetChatOpen()
+
+  const space = useSelectSpace(spaceId)
+
+  const chatId = (space?.content?.chats as any[])?.[0]?.id as string | undefined
+
+  console.log('ChatId', chatId, space?.content)
+
+  useFetchPosts(chatId ? [chatId] : [])
+
+  const post = useSelectPost(chatId)
+
   // to make tweets tab doesn't disappear until the address is changed.
-  const [haveDisplayedTweetsTab, setHaveDisplayedTweetsTab] = useState(false)
 
   useEffect(() => {
     setActiveTab(initialActiveTab)
     setCounts(undefined)
-    setHaveDisplayedTweetsTab(false)
     ;(async () => {
       if (!address) return
 
@@ -165,10 +188,6 @@ const OffchainAccountActivity = ({
     })()
   }, [address])
 
-  useEffect(() => {
-    if (activeTab === 'tweets') setHaveDisplayedTweetsTab(true)
-  }, [activeTab])
-
   useEffect(() => {
     const hash = window.location.hash.substring(1) as ActivityTab
     if (activityTabs.includes(hash)) {
@@ -178,39 +197,43 @@ const OffchainAccountActivity = ({
 
   if (!counts) return <Loading label='Loading activities...' />
 
-  const {
-    postsCount,
-    commentsCount,
-    // reactionsCount,
-    followsCount,
-    activitiesCount,
-    spacesCount,
-    tweetsCount,
-  } = counts
+  const { postsCount, commentsCount, spacesCount } = counts
 
   const getTabTitle = (title: string, count: number) => `${title} (${count})`
 
-  const panePaddingClass = 'px-1 px-md-0'
-
   const onChangeTab = (activeKey: string) => {
     setActiveTab(activeKey as ActivityTab)
     router.replace('#' + activeKey)
   }
 
   return (
-    <Tabs activeKey={activeTab} onChange={onChangeTab}>
-      {withSpacePosts && (
-        <TabPane
-          tab={getTabTitle('Space Posts', withSpacePosts.postIds.length)}
-          key={getTab('space-posts')}
-        >
-          <SpacePostsContent {...withSpacePosts} />
-        </TabPane>
-      )}
-      <TabPane
-        tab={getTabTitle(withSpacePosts ? 'Owner Posts' : 'Posts', postsCount)}
-        key={getTab('posts')}
-      >
+    <Tabs
+      activeKey={activeTab}
+      onChange={onChangeTab}
+      renderTabBar={(props, DefaultTabBar) => {
+        return (
+          <div className={styles.TabsBlock}>
+            {chatId && post && (
+              <Button
+                onClick={() => {
+                  setChatConfig({
+                    entity: { type: 'post', data: post.post },
+                    withFloatingButton: false,
+                  })
+                  setChatOpen(true)
+                }}
+                type='link'
+                className={styles.ChatButton}
+              >
+                Chat
+              </Button>
+            )}
+            <DefaultTabBar {...props} />
+          </div>
+        )
+      }}
+    >
+      <TabPane tab={getTabTitle('Posts', postsCount)} key={getTab('posts')}>
         {isMyAddress ? (
           <div className={clsx('d-flex flex-column', withWriteSomethingBlock && 'mt-3')}>
             {withWriteSomethingBlock && <WriteSomething />}
@@ -220,38 +243,12 @@ const OffchainAccountActivity = ({
           <PostActivities address={address} totalCount={postsCount} />
         )}
       </TabPane>
-      {(tweetsCount > 0 || haveDisplayedTweetsTab) && (
-        <TabPane tab={getTabTitle('Tweets', tweetsCount)} key={getTab('tweets')}>
-          <TweetActivities address={address} totalCount={tweetsCount} />
-        </TabPane>
-      )}
       <TabPane tab={getTabTitle('Comments', commentsCount)} key={getTab('comments')}>
         <CommentActivities address={address} totalCount={commentsCount} />
       </TabPane>
-      {/* <TabPane
-        tab={getTabTitle('Reactions', reactionsCount)}
-        key={getTab('reactions')}
-        className={panePaddingClass}
-      >
-        <ReactionActivities address={address} totalCount={reactionsCount} />
-      </TabPane> */}
-      <TabPane
-        tab={getTabTitle('Follows', followsCount)}
-        key={getTab('follows')}
-        className={panePaddingClass}
-      >
-        <FollowActivities address={address} totalCount={followsCount} />
-      </TabPane>
       <TabPane tab={getTabTitle('Spaces', spacesCount)} key={getTab('spaces')}>
         <SpaceActivities address={address} totalCount={spacesCount} />
       </TabPane>
-      <TabPane
-        tab={getTabTitle('All', activitiesCount)}
-        key={getTab('all')}
-        className={panePaddingClass}
-      >
-        <AllActivities address={address} totalCount={activitiesCount} />
-      </TabPane>
     </Tabs>
   )
 }

src/components/activity/style.module.sass

@@ -1,6 +1,6 @@
 @import 'src/styles/subsocial-vars.scss'
 
-@media screen and ( max-width: 768px)   
+@media screen and ( max-width: 768px)
   .NotificationPage
     padding: 0 $space_tiny
     \:global .infinite-scroll-component
@@ -11,3 +11,28 @@
 
 .DfNotifCounter p
   margin: 0 !important
+
+.TabsBlock
+  display: flex
+  align-items: center
+  width: 100%
+  border-bottom: 1px solid #f0f0f0
+
+  :global(.ant-tabs-nav)
+    margin: 0 !important
+
+  :global(.ant-tabs-nav)
+    &::before
+      border-bottom: none !important
+
+  .ChatButton
+    position: relative
+    display: inline-flex
+    align-items: center
+    margin: 0 32px 0 0
+    padding: 12px 0
+    font-size: 14px
+    background: transparent
+    border: 0
+    outline: none
+    cursor: pointer