Merge branch 'dev' of github.com:Discours/discoursio-webapp into dev

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>
-                <Button
+                <Show when={!props.isPosting} fallback={<Loading />}>
-                  value={props.submitButtonText ?? t('Send')}
+                  <Button
-                  variant="primary"
+                    value={props.submitButtonText ?? t('Send')}
-                  disabled={isEmpty()}
+                    variant="primary"
-                  onClick={() => props.onSubmit(html())}
+                    disabled={isEmpty()}
-                />
+                    onClick={() => props.onSubmit(html())}
+                  />
+                </Show>
               </div>
             </Show>
           </div>

src/components/Nav/Header/Header.tsx

@@ -335,7 +335,7 @@ export const Header = (props: Props) => {
           <Show when={props.title}>
             <div
               class={clsx(styles.articleControls, 'col-auto', {
-                [styles.articleControlsAuthorized]: session()?.user?.id,
+                // FIXME: use or remove [styles.articleControlsAuthorized]: session()?.user?.id,
               })}
             >
               <SharePopup

src/components/Nav/HeaderAuth.tsx

@@ -34,12 +34,12 @@ export const HeaderAuth = (props: Props) => {
   const { page } = useRouter()
   const { session, author, isSessionLoaded } = useSession()
   const { unreadNotificationsCount, showNotificationsPanel } = useNotifications()
-  const { form, toggleEditorPanel, publishShout } = useEditorContext()
+  const { form, toggleEditorPanel, saveShout, publishShout } = useEditorContext()
 
   const handleBellIconClick = (event: Event) => {
     event.preventDefault()
 
-    if (!author()?.id) {
+    if (!session()?.access_token) {
       showModal('auth')
       return
     }
@@ -48,15 +48,21 @@ export const HeaderAuth = (props: Props) => {
   }
 
   const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings')
-  const isNotificationsVisible = createMemo(() => author()?.id && !isEditorPage())
+  const isNotificationsVisible = createMemo(() => session()?.access_token && !isEditorPage())
-  const isSaveButtonVisible = createMemo(() => author()?.id && isEditorPage())
+  const isSaveButtonVisible = createMemo(() => session()?.access_token && isEditorPage())
   const isCreatePostButtonVisible = createMemo(() => !isEditorPage())
-  const isAuthenticatedControlsVisible = createMemo(() => author()?.id && session()?.user?.email_verified)
+  const isAuthenticatedControlsVisible = createMemo(
+    () => session()?.access_token && session()?.user?.email_verified,
+  )
 
   const handleBurgerButtonClick = () => {
     toggleEditorPanel()
   }
 
+  const handleSaveButtonClick = () => {
+    saveShout(form)
+  }
+
   const [width, setWidth] = createSignal(0)
   const [editorMode, setEditorMode] = createSignal(t('Editing'))
 
@@ -100,14 +106,8 @@ export const HeaderAuth = (props: Props) => {
       <Show when={isSessionLoaded()} keyed={true}>
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
-            <Show when={isCreatePostButtonVisible() && author()?.id}>
+            <Show when={isCreatePostButtonVisible() && session()?.access_token}>
-              <div
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
-                class={clsx(
-                  styles.userControlItem,
-                  styles.userControlItemVerbose,
-                  // styles.userControlItemCreate,
-                )}
-              >
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
                   <Icon name="pencil-outline" class={styles.icon} />
@@ -214,18 +214,12 @@ export const HeaderAuth = (props: Props) => {
               </div>
             </Show>
 
-            <Show when={isCreatePostButtonVisible() && !!author()?.id}>
+            <Show when={isCreatePostButtonVisible() && !session()?.access_token}>
-              <div
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
-                class={clsx(
-                  styles.userControlItem,
-                  styles.userControlItemVerbose,
-                  // styles.userControlItemCreate,
-                )}
-              >
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
-                  <Icon name="pencil-outline" class={styles.icon} />
+                  <Icon name="pencil" class={styles.icon} />
-                  <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
+                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
             </Show>
@@ -233,24 +227,19 @@ export const HeaderAuth = (props: Props) => {
             <Show
               when={isAuthenticatedControlsVisible()}
               fallback={
-                <Show when={!author()?.id}>
+                <Show when={!session()?.access_token}>
                   <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                     <a href="?m=auth&mode=login">
                       <span class={styles.textLabel}>{t('Enter')}</span>
                       <Icon name="key" class={styles.icon} />
-                      <Icon name="key" class={clsx(styles.icon, styles.iconHover)} />
+                      {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
                     </a>
                   </div>
                 </Show>
               }
             >
               <Show when={!isSaveButtonVisible()}>
-                <div
+                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
-                  class={clsx(
-                    styles.userControlItem,
-                    // styles.userControlItemInbox
-                  )}
-                >
                   <a href={getPagePath(router, 'inbox')}>
                     <div classList={{ entered: page().path === '/inbox' }}>
                       <Icon name="inbox-white" class={styles.icon} />
@@ -262,7 +251,7 @@ export const HeaderAuth = (props: Props) => {
             </Show>
           </div>
 
-          <Show when={author()?.id}>
+          <Show when={session()?.access_token}>
             <ProfilePopup
               onVisibilityChange={(isVisible) => {
                 props.setIsProfilePopupVisible(isVisible)

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(),
+      () => author(),
-      async (s) => {
+      async (a) => {
-        if (s) {
+        if (a) {
-          const loadedDrafts = await apiClient.getDrafts()
+          const { shouts: loadedDrafts, error } = await apiClient.getDrafts()
-          setDrafts(loadedDrafts.reverse() || [])
+          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,40 +3,43 @@ import { gql } from '@urql/core'
 export default gql`
   query LoadDraftsQuery {
     get_shouts_drafts {
-      id
+      error
-      title
+      shouts {
-      subtitle
-      slug
-      layout
-      cover
-      # community
-      media
-      main_topic
-      topics {
         id
         title
-        body
+        subtitle
         slug
-        stat {
+        layout
-          shouts
+        cover
-          authors
+        # community
-          followers
+        media
+        main_topic
+        topics {
+          id
+          title
+          body
+          slug
+          stat {
+            shouts
+            authors
+            followers
+          }
+        }
+        authors {
+          id
+          name
+          slug
+          pic
+          created_at
         }
-      }
-      authors {
-        id
-        name
-        slug
-        pic
         created_at
-      }
+        published_at
-      created_at
+        featured_at
-      published_at
+        stat {
-      featured_at
+          viewed
-      stat {
+          rating
-        viewed
+          commented
-        rating
+        }
-        commented
       }
     }
   }

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')
   }
 

vite.config.ts

@@ -69,6 +69,7 @@ export default defineConfig(({ mode, command }) => {
       https: {},
       port: 3000,
     },
+    sourcemap: isDev,
     css: {
       devSourcemap: isDev,
       preprocessorOptions: {