Merge pull request #456 from Discours/hotfix/comments-renew

load-after-create

public/locales/en/translation.json

@@ -448,6 +448,7 @@
   "Write your colleagues name or email": "Write your colleague's name or email",
   "You can download multiple tracks at once in .mp3, .wav or .flac formats": "You can download multiple tracks at once in .mp3, .wav or .flac formats",
   "You can now login using your new password": "Теперь вы можете входить с помощью нового пароля",
+  "You can't edit this post": "You can't edit this post",
   "You were successfully authorized": "You were successfully authorized",
   "You ll be able to participate in discussions, rate others' comments and learn about new responses": "You ll be able to participate in discussions, rate others' comments and learn about new responses",
   "You've confirmed email": "You've confirmed email",

public/locales/ru/translation.json

@@ -471,6 +471,7 @@
   "You can download multiple tracks at once in .mp3, .wav or .flac formats": "Можно загрузить сразу несколько треков в форматах .mp3, .wav или .flac",
   "You can now login using your new password": "Теперь вы можете входить с помощью нового пароля",
   "You was successfully authorized": "Вы были успешно авторизованы",
+  "You can't edit this post": "Вы не можете редактировать этот материал",
   "You ll be able to participate in discussions, rate others' comments and learn about new responses": "Вы сможете участвовать в обсуждениях, оценивать комментарии других и узнавать о новых ответах",
   "You've confirmed email": "Вы подтвердили почту",
   "You've reached a non-existed page": "Вы попали на несуществующую страницу",

src/components/Article/CommentsTree.tsx

@@ -29,7 +29,7 @@ export const CommentsTree = (props: Props) => {
   const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
   const [clearEditor, setClearEditor] = createSignal(false)
   const [clickedReplyId, setClickedReplyId] = createSignal<number>()
-  const { reactionEntities, createReaction } = useReactions()
+  const { reactionEntities, createReaction, loadReactionsBy } = useReactions()
 
   const comments = createMemo(() =>
     Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT'),
@@ -68,7 +68,9 @@ export const CommentsTree = (props: Props) => {
       setCookie()
     }
   })
+  const [posting, setPosting] = createSignal(false)
   const handleSubmitComment = async (value: string) => {
+    setPosting(true)
     try {
       await createReaction({
         kind: ReactionKind.Comment,
@@ -76,10 +78,12 @@ export const CommentsTree = (props: Props) => {
         shout: props.shoutId,
       })
       setClearEditor(true)
+      await loadReactionsBy({ by: { shout: props.shoutSlug } })
     } catch (error) {
       console.error('[handleCreate reaction]:', error)
     }
     setClearEditor(false)
+    setPosting(false)
   }
 
   return (
@@ -157,6 +161,7 @@ export const CommentsTree = (props: Props) => {
           placeholder={t('Write a comment...')}
           onSubmit={(value) => handleSubmitComment(value)}
           setClear={clearEditor()}
+          isPosting={posting()}
         />
       </ShowIfAuthenticated>
     </>

src/components/Editor/SimplifiedEditor.tsx

@@ -36,6 +36,7 @@ import { UploadModalContent } from './UploadModalContent'
 import { Figcaption } from './extensions/Figcaption'
 import { Figure } from './extensions/Figure'
 
+import { Loading } from '../_shared/Loading'
 import styles from './SimplifiedEditor.module.scss'
 
 type Props = {
@@ -58,6 +59,7 @@ type Props = {
   controlsAlwaysVisible?: boolean
   autoFocus?: boolean
   isCancelButtonVisible?: boolean
+  isPosting?: boolean
 }
 
 const DEFAULT_MAX_LENGTH = 400
@@ -365,12 +367,14 @@ const SimplifiedEditor = (props: Props) => {
                 <Show when={isCancelButtonVisible()}>
                   <Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
                 </Show>
+                <Show when={!props.isPosting} fallback={<Loading />}>
                   <Button
                     value={props.submitButtonText ?? t('Send')}
                     variant="primary"
                     disabled={isEmpty()}
                     onClick={() => props.onSubmit(html())}
                   />
+                </Show>
               </div>
             </Show>
           </div>

src/components/Views/DraftsView/DraftsView.tsx

@@ -13,16 +13,20 @@ import { Loading } from '../../_shared/Loading'
 import styles from './DraftsView.module.scss'
 
 export const DraftsView = () => {
-  const { session } = useSession()
+  const { author, loadSession } = useSession()
   const [drafts, setDrafts] = createSignal<Shout[]>([])
 
   createEffect(
     on(
-      () => session(),
-      async (s) => {
-        if (s) {
-          const loadedDrafts = await apiClient.getDrafts()
-          setDrafts(loadedDrafts.reverse() || [])
+      () => author(),
+      async (a) => {
+        if (a) {
+          const { shouts: loadedDrafts, error } = await apiClient.getDrafts()
+          if (error) {
+            console.warn(error)
+            await loadSession()
+          }
+          setDrafts(loadedDrafts || [])
         }
       },
     ),
@@ -46,7 +50,7 @@ export const DraftsView = () => {
 
   return (
     <div class={clsx(styles.DraftsView)}>
-      <Show when={session()?.user?.id} fallback={<Loading />}>
+      <Show when={author()?.id} fallback={<Loading />}>
         <div class="wide-container">
           <div class="row">
             <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">

src/graphql/client/core.ts

@@ -175,7 +175,7 @@ export const apiClient = {
     console.debug('[graphql.client.core] deleteShout:', response)
   },
 
-  getDrafts: async (): Promise<Shout[]> => {
+  getDrafts: async (): Promise<CommonResult> => {
     const response = await apiClient.private.query(draftsLoad, {}).toPromise()
     console.debug('[graphql.client.core] getDrafts:', response)
     return response.data.get_shouts_drafts

src/graphql/query/core/articles-load-drafts.ts

@@ -3,6 +3,8 @@ import { gql } from '@urql/core'
 export default gql`
   query LoadDraftsQuery {
     get_shouts_drafts {
+      error
+      shouts {
         id
         title
         subtitle
@@ -40,4 +42,5 @@ export default gql`
         }
       }
     }
+  }
 `

src/pages/edit.page.tsx

@@ -37,7 +37,8 @@ export const EditPage = () => {
 
   const fail = async (error: string) => {
     console.error(error)
-    await snackbar?.showSnackbar({ type: 'error', body: t(error) })
+    const errorMessage = error === 'forbidden' ? "You can't edit this post" : error
+    await snackbar?.showSnackbar({ type: 'error', body: t(errorMessage) })
     redirectPage(router, 'drafts')
   }