reaction fix

codegen.yml

@@ -1,5 +1,5 @@
 overwrite: true
-schema: 'https://testapi.discours.io/graphql'
+schema: 'http://localhost:8080'
 generates:
   src/graphql/introspec.gen.ts:
     plugins:

package.json

@@ -34,6 +34,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.216.0",
     "@aws-sdk/s3-presigned-post": "^3.216.0",
+    "@aws-sdk/signature-v4-multi-region": "^3.215.0",
+    "@aws-sdk/util-user-agent-node": "^3.215.0",
     "mailgun.js": "^8.0.2"
   },
   "devDependencies": {

src/components/Article/Comment.module.scss

@@ -7,6 +7,7 @@
   &:hover {
     background-color: #f6f6f6;
 
+    .commentControlReply,
     .commentControlShare,
     .commentControlDelete,
     .commentControlEdit,
@@ -56,6 +57,7 @@
   margin-bottom: 0.5em;
 }
 
+.commentControlReply,
 .commentControlShare,
 .commentControlDelete,
 .commentControlEdit,
@@ -66,17 +68,12 @@
   }
 }
 
+.commentControlReply,
 .commentControlShare,
 .commentControlDelete,
 .commentControlEdit {
   .icon {
     line-height: 1.2;
-  }
-}
-
-.commentControlShare {
-  .icon {
-    height: 1.2rem;
     width: 1.2rem;
   }
 }

src/components/Article/CommentsTree.tsx

@@ -42,7 +42,7 @@ export const CommentsTree = (props: { shout: string; reactions?: Reaction[] }) =
       setIsCommentsLoading(false)
     }
   }
-  const getCommentById = (cid) => reactions().find((r) => r.id === cid)
+  const getCommentById = (cid: number) => reactions().find((r: Reaction) => r.id === cid)
   const getCommentLevel = (c: Reaction, level = 0) => {
     if (c && c.replyTo && level < MAX_COMMENT_LEVEL) {
       return getCommentLevel(getCommentById(c.replyTo), level + 1)
@@ -67,7 +67,7 @@ export const CommentsTree = (props: { shout: string; reactions?: Reaction[] }) =
                   setCommentsOrder('createdAt')
                 }}
               >
-                По порядку
+                {t('By time')}
               </a>
             </li>
             <li classList={{ selected: commentsOrder() === 'rating' }}>
@@ -78,13 +78,13 @@ export const CommentsTree = (props: { shout: string; reactions?: Reaction[] }) =
                   setCommentsOrder('rating')
                 }}
               >
-                По рейтингу
+                {t('By rating')}
               </a>
             </li>
           </ul>
         </div>
 
