Merge pull request #172 from dappforce/deploy/comments

Images Improvements
dappforce · Jan 17, 2024 · 1f4e4a8 · 1f4e4a8
2 parents 5ff7926 + 3f512c6
commit 1f4e4a8
Show file tree

Hide file tree

Showing 22 changed files with 313 additions and 150 deletions.
diff --git a/.github/workflows/feature-based.yaml b/.github/workflows/feature-based.yaml
@@ -68,9 +68,9 @@ jobs:
             GH_SELLER_CLIENT_ID=5DYm3Wk4aa1BbfhH1ajmY6MNEELXoicmKRnP4tzHYjSKnD9K
             GH_SELLER_TOKEN_SIGNER=retire strong pole intact cool music high path salt praise stadium spatial
             GH_SERVER_MNEMONIC=plunge pumpkin penalty segment cattle more print below fat lemon clap uniform
-            GH_NEXT_PUBLIC_DATAHUB_QUERY_URL=https://super-likes-fixed-data-hub.subsocial.network/graphql
-            GH_NEXT_PUBLIC_DATAHUB_SUBSCRIPTION_URL=wss://super-likes-fixed-data-hub.subsocial.network/graphql-ws
-            GH_DATAHUB_QUEUE_URL=https://super-likes-fixed-queue-data-hub.subsocial.network/graphql
+            GH_NEXT_PUBLIC_DATAHUB_QUERY_URL=https://leaderboards-data-hub.subsocial.network/graphql
+            GH_NEXT_PUBLIC_DATAHUB_SUBSCRIPTION_URL=wss://leaderboards-data-hub.subsocial.network/graphql-ws
+            GH_DATAHUB_QUEUE_URL=https://leaderboards-queue-data-hub.subsocial.network/graphql
             GH_DATAHUB_QUEUE_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6dHJ1ZX0.jpXwkIJ4DpV4IvSI3eWVVXE6x89qr_GIq7IlbBv5YE0
           tags: |
             ${{ env.image }}

diff --git a/src/components/comments/CommentEditor.tsx b/src/components/comments/CommentEditor.tsx
@@ -7,6 +7,7 @@ import { useState } from 'react'
 import { Controller, ErrorMessage, useForm } from 'react-hook-form'
 import { useSubsocialApi } from 'src/components/substrate/SubstrateContext'
 import { TxCallback, TxFailedCallback } from 'src/components/substrate/SubstrateTxButton'
+import { useSendEvent } from 'src/providers/AnalyticContext'
 import { CommentContent, IpfsCid } from 'src/types'
 import { useAmIBlocked } from '../auth/MyAccountsContext'
 import { buildSharePostValidationSchema } from '../posts/PostValidation'
@@ -16,34 +17,44 @@ import { MyAccountProps } from '../utils/MyAccount'
 import { CommentTxButtonType } from './utils'
 
 // A height of EasyMDE toolbar with our custom styles. Can be changed
