wip-fixing

codegen.yml

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

public/icons/user-default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM10,26.39a6,6,0,0,1,11.94,0,11.87,11.87,0,0,1-11.94,0Zm13.74-1.26a8,8,0,0,0-15.54,0,12,12,0,1,1,15.54,0ZM16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,16,16Z" data-name="13  User, Account, Circle, Person"/></svg>

src/components/Article/Comment.tsx

@@ -54,7 +54,7 @@ export default (props: {
               </div>
 
               <div class="comment-date">{comment()?.createdAt}</div>
-              <div class="comment-rating">{comment().stat.rating}</div>
+              <div class="comment-rating">{comment().stat?.rating || 0}</div>
             </div>
           </Show>
 

src/components/Article/CommentsTree.tsx

@@ -0,0 +1,85 @@
+import { For, Show } from 'solid-js/web'
+import { useSession } from '../../context/session'
+import Comment from './Comment'
+import { t } from '../../utils/intl'
+import { showModal } from '../../stores/ui'
+import styles from '../../styles/Article.module.scss'
+import { useReactionsStore } from '../../stores/zine/reactions'
+import { createEffect, createMemo, createSignal, onMount, Suspense } from 'solid-js'
+import type { Reaction } from '../../graphql/types.gen'
+
+const ARTICLE_COMMENTS_PAGE_SIZE = 50
+const MAX_COMMENT_LEVEL = 6
+
+export const CommentsTree = (props: { shout: string; reactions?: Reaction[] }) => {
+  const [getCommentsPage, setCommentsPage] = createSignal(0)
+  const [isCommentsLoading, setIsCommentsLoading] = createSignal(false)
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+  const { session } = useSession()
+  const { sortedReactions, loadReactionsBy } = useReactionsStore({ reactions: props.reactions })
+  const reactions = createMemo<Reaction[]>(() => sortedReactions()) // .filter(r => r.shout.slug === props.shout) )
+  const loadMore = async () => {
+    try {
+      const page = getCommentsPage()
+      setIsCommentsLoading(true)
+
+      const { hasMore } = await loadReactionsBy({
+        by: { shout: props.shout, comment: true },
+        limit: ARTICLE_COMMENTS_PAGE_SIZE,
+        offset: page * ARTICLE_COMMENTS_PAGE_SIZE
+      })
+      setIsLoadMoreButtonVisible(hasMore)
+    } finally {
+      setIsCommentsLoading(false)
+    }
+  }
+  const getCommentById = (cid) => reactions().find((r) => r.id === cid)
+  const getCommentLevel = (c: Reaction, level = 0) => {
+    if (c && c.replyTo && level < MAX_COMMENT_LEVEL) {
+      return getCommentLevel(getCommentById(c.replyTo), level + 1)
+    }
+    return level
+  }
+  onMount(async () => await loadMore())
+  return (
+    <>
+      <Show when={reactions()}>
+        <h2 id="comments">
+          {t('Comments')} {reactions().length.toString() || ''}
+        </h2>
+
+        <For each={reactions()}>
+          {(reaction: Reaction) => (
+            <Comment
+              comment={reaction}
+              level={getCommentLevel(reaction)}
+              canEdit={reaction.createdBy?.slug === session()?.user?.slug}
+            />
+          )}
+        </For>
+
+        <Show when={isLoadMoreButtonVisible()}>
+          <button onClick={loadMore}>Load more</button>
+        </Show>
+      </Show>
+
+      <Show
+        when={!session()?.user?.slug}
+        fallback={<textarea class={styles.writeComment} rows="1" placeholder={t('Write comment')} />}
+      >
+        <div class={styles.commentWarning} id="comments">
+          {t('To leave a comment you please')}
+          <a
+            href={''}
+            onClick={(evt) => {
+              evt.preventDefault()
+              showModal('auth')
+            }}
+          >
+            <i>{t('sign up or sign in')}</i>
+          </a>
+        </div>
+      </Show>
+    </>
+  )
+}

src/components/Article/FullArticle.tsx

@@ -1,33 +1,19 @@
 import { capitalize } from '../../utils'
 import './Full.scss'
 import { Icon } from '../_shared/Icon'
-import ArticleComment from './Comment'
 import { AuthorCard } from '../Author/Card'
 import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import type { Author, Reaction, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
-import { showModal } from '../../stores/ui'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
-import { useSession } from '../../context/session'
 import stylesHeader from '../Nav/Header.module.scss'
 import styles from '../../styles/Article.module.scss'
 import RatingControl from './RatingControl'
 import { clsx } from 'clsx'
-
+import { CommentsTree } from './CommentsTree'
-const MAX_COMMENT_LEVEL = 6
-
-const getCommentLevel = (comment: Reaction, level = 0) => {
-  if (comment && comment.replyTo && level < MAX_COMMENT_LEVEL) {
-    return 0 // FIXME: getCommentLevel(commentsById[c.replyTo], level + 1)
-  }
-  return level
-}
-
 interface ArticleProps {
   article: Shout
-  reactions: Reaction[]
-  isCommentsLoading: boolean
 }
 
 const formatDate = (date: Date) => {
@@ -41,7 +27,6 @@ const formatDate = (date: Date) => {
 }
 
 export const FullArticle = (props: ArticleProps) => {
-  const { session } = useSession()
   const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
   const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
 
@@ -52,12 +37,6 @@ export const FullArticle = (props: ArticleProps) => {
     )
 
   onMount(() => {
-    const script = document.createElement('script')
-    script.async = true
-    script.src = 'https://ackee.discours.io/increment.js'
-    script.dataset.ackeeServer = 'https://ackee.discours.io'
-    script.dataset.ackeeDomainId = '1004abeb-89b2-4e85-ad97-74f8d2c8ed2d'
-    document.body.appendChild(script)
     const windowHash = window.location.hash
     if (windowHash?.length > 0) {
       const comments = document.querySelector(windowHash)
@@ -114,11 +93,6 @@ export const FullArticle = (props: ArticleProps) => {
             <RatingControl rating={props.article.stat?.rating} />
           </div>
 
-          <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemLikes)}>
-            <Icon name="like" class={styles.icon} />
-            {props.article.stat?.rating || ''}
-          </div>
-
           <div class={styles.shoutStatsItem}>
             <Icon name="comment" class={styles.icon} />
             {props.article.stat?.commented || ''}
@@ -153,7 +127,7 @@ export const FullArticle = (props: ArticleProps) => {
           {/*</Show>*/}
           <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
             <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
-              {formattedDate}
+              {formattedDate()}
             </div>
 
             <Show when={props.article.stat?.viewed}>
@@ -187,39 +161,7 @@ export const FullArticle = (props: ArticleProps) => {
             )}
           </For>
         </div>
-
+        <CommentsTree shout={props.article?.slug} />
-        <Show when={props.reactions?.length}>
-          <h2 id="comments">
-            {t('Comments')} {props.reactions?.length.toString() || ''}
-          </h2>
-
-          <For each={props.reactions?.filter((r) => r.body)}>
-            {(reaction) => (
-              <ArticleComment
-                comment={reaction}
-                level={getCommentLevel(reaction)}
-                canEdit={reaction.createdBy?.slug === session()?.user?.slug}
-              />
-            )}
-          </For>
-        </Show>
-        <Show when={!session()?.user?.slug}>
-          <div class={styles.commentWarning} id="comments">
-            {t('To leave a comment you please')}
-            <a
-              href={''}
-              onClick={(evt) => {
-                evt.preventDefault()
-                showModal('auth')
-              }}
-            >
-              <i>{t('sign up or sign in')}</i>
-            </a>
-          </div>
-        </Show>
-        <Show when={session()?.user?.slug}>
-          <textarea class={styles.writeComment} rows="1" placeholder={t('Write comment')} />
-        </Show>
       </div>
     </div>
   )

src/components/Author/Userpic.tsx

@@ -32,7 +32,7 @@ export default (props: UserpicProps) => {
             when={props.user && props.user.userpic === ''}
             fallback={
               <img
-                src={props.user.userpic || '/icons/user-anonymous.svg'}
+                src={props.user.userpic || '/icons/user-default.svg'}
                 alt={props.user.name || ''}
                 classList={{ anonymous: !props.user.userpic }}
               />
@@ -48,7 +48,7 @@ export default (props: UserpicProps) => {
           when={props.user && props.user.userpic === ''}
           fallback={
             <img
-              src={props.user.userpic || '/icons/user-anonymous.svg'}
+              src={props.user.userpic || '/icons/user-default.svg'}
               alt={props.user.name || ''}
               classList={{ anonymous: !props.user.userpic }}
             />

src/components/Nav/HeaderAuth.tsx

@@ -70,7 +70,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
                 <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                   <a href="?modal=auth&mode=login">
                     <span class={styles.textLabel}>{t('Enter')}</span>
-                    <Icon name="user-anonymous" class={styles.icon} />
+                    <Icon name="user-default" class={styles.icon} />
                   </a>
                 </div>
               }

src/components/Views/Article.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, Show, Suspense } from 'solid-js'
+import { createEffect, createMemo, createSignal, onMount, Show, Suspense } from 'solid-js'
 import { FullArticle } from '../Article/FullArticle'
 import { t } from '../../utils/intl'
 import type { Shout, Reaction } from '../../graphql/types.gen'
@@ -9,34 +9,20 @@ interface ArticlePageProps {
   reactions?: Reaction[]
 }
 
-const ARTICLE_COMMENTS_PAGE_SIZE = 50
-
 export const ArticleView = (props: ArticlePageProps) => {
-  const [getCommentsPage] = createSignal(0)
+  onMount(() => {
-  const [getIsCommentsLoading, setIsCommentsLoading] = createSignal(false)
+    const script = document.createElement('script')
-  const { reactionsByShout, loadReactionsBy } = useReactionsStore({ reactions: props.reactions })
+    script.async = true
-
+    script.src = 'https://ackee.discours.io/increment.js'
-  createEffect(async () => {
+    script.dataset.ackeeServer = 'https://ackee.discours.io'
-    try {
+    script.dataset.ackeeDomainId = '1004abeb-89b2-4e85-ad97-74f8d2c8ed2d'
-      setIsCommentsLoading(true)
+    document.body.appendChild(script)
-      await loadReactionsBy({
-        by: { shout: props.article.slug, comment: true },
-        limit: ARTICLE_COMMENTS_PAGE_SIZE,
-        offset: getCommentsPage() * ARTICLE_COMMENTS_PAGE_SIZE
-      })
-    } finally {
-      setIsCommentsLoading(false)
-    }
   })
 
   return (
     <Show fallback={<div class="center">{t('Loading')}</div>} when={props.article}>
       <Suspense>
-        <FullArticle
+        <FullArticle article={props.article} />
-          article={props.article}
-          reactions={reactionsByShout()[props.article.slug]}
-          isCommentsLoading={getIsCommentsLoading()}
-        />
       </Suspense>
     </Show>
   )

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

@@ -1,5 +1,7 @@
 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) {
@@ -10,6 +12,9 @@ export default gql`
       # id
       # kind
       #}
+      #shout {
+      #  slug
+      #}
       createdBy {
         name
         slug

src/graphql/types.gen.ts

@@ -54,17 +54,17 @@ export type AuthorsBy = {
 }
 
 export type Chat = {
-  admins?: Maybe<Array<Maybe<User>>>
+  admins?: Maybe<Array<Maybe<Scalars['String']>>>
   createdAt: Scalars['Int']
-  createdBy: User
+  createdBy: Scalars['String']
   description?: Maybe<Scalars['String']>
   id: Scalars['String']
-  messages: Array<Maybe<Message>>
+  messages?: Maybe<Array<Maybe<Message>>>
   private?: Maybe<Scalars['Boolean']>
   title?: Maybe<Scalars['String']>
   unread?: Maybe<Scalars['Int']>
   updatedAt: Scalars['Int']
-  users: Array<Maybe<User>>
+  users: Array<Maybe<Scalars['String']>>
 }
 
 export type ChatInput = {
@@ -136,6 +136,7 @@ export type LoadShoutsOptions = {
   offset?: InputMaybe<Scalars['Int']>
   order_by?: InputMaybe<Scalars['String']>
   order_by_desc?: InputMaybe<Scalars['Boolean']>
+  with_author_captions?: InputMaybe<Scalars['Boolean']>
 }
 
 export type Message = {
@@ -178,7 +179,6 @@ export type Mutation = {
   follow: Result
   getSession: AuthResult
   inviteAuthor: Result
-  inviteChat: Result
   markAsRead: Result
   rateUser: Result
   registerUser: AuthResult
@@ -214,7 +214,7 @@ export type MutationCreateReactionArgs = {
 }
 
 export type MutationCreateShoutArgs = {
-  inp: ShoutInput
+  input: ShoutInput
 }
 
 export type MutationCreateTopicArgs = {
@@ -252,11 +252,6 @@ export type MutationInviteAuthorArgs = {
   shout: Scalars['String']
 }
 
-export type MutationInviteChatArgs = {
-  chatId: Scalars['String']
-  userslug: Scalars['String']
-}
-
 export type MutationMarkAsReadArgs = {
   chatId: Scalars['String']
   ids: Array<InputMaybe<Scalars['Int']>>