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

.github/workflows/node-ci.yml

@@ -13,7 +13,7 @@ jobs:
         run: npm ci
 
       - name: Check types
-        run: npm run typecheck
+        run: npm run check:types
 
       - name: Lint with Biome
         run: npm run check:code

package.json

@@ -24,8 +24,8 @@
     "lint:styles:fix": "stylelint **/*.{scss,css} --fix",
     "preview": "vite preview",
     "start": "vite",
-    "typecheck": "tsc --noEmit",
+    "check:types": "tsc --noEmit",
-    "typecheck:watch": "tsc --noEmit --watch"
+    "check:types:watch": "tsc --noEmit --watch"
   },
   "dependencies": {
     "form-data": "4.0.0",

public/locales/en/translation.json

@@ -449,6 +449,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

@@ -472,6 +472,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/Editor.tsx

@@ -151,7 +151,7 @@ export const Editor = (props: Props) => {
       }
 
       showSnackbar({ body: t('Uploading image') })
-      const result = await handleImageUpload(uplFile)
+      const result = await handleImageUpload(uplFile, session()?.access_token)
 
       editor()
         .chain()

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/Editor/UploadModalContent/UploadModalContent.tsx

@@ -12,6 +12,7 @@ import { Icon } from '../../_shared/Icon'
 import { Loading } from '../../_shared/Loading'
 import { InlineForm } from '../InlineForm'
 
+import { useSession } from '../../../context/session'
 import styles from './UploadModalContent.module.scss'
 
 type Props = {
@@ -24,12 +25,12 @@ export const UploadModalContent = (props: Props) => {
   const [uploadError, setUploadError] = createSignal<string | undefined>()
   const [dragActive, setDragActive] = createSignal(false)
   const [dragError, setDragError] = createSignal<string | undefined>()
-
+  const { session } = useSession()
   const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' })
   const runUpload = async (file: UploadFile) => {
     try {
       setIsUploading(true)
-      const result = await handleImageUpload(file)
+      const result = await handleImageUpload(file, session()?.access_token)
       props.onClose(result)
       setIsUploading(false)
     } catch (error) {

src/components/Nav/AuthModal/LoginForm.tsx

@@ -97,7 +97,12 @@ export const LoginForm = () => {
       const { errors } = await signIn({ email: email(), password: password() })
       console.error('[signIn errors]', errors)
       if (errors?.length > 0) {
-        if (errors.some((error) => error.message.includes('bad user credentials'))) {
+        if (
+          errors.some(
+            (error) =>
+              error.message.includes('bad user credentials') || error.message.includes('user not found'),
+          )
+        ) {
           setValidationErrors((prev) => ({
             ...prev,
             password: t('Something went wrong, check email and password'),

src/components/Nav/AuthModal/SendResetLinkForm.tsx

@@ -61,7 +61,12 @@ export const SendResetLinkForm = () => {
         redirect_uri: window.location.origin,
       })
       console.debug('[SendResetLinkForm] authorizer response:', data)
-      if (errors?.some((error) => error.message.includes('bad user credentials'))) {
+      if (
+        errors?.some(
+          (error) =>
+            error.message.includes('bad user credentials') || error.message.includes('user not found'),
+        )
+      ) {
         setIsUserNotFound(true)
       }
       if (data.message) setMessage(data.message)

src/components/Nav/Header/Header.tsx

@@ -59,6 +59,7 @@ export const Header = (props: Props) => {
   const [isTopicsVisible, setIsTopicsVisible] = createSignal(false)
   const [isZineVisible, setIsZineVisible] = createSignal(false)
   const [isFeedVisible, setIsFeedVisible] = createSignal(false)
+  const { session } = useSession()
 
   const toggleFixed = () => setFixed(!fixed())
 
@@ -68,7 +69,9 @@ export const Header = (props: Props) => {
   let windowScrollTop = 0
 
   createEffect(() => {
+    if (topics()?.length) {
       setRandomTopics(getRandomTopicsFromArray(topics()))
+    }
   })
 
   createEffect(() => {
@@ -330,7 +333,11 @@ export const Header = (props: Props) => {
           </div>
           <HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
           <Show when={props.title}>
-            <div class={clsx(styles.articleControls, 'col-auto')}>
+            <div
+              class={clsx(styles.articleControls, 'col-auto', {
+                // FIXME: use or remove [styles.articleControlsAuthorized]: session()?.user?.id,
+              })}
+            >
               <SharePopup
                 title={props.title}
                 imageUrl={props.cover}

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, saveShout, saveDraft, 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,22 +48,19 @@ 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()
   }
-  // FIXME: use handler
+
-  const _handleSaveClick = () => {
+  const handleSaveButtonClick = () => {
-    const hasTopics = form.selectedTopics?.length > 0
-    if (hasTopics) {
     saveShout(form)
-    } else {
-      saveDraft(form)
-    }
   }
 
   const [width, setWidth] = createSignal(0)
@@ -109,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} />
@@ -223,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>
@@ -242,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} />
@@ -271,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/ProfileSettings/ProfileSettings.tsx

@@ -57,7 +57,7 @@ export const ProfileSettings = () => {
   const [nameError, setNameError] = createSignal<string>()
   const { form, submit, updateFormField, setForm } = useProfileForm()
   const { showSnackbar } = useSnackbar()
-  const { loadAuthor } = useSession()
+  const { loadAuthor, session } = useSession()
   const { showConfirm } = useConfirm()
 
   createEffect(() => {
@@ -140,7 +140,7 @@ export const ProfileSettings = () => {
       setUploadError(false)
       setIsUserpicUpdating(true)
 
-      const result = await handleImageUpload(uploadFile)
+      const result = await handleImageUpload(uploadFile, session()?.access_token)
       updateFormField('pic', result.url)
 
       setUserpicFile(null)

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/components/_shared/DropArea/DropArea.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { JSX, Show, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
 import { UploadedFile } from '../../../pages/types'
 import { handleFileUpload } from '../../../utils/handleFileUpload'
 import { handleImageUpload } from '../../../utils/handleImageUpload'
@@ -27,6 +28,7 @@ export const DropArea = (props: Props) => {
   const [dragActive, setDragActive] = createSignal(false)
   const [dropAreaError, setDropAreaError] = createSignal<string>()
   const [loading, setLoading] = createSignal(false)
+  const { session } = useSession()
 
   const runUpload = async (files) => {
     try {
@@ -35,7 +37,7 @@ export const DropArea = (props: Props) => {
       const results: UploadedFile[] = []
       for (const file of files) {
         const handler = props.fileType === 'image' ? handleImageUpload : handleFileUpload
-        const result = await handler(file)
+        const result = await handler(file, session()?.access_token)
         results.push(result)
       }
       props.onUpload(results)

src/components/_shared/SolidSwiper/EditorSwiper.tsx

@@ -19,6 +19,7 @@ import { Popover } from '../Popover'
 
 import { SwiperRef } from './swiper'
 
+import { useSession } from '../../../context/session'
 import styles from './Swiper.module.scss'
 
 const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
@@ -36,7 +37,7 @@ export const EditorSwiper = (props: Props) => {
   const [loading, setLoading] = createSignal(false)
   const [slideIndex, setSlideIndex] = createSignal(0)
   const [slideBody, setSlideBody] = createSignal<string>()
-
+  const { session } = useSession()
   const mainSwipeRef: { current: SwiperRef } = { current: null }
   const thumbSwipeRef: { current: SwiperRef } = { current: null }
 
@@ -100,7 +101,7 @@ export const EditorSwiper = (props: Props) => {
       setLoading(true)
       const results: UploadedFile[] = []
       for (const file of selectedFiles) {
-        const result = await handleImageUpload(file)
+        const result = await handleImageUpload(file, session()?.access_token)
         results.push(result)
       }
       props.onImagesAdd(composeMediaItems(results))

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/graphql/query/core/my-followed.ts

@@ -1,28 +0,0 @@
-import { gql } from '@urql/core'
-
-export default gql`
-  query MySubscriptionsQuery {
-    get_my_followed {
-      topics {
-        id
-        title
-        body
-        slug
-      }
-      authors {
-        id
-        name
-        slug
-        pic
-        created_at
-      }
-      communities {
-        id
-        name
-        slug
-        pic
-        created_at
-      }
-    }
-  }
-`

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

src/renderer/_default.page.client.tsx

@@ -1,7 +1,7 @@
 import type { PageContextBuiltInClientWithClientRouting } from 'vike/types'
 import type { PageContext } from './types'
 
-// import * as Sentry from '@sentry/browser'
+import { init as SentryInit, replayIntegration } from '@sentry/browser'
 import i18next from 'i18next'
 import HttpApi from 'i18next-http-backend'
 import ICU from 'i18next-icu'
@@ -9,7 +9,7 @@ import { hydrate } from 'solid-js/web'
 
 import { App } from '../components/App'
 import { initRouter } from '../stores/router'
-// import { SENTRY_DSN } from '../utils/config'
+import { GLITCHTIP_DSN } from '../utils/config'
 import { resolveHydrationPromise } from '../utils/hydrationPromise'
 
 let layoutReady = false
@@ -20,13 +20,16 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
   const { pathname, search } = window.location
   const searchParams = Object.fromEntries(new URLSearchParams(search))
   initRouter(pathname, searchParams)
-  /*
+
-  if (SENTRY_DSN) {
+  SentryInit({
-    Sentry.init({
+    dsn: GLITCHTIP_DSN,
-      dsn: SENTRY_DSN,
+    tracesSampleRate: 0.01,
+    integrations: [replayIntegration()],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
   })
-  }
+
-  */
   // eslint-disable-next-line import/no-named-as-default-member
   await i18next
     .use(HttpApi)

src/utils/config.ts

@@ -5,6 +5,7 @@ export const cdnUrl = 'https://cdn.discours.io'
 export const thumborUrl = import.meta.env.PUBLIC_THUMBOR_URL || defaultThumborUrl
 
 export const SENTRY_DSN = import.meta.env.PUBLIC_SENTRY_DSN || ''
+export const GLITCHTIP_DSN = import.meta.env.PUBLIC_GLITCHTIP_DSN || ''
 
 const defaultSearchUrl = 'https://search.discours.io'
 export const searchUrl = import.meta.env.PUBLIC_SEARCH_URL || defaultSearchUrl

src/utils/handleFileUpload.ts

@@ -5,12 +5,15 @@ import { UploadedFile } from '../pages/types'
 const apiBaseUrl = 'https://core.discours.io'
 const apiUrl = `${apiBaseUrl}/upload`
 
-export const handleFileUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
+export const handleFileUpload = async (uploadFile: UploadFile, token: string): Promise<UploadedFile> => {
   const formData = new FormData()
   formData.append('file', uploadFile.file, uploadFile.name)
   const response = await fetch(apiUrl, {
     method: 'POST',
     body: formData,
+    headers: {
+      Authorization: token,
+    },
   })
   return response.json()
 }

src/utils/handleImageUpload.ts

@@ -4,12 +4,14 @@ import { UploadedFile } from '../pages/types'
 
 import { thumborUrl } from './config'
 
-export const handleImageUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
+export const handleImageUpload = async (uploadFile: UploadFile, token: string): Promise<UploadedFile> => {
   const formData = new FormData()
   formData.append('media', uploadFile.file, uploadFile.name)
+  const headers = token ? { Authorization: token } : {}
   const response = await fetch(`${thumborUrl}/image`, {
     method: 'POST',
     body: formData,
+    headers,
   })
 
   const location = response.headers.get('Location')

vite.config.ts

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