-        <For each={reactions()}>
+        <For each={reactions().reverse()}>
           {(reaction: Reaction) => (
             <Comment
               comment={reaction}

src/components/Views/Feed.tsx

@@ -1,4 +1,4 @@
-import { createSignal, For, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import '../../styles/Feed.scss'
 import stylesBeside from '../../components/Feed/Beside.module.scss'
 import { Icon } from '../_shared/Icon'
@@ -14,7 +14,6 @@ import { useAuthorsStore } from '../../stores/zine/authors'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useTopAuthorsStore } from '../../stores/zine/topAuthors'
 import { useSession } from '../../context/session'
-import type { Shout } from '../../graphql/types.gen'
 
 // const AUTHORSHIP_REACTIONS = [
 //   ReactionKind.Accept,
@@ -35,6 +34,24 @@ export const FeedView = () => {
   const { session } = useSession()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
+  const collaborativeShouts = createMemo(() =>
+    sortedArticles().filter((shout) => shout.visibility === 'authors')
+  )
+  createEffect(async () => {
+    if (collaborativeShouts()) {
+      // load reactions on collaborativeShouts
+      await loadReactionsBy({ by: { shouts: [...collaborativeShouts()] }, limit: 5 })
+    }
+  })
+
+  const userslug = createMemo(() => session()?.user?.slug)
+  createEffect(async () => {
+    if (userslug()) {
+      // load recent editing shouts ( visibility = authors )
+      await loadShouts({ filters: { author: userslug(), visibility: 'authors' }, limit: 15 })
+    }
+  })
+
   const loadMore = async () => {
     const { hasMore } = await loadShouts({
       filters: { visibility: 'community' },
@@ -50,16 +67,6 @@ export const FeedView = () => {
 
     // load recent shouts not only published ( visibility = community )
     await loadMore()
-
-    // TODO: load collabs
-    // await loadCollabs()
-
-    // load recent editing shouts ( visibility = authors )
-    const userslug = session().user.slug
-    await loadShouts({ filters: { author: userslug, visibility: 'authors' }, limit: 15 })
-    const collaborativeShouts = sortedArticles().filter((shout) => shout.visibility === 'authors')
-    // load reactions on collaborativeShouts
-    await loadReactionsBy({ by: { shouts: [...collaborativeShouts] }, limit: 5 })
   })
 
   return (

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

@@ -1,17 +1,12 @@
 import { gql } from '@urql/core'
 
-// FIXME: backend query
-
 export default gql`
   query LoadReactions($by: ReactionBy!, $limit: Int, $offset: Int) {
     loadReactionsBy(by: $by, limit: $limit, offset: $offset) {
       id
       body
       range
-      #replyTo {
+      replyTo
-      # id
-      # kind
-      #}
       shout {
         slug
       }

src/graphql/types.gen.ts

@@ -205,7 +205,7 @@ export type MutationCreateChatArgs = {
 export type MutationCreateMessageArgs = {
   body: Scalars['String']
   chat: Scalars['String']
-  replyTo?: InputMaybe<Scalars['String']>
+  replyTo?: InputMaybe<Scalars['Int']>
 }
 
 export type MutationCreateReactionArgs = {
@@ -275,6 +275,7 @@ export type MutationRemoveAuthorArgs = {
 export type MutationSendLinkArgs = {
   email: Scalars['String']
   lang?: InputMaybe<Scalars['String']>
+  template?: InputMaybe<Scalars['String']>
 }
 
 export type MutationUnfollowArgs = {
@@ -461,7 +462,7 @@ export type Reaction = {
   old_id?: Maybe<Scalars['String']>
   old_thread?: Maybe<Scalars['String']>
   range?: Maybe<Scalars['String']>
-  replyTo?: Maybe<Reaction>
+  replyTo?: Maybe<Scalars['Int']>
   shout: Shout
   stat?: Maybe<Stat>
   updatedAt?: Maybe<Scalars['DateTime']>

src/utils/apiClient.ts

@@ -264,10 +264,7 @@ export const apiClient = {
   },
   getReactionsBy: async ({ by, limit = REACTIONS_AMOUNT_PER_PAGE, offset = 0 }) => {
     const resp = await publicGraphQLClient.query(reactionsLoadBy, { by, limit, offset }).toPromise()
-    if (resp.error) {
+    console.debug(resp)
-      console.error(resp.error)
-      return
-    }
     return resp.data.loadReactionsBy
   },
 

yarn.lock

@@ -887,7 +887,7 @@
     "@aws-sdk/types" "3.215.0"
     tslib "^2.3.1"
 
-"@aws-sdk/signature-v4-multi-region@3.215.0":
+"@aws-sdk/signature-v4-multi-region@3.215.0", "@aws-sdk/signature-v4-multi-region@^3.215.0":
   version "3.215.0"
   resolved "https://registry.yarnpkg.com/@aws-sdk/signature-v4-multi-region/-/signature-v4-multi-region-3.215.0.tgz#20349ce6f1fe3a8f4597db230c76afe82ab079b2"
   integrity sha512-XOUUNWs6I4vAa+Byj6qL/+DCWA5CjcRyA9sitYy8sNqhLcet8WoYf7vJL2LW1nvdzRb/pGBNWLiQOZ+9sadYeg==
@@ -1086,7 +1086,7 @@
     bowser "^2.11.0"
     tslib "^2.3.1"
 
-"@aws-sdk/util-user-agent-node@3.215.0":
+"@aws-sdk/util-user-agent-node@3.215.0", "@aws-sdk/util-user-agent-node@^3.215.0":
   version "3.215.0"
   resolved "https://registry.yarnpkg.com/@aws-sdk/util-user-agent-node/-/util-user-agent-node-3.215.0.tgz#620beb9ba2b2775cdf51e39789ea919b10b4d903"
   integrity sha512-4lrdd1oGRwJEwfvgvg1jcJ2O0bwElsvtiqZfTRHN6MNTFUqsKl0xHlgFChQsz3Hfrc1niWtZCmbqQKGdO5ARpw==