-const toolbarHeight = 49
-
-function scrollToolbarHeight() {
-  if (window) {
-    window.scrollBy(0, toolbarHeight)
-  }
+// const toolbarHeight = 49
+
+// function scrollToolbarHeight() {
+//   if (window) {
+//     window.scrollBy(0, toolbarHeight)
+//   }
+// }
+
+export type CommentEventProps = {
+  eventSource: string
+  level: number
+  isPostAuthor: boolean
+  isEditing?: boolean
 }
-
 type Props = MyAccountProps & {
   content?: CommentContent
   withCancel?: boolean
   callback?: (id?: BN) => void
   CommentTxButton: (props: CommentTxButtonType) => JSX.Element
   asStub?: boolean
   className?: string
+  autoFocus?: boolean
+  eventProps: CommentEventProps
 }
 
 const Fields = {
   body: 'body',
 }
 
 export const CommentEditor = (props: Props) => {
-  const { content, withCancel, callback, CommentTxButton, asStub } = props
+  const { content, withCancel, callback, CommentTxButton, asStub, autoFocus, eventProps } = props
   const { ipfs } = useSubsocialApi()
   const [ipfsCid, setIpfsCid] = useState<IpfsCid>()
   const [fakeId] = useState(tmpClientId())
   const [toolbar, setToolbar] = useState(!asStub)
 
+  const sendEvent = useSendEvent()
+
   const [isLoading, setIsLoading] = useState(false)
 
   const { control, errors, formState, watch, reset } = useForm({
@@ -92,14 +103,17 @@ export const CommentEditor = (props: Props) => {
       disabled={isSubmitting || !dirty}
       onFailed={onTxFailed}
       onSuccess={onTxSuccess}
-      onClick={() => setIsLoading(true)}
+      onClick={() => {
+        setIsLoading(true)
+        sendEvent('comment', eventProps)
+      }}
     />
   )
 
   const showToolbar = () => {
     if (!toolbar) {
       setToolbar(true)
-      scrollToolbarHeight()
+      // scrollToolbarHeight()
     }
   }
 
@@ -113,6 +127,7 @@ export const CommentEditor = (props: Props) => {
               disabled={isLoading}
               placeholder='Write a comment...'
               autoSize={{ minRows: 1, maxRows: 5 }}
+              autoFocus={autoFocus}
             />
           }
           name={Fields.body}

diff --git a/src/components/comments/CommentTree.tsx b/src/components/comments/CommentTree.tsx
@@ -8,30 +8,49 @@ import useSubsocialEffect from '../api/useSubsocialEffect'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import DataList from '../lists/DataList'
 import { Loading } from '../utils'
+import { CommentEventProps } from './CommentEditor'
 import { useRepliesData } from './utils'
 import ViewComment from './ViewComment'
 
 type CommentsTreeProps = {
   parentId: PostId
+  eventProps: CommentEventProps
+  directlyExpandReplies?: boolean
 }
 
 type CommentByIdProps = {
   commentId: PostId
+  eventProps: CommentEventProps
+  directlyExpandReplies?: boolean
 }
 
-const CommentById = React.memo(({ commentId: id }: CommentByIdProps) => {
-  const comment = useSelectPost(id)
+const CommentById = React.memo(
+  ({ commentId: id, eventProps, directlyExpandReplies }: CommentByIdProps) => {
+    const comment = useSelectPost(id)
 
-  const rootPostId = comment ? asCommentStruct(comment.post.struct).rootPostId : undefined
-  const rootPost = useSelectPost(rootPostId)?.post.struct
-  const space = useSelectSpace(rootPost?.spaceId)?.struct
+    const rootPostId = comment ? asCommentStruct(comment.post.struct).rootPostId : undefined
+    const rootPost = useSelectPost(rootPostId)?.post.struct
+    const space = useSelectSpace(rootPost?.spaceId)?.struct
 
-  if (!comment) return null
+    if (!comment) return null
 
-  return <ViewComment rootPost={rootPost} space={space} comment={comment} />
-})
+    return (
+      <ViewComment
+        withShowReplies={directlyExpandReplies}
+        rootPost={rootPost}
+        space={space}
+        comment={comment}
+        eventProps={eventProps}
+      />
+    )
+  },
+)
 
-export const ViewCommentsTree: FC<CommentsTreeProps> = ({ parentId }) => {
+export const ViewCommentsTree: FC<CommentsTreeProps> = ({
+  parentId,
+  eventProps,
+  directlyExpandReplies,
+}) => {
   const dispatch = useAppDispatch()
   const myAddress = useMyAddress()
   const [loading, setLoading] = useState(true)
@@ -75,7 +94,13 @@ export const ViewCommentsTree: FC<CommentsTreeProps> = ({ parentId }) => {
       getKey={replyId => replyId}
       className='mt-2.5'
       listClassName='GapSmall d-flex flex-column'
-      renderItem={replyId => <CommentById commentId={replyId} />}
+      renderItem={replyId => (
+        <CommentById
+          directlyExpandReplies={directlyExpandReplies}
+          commentId={replyId}
+          eventProps={eventProps}
+        />
+      )}
     />
   )
 }
diff --git a/src/components/comments/CommentsSection.tsx b/src/components/comments/CommentsSection.tsx
@@ -1,31 +1,32 @@
 import clsx from 'clsx'
-import { NextPage } from 'next'
 import { FC } from 'react'
-import { PostData, PostWithSomeDetails, SpaceStruct } from 'src/types'
-import { useSelectSpace } from '../../rtk/features/spaces/spacesHooks'
-import { PageContent } from '../main/PageWrapper'
-import ViewPostLink from '../posts/ViewPostLink'
-import { getProfileName } from '../substrate'
-import { postUrl } from '../urls'
+import { PostWithSomeDetails, SpaceStruct } from 'src/types'
+import { useIsMyAddress } from '../auth/MyAccountsContext'
 import { Pluralize } from '../utils/Plularize'
 import Section from '../utils/Section'
 import { ViewCommentsTree } from './CommentTree'
 import { NewComment } from './CreateComment'
-import { ViewComment } from './ViewComment'
 
 type CommentSectionProps = {
   post: PostWithSomeDetails
   space?: SpaceStruct
   replies?: PostWithSomeDetails[]
   hashId?: string
   withBorder?: boolean
+  eventSource: 'post-page' | 'post-preview'
 }
 
-export const CommentSection: FC<CommentSectionProps> = ({ post, hashId, withBorder }) => {
+export const CommentSection: FC<CommentSectionProps> = ({
+  post,
+  hashId,
+  withBorder,
+  eventSource,
+}) => {
   const {
     post: { struct },
   } = post
-  const { id, repliesCount } = struct
+  const { id, repliesCount, ownerId } = struct
+  const isPostAuthor = useIsMyAddress(ownerId)
 
   return (
     <Section
@@ -37,45 +38,49 @@ export const CommentSection: FC<CommentSectionProps> = ({ post, hashId, withBord
       <h3>
         <Pluralize count={repliesCount || 0} singularText='comment' />
       </h3>
-      <NewComment post={struct} asStub />
-      <ViewCommentsTree parentId={id} />
+      <NewComment post={struct} asStub eventProps={{ eventSource, level: 0, isPostAuthor }} />
+      <ViewCommentsTree
+        eventProps={{ eventSource, level: 1, isPostAuthor }}
+        parentId={id}
+        directlyExpandReplies
+      />
     </Section>
   )
 }
 
-type CommentPageProps = {
-  comment: PostWithSomeDetails
-  parentPost: PostData
-  space: SpaceStruct
-  replies: PostWithSomeDetails[]
-}
+// type CommentPageProps = {
+//   comment: PostWithSomeDetails
+//   parentPost: PostData
+//   space: SpaceStruct
+//   replies: PostWithSomeDetails[]
+// }
 
-export const CommentPage: NextPage<CommentPageProps> = ({ comment, parentPost, space }) => {
-  const {
-    post: { struct, content },
-  } = comment
-  const { content: postContent } = parentPost
-  const address = struct.ownerId
+// export const CommentPage: NextPage<CommentPageProps> = ({ comment, parentPost, space }) => {
+//   const {
+//     post: { struct, content },
+//   } = comment
+//   const { content: postContent } = parentPost
+//   const address = struct.ownerId
 
-  const owner = useSelectSpace()
-  const profileName = getProfileName({ address, owner }).toString()
+//   const owner = useSelectSpace()
+//   const profileName = getProfileName({ address, owner }).toString()
 
-  const renderResponseTitle = () => (
-    <>
-      In response to <ViewPostLink space={space} post={parentPost} title={postContent?.title} />
-    </>
-  )
+//   const renderResponseTitle = () => (
+//     <>
+//       In response to <ViewPostLink space={space} post={parentPost} title={postContent?.title} />
+//     </>
+//   )
 
-  const meta = {
-    title: `${profileName} commented on ${content?.title}`,
-    desc: content?.summary,
-    canonical: postUrl(space, comment.post),
-  }
+//   const meta = {
+//     title: `${profileName} commented on ${content?.title}`,
+//     desc: content?.summary,
+//     canonical: postUrl(space, comment.post),
+//   }
 
-  return (
-    <PageContent meta={meta} className='DfContentPage DfEntirePost' withSidebar>
-      {renderResponseTitle()}
-      <ViewComment space={space} comment={comment} withShowReplies />
-    </PageContent>
-  )
-}
+//   return (
+//     <PageContent meta={meta} className='DfContentPage DfEntirePost' withSidebar>
+//       {renderResponseTitle()}
+//       <ViewComment space={space} comment={comment} withShowReplies />
+//     </PageContent>
+//   )
+// }
diff --git a/src/components/comments/CreateComment.tsx b/src/components/comments/CreateComment.tsx
@@ -13,6 +13,7 @@ import { asCommentStruct, convertToDerivedContent, IpfsCid, PostData, PostStruct
 import { useMyAddress } from '../auth/MyAccountsContext'
 import { HiddenPostAlert } from '../posts/view-post'
 import { getNewIdFromEvent, getTxParams } from '../substrate'
+import { CommentEventProps } from './CommentEditor'
 import { buildMockComment, CommentTxButtonType } from './utils'
 
 const CommentEditor = dynamic(() => import('./CommentEditor'), { ssr: false })
@@ -24,6 +25,8 @@ type NewCommentProps = {
   withCancel?: boolean
   asStub?: boolean
   className?: string
+  autoFocus?: boolean
+  eventProps: CommentEventProps
 }
 
 export const NewComment: FC<NewCommentProps> = ({
@@ -32,6 +35,8 @@ export const NewComment: FC<NewCommentProps> = ({
   withCancel,
   asStub,
   className,
+  autoFocus,
+  eventProps,
 }) => {
   const { id: parentId, isComment } = post
   const { subsocial } = useSubsocialApi()
@@ -146,6 +151,8 @@ export const NewComment: FC<NewCommentProps> = ({
 
   return (
     <CommentEditor
+      eventProps={eventProps}
+      autoFocus={autoFocus}
       callback={callback}
       CommentTxButton={buildTxButton}
       withCancel={withCancel}

diff --git a/src/components/comments/UpdateComment.tsx b/src/components/comments/UpdateComment.tsx
@@ -6,6 +6,7 @@ import { useCreateReloadPost } from 'src/rtk/app/hooks'
 import { useCreateUpsertReply } from 'src/rtk/features/replies/repliesHooks'
 import { CommentContent, IpfsCid, PostContent, PostStruct } from 'src/types'
 import { getTxParams } from '../substrate'
+import { CommentEventProps } from './CommentEditor'
 import { CommentTxButtonType } from './utils'
 
 const CommentEditor = dynamic(() => import('./CommentEditor'), { ssr: false })
@@ -17,9 +18,10 @@ type EditCommentProps = {
   struct: PostStruct
   content: CommentContent
   callback?: FCallback
+  eventProps: CommentEventProps
 }
 
-export const EditComment: FC<EditCommentProps> = ({ struct, content, callback }) => {
+export const EditComment: FC<EditCommentProps> = ({ struct, content, callback, eventProps }) => {
   const upsertReply = useCreateUpsertReply()
   const reloadPost = useCreateReloadPost()
   const id = struct.id
@@ -80,6 +82,7 @@ export const EditComment: FC<EditCommentProps> = ({ struct, content, callback })
 
   return (
     <CommentEditor
+      eventProps={{ ...eventProps, isEditing: true }}
       callback={callback}
       content={content}
       CommentTxButton={buildTxButton}