revised changes

biome.json

@@ -1,8 +1,21 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
   "files": {
-    "include": ["*.tsx", "*.ts", "*.js", "*.json"],
-    "ignore": ["./dist", "./node_modules", ".husky", "docs", "gen", "*.gen.ts", "*.d.ts"]
+    "include": [
+      "*.tsx",
+      "*.ts",
+      "*.js",
+      "*.json"
+    ],
+    "ignore": [
+      "./dist",
+      "./node_modules",
+      ".husky",
+      "docs",
+      "gen",
+      "*.gen.ts",
+      "*.d.ts"
+    ]
   },
   "vcs": {
     "defaultBranch": "dev",
@@ -10,13 +23,19 @@
   },
   "organizeImports": {
     "enabled": true,
-    "ignore": ["./api", "./gen"]
+    "ignore": [
+      "./api",
+      "./gen"
+    ]
   },
   "formatter": {
     "indentStyle": "space",
     "indentWidth": 2,
     "lineWidth": 108,
-    "ignore": ["./src/graphql/schema", "./gen"]
+    "ignore": [
+      "./src/graphql/schema",
+      "./gen"
+    ]
   },
   "javascript": {
     "formatter": {
@@ -29,14 +48,21 @@
     }
   },
   "linter": {
-    "ignore": ["*.scss", "*.md", ".DS_Store", "*.svg", "*.d.ts"],
+    "ignore": [
+      "*.scss",
+      "*.md",
+      ".DS_Store",
+      "*.svg",
+      "*.d.ts"
+    ],
     "enabled": true,
     "rules": {
       "all": true,
       "complexity": {
         "noForEach": "off",
         "useOptionalChain": "warn",
-        "useLiteralKeys": "off"
+        "useLiteralKeys": "off",
+        "noExcessiveCognitiveComplexity": "off"
       },
       "correctness": {
         "useHookAtTopLevel": "off"
@@ -54,15 +80,18 @@
         "noSvgWithoutTitle": "off"
       },
       "nursery": {
-        "useImportRestrictions": "off",
-        "useImportType": "off",
-        "useFilenamingConvention": "off"
+        "useImportRestrictions": "off"
+      },
+      "performance": {
+        "noBarrelFile": "off"
       },
       "style": {
         "useBlockStatements": "off",
         "noImplicitBoolean": "off",
         "useNamingConvention": "off",
-        "noDefaultExport": "off"
+        "useImportType": "off",
+        "noDefaultExport": "off",
+        "useFilenamingConvention": "off"
       },
       "suspicious": {
         "noConsoleLog": "off",

package.json

@@ -11,12 +11,12 @@
     "deploy": "graphql-codegen && npm run typecheck && vite build && vercel",
     "dev": "vite",
     "e2e": "npx playwright test --project=chromium",
-    "fix": "npm run check:code:fix && stylelint **/*.{scss,css} --fix",
+    "fix": "npm run lint:code:fix && stylelint **/*.{scss,css} --fix",
     "format": "npx @biomejs/biome format src/. --write",
     "hygen": "HYGEN_TMPLS=gen hygen",
     "postinstall": "npm run codegen && npx patch-package",
     "check:code": "npx @biomejs/biome check src --log-kind=compact --verbose",
-    "check:code:fix": "npx @biomejs/biome check src --log-kind=compact",
+    "check:code:fix": "npx @biomejs/biome lint src --log-kind=compact",
     "lint": "npm run lint:code && stylelint **/*.{scss,css}",
     "lint:code": "npx @biomejs/biome lint src --log-kind=compact --verbose",
     "lint:code:fix": "npx @biomejs/biome lint src --apply-unsafe --log-kind=compact --verbose",
@@ -28,6 +28,7 @@
     "typecheck:watch": "tsc --noEmit --watch"
   },
   "dependencies": {
+    "buffer": "6.0.3",
     "form-data": "4.0.0",
     "idb": "8.0.0",
     "mailgun.js": "10.1.0"
@@ -35,7 +36,7 @@
   "devDependencies": {
     "@authorizerdev/authorizer-js": "2.0.0",
     "@babel/core": "7.23.3",
-    "@biomejs/biome": "^1.5.3",
+    "@biomejs/biome": "^1.7.2",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
@@ -129,7 +130,7 @@
     "typograf": "7.3.0",
     "uniqolor": "1.1.0",
     "vike": "0.4.148",
-    "vite": "5.1.2",
+    "vite": "5.2.10",
     "vite-plugin-mkcert": "^1.17.3",
     "vite-plugin-sass-dts": "^1.3.17",
     "vite-plugin-solid": "2.10.1",
@@ -139,5 +140,8 @@
   "overrides": {
     "y-prosemirror": "1.2.2",
     "yjs": "13.6.12"
-  }
+  },
+  "trustedDependencies": [
+    "@biomejs/biome"
+  ]
 }

src/components/Article/CommentDate/CommentDate.tsx

@@ -14,7 +14,7 @@ type Props = {
 }
 
 export const CommentDate = (props: Props) => {
-  const { t, formatDate } = useLocalize()
+  const { formatDate } = useLocalize()
 
   const formattedDate = (date: number) => {
     const formatDateOptions: Intl.DateTimeFormatOptions = props.isShort

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -36,7 +36,7 @@ export const AuthorBadge = (props: Props) => {
   const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
 
   createEffect(() => {
-    if (!subscriptions || !props.author) return
+    if (!(subscriptions && props.author)) return
     const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id)
     setIsSubscribed(subscribed)
   })
@@ -45,7 +45,7 @@ export const AuthorBadge = (props: Props) => {
     setIsMobileView(!mediaMatches.sm)
   })
 
-  const { setFollowing } = useFollowing()
+  // const { setFollowing } = useFollowing()
   const { changeSearchParams } = useRouter()
   const { t, formatDate, lang } = useLocalize()
 
@@ -119,6 +119,9 @@ export const AuthorBadge = (props: Props) => {
                 <Show when={props.author?.stat.shouts > 0}>
                   <div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>
                 </Show>
+                <Show when={props.author?.stat.comments > 0}>
+                  <div>{t('CommentsWithCount', { count: props.author.stat?.comments ?? 0 })}</div>
+                </Show>
                 <Show when={props.author?.stat.followers > 0}>
                   <div>{t('FollowersWithCount', { count: props.author.stat?.followers ?? 0 })}</div>
                 </Show>

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -43,7 +43,7 @@ export const AuthorCard = (props: Props) => {
   })
 
   createEffect(() => {
-    if (!subscriptions || !props.author) return
+    if (!(subscriptions && props.author)) return
     const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id)
     setIsSubscribed(subscribed)
   })

src/components/AuthorsList/AuthorsList.tsx

@@ -1,9 +1,7 @@
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal, on, onMount } from 'solid-js'
-import { useFollowing } from '../../context/following'
+import { For, Show, createEffect, createSignal, on } from 'solid-js'
 import { useLocalize } from '../../context/localize'
 import { apiClient } from '../../graphql/client/core'
-import { Author } from '../../graphql/schema/core.gen'
 import { setAuthorsByFollowers, setAuthorsByShouts, useAuthorsStore } from '../../stores/zine/authors'
 import { AuthorBadge } from '../Author/AuthorBadge'
 import { InlineLoader } from '../InlineLoader'

src/components/Discours/Hero.tsx

@@ -1,7 +1,7 @@
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
 import { showModal } from '../../stores/ui'
-import { AuthModalSearchParams } from '../Nav/AuthModal/types'
+import type { AuthModalSearchParams } from '../Nav/AuthModal/types'
 
 import styles from './Hero.module.scss'
 

src/components/Editor/Editor.tsx

@@ -1,5 +1,3 @@
-import type { Doc } from 'yjs/dist/src/utils/Doc'
-
 import { HocuspocusProvider } from '@hocuspocus/provider'
 import { isTextSelection } from '@tiptap/core'
 import { Bold } from '@tiptap/extension-bold'
@@ -30,7 +28,7 @@ import { Underline } from '@tiptap/extension-underline'
 import { createEffect, createSignal, onCleanup } from 'solid-js'
 import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import uniqolor from 'uniqolor'
-import * as Y from 'yjs'
+import { Doc } from 'yjs'
 
 import { useEditorContext } from '../../context/editor'
 import { useLocalize } from '../../context/localize'
@@ -85,7 +83,7 @@ export const Editor = (props: Props) => {
   const docName = `shout-${props.shoutId}`
 
   if (!yDocs[docName]) {
-    yDocs[docName] = new Y.Doc()
+    yDocs[docName] = new Doc()
   }
 
   if (!providers[docName]) {

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -29,9 +29,11 @@ const embedData = (data) => {
   const result: { src: string; width?: string; height?: string } = { src: '' }
 
   for (let i = 0; i < attributes.length; i++) {
-    const attribute = attributes[i]
+    const attribute = attributes.item(i)
+    if (attribute) {
       result[attribute.name] = attribute.value
     }
+  }
 
   return result
 }

src/components/Editor/Panel/Panel.tsx

@@ -13,8 +13,6 @@ import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 import { Button } from '../../_shared/Button'
 import { DarkModeToggle } from '../../_shared/DarkModeToggle'
 import { Icon } from '../../_shared/Icon'
-
-import { useSnackbar } from '../../../context/snackbar'
 import styles from './Panel.module.scss'
 
 const typograf = new Typograf({ locale: ['ru', 'en-US'] })

src/components/Feed/Beside.tsx

@@ -4,8 +4,6 @@ import type { Author, Shout, Topic } from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
 import { For, Show } from 'solid-js'
-
-import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
 import { AuthorBadge } from '../Author/AuthorBadge'
 import { TopicCard } from '../Topic/Card'

src/components/InlineLoader/InlineLoader.tsx

@@ -1,4 +1,3 @@
-import { clsx } from 'clsx'
 import { useLocalize } from '../../context/localize'
 import { Loading } from '../_shared/Loading'
 import styles from './InlineLoader.module.scss'
@@ -7,7 +6,7 @@ type Props = {
   class?: string
 }
 
-export const InlineLoader = (props: Props) => {
+export const InlineLoader = (_props: Props) => {
   const { t } = useLocalize()
   return (
     <div class={styles.InlineLoader}>

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -116,7 +116,7 @@ export const RegisterForm = () => {
 
   const handleCheckEmailStatus = (status: EmailStatus | string) => {
     switch (status) {
-      case 'not verified':
+      case 'not verified': {
         setValidationErrors((prev) => ({
           ...prev,
           email: (
@@ -129,8 +129,9 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      case 'verified':
-        setValidationErrors((prev) => ({
+      }
+      case 'verified': {
+        setValidationErrors((_prev) => ({
           email: (
             <>
               {t('This email is registered')}. {t('try')}
@@ -142,7 +143,8 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      case 'registered':
+      }
+      case 'registered': {
         setValidationErrors((prev) => ({
           ...prev,
           email: (
@@ -156,11 +158,13 @@ export const RegisterForm = () => {
           ),
         }))
         break
-      default:
+      }
+      default: {
         console.info('[RegisterForm] email is not registered')
         break
       }
     }
+  }
 
   const handleEmailBlur = async () => {
     if (validateEmail(email())) {

src/components/Topic/Card.tsx

@@ -42,14 +42,16 @@ export const TopicCard = (props: TopicProps) => {
   const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
 
   createEffect(() => {
-    if (!subscriptions || !props.topic) return
+    if (!(subscriptions && props.topic)) return
     const subscribed = subscriptions.topics?.some((topics) => topics.id === props.topic?.id)
     setIsSubscribed(subscribed)
   })
 
   const handleFollowClick = () => {
     requireAuthentication(() => {
-      follow(FollowingEntity.Topic, props.topic.slug)
+      isSubscribed()
+        ? unfollow(FollowingEntity.Topic, props.topic.slug)
+        : follow(FollowingEntity.Topic, props.topic.slug)
     }, 'subscribe')
   }
 

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -26,7 +26,7 @@ export const TopicBadge = (props: Props) => {
   const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
 
   createEffect(() => {
-    if (!subscriptions || !props.topic) return
+    if (!(subscriptions && props.topic)) return
     const subscribed = subscriptions.topics?.some((topics) => topics.id === props.topic?.id)
     setIsSubscribed(subscribed)
   })

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -2,11 +2,11 @@ import type { Author } from '../../../graphql/schema/core.gen'
 
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
+import { For, Show, createMemo, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useRouter } from '../../../stores/router'
-import { setAuthorsSort, useAuthorsStore } from '../../../stores/zine/authors'
+import { useAuthorsStore } from '../../../stores/zine/authors'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { scrollHandler } from '../../../utils/scroll'
 import { authorLetterReduce, translateAuthor } from '../../../utils/translate'
@@ -33,7 +33,7 @@ export const AllAuthors = (props: Props) => {
   const [searchQuery, setSearchQuery] = createSignal('')
   const ALPHABET =
     lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ@']
-  const { searchParams, changeSearchParams } = useRouter<AllAuthorsPageSearchParams>()
+  const { searchParams } = useRouter<AllAuthorsPageSearchParams>()
   const { sortedAuthors } = useAuthorsStore({
     authors: props.authors,
     sortBy: searchParams().by || 'name',

src/components/Views/AllTopics/AllTopics.tsx

@@ -3,8 +3,6 @@ import type { Topic } from '../../../graphql/schema/core.gen'
 import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
-
-import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { useRouter } from '../../../stores/router'
 import { setTopicsSort, useTopicsStore } from '../../../stores/zine/topics'

src/components/Views/Author/Author.tsx

@@ -11,7 +11,7 @@ import { useSession } from '../../../context/session'
 import { apiClient } from '../../../graphql/client/core'
 import { router, useRouter } from '../../../stores/router'
 import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
-import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
+import { loadAuthor } from '../../../stores/zine/authors'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { getDescription } from '../../../utils/meta'
 import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
@@ -39,10 +39,9 @@ const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
   const { t } = useLocalize()
-  const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
+  const { followers: myFollowers } = useFollowing()
   const { session } = useSession()
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
   const { page: getPage, searchParams } = useRouter()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [isBioExpanded, setIsBioExpanded] = createSignal(false)
@@ -87,7 +86,7 @@ export const AuthorView = (props: Props) => {
       setFollowing([...(authors || []), ...(topics || [])])
       setFollowers(followersResult || [])
 
-      console.info('[components.Author] data loaded')
+      console.debug('[components.Author] following data loaded', subscriptionsResult)
     } catch (error) {
       console.error('[components.Author] fetch error', error)
     }

src/components/Views/DraftsView/DraftsView.tsx

@@ -1,6 +1,6 @@
 import { openPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal } from 'solid-js'
+import { For, Show, createEffect, createSignal, on } from 'solid-js'
 
 import { useEditorContext } from '../../../context/editor'
 import { useSession } from '../../../context/session'
@@ -9,22 +9,24 @@ import { Shout } from '../../../graphql/schema/core.gen'
 import { router } from '../../../stores/router'
 import { Draft } from '../../Draft'
 
+import { Loading } from '../../_shared/Loading'
 import styles from './DraftsView.module.scss'
 
 export const DraftsView = () => {
-  const { isAuthenticated, isSessionLoaded } = useSession()
+  const { session } = useSession()
   const [drafts, setDrafts] = createSignal<Shout[]>([])
 
-  const loadDrafts = async () => {
-    if (apiClient.private) {
+  createEffect(
+    on(
+      () => session(),
+      async (s) => {
+        if (s) {
           const loadedDrafts = await apiClient.getDrafts()
           setDrafts(loadedDrafts.reverse() || [])
         }
-  }
-
-  createEffect(() => {
-    if (isSessionLoaded()) loadDrafts()
-  })
+      },
+    ),
+  )
 
   const { publishShoutById, deleteShout } = useEditorContext()
 
@@ -44,11 +46,10 @@ export const DraftsView = () => {
 
   return (
     <div class={clsx(styles.DraftsView)}>
-      <Show when={isSessionLoaded()}>
+      <Show when={session()?.user?.id} fallback={<Loading />}>
         <div class="wide-container">
           <div class="row">
             <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
-              <Show when={isAuthenticated()} fallback="Давайте авторизуемся">
               <For each={drafts()}>
                 {(draft) => (
                   <Draft
@@ -59,7 +60,6 @@ export const DraftsView = () => {
                   />
                 )}
               </For>
-              </Show>
             </div>
           </div>
         </div>

src/components/Views/EditView/EditView.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx'
 import deepEqual from 'fast-deep-equal'
 import { Accessor, Show, createMemo, createSignal, lazy, onCleanup, onMount } from 'solid-js'
 import { createStore } from 'solid-js/store'
+import { throttle } from 'throttle-debounce'
 
 import { ShoutForm, useEditorContext } from '../../../context/editor'
 import { useLocalize } from '../../../context/localize'
@@ -41,7 +42,9 @@ export const EMPTY_TOPIC: Topic = {
   slug: '',
 }
 
+const THROTTLING_INTERVAL = 2000
 const AUTO_SAVE_INTERVAL = 5000
+const AUTO_SAVE_DELAY = 5000
 const handleScrollTopButtonClick = (e) => {
   e.preventDefault()
   window.scrollTo({
@@ -66,8 +69,9 @@ export const EditView = (props: Props) => {
   const shoutTopics = props.shout.topics || []
 
   // TODO: проверить сохранение черновика в local storage (не работает)
-  const draft = getDraftFromLocalStorage(props.shout.id)
+  const draft = props.shout || getDraftFromLocalStorage(props.shout.id)
   if (draft) {
+    // console.debug('draft: ', draft)
     setForm(Object.keys(draft).length !== 0 ? draft : { shoutId: props.shout.id })
   } else {
     setForm({
@@ -180,11 +184,10 @@ export const EditView = (props: Props) => {
 
   let autoSaveTimeOutId: number | string | NodeJS.Timeout
 
-  //TODO: add throttle
-  const autoSaveRecursive = () => {
-    autoSaveTimeOutId = setTimeout(async () => {
+  const autoSave = async () => {
     const hasChanges = !deepEqual(form, prevForm)
-      if (hasChanges) {
+    const hasTopic = Boolean(form.mainTopic)
+    if (hasChanges && hasTopic) {
       setSaving(true)
       if (props.shout?.published_at) {
         saveDraftToLocalStorage(form)
@@ -194,28 +197,30 @@ export const EditView = (props: Props) => {
       setPrevForm(clone(form))
       setTimeout(() => {
         setSaving(false)
-        }, 2000)
+      }, AUTO_SAVE_DELAY)
     }
+  }
+
+  // Throttle the autoSave function
+  const throttledAutoSave = throttle(THROTTLING_INTERVAL, autoSave)
+
+  const autoSaveRecursive = () => {
+    autoSaveTimeOutId = setTimeout(() => {
+      throttledAutoSave()
       autoSaveRecursive()
     }, AUTO_SAVE_INTERVAL)
   }
 
-  const stopAutoSave = () => {
-    clearTimeout(autoSaveTimeOutId)
-  }
-
   onMount(() => {
     autoSaveRecursive()
-  })
-
-  onCleanup(() => {
-    stopAutoSave()
+    onCleanup(() => clearTimeout(autoSaveTimeOutId))
   })
 
   const showSubtitleInput = () => {
     setIsSubtitleVisible(true)
     subtitleInput.current.focus()
   }
+
   const showLeadInput = () => {
     setIsLeadVisible(true)
   }

src/components/Views/Feed/Feed.tsx

@@ -49,7 +49,7 @@ type VisibilityItem = {
 }
 
 type FeedSearchParams = {
-  by: 'publish_date' | 'likes' | 'comments'
+  by: 'publish_date' | 'likes' | 'last_comment'
   period: FeedPeriod
   visibility: VisibilityMode
 }
@@ -258,10 +258,10 @@ export const FeedView = (props: Props) => {
               </li>
               <li
                 class={clsx({
-                  'view-switcher__item--selected': searchParams().by === 'comments',
+                  'view-switcher__item--selected': searchParams().by === 'last_comment',
                 })}
               >
-                <span class="link" onClick={() => changeSearchParams({ by: 'comments' })}>
+                <span class="link" onClick={() => changeSearchParams({ by: 'last_comment' })}>
                   {t('Most commented')}
                 </span>
               </li>

src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx

@@ -1,10 +1,8 @@
 import { clsx } from 'clsx'
-import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createSignal } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
-import { useSession } from '../../../context/session'
-import { apiClient } from '../../../graphql/client/core'
 import { Author, Topic } from '../../../graphql/schema/core.gen'
 import { SubscriptionFilter } from '../../../pages/types'
 import { dummyFilter } from '../../../utils/dummyFilter'
@@ -21,7 +19,6 @@ import stylesSettings from '../../../styles/FeedSettings.module.scss'
 
 export const ProfileSubscriptions = () => {
   const { t, lang } = useLocalize()
-  const { author, session } = useSession()
   const { subscriptions } = useFollowing()
   const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
   const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([])

src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx

@@ -1,6 +1,5 @@
 import { clsx } from 'clsx'
 import { Show, createMemo } from 'solid-js'
-import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { Button } from '../Button'
 import stylesButton from '../Button/Button.module.scss'

src/components/_shared/Icon/index.ts

@@ -1 +1 @@
-export * from './Icon'
+export { Icon } from './Icon'

src/components/_shared/Popup/index.ts

@@ -1 +1 @@
-export * from './Popup'
+export { Popup } from './Popup'

src/context/topics.tsx

@@ -25,7 +25,7 @@ const setupIndexedDB = async () => {
   })
 }
 
-const getTopicsFromIndexedDB = async (db) => {
+const getTopicsFromIndexedDB = (db) => {
   const tx = db.transaction(STORE_NAME, 'readonly')
   const store = tx.objectStore(STORE_NAME)
   return store.getAll()
@@ -44,7 +44,7 @@ export const TopicsProvider = (props: { children: JSX.Element }) => {
 
   onMount(async () => {
     const db = await setupIndexedDB()
-    let topics = await getTopicsFromIndexedDB(db)
+    let topics = getTopicsFromIndexedDB(db)
 
     if (topics.length === 0) {
       topics = await apiClient.getAllTopics()

src/pages/allAuthors.page.tsx

@@ -1,6 +1,6 @@
 import type { PageProps } from './types'
 
-import { createEffect, createSignal, onMount } from 'solid-js'
+import { createSignal, onMount } from 'solid-js'
 
 import { AllAuthors } from '../components/Views/AllAuthors/'
 import { PAGE_SIZE } from '../components/Views/AllTopics/AllTopics'

src/pages/edit.page.tsx

@@ -1,12 +1,12 @@
-import { Show, Suspense, createMemo, createSignal, lazy, onMount } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal, lazy, on, onMount } from 'solid-js'
 
 import { AuthGuard } from '../components/AuthGuard'
 import { Loading } from '../components/_shared/Loading'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { useLocalize } from '../context/localize'
+import { useSession } from '../context/session'
 import { apiClient } from '../graphql/client/core'
 import { Shout } from '../graphql/schema/core.gen'
-import { useRouter } from '../stores/router'
 import { router } from '../stores/router'
 
 import { redirectPage } from '@nanostores/router'
@@ -15,67 +15,70 @@ import { LayoutType } from './types'
 
 const EditView = lazy(() => import('../components/Views/EditView/EditView'))
 
-export const EditPage = () => {
-  const { page } = useRouter()
-  const snackbar = useSnackbar()
-  const { t } = useLocalize()
+const getContentTypeTitle = (layout: LayoutType) => {
+  switch (layout) {
+    case 'audio':
+      return 'Publish Album'
+    case 'image':
+      return 'Create gallery'
+    case 'video':
+      return 'Create video'
+    case 'literature':
+      return 'New literary work'
+    default:
+      return 'Write an article'
+  }
+}
 
-  const [shout, setShout] = createSignal<Shout>(null)
-  const loadMyShout = async (shout_id: number) => {
-    if (shout_id) {
-      const { shout: loadedShout, error } = await apiClient.getMyShout(shout_id)
-      console.log(loadedShout)
-      if (error) {
-        await snackbar?.showSnackbar({ type: 'error', body: t('This content is not published yet') })
+export const EditPage = () => {
+  const { t } = useLocalize()
+  const { session } = useSession()
+  const snackbar = useSnackbar()
+
+  const fail = async (error: string) => {
+    console.error(error)
+    await snackbar?.showSnackbar({ type: 'error', body: t(error) })
     redirectPage(router, 'drafts')
+  }
+
+  const [shoutId, setShoutId] = createSignal<number>(0)
+  const [shout, setShout] = createSignal<Shout>()
+
+  onMount(() => {
+    const shoutId = window.location.pathname.split('/').pop()
+    const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
+    if (shoutIdFromUrl) setShoutId(shoutIdFromUrl)
+  })
+
+  createEffect(
+    on(
+      [session, shout, shoutId],
+      async ([ses, sh, shid]) => {
+        if (ses?.user && !sh && shid) {
+          const { shout: loadedShout, error } = await apiClient.getMyShout(shid)
+          if (error) {
+            fail(error)
           } else {
             setShout(loadedShout)
           }
         }
-  }
-
-  onMount(async () => {
-    const shout_id = window.location.pathname.split('/').pop()
-    if (shout_id) {
-      try {
-        await loadMyShout(parseInt(shout_id, 10))
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  })
+      },
+      { defer: true },
+    ),
+  )
 
   const title = createMemo(() => {
     if (!shout()) {
       return t('Create post')
     }
-
-    switch (shout().layout as LayoutType) {
-      case 'audio': {
-        return t('Publish Album')
-      }
-      case 'image': {
-        return t('Create gallery')
-      }
-      case 'video': {
-        return t('Create video')
-      }
-      case 'literature': {
-        return t('New literary work')
-      }
-      default: {
-        return t('Write an article')
-      }
-    }
+    return t(getContentTypeTitle(shout()?.layout as LayoutType))
   })
 
   return (
     <PageLayout title={title()}>
       <AuthGuard>
-        <Show when={shout()}>
-          <Suspense fallback={<Loading />}>
-            <EditView shout={shout()} />
-          </Suspense>
+        <Show when={shout()} fallback={<Loading />}>
+          <EditView shout={shout() as Shout} />
         </Show>
       </AuthGuard>
     </PageLayout>

src/utils/getRandomTopicsFromArray.ts

@@ -2,6 +2,7 @@ import { RANDOM_TOPICS_COUNT } from '../components/Views/Home'
 import { Topic } from '../graphql/schema/core.gen'
 
 export const getRandomTopicsFromArray = (topics: Topic[], count: number = RANDOM_TOPICS_COUNT): Topic[] => {
+  if (!Array.isArray(topics)) return []
   const shuffledTopics = [...topics].sort(() => 0.5 - Math.random())
   return shuffledTopics.slice(0, count)
 }

vite.config.ts

@@ -66,7 +66,7 @@ export default defineConfig(({ mode, command }) => {
     },
     build: {
       rollupOptions: {
-        external: [],
+        external: ['buffer'],
       },
       chunkSizeWarningLimit: 1024,
       target: 'esnext',