[C-4799] Add mobile-web comments

packages/common/src/messages/comments.ts

@@ -0,0 +1,12 @@
+export const commentsMessages = {
+  postComment: 'Post Comment',
+  addComment: 'Add a comment',
+  firstComment: 'Be the first to comment!',
+  noComments: 'Nothing here yet',
+  noCommentsDescription: 'Be the first to comment on this track',
+  viewAll: 'View All',
+  showMoreReplies: 'Show More Replies',
+  replies: 'Replies',
+  showReplies: 'Show Replies',
+  hideReplies: 'Hide Replies'
+}

packages/common/src/messages/index.ts

@@ -3,3 +3,4 @@ export * from './sign-on/signUpPolicyMessages'
 export * from './sign-on/pages'
 export * from './search'
 export * from './edit'
+export * from './comments'

packages/common/src/utils/route.ts

@@ -125,6 +125,7 @@ export const EDIT_ALBUM_PAGE = '/:handle/album/:slug/edit'
 export const TRACK_PAGE = '/:handle/:slug'
 export const TRACK_EDIT_PAGE = '/:handle/:slug/edit'
 export const TRACK_REMIXES_PAGE = '/:handle/:slug/remixes'
+export const TRACK_COMMENTS_PAGE = '/:handle/:slug/comments'
 export const PROFILE_PAGE = '/:handle'
 export const PROFILE_PAGE_TRACKS = '/:handle/tracks'
 export const PROFILE_PAGE_ALBUMS = '/:handle/albums'

packages/mobile/src/components/comments/CommentForm.tsx

@@ -1,4 +1,5 @@
 import { useCurrentCommentSection } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import type { FormikHelpers } from 'formik'
 import { Formik, useFormikContext } from 'formik'
 import type { TextInput as RNTextInput } from 'react-native'
@@ -20,11 +21,6 @@ type CommentFormProps = {
   TextInputComponent?: typeof RNTextInput
 }
 
-const messages = {
-  beFirstComment: 'Be the first to comment',
-  addComment: 'Add a comment'
-}
-
 type CommentFormContentProps = Omit<
   CommentFormProps,
   'onSubmit' | 'initialValue'
