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>
+                </A>
+              ) : (
                 <span class="linkReplacement">
                   {layoutKey in EXPO_TITLES ? t(EXPO_TITLES[layoutKey as ExpoLayoutType]) : t('All')}
                 </span>
-              </ConditionalWrapper>
+              )}
             </li>
           )}
         </For>
@@ -88,36 +91,41 @@ export const Expo = (props: Props) => {
     )
   )
 
-  return (
-    <div class={styles.Expo}>
-      <Show when={props.shouts} fallback={<Loading />} keyed>
-        {(feed: Shout[]) => (
-          <div class="wide-container">
-            <div class="row">
-              <For each={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
-                      article={shout}
-                      settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
-                      desktopCoverSize="XS"
-                      withAspectRatio={true}
-                    />
-                  </div>
-                )}
-              </For>
+  try {
+    return (
+      <div class={styles.Expo}>
+        <Show when={props.shouts} fallback={<Loading />} keyed>
+          {(feed) => (
+            <div class="wide-container">
+              <div class="row">
+                <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
+                        article={shout}
+                        settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
+                        desktopCoverSize="XS"
+                        withAspectRatio={true}
+                      />
+                    </div>
+                  )}
+                </For>
+              </div>
+
+              <Show when={reactedTopMonthArticles()?.length > 0}>
+                <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
+              </Show>
+
+              <Show when={favoriteTopArticles()?.length > 0}>
+                <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
+              </Show>
             </div>
-
-            <Show when={reactedTopMonthArticles()?.length > 0}>
-              <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
-            </Show>
-
-            <Show when={favoriteTopArticles()?.length > 0}>
-              <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
-            </Show>
-          </div>
-        )}
-      </Show>
-    </div>
-  )
+          )}
+        </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,83 +32,85 @@ export const ArticleCardSwiper = (props: Props) => {
   })
 
   return (
-    <ShowOnlyOnClient>
-      <div
-        class={clsx({
-          [styles.Swiper]: props.slides?.length > 1,
-          [styles.articleMode]: true,
-          [styles.ArticleCardSwiper]: props.slides?.length > 1
-        })}
-      >
-        <Show when={props.title}>
-          <div class="wide-container">
-            <div class="row">
-              <div class="col-md-12">
-                <h2 class={styles.sliderTitle}>{props.title}</h2>
+    <Show when={props.slides && props.slides.length > 0}>
+      <ShowOnlyOnClient>
+        <div
+          class={clsx({
+            [styles.Swiper]: props.slides?.length > 1,
+            [styles.articleMode]: true,
+            [styles.ArticleCardSwiper]: props.slides?.length > 1
+          })}
+        >
+          <Show when={props.title}>
+            <div class="wide-container">
+              <div class="row">
+                <div class="col-md-12">
+                  <h2 class={styles.sliderTitle}>{props.title}</h2>
+                </div>
               </div>
             </div>
-          </div>
-        </Show>
-        <div class={styles.container}>
-          <Show when={props.slides?.length > 0}>
-            <Show when={props.slides.length !== 1} fallback={<Row1 article={props.slides[0]} />}>
-              <Show when={props.slides.length !== 2} fallback={<Row2 articles={props.slides} />}>
-                <div class={styles.holder}>
-                  <swiper-container
-                    ref={(el) => (mainSwipeRef = el)}
-                    centered-slides={true}
-                    observer={true}
-                    space-between={10}
-                    breakpoints={{
-                      576: { spaceBetween: 20, slidesPerView: 1.5 },
-                      992: { spaceBetween: 52, slidesPerView: 1.5 }
-                    }}
-                    round-lengths={true}
-                    loop={true}
-                    speed={800}
-                    autoplay={{
-                      disableOnInteraction: false,
-                      delay: 6000,
-                      pauseOnMouseEnter: true
-                    }}
-                  >
-                    <For each={props.slides}>
-                      {(slide, index) => (
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        <swiper-slide virtual-index={index()}>
-                          <ArticleCard
-                            article={slide}
-                            settings={{
-                              additionalClass: 'swiper-slide',
-                              isFloorImportant: true,
-                              isWithCover: true,
-                              nodate: true
-                            }}
-                            desktopCoverSize="L"
-                          />
-                        </swiper-slide>
-                      )}
-                    </For>
-                  </swiper-container>
-                  <div
-                    class={clsx(styles.navigation, styles.prev)}
-                    onClick={() => mainSwipeRef?.swiper.slidePrev()}
-                  >
-                    <Icon name="swiper-l-arr" class={styles.icon} />
+          </Show>
+          <div class={styles.container}>
+            <Show when={props.slides?.length > 0}>
+              <Show when={props.slides.length !== 1} fallback={<Row1 article={props.slides[0]} />}>
+                <Show when={props.slides.length !== 2} fallback={<Row2 articles={props.slides} />}>
+                  <div class={styles.holder}>
+                    <swiper-container
+                      ref={(el) => (mainSwipeRef = el)}
+                      centered-slides={true}
+                      observer={true}
+                      space-between={10}
+                      breakpoints={{
+                        576: { spaceBetween: 20, slidesPerView: 1.5 },
+                        992: { spaceBetween: 52, slidesPerView: 1.5 }
+                      }}
+                      round-lengths={true}
+                      loop={true}
+                      speed={800}
+                      autoplay={{
+                        disableOnInteraction: false,
+                        delay: 6000,
+                        pauseOnMouseEnter: true
+                      }}
+                    >
+                      <For each={props.slides}>
+                        {(slide, index) => (
+                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                          // @ts-ignore
+                          <swiper-slide virtual-index={index()}>
+                            <ArticleCard
+                              article={slide}
+                              settings={{
+                                additionalClass: 'swiper-slide',
+                                isFloorImportant: true,
+                                isWithCover: true,
+                                nodate: true
+                              }}
+                              desktopCoverSize="L"
+                            />
+                          </swiper-slide>
+                        )}
+                      </For>
+                    </swiper-container>
+                    <div
+                      class={clsx(styles.navigation, styles.prev)}
+                      onClick={() => mainSwipeRef?.swiper.slidePrev()}
+                    >
+                      <Icon name="swiper-l-arr" class={styles.icon} />
+                    </div>
+                    <div
+                      class={clsx(styles.navigation, styles.next)}
+                      onClick={() => mainSwipeRef?.swiper.slideNext()}
+                    >
+                      <Icon name="swiper-r-arr" class={styles.icon} />
+                    </div>
                   </div>
-                  <div
-                    class={clsx(styles.navigation, styles.next)}
-                    onClick={() => mainSwipeRef?.swiper.slideNext()}
-                  >
-                    <Icon name="swiper-r-arr" class={styles.icon} />
-                  </div>
-                </div>
+                </Show>
               </Show>
             </Show>
-          </Show>
+          </div>
         </div>
-      </div>
-    </ShowOnlyOnClient>
+      </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 | ''} />
-      <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>
-      </LoadMoreWrapper>
+      <ExpoNav layout={(props.params.layout as ExpoLayoutType) || ''} />
+      <Show when={shouts()} fallback={<Loading />} keyed>
+        {(sss) => (
+          <LoadMoreWrapper loadFunction={loadMore} pageSize={SHOUTS_PER_PAGE} hidden={!loadMoreVisible()}>
+            <Expo shouts={sss as Shout[]} layout={(props.params.layout as ExpoLayoutType) || ''} />
+          </LoadMoreWrapper>
+        )}
+      </Show>
     </PageLayout>
   )
 }