feed-styles-refactored

src/components/Article/FullArticle.tsx

@@ -36,6 +36,7 @@ import { CommentsTree } from './CommentsTree'
 import { SharePopup, getShareUrl } from './SharePopup'
 import { ShoutRatingControl } from './ShoutRatingControl'
 
+import stylesFeed from '../Feed/Feed.module.scss'
 import stylesHeader from '../HeaderNav/Header.module.scss'
 import styles from './Article.module.scss'
 
@@ -429,7 +430,7 @@ export const FullArticle = (props: Props) => {
       </div>
 
       <Show when={props.article.layout === 'image'}>
-        <div class="floor floor--important">
+        <div class={clsx(stylesFeed.floor, stylesFeed['floor--important'])}>
           <div class="wide-container">
             <div class="row">
               <div class="col-md-20 offset-md-2">

src/components/Feed/Beside.tsx

@@ -1,17 +1,16 @@
 // TODO: additional entities list column + article
 
-import type { Author, Shout, Topic } from '~/graphql/schema/core.gen'
-
 import { clsx } from 'clsx'
 import { For, Show } from 'solid-js'
 import { useLocalize } from '~/context/localize'
+import type { Author, Shout, Topic } from '~/graphql/schema/core.gen'
 import { AuthorBadge } from '../Author/AuthorBadge'
 import { TopicCard } from '../Topic/Card'
 import { Icon } from '../_shared/Icon'
-
 import { ArticleCard } from './ArticleCard'
 
 import styles from './Beside.module.scss'
+import stylesFeed from './Feed.module.scss'
 
 type Props = {
   title?: string
@@ -31,7 +30,7 @@ export const Beside = (props: Props) => {
 
   return (
     <Show when={!!props.beside?.slug && props.values?.length > 0}>
-      <div class="floor floor--9">
+      <div class={clsx(stylesFeed.floor, stylesFeed['floor--9'])}>
         <div class="wide-container">
           <div class="row justify-content-between">
             <Show when={!!props.values}>

src/components/Feed/Group.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx'
+import { For, Show } from 'solid-js'
 import type { JSX } from 'solid-js/jsx-runtime'
 import type { Shout } from '~/graphql/schema/core.gen'
 
-import { For, Show } from 'solid-js'
-
 import { ArticleCard } from './ArticleCard'
-import './Group.scss'
+
+import stylesFeed from './Feed.module.scss'
+import styles from './Group.module.scss'
 
 interface GroupProps {
   articles: Shout[]
@@ -13,11 +15,11 @@ interface GroupProps {
 
 export default (props: GroupProps) => {
   return (
-    <div class="floor floor--group">
+    <div class={clsx(stylesFeed.floor, styles['floor--group'])}>
       <Show when={props.articles.length > 4}>
         <div class="wide-container">
           <div class="row">
-            <div class="group__header col-24">{props.header}</div>
+            <div class="col-24">{props.header}</div>
 
             <div class="col-lg-12">
               <ArticleCard

src/components/Feed/Row1.tsx

@@ -1,8 +1,8 @@
-import type { Shout } from '~/graphql/schema/core.gen'
-
+import clsx from 'clsx'
 import { Show } from 'solid-js'
-
+import type { Shout } from '~/graphql/schema/core.gen'
 import { ArticleCard } from './ArticleCard'
+import stylesFeed from './Feed.module.scss'
 
 export const Row1 = (props: {
   article: Shout
@@ -11,7 +11,7 @@ export const Row1 = (props: {
   noauthor?: boolean
 }) => (
   <Show when={!!props.article}>
-    <div class="floor floor--one-article">
+    <div class={clsx(stylesFeed.floor, stylesFeed['floor--1'])}>
       <div class="wide-container">
         <div class="row">
           <div class="col-24">

src/components/Feed/Row2.tsx

@@ -3,6 +3,7 @@ import type { Shout } from '~/graphql/schema/core.gen'
 import { For, Show, createEffect, createSignal } from 'solid-js'
 
 import { ArticleCard } from './ArticleCard'
+import stylesFeed from './Feed.module.scss'
 
 const columnSizes = ['col-md-12', 'col-md-8', 'col-md-16']
 
@@ -20,7 +21,7 @@ export const Row2 = (props: {
 
   return (
     <Show when={props.articles && props.articles.length > 0}>
-      <div class="floor">
+      <div class={stylesFeed.floor}>
         <div class="wide-container">
           <div class="row">
             <For each={props.articles}>

src/components/Feed/Row3.tsx

@@ -4,6 +4,7 @@ import type { Shout } from '~/graphql/schema/core.gen'
 import { For, Show } from 'solid-js'
 
 import { ArticleCard } from './ArticleCard'
+import stylesFeed from './Feed.module.scss'
 
 export const Row3 = (props: {
   articles: Shout[]
@@ -14,11 +15,11 @@ export const Row3 = (props: {
 }) => {
   return (
     <Show when={props.articles && props.articles.length > 0}>
-      <div class="floor">
+      <div class={stylesFeed.floor}>
         <div class="wide-container">
           <div class="row">
             <Show when={props.header}>
-              <div class="floor-header">{props.header}</div>
+              <div class={stylesFeed['floor-header']}>{props.header}</div>
             </Show>
             <For each={props.articles}>
               {(a) => (

src/components/Feed/Row5.tsx

@@ -1,10 +1,11 @@
+import clsx from 'clsx'
 import type { Shout } from '~/graphql/schema/core.gen'
-
 import { ArticleCard } from './ArticleCard'
+import stylesFeed from './Feed.module.scss'
 
 export const Row5 = (props: { articles: Shout[]; nodate?: boolean }) => {
   return (
-    <div class="floor floor--1">
+    <div class={clsx(stylesFeed.floor, stylesFeed['floor--1'])}>
       <div class="wide-container">
         <div class="row">
           <div class="col-md-6">

src/components/Feed/RowShort.tsx

@@ -2,10 +2,11 @@ import { For } from 'solid-js'
 import type { Shout } from '~/graphql/schema/core.gen'
 import { ArticleCard } from './ArticleCard'
 
+import clsx from 'clsx'
 import styles from '~/styles/views/Feed.module.scss'
 
 export default (props: { articles: Shout[] }) => (
-  <div class="floor floor--7">
+  <div class={clsx(styles.floor, styles['floor--7'])}>
     <div class="wide-container">
       <div class={styles['short-cards']}>
         <For each={props.articles}>

src/components/Views/SearchView.tsx

@@ -1,13 +1,15 @@
-import { For, Show, createSignal, onMount } from 'solid-js'
-
 import { useSearchParams } from '@solidjs/router'
-import { useFeed } from '~/context/feed'
+import clsx from 'clsx'
+import { For, Show, createSignal, onMount } from 'solid-js'
+import { SHOUTS_PER_PAGE, useFeed } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
-import type { SearchResult } from '~/graphql/schema/core.gen'
+import type { SearchResult, Shout } from '~/graphql/schema/core.gen'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { ArticleCard } from '../Feed/ArticleCard'
+import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper'
 
-import '~/styles/views/Search.module.scss'
+import styles from '~/styles/views/Search.module.scss'
+import stylesFeed from '../Feed/Feed.module.scss'
 
 type Props = {
   query: string
@@ -31,19 +33,22 @@ export const SearchView = (props: Props) => {
 
   const loadMore = async () => {
     saveScrollPosition()
+    let result: Shout[] = []
     if (query()) {
       console.log(query())
-      const { hasMore } = await loadShoutsSearch({
+      const { hasMore, newShouts } = await loadShoutsSearch({
         text: query(),
         offset: offset(),
         limit: LOAD_MORE_PAGE_SIZE
       })
       setIsLoadMoreButtonVisible(hasMore)
       setOffset(offset() + LOAD_MORE_PAGE_SIZE)
+      result = newShouts
     } else {
       console.warn('[SaerchView] no query found')
     }
     restoreScrollPosition()
+    return result as LoadMoreItems
   }
 
   onMount(() => {
@@ -55,8 +60,8 @@ export const SearchView = (props: Props) => {
   // TODO: use score from the search results to sort by relevance
 
   return (
-    <div class="search-page wide-container">
-      <form action="/search" class="search-form row">
+    <div class={clsx(styles.searchPage, 'wide-container')}>
+      <form action="/search" class={clsx(styles.searchForm, 'row')}>
         <div class="col-sm-18">
           <input
             type="search"
@@ -93,23 +98,21 @@ export const SearchView = (props: Props) => {
       <Show when={sortedFeed()?.length > 0}>
         <h3>{t('Publications')}</h3>
 
-        <div class="floor">
+        <div class={clsx(stylesFeed.floor)}>
           <div class="row">
-            <For each={sortedFeed()}>
-              {(article) => (
-                <div class="col-md-6">
-                  <ArticleCard article={article} desktopCoverSize="L" />
-                </div>
-              )}
-            </For>
-
-            <Show when={isLoadMoreButtonVisible()}>
-              <div class="col-md-6">
-                <a href={`/search/${query()}`} onClick={loadMore} class="search__show-more">
-                  <span class="search__show-more-inner">{t('Load more')}</span>
-                </a>
-              </div>
-            </Show>
+            <LoadMoreWrapper
+              pageSize={SHOUTS_PER_PAGE}
+              hidden={!isLoadMoreButtonVisible()}
+              loadFunction={loadMore}
+            >
+              <For each={sortedFeed()}>
+                {(article) => (
+                  <div class="col-md-6">
+                    <ArticleCard article={article} desktopCoverSize="L" />
+                  </div>
+                )}
+              </For>
+            </LoadMoreWrapper>
           </div>
         </div>
       </Show>