@@ -35,9 +31,7 @@ const CommentFormContent = (props: CommentFormContentProps) => {
   const { currentUserId, comments } = useCurrentCommentSection()
   const { submitForm } = useFormikContext()
 
-  const message = comments?.length
-    ? messages.addComment
-    : messages.beFirstComment
+  const message = comments?.length ? messages.addComment : messages.firstComment
 
   return (
     <Flex direction='row' gap='m' alignItems='center'>

packages/mobile/src/components/comments/CommentSection.tsx

@@ -3,6 +3,7 @@ import {
   useCurrentCommentSection,
   usePostComment
 } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import type { ID } from '@audius/common/models'
 import { Status } from '@audius/common/models'
 import { TouchableOpacity } from 'react-native'
@@ -21,24 +22,16 @@ import Skeleton from '../skeleton'
 import { CommentBlock } from './CommentBlock'
 import { CommentForm } from './CommentForm'
 
-const messages = {
-  noComments: 'Nothing here yet',
-  viewAll: 'View all'
-}
-
 const CommentSectionHeader = () => {
   const {
-    artistId,
-    currentUserId,
     entityId,
     commentSectionLoading: isLoading,
-    comments,
-    isEntityOwner
+    comments
   } = useCurrentCommentSection()
   const { onOpen: openDrawer } = useDrawer('Comment')
 
   const handlePressViewAll = () => {
-    openDrawer({ userId: currentUserId, entityId, isEntityOwner, artistId })
+    openDrawer({ entityId })
   }
 
   const isShowingComments = !isLoading && comments?.length

packages/mobile/src/components/comments/CommentThread.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import { useGetCommentById } from '@audius/common/api'
 import { useCurrentCommentSection } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import type { ReplyComment } from '@audius/sdk'
 
 import {
@@ -14,10 +15,6 @@ import {
 
 import { CommentBlock } from './CommentBlock'
 
-const messages = {
-  showMoreReplies: 'Show More Replies'
-}
-
 export const CommentThread = ({ commentId }: { commentId: string }) => {
   const { data: rootComment } = useGetCommentById({
     id: commentId

packages/mobile/src/components/comments/NoComments.tsx

@@ -1,9 +1,6 @@
-import { Flex, Text } from '@audius/harmony-native'
+import { commentsMessages as messages } from '@audius/common/messages'
 
-const messages = {
-  title: 'Nothing here yet',
-  subtitle: 'Be the first to comment on this track' // TODO: make this derive from entity type
-}
+import { Flex, Text } from '@audius/harmony-native'
 
 export const NoComments = () => (
   <Flex
@@ -12,7 +9,7 @@ export const NoComments = () => (
     direction='column'
     style={{ paddingTop: 80, paddingBottom: 80 }}
   >
-    <Text>{messages.title}</Text>
-    <Text color='subdued'>{messages.subtitle}</Text>
+    <Text>{messages.noComments}</Text>
+    <Text color='subdued'>{messages.noCommentsDescription}</Text>
   </Flex>
 )

packages/web/src/app/web-player/WebPlayer.jsx

@@ -84,6 +84,7 @@ import { SubPage } from 'pages/settings-page/components/mobile/SettingsPage'
 import SmartCollectionPage from 'pages/smart-collection/SmartCollectionPage'
 import SupportingPage from 'pages/supporting-page/SupportingPage'
 import TopSupportersPage from 'pages/top-supporters-page/TopSupportersPage'
+import { TrackCommentsPage } from 'pages/track-page/TrackCommentsPage'
 import TrackPage from 'pages/track-page/TrackPage'
 import TrendingPage from 'pages/trending-page/TrendingPage'
 import TrendingPlaylistsPage from 'pages/trending-playlists/TrendingPlaylistPage'
@@ -135,6 +136,7 @@ const {
   PLAYLIST_PAGE,
   ALBUM_PAGE,
   TRACK_PAGE,
+  TRACK_COMMENTS_PAGE,
   TRACK_REMIXES_PAGE,
   PROFILE_PAGE,
   authenticatedRoutes,
@@ -911,6 +913,13 @@ class WebPlayer extends Component {
                   component={AiAttributedTracksPage}
                 />
                 <Route exact path={TRACK_PAGE} component={TrackPage} />
+                <MobileRoute
+                  exact
+                  path={TRACK_COMMENTS_PAGE}
+                  isMobile={isMobile}
+                  component={TrackCommentsPage}
+                />
+                <Route exact path={TRACK_PAGE} component={TrackPage} />
                 <DesktopRoute
                   path={TRACK_EDIT_PAGE}
                   isMobile={isMobile}

packages/web/src/components/comments/CommentActionBar.tsx

@@ -22,6 +22,10 @@ import {
   TextLink
 } from '@audius/harmony'
 import { Comment } from '@audius/sdk'
+import { useToggle } from 'react-use'
+
+import { DownloadMobileAppDrawer } from 'components/download-mobile-app-drawer/DownloadMobileAppDrawer'
+import { useIsMobile } from 'hooks/useIsMobile'
 
 const messages = {
   pin: (isPinned: boolean) => (isPinned ? 'Unpin Comment' : 'Pin Comment'),
@@ -55,6 +59,8 @@ export const CommentActionBar = ({
 
   const [reactToComment] = useReactToComment()
   const [pinComment] = usePinComment()
+  const [isMobileAppDrawerOpen, toggleIsMobileAppDrawer] = useToggle(false)
+  const isMobile = useIsMobile()
 
   // component state
   const [reactionState, setReactionState] = useState(false) // TODO: temporary - eventually this will live in metadata
@@ -76,6 +82,14 @@ export const CommentActionBar = ({
     pinComment(commentId, !isPinned)
   }, [commentId, isPinned, pinComment])
 
+  const handleClickReply = useCallback(() => {
+    if (isMobile) {
+      toggleIsMobileAppDrawer()
+    } else {
+      onClickReply()
+    }
+  }, [isMobile, onClickReply, toggleIsMobileAppDrawer])
+
   const popupMenuItems = useMemo(() => {
     let items: PopupMenuItem[] = []
     const entityOwnerMenuItems: PopupMenuItem[] = [
@@ -148,7 +162,7 @@ export const CommentActionBar = ({
       </Flex>
       <TextLink
         variant='subdued'
-        onClick={onClickReply}
+        onClick={handleClickReply}
         size='m'
         disabled={isDisabled}
       >
@@ -165,11 +179,19 @@ export const CommentActionBar = ({
             ref={anchorRef}
             disabled={isDisabled}
             onClick={() => {
-              triggerPopup()
+              if (isMobile) {
+                toggleIsMobileAppDrawer()
+              } else {
+                triggerPopup()
+              }
             }}
           />
         )}
       />
+      <DownloadMobileAppDrawer
+        isOpen={isMobileAppDrawerOpen}
+        onClose={toggleIsMobileAppDrawer}
+      />
     </Flex>
   )
 }

packages/web/src/components/comments/CommentBlock.tsx

@@ -26,10 +26,11 @@ const { getUser } = cacheUsersSelectors
 export type CommentBlockProps = {
   comment: Comment
   parentCommentId?: string
+  hideActions?: boolean
 }
 
 export const CommentBlock = (props: CommentBlockProps) => {
-  const { comment, parentCommentId } = props
+  const { comment, parentCommentId, hideActions } = props
   const {
     isPinned,
     message,
@@ -120,13 +121,15 @@ export const CommentBlock = (props: CommentBlockProps) => {
         ) : (
           <Text color='default'>{message}</Text>
         )}
-        <CommentActionBar
-          comment={comment}
-          onClickReply={() => setShowReplyInput((prev) => !prev)}
-          onClickEdit={() => setShowEditInput((prev) => !prev)}
-          onClickDelete={() => deleteComment(commentId)}
-          isDisabled={isDeleting}
-        />
+        {hideActions ? null : (
+          <CommentActionBar
+            comment={comment}
+            onClickReply={() => setShowReplyInput((prev) => !prev)}
+            onClickEdit={() => setShowEditInput((prev) => !prev)}
+            onClickDelete={() => deleteComment(commentId)}
+            isDisabled={isDeleting}
+          />
+        )}
 
         {showReplyInput ? (
           <CommentForm

packages/web/src/components/comments/CommentForm.tsx

@@ -5,6 +5,7 @@ import {
   useEditComment,
   usePostComment
 } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import { SquareSizes, Status } from '@audius/common/models'
 import { getTrackId } from '@audius/common/src/store/player/selectors'
 import {
@@ -16,9 +17,12 @@ import {
 } from '@audius/harmony'
 import { Form, Formik, useFormikContext } from 'formik'
 import { useSelector } from 'react-redux'
-import { usePrevious } from 'react-use'
+import { usePrevious, useToggle } from 'react-use'
 
+import { DownloadMobileAppDrawer } from 'components/download-mobile-app-drawer/DownloadMobileAppDrawer'
 import { TextField } from 'components/form-fields'
+import { useAuthenticatedCallback } from 'hooks/useAuthenticatedCallback'
+import { useIsMobile } from 'hooks/useIsMobile'
 import { useProfilePicture } from 'hooks/useUserProfilePicture'
 import { audioPlayer } from 'services/audio-player'
 
@@ -59,7 +63,10 @@ export const CommentForm = ({
   isEdit,
   hideAvatar = false
 }: CommentFormProps) => {
-  const { currentUserId, entityId } = useCurrentCommentSection()
+  const { currentUserId, entityId, comments } = useCurrentCommentSection()
+  const isMobile = useIsMobile()
+  const isFirstComment = comments.length === 0
+  const [isMobileAppDrawerOpen, toggleIsMobileAppDrawer] = useToggle(false)
 
   const [editComment] = useEditComment()
   const currentlyPlayingTrackId = useSelector(getTrackId)
@@ -81,6 +88,12 @@ export const CommentForm = ({
     }
   }
 
+  const handleClickInput = useAuthenticatedCallback(() => {
+    if (isMobile) {
+      toggleIsMobileAppDrawer()
+    }
+  }, [isMobile, toggleIsMobileAppDrawer])
+
   const profileImage = useProfilePicture(
     currentUserId ?? null,
     SquareSizes.SIZE_150_BY_150
@@ -112,20 +125,30 @@ export const CommentForm = ({
           ) : null}
           <TextField
             name='commentMessage'
-            label='Add a comment'
+            label={
+              isFirstComment && isMobile
+                ? messages.firstComment
+                : messages.addComment
+            }
+            readOnly={isMobile}
+            onClick={handleClickInput}
             disabled={isLoading}
           />
           {isLoading ? (
             <LoadingSpinner />
           ) : (
             <IconButton
-              aria-label='Post comment'
+              aria-label={messages.postComment}
               icon={IconSend}
               color='accent'
               type='submit'
             />
           )}
         </Flex>
+        <DownloadMobileAppDrawer
+          isOpen={isMobileAppDrawerOpen}
+          onClose={toggleIsMobileAppDrawer}
+        />
       </Form>
     </Formik>
   )

packages/web/src/components/comments/CommentList.tsx

@@ -0,0 +1,24 @@
+import { useCurrentCommentSection } from '@audius/common/context'
+import { Flex } from '@audius/harmony'
+
+import { CommentSkeletons } from './CommentSkeletons'
+import { CommentThread } from './CommentThread'
+import { NoComments } from './NoComments'
+
+export const CommentList = () => {
+  const { comments, commentSectionLoading } = useCurrentCommentSection()
+
+  // TODO: break out list skeleton from reply skeleton
+  if (commentSectionLoading) {
+    return <CommentSkeletons />
+  }
+
+  return (
+    <Flex p='l' as='ul' column gap='xl' w='100%' backgroundColor='white'>
+      {comments.length === 0 ? <NoComments /> : null}
+      {comments.map(({ id }) => (
+        <CommentThread commentId={id} key={id} />
+      ))}
+    </Flex>
+  )
+}

packages/web/src/components/comments/CommentSection.tsx

@@ -5,6 +5,7 @@ import { EntityType } from '@audius/sdk'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 import { CommentSectionDesktop } from './CommentSectionDesktop'
+import { CommentSectionMobile } from './CommentSectionMobile'
 
 type CommentSectionProps = {
   entityId: ID
@@ -17,7 +18,7 @@ export const CommentSection = (props: CommentSectionProps) => {
 
   return (
     <CommentSectionProvider entityId={entityId} entityType={entityType}>
-      {isMobile ? null : <CommentSectionDesktop />}
+      {isMobile ? <CommentSectionMobile /> : <CommentSectionDesktop />}
     </CommentSectionProvider>
   )
 }