feat: comment on posts

src/apps/app-router.tsx

@@ -15,7 +15,7 @@ const redirectToRoot = () => <Redirect to={'/'} />;
 export const AppRouter = () => {
   return (
     <Switch>
-      <Route path='/conversation/:conversationId' exact component={MessengerApp} />
+      <Route path='/conversation/:conversationId' component={MessengerApp} />
       <Route path='/' exact component={MessengerApp} />
       <Route path='/explorer' component={ExplorerApp} />
       {featureFlags.enableNotificationsApp && <Route path='/notifications' component={NotificationsApp} />}

src/components/messenger/feed/components/comment-input/index.tsx

@@ -0,0 +1,24 @@
+import { ViewModes } from '../../../../../shared-components/theme-engine';
+import { PostInput } from '../post-input';
+
+import styles from './styles.module.scss';
+import { useCommentInput } from './useCommentInput';
+
+export interface CommentInputProps {
+  postId: string;
+}
+
+export const CommentInput = ({ postId }: CommentInputProps) => {
+  const { error, isConnected, onSubmit } = useCommentInput(postId);
+
+  return (
+    <PostInput
+      className={styles.Input}
+      viewMode={ViewModes.Dark}
+      isWalletConnected={isConnected}
+      onSubmit={onSubmit}
+      variant='comment'
+      error={error}
+    />
+  );
+};

src/components/messenger/feed/components/comment-input/styles.module.scss

@@ -0,0 +1,11 @@
+.Input {
+  width: 100% !important;
+  box-sizing: border-box !important;
+  margin-top: 0;
+  border: none;
+
+  [class*='__create-outer'] {
+    padding: 0;
+    border: none;
+  }
+}

src/components/messenger/feed/components/comment-input/useCommentInput.ts

@@ -0,0 +1,21 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { SagaActionTypes } from '../../../../../store/posts';
+import { RootState } from '../../../../../store';
+import { useAccount } from 'wagmi';
+
+export const useCommentInput = (postId: string) => {
+  const dispatch = useDispatch();
+  const channelId = useSelector((state: RootState) => state.chat.activeConversationId);
+  const error = useSelector((state: RootState) => state.posts.error);
+  const { isConnected } = useAccount();
+
+  const onSubmit = (message: string) => {
+    dispatch({ type: SagaActionTypes.SendPost, payload: { channelId, replyToId: postId, message } });
+  };
+
+  return {
+    error,
+    isConnected,
+    onSubmit,
+  };
+};

src/components/messenger/feed/components/main-feed/index.tsx

@@ -0,0 +1,16 @@
+import { useMainFeed } from './useMainFeed';
+
+import { PostInputContainer as PostInput } from '../post-input/container';
+import { FeedViewContainer } from '../../feed-view-container/feed-view-container';
+import { ScrollbarContainer } from '../../../../scrollbar-container';
+
+export const MainFeed = () => {
+  const { activeConversationId, isSubmittingPost, onSubmitPost } = useMainFeed();
+
+  return (
+    <ScrollbarContainer variant='on-hover'>
+      <PostInput id={activeConversationId} onSubmit={onSubmitPost} isSubmitting={isSubmittingPost} />
+      <FeedViewContainer channelId={activeConversationId} />
+    </ScrollbarContainer>
+  );
+};

src/components/messenger/feed/components/main-feed/useMainFeed.ts

@@ -0,0 +1,24 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { SagaActionTypes } from '../../../../../store/posts';
+import { RootState } from '../../../../../store';
+import { Media } from '../../../../message-input/utils';
+
+export const useMainFeed = () => {
+  const dispatch = useDispatch();
+
+  const activeConversationId = useSelector((state: RootState) => state.chat.activeConversationId);
+  const isSubmittingPost = useSelector((state: RootState) => state.posts.isSubmitting);
+
+  const onSubmitPost = (message: string, media: Media[] = []) => {
+    dispatch({
+      type: SagaActionTypes.SendPost,
+      payload: { channelId: activeConversationId, message: message, files: media },
+    });
+  };
+
+  return {
+    activeConversationId,
+    isSubmittingPost,
+    onSubmitPost,
+  };
+};

src/components/messenger/feed/components/post-input/container.tsx

@@ -16,6 +16,8 @@ export interface PublicProperties {
   initialValue?: string;
   isSubmitting?: boolean;
   error?: string;
+  className?: string;
+  variant?: 'comment' | 'post';
 
   onSubmit: (message: string, media: Media[]) => void;
   onPostInputRendered?: (textareaRef: RefObject<HTMLTextAreaElement>) => void;
@@ -58,6 +60,7 @@ export class Container extends React.Component<Properties> {
     return (
       <PostInput
         id={this.props.id}
+        className={this.props.className}
         error={this.props.error}
         initialValue={this.props.initialValue}
         isSubmitting={this.props.isSubmitting}
@@ -66,6 +69,7 @@ export class Container extends React.Component<Properties> {
         avatarUrl={this.props.user.data?.profileSummary.profileImage}
         viewMode={this.props.viewMode}
         isWalletConnected={this.props.isWalletConnected}
+        variant={this.props.variant ?? 'post'}
       />
     );
   }

src/components/messenger/feed/components/post-input/index.tsx

@@ -11,6 +11,7 @@ import { ViewModes } from '../../../../../shared-components/theme-engine';
 import { IconFaceSmile } from '@zero-tech/zui/icons';
 
 import { bemClassName } from '../../../../../lib/bem';
+import classNames from 'classnames';
 import './styles.scss';
 
 // should move these to a shared location
@@ -204,7 +205,7 @@ export class PostInput extends React.Component<Properties, State> {
                       {...cn('input')}
                       onChange={this.onChange}
                       onKeyDown={this.onKeyDown}
-                      placeholder='Write a Post...'
+                      placeholder={this.props.variant === 'comment' ? 'Write a Comment...' : 'Write a Post...'}
                       ref={this.textareaRef}
                       rows={2}
                       value={this.state.value}
@@ -258,6 +259,6 @@ export class PostInput extends React.Component<Properties, State> {
   }
 
   render() {
-    return <div {...cn('')}>{this.renderInput()}</div>;
+    return <div className={classNames(cn('').className, this.props.className)}>{this.renderInput()}</div>;
   }
 }

src/components/messenger/feed/components/post/actions/reply/reply-action.module.scss

@@ -0,0 +1,8 @@
+.Container > *:active {
+  background: none !important;
+}
+
+.Disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

src/components/messenger/feed/components/post/actions/reply/reply-action.tsx

@@ -0,0 +1,21 @@
+import { Action } from '@zero-tech/zui/components/Post';
+import { IconMessageChatSquare } from '@zero-tech/zui/components/Icons';
+
+import styles from './reply-action.module.scss';
+import { useReplyAction } from './useReplyAction';
+
+export interface ReplyActionProps {
+  postId: string;
+  numberOfReplies: number;
+}
+
+export const ReplyAction = ({ postId, numberOfReplies }: ReplyActionProps) => {
+  const { handleOnClick } = useReplyAction(postId);
+
+  return (
+    <Action className={styles.Container} onClick={handleOnClick}>
+      <IconMessageChatSquare size={16} />
+      <span>{numberOfReplies > 9 ? '9+' : numberOfReplies}</span>
+    </Action>
+  );
+};

src/components/messenger/feed/components/post/actions/reply/useReplyAction.ts

@@ -0,0 +1,16 @@
+import { useHistory, useRouteMatch } from 'react-router-dom';
+
+export const useReplyAction = (postId: string) => {
+  const history = useHistory();
+  const route = useRouteMatch();
+
+  const handleOnClick = () => {
+    const params = route.params;
+    const { conversationId } = params;
+    history.push(`/conversation/${conversationId}/${postId}`);
+  };
+
+  return {
+    handleOnClick,
+  };
+};

src/components/messenger/feed/components/post/index.tsx

@@ -1,16 +1,22 @@
 import { useState, useCallback, useMemo } from 'react';
+import moment from 'moment';
 import { Name, Post as ZUIPost } from '@zero-tech/zui/components/Post';
 import { Timestamp } from '@zero-tech/zui/components/Post/components/Timestamp';
 import { Avatar } from '@zero-tech/zui/components';
 import { MeowAction } from './actions/meow';
 import { featureFlags } from '../../../../../lib/feature-flags';
 import { Media, MediaDownloadStatus, MediaType } from '../../../../../store/messages';
 import { IconAlertCircle } from '@zero-tech/zui/icons';
+import { ReplyAction } from './actions/reply/reply-action';
+import { formatWeiAmount } from '../../../../../lib/number';
 
+import classNames from 'classnames';
 import styles from './styles.module.scss';
-import { formatWeiAmount } from '../../../../../lib/number';
+
+type Variant = 'default' | 'expanded';
 
 export interface PostProps {
+  className?: string;
   currentUserId?: string;
   messageId: string;
   avatarUrl?: string;
@@ -22,12 +28,15 @@ export interface PostProps {
   ownerUserId?: string;
   userMeowBalance?: string;
   reactions?: { [key: string]: number };
+  variant?: Variant;
+  numberOfReplies?: number;
 
   loadAttachmentDetails: (payload: { media: Media; messageId: string }) => void;
   meowPost: (postId: string, meowAmount: string) => void;
 }
 
 export const Post = ({
+  className,
   currentUserId,
   messageId,
   avatarUrl,
@@ -41,11 +50,14 @@ export const Post = ({
   reactions,
   loadAttachmentDetails,
   meowPost,
+  variant = 'default',
+  numberOfReplies = 0,
 }: PostProps) => {
   const [isImageLoaded, setIsImageLoaded] = useState(false);
 
   const isMeowsEnabled = featureFlags.enableMeows;
-  const isDisabled = formatWeiAmount(userMeowBalance) <= '0' || ownerUserId === currentUserId;
+  const isDisabled =
+    formatWeiAmount(userMeowBalance) <= '0' || ownerUserId?.toLowerCase() === currentUserId?.toLowerCase();
 
   const multilineText = useMemo(
     () =>
@@ -139,16 +151,21 @@ export const Post = ({
   );
 
   return (
-    <div className={styles.Container} has-author={author ? '' : null}>
-      <div className={styles.Avatar}>
-        <Avatar size='regular' imageURL={avatarUrl} />
-      </div>
+    <div className={classNames(styles.Container, className)} has-author={author ? '' : null} data-variant={variant}>
+      {variant === 'default' && (
+        <div className={styles.Avatar}>
+          <Avatar size='regular' imageURL={avatarUrl} />
+        </div>
+      )}
       <ZUIPost
         className={styles.Post}
         body={
           <div className={styles.Body}>
             {multilineText}
             {media && renderMedia(media)}
+            {variant === 'expanded' && (
+              <span className={styles.Date}>{moment(timestamp).format('h:mm A - D MMM YYYY')}</span>
+            )}
           </div>
         }
         details={
@@ -167,19 +184,30 @@ export const Post = ({
             )}
           </>
         }
-        options={<Timestamp className={styles.Date} timestamp={timestamp} />}
+        options={variant === 'default' && <Timestamp className={styles.Date} timestamp={timestamp} />}
         actions={
           isMeowsEnabled && (
-            <MeowAction
-              meows={reactions?.MEOW || 0}
-              isDisabled={isDisabled}
-              messageId={messageId}
-              meowPost={meowPost}
-              hasUserVoted={reactions?.VOTED > 0}
-            />
+            <Actions variant={variant}>
+              <MeowAction
+                meows={reactions?.MEOW || 0}
+                isDisabled={isDisabled}
+                messageId={messageId}
+                meowPost={meowPost}
+                hasUserVoted={reactions?.VOTED > 0}
+              />
+              {featureFlags.enableComments && <ReplyAction postId={messageId} numberOfReplies={numberOfReplies} />}
+            </Actions>
           )
         }
       />
     </div>
   );
 };
+
+export const Actions = ({ children, variant }: { children: React.ReactNode; variant: Variant }) => {
+  return (
+    <div className={styles.Actions} data-variant={variant}>
+      {children}
+    </div>
+  );
+};

src/components/messenger/feed/components/post/styles.module.scss

@@ -18,6 +18,12 @@
       margin-top: 4px;
     }
   }
+
+  &[data-variant='expanded'] {
+    article {
+      gap: 16px;
+    }
+  }
 }
 
 .Post {
@@ -114,3 +120,19 @@
   border: none;
   color: theme.$color-failure-11;
 }
+
+.Actions {
+  display: inherit;
+  gap: inherit;
+
+  width: 100%;
+
+  &[data-variant='expanded'] {
+    padding: 16px 0;
+    gap: 16px;
+
+    border: 1px solid rgba(52, 56, 60, 0.5);
+    border-left: none;
+    border-right: none;
+  }
+}

src/components/messenger/feed/components/posts/index.tsx

@@ -21,6 +21,7 @@ export const Posts = ({ postMessages, loadAttachmentDetails, userMeowBalance, cu
             userMeowBalance={userMeowBalance}
             reactions={post.reactions}
             meowPost={meowPost}
+            numberOfReplies={post.numberOfReplies}
           />
         </li>
       ))}

src/components/messenger/feed/index.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Container as MessengerFeed, Properties } from '.';
 import { StoreBuilder, stubConversation } from '../../../store/test/store';
-import { PostInputContainer } from './components/post-input/container';
 import { LeaveGroupDialogStatus } from '../../../store/group-management';
 import { LeaveGroupDialogContainer } from '../../group-management/leave-group-dialog/container';
 
@@ -23,13 +22,6 @@ describe(MessengerFeed, () => {
     return shallow(<MessengerFeed {...allProps} />);
   };
 
-  it('renders Messenger Feed when isSocialChannel is true', () => {
-    const channel = stubConversation({ name: 'convo-1', hasLoadedMessages: true, messages: [] });
-
-    const wrapper = subject({ channel: channel as any, isSocialChannel: true });
-    expect(wrapper).toHaveElement(PostInputContainer);
-  });
-
   it('does not render Messenger Feed when isSocialChannel is false', () => {
     const channel = stubConversation({ name: 'convo-1', hasLoadedMessages: true, messages: [] });