Merge pull request #171 from dappforce/deploy/comments

Revert comments to use native subsocial instead of grill

src/components/activity/MyFeed.tsx

@@ -4,6 +4,7 @@ import { useAppSelector } from 'src/rtk/app/store'
 import { selectFeedByAccount } from 'src/rtk/features/posts/myFeedSlice'
 import { useMyAddress } from '../auth/MyAccountsContext'
 import NotAuthorized from '../auth/NotAuthorized'
+import WriteSomething from '../posts/WriteSomething'
 import Section from '../utils/Section'
 import { createLoadMorePosts, FeedActivities, onchainLoadMorePosts } from './FeedActivities'
 import { BaseActivityProps } from './types'
@@ -45,6 +46,7 @@ export const MyFeed = () => {
 
   return (
     <Section>
+      <WriteSomething className='mt-3' />
       <InnerMyFeed address={myAddress} />
     </Section>
   )

src/components/comments/CommentEditor.tsx

@@ -2,6 +2,7 @@ import styles from './CommentEditor.module.sass'
 
 import { Button, Input } from 'antd'
 import BN from 'bn.js'
+import clsx from 'clsx'
 import { useState } from 'react'
 import { Controller, ErrorMessage, useForm } from 'react-hook-form'
 import { useSubsocialApi } from 'src/components/substrate/SubstrateContext'
@@ -29,6 +30,7 @@ type Props = MyAccountProps & {
   callback?: (id?: BN) => void
   CommentTxButton: (props: CommentTxButtonType) => JSX.Element
   asStub?: boolean
+  className?: string
 }
 
 const Fields = {
@@ -102,7 +104,7 @@ export const CommentEditor = (props: Props) => {
   }
 
   return (
-    <div className='DfShareModalBody'>
+    <div className={clsx('DfShareModalBody', props.className)}>
       <form onClick={showToolbar}>
         <Controller
           control={control}

src/components/comments/CommentTree.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 import { useSelectSpace } from 'src/rtk/app/hooks'
 import { useAppDispatch } from 'src/rtk/app/store'
 import { useSelectPost } from 'src/rtk/features/posts/postsHooks'
@@ -39,6 +39,9 @@ export const ViewCommentsTree: FC<CommentsTreeProps> = ({ parentId }) => {
   const comment = useSelectPost(parentId)
   const repliesCount = comment?.post.struct.repliesCount || 0
   const { replyIds, hasReplies } = useRepliesData({ id: parentId, repliesCount: repliesCount })
+  const reversedReplyIds = useMemo(() => {
+    return replyIds.slice().reverse()
+  }, [replyIds])
 
   useSubsocialEffect(
     ({ subsocial }) => {
@@ -68,8 +71,10 @@ export const ViewCommentsTree: FC<CommentsTreeProps> = ({ parentId }) => {
 
   return (
     <DataList
-      dataSource={replyIds}
+      dataSource={reversedReplyIds}
       getKey={replyId => replyId}
+      className='mt-2.5'
+      listClassName='GapSmall d-flex flex-column'
       renderItem={replyId => <CommentById commentId={replyId} />}
     />
   )

src/components/comments/CommentsSection.tsx

@@ -26,12 +26,11 @@ export const CommentSection: FC<CommentSectionProps> = ({ post, hashId, withBord
     post: { struct },
   } = post
   const { id, repliesCount } = struct
-  const hasAnyReply = (repliesCount ?? 0) > 0
 
   return (
     <Section
       id={hashId}
-      className={clsx('DfCommentSection', hasAnyReply ? 'mb-2' : 'mb-4', {
+      className={clsx('DfCommentSection', {
         TopBorder: withBorder,
       })}
     >

src/components/comments/CreateComment.tsx

@@ -23,9 +23,16 @@ type NewCommentProps = {
   callback?: (id?: BN) => void
   withCancel?: boolean
   asStub?: boolean
+  className?: string
 }
 
-export const NewComment: FC<NewCommentProps> = ({ post, callback, withCancel, asStub }) => {
+export const NewComment: FC<NewCommentProps> = ({
+  post,
+  callback,
+  withCancel,
+  asStub,
+  className,
+}) => {
   const { id: parentId, isComment } = post
   const { subsocial } = useSubsocialApi()
   const address = useMyAddress()
@@ -143,6 +150,7 @@ export const NewComment: FC<NewCommentProps> = ({ post, callback, withCancel, as
       CommentTxButton={buildTxButton}
       withCancel={withCancel}
       asStub={asStub}
+      className={className}
     />
   )
 }

src/components/comments/ViewComment.tsx

@@ -1,13 +1,11 @@
-import {
-  CaretDownOutlined,
-  CaretUpOutlined,
-  CommentOutlined,
-  NotificationOutlined,
-} from '@ant-design/icons'
-import { Button, Comment, Tag } from 'antd'
+import { CaretDownOutlined, CaretUpOutlined, NotificationOutlined } from '@ant-design/icons'
+import { Button, Tag } from 'antd'
+import clsx from 'clsx'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
+import { TbMessageCircle2 } from 'react-icons/tb'
+import { useSelectProfile } from 'src/rtk/app/hooks'
 import {
   asCommentData,
   asCommentStruct,
@@ -16,23 +14,20 @@ import {
   PostWithSomeDetails,
   SpaceStruct,
 } from 'src/types'
-import { useSelectSpace } from '../../rtk/features/spaces/spacesHooks'
-import { ShareDropdown } from '../posts/share/ShareDropdown'
 import { PostDropDownMenu } from '../posts/view-post/PostDropDownMenu'
-import AuthorPreview from '../profiles/address-views/AuthorPreview'
+import AuthorSpaceAvatar from '../profiles/address-views/AuthorSpaceAvatar'
+import Name from '../profiles/address-views/Name'
 import { equalAddresses } from '../substrate'
 import { postUrl } from '../urls'
 import { formatDate, IconWithLabel, useIsHidden } from '../utils'
 import { Pluralize } from '../utils/Plularize'
-import { VoterButtons } from '../voting/VoterButtons'
+import SuperLike from '../voting/SuperLike'
 import { ViewCommentsTree } from './CommentTree'
 import { NewComment } from './CreateComment'
 import { CommentBody } from './helpers'
 import { EditComment } from './UpdateComment'
 import { useRepliesData } from './utils'
 
-const CommentsIcon = <CommentOutlined />
-
 type Props = {
   space?: SpaceStruct
   rootPost?: PostStruct
@@ -54,7 +49,7 @@ export const InnerViewComment: FC<Props> = props => {
   const commentContent = comment.content as CommentContent
   const { id, createdAtTime, ownerId } = commentStruct
 
-  const owner = useSelectSpace()
+  const owner = useSelectProfile(ownerId)
 
   const [showEditForm, setShowEditForm] = useState(false)
   const [showReplyForm, setShowReplyForm] = useState(false)
@@ -101,38 +96,6 @@ export const InnerViewComment: FC<Props> = props => {
 
   const onEditComment = () => setShowEditForm(true)
 
-  const commentAuthor = (
-    <div className='DfAuthorBlock'>
-      <AuthorPreview
-        address={ownerId}
-        owner={owner}
-        isShort={true}
-        isPadded={false}
-        size={32}
-        afterName={
-          isRootPostOwner ? (
-            <Tag color='blue' className='ml-2'>
-              <NotificationOutlined className='mr-2' />
-              Post author
-            </Tag>
-          ) : undefined
-        }
-        details={
-          <span>
-            <Link href='/[spaceId]/[slug]' as={commentLink}>
-              <a className='DfGreyLink' title={formatDate(createdAtTime)}>
-                {dayjs(createdAtTime).fromNow()}
-              </a>
-            </Link>
-            {/* {' · '} */}
-            {/* {pluralize(score, 'Point')} */}
-          </span>
-        }
-      />
-      {!isFake && <PostDropDownMenu post={comment} space={space} onEditComment={onEditComment} />}
-    </div>
-  )
-
   const newCommentForm = showReplyForm && (
     <NewComment
       post={commentStruct}
@@ -143,60 +106,79 @@ export const InnerViewComment: FC<Props> = props => {
     />
   )
 
-  const actionCss = 'DfCommentAction'
-  const hoverActionCss = `${actionCss} AnimatedVisibility`
-
   return (
-    <div className={isFake ? 'DfDisableLayout pb-3' : ''}>
-      <Comment
-        className='DfNewComment'
-        actions={
-          isFake
-            ? []
-            : [
-                <VoterButtons
-                  key={`voters-of-comments-${id}`}
-                  post={commentStruct}
-                  className={actionCss}
-                />,
-                <Button
-                  key={`reply-comment-${id}`}
-                  className={hoverActionCss}
-                  onClick={() => setShowReplyForm(true)}
-                >
-                  <IconWithLabel icon={CommentsIcon} label='Reply' />
-                </Button>,
-                <ShareDropdown
-                  key={`dropdown-comment-${id}`}
-                  postDetails={commentDetails}
-                  space={space}
-                  className={hoverActionCss}
-                />,
-              ]
-        }
-        author={commentAuthor}
-        content={
-          showEditForm ? (
-            <EditComment
-              struct={commentStruct}
-              content={commentContent}
-              callback={() => setShowEditForm(false)}
+    <div className={clsx('w-100', isFake ? 'DfDisableLayout pb-3' : '')}>
+      <div className={clsx('d-flex align-items-start w-100')}>
+        <AuthorSpaceAvatar size={32} authorAddress={ownerId} />
+        <div className='d-flex flex-column w-100'>
+          <div className='d-flex align-items-center GapTiny'>
+            <Name
+              className='!ColorMuted !FontWeightNormal FontSmall'
+              address={ownerId}
+              owner={owner}
+              asLink
+            />
+            {isRootPostOwner ? (
+              <Tag color='blue' className='mr-0'>
+                <NotificationOutlined className='mr-2' />
+                Post author
+              </Tag>
+            ) : undefined}
+            <Link href='/[spaceId]/[slug]' as={commentLink}>
+              <a className='DfGreyLink FontTiny' title={formatDate(createdAtTime)}>
+                {dayjs(createdAtTime).fromNow()}
+              </a>
+            </Link>
+            {!isFake && (
+              <PostDropDownMenu
+                className='d-flex align-items-center ColorMuted'
+                post={comment}
+                space={space}
+                onEditComment={onEditComment}
+              />
+            )}
+          </div>
+          <div className='mt-1'>
+            {showEditForm ? (
+              <EditComment
+                struct={commentStruct}
+                content={commentContent}
+                callback={() => setShowEditForm(false)}
+              />
+            ) : (
+              <CommentBody comment={asCommentData(comment)} />
+            )}
+          </div>
+          <div className='d-flex align-items-center GapSmall mt-1.5'>
+            <SuperLike
+              isComment
+              key={`voters-of-comments-${id}`}
+              className='!FontTiny'
+              iconClassName='!FontSmall'
+              post={commentStruct}
             />
-          ) : (
-            <CommentBody comment={asCommentData(comment)} />
-          )
-        }
-      >
-        <div>
-          {newCommentForm}
-          {hasReplies && (
-            <div className='pb-2'>
-              {!withShowReplies && <ViewRepliesLink />}
-              {showReplies && <ViewCommentsTree parentId={commentStruct.id} />}
-            </div>
-          )}
+            <Button
+              key={`reply-comment-${id}`}
+              className='p-0'
+              style={{ border: 'none', boxShadow: 'none', background: 'transparent' }}
+              onClick={() => setShowReplyForm(true)}
+            >
+              <span className='d-flex align-items-center ColorMuted'>
+                <IconWithLabel icon={<TbMessageCircle2 className='FontNormal' />} label='Reply' />
+              </span>
+            </Button>
+          </div>
+          <div className='mt-1.5 d-flex flex-column'>
+            {newCommentForm}
+            {hasReplies && (
+              <div className='pb-2'>
+                {!withShowReplies && <ViewRepliesLink />}
+                {showReplies && <ViewCommentsTree parentId={commentStruct.id} />}
+              </div>
+            )}
+          </div>
         </div>
-      </Comment>
+      </div>
     </div>
   )
 }

src/components/comments/helpers/index.module.sass

@@ -2,12 +2,6 @@
 
 .BumbleContent
   display: block
-  margin-top: $space_tiny !important
-  padding: $space_small $space_normal
-  border-radius: 15px
-  border-top-left-radius: 0
-  background-color: #fff
-  box-shadow: $shadow
 
   .DfMdEditor
     margin-top: $space_small

src/components/comments/helpers/index.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { HiddenPostAlert } from 'src/components/posts/view-post'
 import { HasPostId } from 'src/components/urls'
 import { DfMd } from 'src/components/utils/DfMd'
@@ -6,11 +7,12 @@ import styles from './index.module.sass'
 
 type CommentBodyProps = {
   comment: CommentData
+  className?: string
 }
 
-export const CommentBody = ({ comment: { struct, content } }: CommentBodyProps) => {
+export const CommentBody = ({ comment: { struct, content }, className }: CommentBodyProps) => {
   return (
-    <div className={styles.BumbleContent}>
+    <div className={clsx(styles.BumbleContent, className)}>
       <HiddenPostAlert post={struct} className={styles.DfCommentAlert} preview />
       <DfMd source={content?.body} />
     </div>

src/components/creators/cards/CreatePostCard.tsx

@@ -75,8 +75,7 @@ export default function CreatePostCard({ variant }: CreatePostCardProps) {
           </CreatePostButtonAndModal>
         ) : (
           <div className='d-flex flex-column'>
-            <span className='FontSmall ColorMuted'>Create a profile to get started.</span>
-            <CreateSpaceButton className='mt-3' type='primary' ghost={false}>
+            <CreateSpaceButton type='primary' ghost={false}>
               Create profile
             </CreateSpaceButton>
           </div>