expo-opening-fix

src/components/Views/ExpoView.tsx

@@ -1,7 +1,6 @@
 import { A } from '@solidjs/router'
 import clsx from 'clsx'
 import { For, Show, createEffect, createSignal, on } from 'solid-js'
-import { ConditionalWrapper } from '~/components/_shared/ConditionalWrapper'
 import { Loading } from '~/components/_shared/Loading'
 import { ArticleCardSwiper } from '~/components/_shared/SolidSwiper/ArticleCardSwiper'
 import { EXPO_LAYOUTS, SHOUTS_PER_PAGE } from '~/context/feed'
@@ -18,20 +17,24 @@ import styles from '~/styles/views/Expo.module.scss'
 
 export const ExpoNav = (props: { layout: ExpoLayoutType | '' }) => {
   const { t } = useLocalize()
+
   return (
     <div class="wide-container">
       <ul class={clsx('view-switcher')}>
         <For each={[...EXPO_LAYOUTS, '']}>
           {(layoutKey) => (
             <li class={clsx({ 'view-switcher__item--selected': props.layout === layoutKey })}>
-              <ConditionalWrapper
-                condition={props.layout !== layoutKey}
-                wrapper={(children) => <A href={`/expo/${layoutKey}`}>{children}</A>}
-              >
+              {props.layout !== layoutKey ? (
+                <A href={`/expo/${layoutKey}`}>
                   <span class="linkReplacement">
                     {layoutKey in EXPO_TITLES ? t(EXPO_TITLES[layoutKey as ExpoLayoutType]) : t('All')}
                   </span>
-              </ConditionalWrapper>
+                </A>
+              ) : (
+                <span class="linkReplacement">
+                  {layoutKey in EXPO_TITLES ? t(EXPO_TITLES[layoutKey as ExpoLayoutType]) : t('All')}
+                </span>
+              )}
             </li>
           )}
         </For>
@@ -88,13 +91,14 @@ export const Expo = (props: Props) => {
     )
   )
 
+  try {
     return (
       <div class={styles.Expo}>
         <Show when={props.shouts} fallback={<Loading />} keyed>
-        {(feed: Shout[]) => (
+          {(feed) => (
             <div class="wide-container">
               <div class="row">
-              <For each={feed.slice(0, SHOUTS_PER_PAGE) || []}>
+                <For each={Array.from(feed || []).slice(0, SHOUTS_PER_PAGE)}>
                   {(shout) => (
                     <div id={`shout-${shout.id}`} class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
                       <ArticleCard
@@ -120,4 +124,8 @@ export const Expo = (props: Props) => {
         </Show>
       </div>
     )
+  } catch (error) {
+    console.error('Error in Expo component:', error)
+    return <div>An error occurred. Please try again later.</div>
+  }
 }

src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx

@@ -32,6 +32,7 @@ export const ArticleCardSwiper = (props: Props) => {
   })
 
   return (
+    <Show when={props.slides && props.slides.length > 0}>
       <ShowOnlyOnClient>
         <div
           class={clsx({
@@ -110,5 +111,6 @@ export const ArticleCardSwiper = (props: Props) => {
           </div>
         </div>
       </ShowOnlyOnClient>
+    </Show>
   )
 }

src/routes/expo/[...layout].tsx

@@ -1,8 +1,10 @@
 import { Params, RouteSectionProps, createAsync } from '@solidjs/router'
-import { Show, createEffect, createSignal, on } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal, on } from 'solid-js'
+import { isServer } from 'solid-js/web'
 import { TopicsNav } from '~/components/HeaderNav/TopicsNav'
 import { Expo, ExpoNav } from '~/components/Views/ExpoView'
 import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
+import { Loading } from '~/components/_shared/Loading'
 import { PageLayout } from '~/components/_shared/PageLayout'
 import { EXPO_LAYOUTS, EXPO_TITLES, SHOUTS_PER_PAGE, useFeed } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
@@ -18,7 +20,7 @@ const fetchExpoShouts = async (layouts: string[]) => {
     limit: SHOUTS_PER_PAGE,
     offset: 0
   } as LoadShoutsOptions)
-  return result || []
+  return result
 }
 
 export const route = {
@@ -33,14 +35,14 @@ export default (props: RouteSectionProps<Shout[]>) => {
   const { t } = useLocalize()
   const { expoFeed, setExpoFeed, feedByLayout } = useFeed()
   const [loadMoreVisible, setLoadMoreVisible] = createSignal(false)
-  const getTitle = (l?: string) => EXPO_TITLES[(l as ExpoLayoutType) || '']
+  const getTitle = createMemo(() => (l?: string) => EXPO_TITLES[(l as ExpoLayoutType) || ''])
 
-  const shouts = createAsync(
-    async () =>
-      props.data || (await fetchExpoShouts(props.params.layout ? [props.params.layout] : EXPO_LAYOUTS))
+  const shouts = createAsync(async () =>
+    isServer
+      ? props.data
+      : await fetchExpoShouts(props.params.layout ? [props.params.layout] : EXPO_LAYOUTS)
   )
 
-  // Функция для загрузки дополнительных шотов
   const loadMore = async () => {
     saveScrollPosition()
     const limit = SHOUTS_PER_PAGE
@@ -48,46 +50,52 @@ export default (props: RouteSectionProps<Shout[]>) => {
     const offset = expoFeed()?.length || 0
     const filters: LoadShoutsFilters = { layouts, featured: true }
     const options: LoadShoutsOptions = { filters, limit, offset }
-    const shoutsFetcher = loadShouts(options)
-    const result = await shoutsFetcher()
+    const fetcher = await loadShouts(options)
+    const result = (await fetcher()) || []
     setLoadMoreVisible(Boolean(result?.length))
-    if (result) {
+    if (result && Array.isArray(result)) {
       setExpoFeed((prev) => Array.from(new Set([...(prev || []), ...result])).sort(byCreated))
     }
     restoreScrollPosition()
     return result as LoadMoreItems
   }
-  // Эффект для загрузки данных при изменении layout
+
   createEffect(
     on(
-      () => props.params.layout as ExpoLayoutType,
-      async (layout?: ExpoLayoutType) => {
-        const layouts = layout ? [layout] : EXPO_LAYOUTS
-        const offset = (layout ? feedByLayout()[layout]?.length : expoFeed()?.length) || 0
+      () => props.params.layout,
+      async (currentLayout) => {
+        const layouts = currentLayout ? [currentLayout] : EXPO_LAYOUTS
+        const offset = (currentLayout ? feedByLayout()[currentLayout]?.length : expoFeed()?.length) || 0
         const options: LoadShoutsOptions = {
           filters: { layouts, featured: true },
           limit: SHOUTS_PER_PAGE,
           offset
         }
-        const shoutsFetcher = loadShouts(options)
-        const result = await shoutsFetcher()
-        setExpoFeed(result || [])
+        const result = await loadShouts(options)
+        if (result && Array.isArray(result)) {
+          setExpoFeed(result)
+        } else {
+          setExpoFeed([])
+        }
       }
     )
   )
+
   return (
     <PageLayout
       withPadding={true}
       zeroBottomPadding={true}
-      title={`${t('Discours')} :: ${getTitle(props.params.layout || '')}`}
+      title={`${t('Discours')} :: ${getTitle()((props.params.layout as ExpoLayoutType) || '')}`}
     >
       <TopicsNav />
-      <ExpoNav layout={(props.params.layout || '') as ExpoLayoutType | ''} />
+      <ExpoNav layout={(props.params.layout as ExpoLayoutType) || ''} />
+      <Show when={shouts()} fallback={<Loading />} keyed>
+        {(sss) => (
           <LoadMoreWrapper loadFunction={loadMore} pageSize={SHOUTS_PER_PAGE} hidden={!loadMoreVisible()}>
-        <Show when={shouts()} keyed>
-          {(sss: Shout[]) => <Expo shouts={sss} layout={props.params.layout as ExpoLayoutType} />}
-        </Show>
+            <Expo shouts={sss as Shout[]} layout={(props.params.layout as ExpoLayoutType) || ''} />
           </LoadMoreWrapper>
+        )}
+      </Show>
     </PageLayout>
   )
 }