topics-context-fix

src/app.tsx

@@ -24,9 +24,7 @@ export const Providers = (props: { children?: JSX.Element }) => {
                 <Meta name="viewport" content="width=device-width, initial-scale=1" />
                 <UIProvider>
                   <EditorProvider>
-                    <Suspense fallback={<Loading />}>
-                      {props.children}
-                    </Suspense>
+                    <Suspense fallback={<Loading />}>{props.children}</Suspense>
                   </EditorProvider>
                 </UIProvider>
               </MetaProvider>

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -87,7 +87,7 @@ export const TopicBadge = (props: Props) => {
           <FollowingButton
             isFollowed={Boolean(isFollowed())}
             action={handleFollowClick}
-            actionMessageType={following()?.slug === props.topic.slug ? following()?.type : undefined}
+            actionMessageType={following?.()?.slug === props.topic.slug ? following()?.type : undefined}
           />
         </div>
       </div>

src/context/topics.tsx

@@ -6,9 +6,9 @@ import {
   createContext,
   createEffect,
   createMemo,
+  createReaction,
   createSignal,
   on,
-  onMount,
   useContext
 } from 'solid-js'
 import { loadTopics } from '~/lib/api'
@@ -45,13 +45,28 @@ const STORE_NAME = 'topics'
 const CACHE_LIFETIME = 24 * 60 * 60 * 1000 // один день в миллисекундах
 
 const setupIndexedDB = async () => {
-  return await openDB(DB_NAME, DB_VERSION, {
-    upgrade(db) {
-      if (!db.objectStoreNames.contains(STORE_NAME)) {
+  if (!('indexedDB' in window)) {
+    console.error("This browser doesn't support IndexedDB")
+    return
+  }
+
+  try {
+    const db = await openDB(DB_NAME, DB_VERSION, {
+      upgrade(db, oldVersion, newVersion, _transaction) {
+        console.log(`Upgrading database from version ${oldVersion} to ${newVersion}`)
+        if (db.objectStoreNames.contains(STORE_NAME)) {
+          console.log(`Object store ${STORE_NAME} already exists`)
+        } else {
+          console.log(`Creating object store: ${STORE_NAME}`)
           db.createObjectStore(STORE_NAME, { keyPath: 'id' })
         }
       }
     })
+    console.log('Database opened successfully:', db)
+    return db
+  } catch (e) {
+    console.error('Failed to open IndexedDB:', e)
+  }
 }
 
 const getTopicsFromIndexedDB = async (db: IDBDatabase) => {
@@ -157,7 +172,7 @@ export const TopicsProvider = (props: { children: JSX.Element }) => {
     return ttt || []
   }
 
-  onMount(async () => {
+  createReaction(async () => {
     setDb(await setupIndexedDB())
     console.info('[context.topics] idb loaded')
   })

src/routes/(home).tsx

@@ -1,5 +1,5 @@
 import { type RouteDefinition, type RouteSectionProps, createAsync } from '@solidjs/router'
-import { Show, Suspense, createEffect, createSignal, on, onMount } from 'solid-js'
+import { Show, Suspense, createSignal, onMount } from 'solid-js'
 import { LoadShoutsOptions } from '~/graphql/schema/core.gen'
 import { loadShouts } from '~/lib/api'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
@@ -87,29 +87,19 @@ export default function HomePage(props: RouteSectionProps<HomeViewProps>) {
     return result
   })
 
-  const [canLoadMoreFeatured, setCanLoadMoreFeatured] = createSignal(false)
+  const [canLoadMoreFeatured, setCanLoadMoreFeatured] = createSignal(true)
   const loadMoreFeatured = async () => {
     saveScrollPosition()
     const before = data()?.featuredShouts.length || 0
     featuredLoader(featuredOffset())
-    const after = data()?.featuredShouts.length || 0
-    setCanLoadMoreFeatured((_) => before !== after)
     setFeaturedOffset((o: number) => o + limit)
+    const after = data()?.featuredShouts.length || 0
+    setTimeout(() => setCanLoadMoreFeatured((_) => before !== after), 1)
     restoreScrollPosition()
   }
 
-  onMount(loadMoreFeatured)
+  onMount(async () => await loadMoreFeatured())
 
-  // Re-run the loader whenever the featured offset changes
-  createEffect(
-    on(
-      featuredOffset,
-      (o: number) => {
-        featuredLoader(o) // using fresh offset by itself
-      },
-      { defer: true }
-    )
-  )
   return (
     <PageLayout withPadding={true} title={t('Discours')}>
       <ReactionsProvider>