merged

src/components/Article/Comment.module.scss

@@ -1,18 +1,40 @@
 .comment {
   background-color: #fff;
-  margin: 0 -2.4rem 1.5em;
+  margin: 0 -2.4rem 0.5em;
   padding: 0.8rem 2.4rem;
   transition: background-color 0.3s;
+  position: relative;
 
-  &:hover {
-    background-color: #f6f6f6;
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-    .commentControlReply,
-    .commentControlShare,
-    .commentControlDelete,
-    .commentControlEdit,
-    .commentControlComplain {
-      opacity: 1;
+  .comment {
+    &:before,
+    &:after {
+      content: '';
+      left: 0;
+      position: absolute;
+    }
+
+    &:before {
+      border-bottom: 2px solid #ccc;
+      border-left: 2px solid #ccc;
+      border-radius: 0 0 0 1.2rem;
+      top: -1rem;
+      height: 2.4rem;
+      width: 1.2rem;
+    }
+
+    &:after {
+      background: #ccc;
+      height: 100%;
+      top: 0;
+      width: 2px;
+    }
+
+    &:last-child:after {
+      display: none;
     }
   }
 
@@ -32,24 +54,16 @@
   }
 }
 
-.commentLevel1 {
-  margin-left: 3.2rem;
-}
-
-.commentLevel2 {
-  margin-left: 6.4rem;
-}
-
-.commentLevel3 {
-  margin-left: 9.6rem;
-}
-
-.commentLevel4 {
-  margin-left: 12.8rem;
-}
-
-.commentLevel5 {
-  margin-left: 16rem;
+.commentContent {
+  &:hover {
+    .commentControlReply,
+    .commentControlShare,
+    .commentControlDelete,
+    .commentControlEdit,
+    .commentControlComplain {
+      opacity: 1;
+    }
+  }
 }
 
 .commentControls {

src/components/Article/Comment.tsx

@@ -1,25 +1,32 @@
 import styles from './Comment.module.scss'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/Card'
-import { Show, createMemo, createSignal } from 'solid-js'
+import { Show, createMemo, createSignal, For } from 'solid-js'
 import { clsx } from 'clsx'
-import type { Author, Reaction as Point } from '../../graphql/types.gen'
+import type { Author, Reaction } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
-// import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
+import { createReaction, deleteReaction } from '../../stores/zine/reactions'
 import MD from './MD'
-import { deleteReaction } from '../../stores/zine/reactions'
 import { formatDate } from '../../utils'
 import { SharePopup } from './SharePopup'
 import stylesHeader from '../Nav/Header.module.scss'
 import Userpic from '../Author/Userpic'
+import { useSession } from '../../context/session'
+import { ReactionKind } from '../../graphql/types.gen'
 
-export default (props: {
-  level?: number
-  comment: Partial<Point>
-  canEdit?: boolean
+type Props = {
+  comment: Reaction
   compact?: boolean
-}) => {
+  reactions?: Reaction[]
+}
+
+export const Comment = (props: Props) => {
   const [isReplyVisible, setIsReplyVisible] = createSignal(false)
+  const [postMessageText, setPostMessageText] = createSignal('')
+
+  const { session } = useSession()
+
+  const canEdit = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug)
 
   const comment = createMemo(() => props.comment)
   const body = createMemo(() => (comment().body || '').trim())
@@ -29,12 +36,28 @@ export default (props: {
       deleteReaction(comment().id)
     }
   }
+
+  const compose = (event) => setPostMessageText(event.target.value)
+  const handleCreate = async (event) => {
+    event.preventDefault()
+    try {
+      await createReaction({
+        kind: ReactionKind.Comment,
+        replyTo: props.comment.id,
+        body: postMessageText(),
+        shout: comment().shout.id
+      })
+      setIsReplyVisible(false)
+    } catch (error) {
+      console.log('!!! err:', error)
+    }
+  }
   const formattedDate = createMemo(() =>
     formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' })
   )
 
   return (
-    <div class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
+    <li class={styles.comment}>
       <Show when={!!body()}>
         <div class={styles.commentContent}>
           <Show
@@ -73,10 +96,10 @@ export default (props: {
               </div>
             </div>
           </Show>
-
+          <div style={{ color: 'red' }}>{comment().id}</div>
           <div
             class={styles.commentBody}
-            contenteditable={props.canEdit}
+            contenteditable={canEdit()}
             id={'comment-' + (comment().id || '')}
           >
             <MD body={body()} />
@@ -92,7 +115,7 @@ export default (props: {
                 {t('Reply')}
               </button>
 
-              <Show when={props.canEdit}>
+              <Show when={canEdit()}>
                 {/*FIXME implement edit comment modal*/}
                 {/*<button*/}
                 {/*  class={clsx(styles.commentControl, styles.commentControlEdit)}*/}
@@ -129,19 +152,34 @@ export default (props: {
             </div>
 
             <Show when={isReplyVisible()}>
-              <form class={styles.replyForm}>
-                <textarea name="reply" id="reply" rows="5" />
+              <form class={styles.replyForm} onSubmit={(event) => handleCreate(event)}>
+                <textarea
+                  value={postMessageText()}
+                  rows={1}
+                  onInput={(event) => compose(event)}
+                  placeholder="Написать сообщение"
+                />
+
                 <div class={styles.replyFormControls}>
                   <button class="button button--light" onClick={() => setIsReplyVisible(false)}>
-                    {t('Cancel')}
+                    {t('cancel')}
+                  </button>
+                  <button type="submit" class="button">
+                    {t('Send')}
                   </button>
-                  <button class="button">{t('Send')}</button>
                 </div>
               </form>
             </Show>
           </Show>
         </div>
       </Show>
-    </div>
+      <Show when={props.reactions}>
+        <ul>
+          <For each={props.reactions.filter((r) => r.replyTo === props.comment.id)}>
+            {(reaction) => <Comment reactions={props.reactions} comment={reaction} />}
+          </For>
+        </ul>
+      </Show>
+    </li>
   )
 }

src/components/Article/CommentsTree.tsx

@@ -1,6 +1,6 @@
-import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Show, createMemo, createSignal, onMount, createEffect } from 'solid-js'
 import { useSession } from '../../context/session'
-import Comment from './Comment'
+import { Comment } from './Comment'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
 import styles from '../../styles/Article.module.scss'
@@ -21,16 +21,16 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
   const { session } = useSession()
   const { sortedReactions, loadReactionsBy } = useReactionsStore()
   const reactions = createMemo<Reaction[]>(() =>
-    sortedReactions()
-      .sort(commentsOrder() === 'rating' ? byStat('rating') : byCreated)
-      .filter((r) => r.shout.slug === props.shoutSlug)
+    sortedReactions().sort(commentsOrder() === 'rating' ? byStat('rating') : byCreated)
   )
 
+  createEffect(() => {
+    console.log('!!! sortedReactions():', sortedReactions())
+  })
   const loadMore = async () => {
     try {
       const page = getCommentsPage()
       setIsCommentsLoading(true)
-
       const { hasMore } = await loadReactionsBy({
         by: { shout: props.shoutSlug, comment: true },
         limit: ARTICLE_COMMENTS_PAGE_SIZE,
@@ -49,6 +49,7 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
     return level
   }
   onMount(async () => await loadMore())
+
   return (
     <>
       <Show when={!isCommentsLoading()} fallback={<Loading />}>
@@ -83,15 +84,11 @@ export const CommentsTree = (props: { shoutSlug: string }) => {
           </ul>
         </div>
 
-        <For each={reactions().reverse()}>
-          {(reaction: Reaction) => (
-            <Comment
-              comment={reaction}
-              level={getCommentLevel(reaction)}
-              canEdit={reaction.createdBy?.slug === session()?.user?.slug}
-            />
-          )}
-        </For>
+        <ul class={styles.comments}>
+          <For each={reactions().filter((r) => !r.replyTo)}>
+            {(reaction) => <Comment reactions={reactions()} comment={reaction} />}
+          </For>
+        </ul>
 
         <Show when={isLoadMoreButtonVisible()}>
           <button onClick={loadMore}>{t('Load more')}</button>

src/components/Author/Card.tsx

@@ -38,11 +38,13 @@ export const AuthorCard = (props: AuthorCardProps) => {
     actions: { loadSession }
   } = useSession()
 
+  if (!props.author) return false // FIXME: с сервера должен приходить автор реакции (ApiClient.CreateReaction)
+
   const [isSubscribing, setIsSubscribing] = createSignal(false)
 
-  const subscribed = createMemo<boolean>(
-    () => session()?.news?.authors?.some((u) => u === props.author.slug) || false
-  )
+  const subscribed = createMemo<boolean>(() => {
+    return session()?.news?.authors?.some((u) => u === props.author.slug) || false
+  })
 
   const subscribe = async (really = true) => {
     setIsSubscribing(true)

src/components/Topic/Card.tsx

@@ -11,8 +11,6 @@ import { useSession } from '../../context/session'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import { Icon } from '../_shared/Icon'
 
-const log = getLogger('TopicCard')
-
 interface TopicProps {
   topic: Topic
   compact?: boolean

src/components/Views/Feed.tsx

@@ -7,7 +7,7 @@ import { ArticleCard } from '../Feed/Card'
 import { AuthorCard } from '../Author/Card'
 import { t } from '../../utils/intl'
 import { FeedSidebar } from '../Feed/Sidebar'
-import CommentCard from '../Article/Comment'
+import { Comment as CommentCard } from '../Article/Comment'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
 import { useReactionsStore } from '../../stores/zine/reactions'
 import { useAuthorsStore } from '../../stores/zine/authors'
@@ -128,7 +128,8 @@ export const FeedView = () => {
             <section class="feed-comments">
               <h4>{t('Comments')}</h4>
               <For each={topComments()}>
-                {(comment) => <CommentCard comment={comment} compact={true} />}
+                {/*FIXME: different components/better comment props*/}
+                {(comment) => <CommentCard comment={comment} level={0} reactions={[]} compact={true} />}
               </For>
             </section>
             <Show when={topTopics().length > 0}>

src/graphql/mutation/reaction-create.ts

@@ -6,26 +6,11 @@ export default gql`
       error
       reaction {
         id
-        createdBy {
-          slug
-          name
-          userpic
-        }
         body
         kind
         range
         createdAt
-        shout
-        replyTo {
-          id
-          createdBy {
-            slug
-            userpic
-            name
-          }
-          body
-          kind
-        }
+        replyTo
       }
     }
   }

src/graphql/query/reactions-load-by.ts

@@ -8,7 +8,9 @@ export default gql`
       range
       replyTo
       shout {
+        id
         slug
+        title
       }
       createdBy {
         name

src/graphql/types.gen.ts

@@ -238,7 +238,7 @@ export type MutationDeleteMessageArgs = {
 }
 
 export type MutationDeleteReactionArgs = {
-  id: Scalars['Int']
+  reaction: Scalars['Int']
 }
 
 export type MutationDeleteShoutArgs = {
@@ -498,10 +498,10 @@ export type ReactionBy = {
 
 export type ReactionInput = {
   body?: InputMaybe<Scalars['String']>
-  kind: Scalars['Int']
+  kind: ReactionKind
   range?: InputMaybe<Scalars['String']>
   replyTo?: InputMaybe<Scalars['Int']>
-  shout: Scalars['String']
+  shout: Scalars['Int']
 }
 
 export enum ReactionKind {

src/locales/ru.json

@@ -189,6 +189,7 @@
   "create_group": "Создать группу",
   "discourse_theme": "Тема дискурса",
   "cancel": "Отмена",
+  "Send": "Отправить",
   "group_chat": "Общий чат",
   "Choose who you want to write to": "Выберите кому хотите написать",
   "Start conversation": "Начать беседу",

src/stores/zine/reactions.ts

@@ -1,4 +1,4 @@
-import type { Reaction } from '../../graphql/types.gen'
+import type { Reaction, ReactionInput } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { createSignal } from 'solid-js'
 // TODO: import { roomConnect } from '../../utils/p2p'
@@ -23,9 +23,16 @@ export const loadReactionsBy = async ({
   setSortedReactions(data)
   return { hasMore }
 }
-export const createReaction = async (reaction: Reaction) => {
-  const { reaction: r } = await apiClient.createReaction({ reaction })
-  return r
+
+export const createReaction = async (input: ReactionInput) => {
+  try {
+    const reaction = await apiClient.createReaction(input)
+    console.log('!!! reaction:', reaction)
+    reaction.shout = { slug: input.shout }
+    setSortedReactions((prev) => [...prev, reaction])
+  } catch (error) {
+    console.error('[createReaction]', error)
+  }
 }
 export const updateReaction = async (reaction: Reaction) => {
   const { reaction: r } = await apiClient.updateReaction({ reaction })

src/styles/Article.module.scss

@@ -252,6 +252,20 @@ img {
   }
 }
 
+.comments {
+  margin: 0;
+
+  &,
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  ul {
+    margin: 1em 0 0 2.4rem;
+  }
+}
+
 .commentsHeaderWrapper {
   display: flex;
   justify-content: space-between;

src/utils/apiClient.ts

@@ -12,8 +12,9 @@ import type {
   MutationCreateMessageArgs,
   Chat,
   QueryLoadRecipientsArgs,
+  User,
   ProfileInput,
-  ReactionBy
+  ReactionInput
 } from '../graphql/types.gen'
 import { publicGraphQLClient } from '../graphql/publicGraphQLClient'
 import { getToken, privateGraphQLClient } from '../graphql/privateGraphQLClient'
@@ -230,16 +231,16 @@ export const apiClient = {
     console.debug('createArticle response:', response)
     return response.data.createShout
   },
-  createReaction: async ({ reaction }) => {
-    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction }).toPromise()
-    console.debug('[api-client] [api] create reaction mutation called')
-    return response.data.createReaction
+  createReaction: async (input: ReactionInput) => {
+    const response = await privateGraphQLClient.mutation(reactionCreate, { reaction: input }).toPromise()
+    console.debug('[createReaction]:', response.data)
+    return response.data.createReaction.reaction
   },
 
   // CUDL
 
-  updateReaction: async ({ reaction }) => {
-    const response = await privateGraphQLClient.mutation(reactionUpdate, { reaction }).toPromise()
+  updateReaction: async (reaction) => {
+    const response = await privateGraphQLClient.mutation(reactionUpdate, reaction).toPromise()
 
     return response.data.createReaction
   },