expo-fixes

src/components/Views/Expo/Expo.module.scss

@@ -3,12 +3,4 @@
   background: #fef2f2;
   padding: 0 0 4rem;
   min-height: 100vh;
-
-  .showMore {
-    display: flex;
-    width: 100%;
-    padding: 4rem 0 2rem;
-    align-items: center;
-    justify-content: center;
-  }
 }

src/components/Views/Expo/Expo.tsx

@@ -1,47 +1,34 @@
-import { A } from '@solidjs/router'
-import { clsx } from 'clsx'
-import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
+import { For, Show, createEffect, createSignal, on } from 'solid-js'
 
-import { ConditionalWrapper } from '~/components/_shared/ConditionalWrapper'
-import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { Loading } from '~/components/_shared/Loading'
 import { ArticleCardSwiper } from '~/components/_shared/SolidSwiper/ArticleCardSwiper'
-import { EXPO_LAYOUTS, SHOUTS_PER_PAGE, useFeed } from '~/context/feed'
+import { EXPO_LAYOUTS, SHOUTS_PER_PAGE } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
 import { useSession } from '~/context/session'
-import { loadShouts } from '~/graphql/api/public'
 import getRandomTopShoutsQuery from '~/graphql/query/core/articles-load-random-top'
-import { LoadShoutsFilters, LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
-import { LayoutType } from '~/types/common'
+import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
+import { ExpoLayoutType } from '~/types/common'
 import { getUnixtime } from '~/utils/date'
-import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
-import { byCreated } from '~/utils/sort'
 import { ArticleCard } from '../../Feed/ArticleCard'
 
 import styles from './Expo.module.scss'
 
 type Props = {
   shouts: Shout[]
-  topMonthShouts?: Shout[]
-  topRatedShouts?: Shout[]
-  layout?: LayoutType
+  layout: ExpoLayoutType
 }
 
-export const PRERENDERED_ARTICLES_COUNT = 36
-const LOAD_MORE_PAGE_SIZE = 12
-
 export const Expo = (props: Props) => {
   const { t } = useLocalize()
   const { client } = useSession()
-
   const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
   const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
-  const { feedByLayout, expoFeed, setExpoFeed } = useFeed()
-  const layouts = createMemo<LayoutType[]>(() => (props.layout ? [props.layout] : EXPO_LAYOUTS))
 
+  // Функция загрузки случайных избранных статей
   const loadRandomTopArticles = async () => {
+    const layouts = props.layout ? [props.layout] : EXPO_LAYOUTS
     const options: LoadShoutsOptions = {
-      filters: { layouts: layouts(), featured: true },
+      filters: { layouts, featured: true },
       limit: 10,
       random_limit: 100
     }
@@ -49,11 +36,13 @@ export const Expo = (props: Props) => {
     setFavoriteTopArticles(resp?.data?.load_shouts_random_top || [])
   }
 
+  // Функция загрузки популярных статей за последний месяц
   const loadRandomTopMonthArticles = async () => {
+    const layouts = props.layout ? [props.layout] : EXPO_LAYOUTS
     const now = new Date()
     const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
     const options: LoadShoutsOptions = {
-      filters: { layouts: layouts(), after, reacted: true },
+      filters: { layouts, after, reacted: true },
       limit: 10,
       random_limit: 10
     }
@@ -61,141 +50,46 @@ export const Expo = (props: Props) => {
     setReactedTopMonthArticles(resp?.data?.load_shouts_random_top || [])
   }
 
-  onMount(() => {
-    loadRandomTopArticles()
-    loadRandomTopMonthArticles()
-  })
-
+  // Эффект для загрузки random top при изменении layout
   createEffect(
-    on(layouts, (lll) => {
-      console.debug('layouts changed', lll)
-      loadRandomTopArticles()
-      loadRandomTopMonthArticles()
-    })
+    on(
+      () => props.layout,
+      async (_layout?: ExpoLayoutType) => {
+        await loadRandomTopArticles()
+        await loadRandomTopMonthArticles()
+      }
+    )
   )
 
-  onCleanup(() => {
-    setExpoFeed([])
-  })
-  const ExpoTabs = () => (
-    <div class="wide-container">
-      <ul class={clsx('view-switcher')}>
-        <li class={clsx({ 'view-switcher__item--selected': !props.layout })}>
-          <A href={'/expo'}>
-            <span class={clsx('linkReplacement')}>{t('All')}</span>
-          </A>
-        </li>
-        <li class={clsx({ 'view-switcher__item--selected': props.layout === 'literature' })}>
-          <ConditionalWrapper
-            condition={props.layout !== 'literature'}
-            wrapper={(children) => <A href={'/expo/literature'}>{children}</A>}
-          >
-            <span class={clsx('linkReplacement')}>{t('Literature')}</span>
-          </ConditionalWrapper>
-        </li>
-        <li class={clsx({ 'view-switcher__item--selected': props.layout === 'audio' })}>
-          <ConditionalWrapper
-            condition={props.layout !== 'audio'}
-            wrapper={(children) => <A href={'/expo/audio'}>{children}</A>}
-          >
-            <span class={clsx('linkReplacement')}>{t('Music')}</span>
-          </ConditionalWrapper>
-        </li>
-        <li class={clsx({ 'view-switcher__item--selected': props.layout === 'image' })}>
-          <ConditionalWrapper
-            condition={props.layout !== 'image'}
-            wrapper={(children) => <A href={'/expo/image'}>{children}</A>}
-          >
-            <span class={clsx('linkReplacement')}>{t('Gallery')}</span>
-          </ConditionalWrapper>
-        </li>
-        <li class={clsx({ 'view-switcher__item--selected': props.layout === 'video' })}>
-          <ConditionalWrapper
-            condition={props.layout !== 'video'}
-            wrapper={(children) => <A href={'/expo/video'}>{children}</A>}
-          >
-            <span class={clsx('cursorPointer linkReplacement')}>{t('Video')}</span>
-          </ConditionalWrapper>
-        </li>
-      </ul>
-    </div>
-  )
-  const ExpoGrid = (props: Props) => (
-    <div class="wide-container">
-      <div class="row">
-        <For each={expoFeed()?.slice(0, LOAD_MORE_PAGE_SIZE) || []}>
-          {(shout) => (
-            <div 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>
-        <Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
-          <ArticleCardSwiper title={t('Top month')} slides={reactedTopMonthArticles()} />
-        </Show>
-        <For each={(props.topMonthShouts || []).slice(LOAD_MORE_PAGE_SIZE, LOAD_MORE_PAGE_SIZE * 2)}>
-          {(shout) => (
-            <div 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>
-        <Show when={favoriteTopArticles()?.length > 0} keyed={true}>
-          <ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
-        </Show>
-        <For each={props.topRatedShouts?.slice(LOAD_MORE_PAGE_SIZE * 2, expoFeed()?.length || 0)}>
-          {(shout) => (
-            <div 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>
-    </div>
-  )
-
-  const [loadMoreVisible, setLoadMoreVisible] = createSignal(false)
-
-  // дозагрузка
-  const loadMore = async () => {
-    saveScrollPosition()
-    const limit = SHOUTS_PER_PAGE
-    const offset = (props.layout ? feedByLayout()[props.layout] : expoFeed())?.length
-    const filters: LoadShoutsFilters = { layouts: layouts(), featured: true }
-    const options: LoadShoutsOptions = { filters, limit, offset }
-    const shoutsFetcher = loadShouts(options)
-    const result = await shoutsFetcher()
-    setLoadMoreVisible(Boolean(result?.length))
-    const expoFeedUpdater = (layout?: LayoutType) => (prev: Shout[]) =>
-      Array.from(new Set((layout ? prev || [] : expoFeed())?.concat(result || [])))?.sort(byCreated)
-    result && setExpoFeed(expoFeedUpdater(props.layout))
-    restoreScrollPosition()
-    return result as LoadMoreItems
-  }
-
   return (
     <div class={styles.Expo}>
-      <ExpoTabs />
+      <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>
+            </div>
 
-      <Show when={expoFeed()} fallback={<Loading />}>
-        <LoadMoreWrapper loadFunction={loadMore} pageSize={LOAD_MORE_PAGE_SIZE} hidden={!loadMoreVisible()}>
-          <ExpoGrid {...props} />
-        </LoadMoreWrapper>
+            <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>
   )

src/components/Views/Expo/ExpoNav.tsx

@@ -0,0 +1,34 @@
+import { A } from '@solidjs/router'
+import { clsx } from 'clsx'
+import { For } from 'solid-js'
+
+import { ConditionalWrapper } from '~/components/_shared/ConditionalWrapper'
+import { EXPO_LAYOUTS, EXPO_TITLES } from '~/context/feed'
+import { useLocalize } from '~/context/localize'
+import { ExpoLayoutType } from '~/types/common'
+
+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>}
+              >
+                <span class="linkReplacement">
+                  {layoutKey in EXPO_TITLES ? t(EXPO_TITLES[layoutKey as ExpoLayoutType]) : t('All')}
+                </span>
+              </ConditionalWrapper>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  )
+}
+
+export default ExpoNav

src/components/_shared/LoadMoreWrapper.tsx

@@ -33,6 +33,7 @@ export const LoadMoreWrapper = (props: LoadMoreProps) => {
   )
 
   const loadItems = async () => {
+    // console.debug('LoadMoreWrapper.loadItems offset:', offset())
     setIsLoading(true)
     saveScrollPosition()
     const newItems = await props.loadFunction(offset())
@@ -47,6 +48,7 @@ export const LoadMoreWrapper = (props: LoadMoreProps) => {
       )
     setIsLoading(false)
     restoreScrollPosition()
+    // console.debug('LoadMoreWrapper.loadItems loaded:', newItems.length)
   }
 
   onMount(loadItems)
@@ -54,16 +56,18 @@ export const LoadMoreWrapper = (props: LoadMoreProps) => {
   return (
     <>
       {props.children}
-      <Show when={isLoadMoreButtonVisible() && !props.hidden}>
-        <div class="load-more-container">
-          <Button
-            onClick={loadItems}
-            disabled={isLoading()}
-            value={t('Load more')}
-            title={`${items().length} ${t('loaded')}`}
-          />
-        </div>
-      </Show>
+      <div>
+        <Show when={isLoadMoreButtonVisible() && !props.hidden}>
+          <div class="load-more-container">
+            <Button
+              onClick={loadItems}
+              disabled={isLoading()}
+              value={t('Load more')}
+              title={`${items().length} ${t('loaded')}`}
+            />
+          </div>
+        </Show>
+      </div>
     </>
   )
 }

src/context/feed.tsx

@@ -10,13 +10,20 @@ import {
   Shout,
   Topic
 } from '~/graphql/schema/core.gen'
-import { LayoutType } from '~/types/common'
+import { ExpoLayoutType } from '~/types/common'
 import { byStat } from '../utils/sort'
 import { useSession } from './session'
 
 export const PRERENDERED_ARTICLES_COUNT = 5
 export const SHOUTS_PER_PAGE = 20
-export const EXPO_LAYOUTS = ['audio', 'literature', 'video', 'image'] as LayoutType[]
+export const EXPO_LAYOUTS = ['audio', 'literature', 'video', 'image'] as ExpoLayoutType[]
+export const EXPO_TITLES: Record<ExpoLayoutType | '', string> = {
+  'audio': 'Audio',
+  'video': 'Video',
+  'image': 'Artworks',
+  'literature': 'Literature',
+  '': 'All'
+}
 
 type FeedContextType = {
   sortedFeed: Accessor<Shout[]>

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

@@ -1,13 +1,17 @@
 import { Params, RouteSectionProps, createAsync } from '@solidjs/router'
-import { Show, onMount } from 'solid-js'
+import { Show, createEffect, createSignal, on } from 'solid-js'
 import { TopicsNav } from '~/components/TopicsNav'
 import { Expo } from '~/components/Views/Expo'
+import ExpoNav from '~/components/Views/Expo/ExpoNav'
+import { LoadMoreItems, LoadMoreWrapper } from '~/components/_shared/LoadMoreWrapper'
 import { PageLayout } from '~/components/_shared/PageLayout'
-import { EXPO_LAYOUTS, SHOUTS_PER_PAGE } from '~/context/feed'
+import { EXPO_LAYOUTS, EXPO_TITLES, SHOUTS_PER_PAGE, useFeed } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
 import { loadShouts } from '~/graphql/api/public'
-import { LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
-import { LayoutType } from '~/types/common'
+import { LoadShoutsFilters, LoadShoutsOptions, Shout } from '~/graphql/schema/core.gen'
+import { ExpoLayoutType } from '~/types/common'
+import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
+import { byCreated } from '~/utils/sort'
 
 const fetchExpoShouts = async (layouts: string[]) => {
   const result = await loadShouts({
@@ -28,35 +32,50 @@ export const route = {
 
 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 shouts = createAsync(
     async () =>
       props.data || (await fetchExpoShouts(props.params.layout ? [props.params.layout] : EXPO_LAYOUTS))
   )
 
-  const getTitle = (l: string) => {
-    switch (l) {
-      case 'audio': {
-        return t('Audio')
-      }
-      case 'video': {
-        return t('Video')
-      }
-      case 'image': {
-        return t('Artworks')
-      }
-      case 'literature': {
-        return t('Literature')
-      }
-      default: {
-        return t('Art')
-      }
+  // Функция для загрузки дополнительных шотов
+  const loadMore = async () => {
+    saveScrollPosition()
+    const limit = SHOUTS_PER_PAGE
+    const layouts = props.params.layout ? [props.params.layout] : EXPO_LAYOUTS
+    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()
+    setLoadMoreVisible(Boolean(result?.length))
+    if (result) {
+      setExpoFeed((prev) => Array.from(new Set([...(prev || []), ...result])).sort(byCreated))
     }
+    restoreScrollPosition()
+    return result as LoadMoreItems
   }
-
-  onMount(() => {
-    document.title = getTitle(props.params.layout || '')
-  })
-
+  // Эффект для загрузки данных при изменении 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
+        const options: LoadShoutsOptions = {
+          filters: { layouts, featured: true },
+          limit: SHOUTS_PER_PAGE,
+          offset
+        }
+        const shoutsFetcher = loadShouts(options)
+        const result = await shoutsFetcher()
+        setExpoFeed(result || [])
+      }
+    )
+  )
   return (
     <PageLayout
       withPadding={true}
@@ -64,9 +83,12 @@ export default (props: RouteSectionProps<Shout[]>) => {
       title={`${t('Discours')} :: ${getTitle(props.params.layout || '')}`}
     >
       <TopicsNav />
-      <Show when={shouts()} keyed>
-        {(sss) => <Expo shouts={sss} layout={props.params.layout as LayoutType} />}
-      </Show>
+      <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>
     </PageLayout>
   )
 }

src/types/common.d.ts

@@ -4,7 +4,8 @@ export type RootSearchParams = {
   token: string;
 };
 
-export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature';
+export type ExpoLayoutType = 'audio' | 'video' | 'image' | 'literature';
+export type LayoutType = 'article' | ExpoLayoutType;
 export type FollowsFilter = 'all' | 'authors' | 'topics' | 'communities';
 export type SortFunction<T> = (a: T, b: T) => number
 export type FilterFunction<T> = (a: T) => boolean