Merge remote-tracking branch 'origin/dev' into refactoing-catch-up

# Conflicts:
#	src/components/Views/Search.tsx

src/components/Author/Card.tsx

@@ -30,7 +30,11 @@ export const AuthorCard = (props: AuthorCardProps) => {
     () => session()?.news?.authors?.some((u) => u === props.author.slug) || false
   )
   const canFollow = createMemo(() => !props.hideFollow && session()?.user?.slug !== props.author.slug)
-  const bio = () => props.author.bio || t('Our regular contributor')
+  const bio = () => {
+    const d = document.createElement('div')
+    d.innerHTML = props.author.bio
+    return d.textContent || t('Our regular contributor')
+  }
   const name = () => {
     return props.author.name === 'Дискурс' && locale() !== 'ru'
       ? 'Discours'

src/components/Topic/Card.tsx

@@ -120,15 +120,6 @@ export const TopicCard = (props: TopicProps) => {
               {/*  </span>*/}
               {/*</Show>*/}
             </Show>
-
-            {/*
-              <span class='topic-details__item'>
-                {subscribers().toString() + ' ' + t('follower') + plural(
-                  subscribers(),
-                  locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
-                )}
-              </span>
-*/}
           </div>
         </Show>
       </div>
@@ -136,7 +127,6 @@ export const TopicCard = (props: TopicProps) => {
         class={styles.controlContainer}
         classList={{ 'col-md-3': !props.compact && !props.subscribeButtonBottom }}
       >
-        {}
         <Show
           when={subscribed()}
           fallback={

src/components/Views/AllAuthors.tsx

@@ -8,6 +8,7 @@ import { useRouter } from '../../stores/router'
 import styles from '../../styles/AllTopics.module.scss'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
+import { locale } from '../../stores/ui'
 
 type AllAuthorsPageSearchParams = {
   by: '' | 'name' | 'shouts' | 'rating'
@@ -35,18 +36,10 @@ export const AllAuthorsView = (props: Props) => {
 
   const byLetter = createMemo<{ [letter: string]: Author[] }>(() => {
     return sortedAuthors().reduce((acc, author) => {
-      if (!author.name) {
+      let letter = author.name.trim().split(' ').pop().at(0).toUpperCase()
-        // name === null for new users
+      if (!/[А-я]/i.test(letter) && locale() === 'ru') letter = '@'
-        return acc
+      if (!acc[letter]) acc[letter] = []
-      }
-
-      const letter = author.name[0].toUpperCase()
-      if (!acc[letter]) {
-        acc[letter] = []
-      }
-
       acc[letter].push(author)
-
       return acc
     }, {} as { [letter: string]: Author[] })
   })

src/components/Views/AllTopics.tsx

@@ -5,9 +5,11 @@ import { t } from '../../utils/intl'
 import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'
 import { useRouter } from '../../stores/router'
 import { TopicCard } from '../Topic/Card'
-import styles from '../../styles/AllTopics.module.scss'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
+import { locale } from '../../stores/ui'
+import { translit } from '../../utils/ru2en'
+import styles from '../../styles/AllTopics.module.scss'
 
 type AllTopicsPageSearchParams = {
   by: 'shouts' | 'authors' | 'title' | ''
@@ -37,13 +39,10 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
 
   const byLetter = createMemo<{ [letter: string]: Topic[] }>(() => {
     return sortedTopics().reduce((acc, topic) => {
-      const letter = topic.title[0].toUpperCase()
+      let letter = topic.title[0].toUpperCase()
-      if (!acc[letter]) {
+      if (!/[А-я]/i.test(letter) && locale() === 'ru') letter = '#'
-        acc[letter] = []
+      if (!acc[letter]) acc[letter] = []
-      }
-
       acc[letter].push(topic)
-
       return acc
     }, {} as { [letter: string]: Topic[] })
   })
@@ -57,66 +56,78 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
 
   const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
+  let searchEl: HTMLInputElement
+  const [searchResults, setSearchResults] = createSignal<Topic[]>([])
+  // eslint-disable-next-line sonarjs/cognitive-complexity
+  const searchTopics = () => {
+    /* very stupid search algorithm with no deps */
+    let q = searchEl.value.toLowerCase()
+    if (q.length > 0) {
+      console.debug(q)
+      setSearchResults([])
 
+      if (locale() === 'ru') q = translit(q, 'ru')
+      const ttt: Topic[] = []
+      sortedTopics().forEach((topic) => {
+        let flag = false
+        topic.slug.split('-').forEach((w) => {
+          if (w.startsWith(q)) flag = true
+        })
+
+        if (!flag) {
+          let wrds: string = topic.title.toLowerCase()
+          if (locale() === 'ru') wrds = translit(wrds, 'ru')
+          wrds.split(' ').forEach((w: string) => {
+            if (w.startsWith(q)) flag = true
+          })
+        }
+
+        if (flag && !ttt.includes(topic)) ttt.push(topic)
+      })
+
+      setSearchResults((sr: Topic[]) => [...sr, ...ttt])
+      changeSearchParam('by', '')
+    }
+  }
+
+  const AllTopicsHead = () => (
+    <div class="row">
+      <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
+        <h1>{t('Topics')}</h1>
+        <p>{t('Subscribe what you like to tune your personal feed')}</p>
+
+        <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+          <li classList={{ selected: searchParams().by === 'shouts' }}>
+            <a href="/topics?by=shouts">{t('By shouts')}</a>
+          </li>
+          <li classList={{ selected: searchParams().by === 'authors' }}>
+            <a href="/topics?by=authors">{t('By authors')}</a>
+          </li>
+          <li classList={{ selected: searchParams().by === 'title' }}>
+            <a href="/topics?by=title">{t('By alphabet')}</a>
+          </li>
+          <li class="search-switcher">
+            <Icon name="search" />
+            <input
+              class="search-input"
+              ref={searchEl}
+              onChange={searchTopics}
+              onInput={searchTopics}
+              onFocus={() => (searchEl.innerHTML = '')}
+              placeholder={t('Search')}
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
   return (
     <div class={clsx(styles.allTopicsPage, 'container')}>
-      <Show when={sortedTopics().length > 0}>
+      <AllTopicsHead />
-        <div class="shift-content">
-          <div class="row">
-            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
-              <h1>{t('Topics')}</h1>
-              <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
-              <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+      <div class="shift-content">
-                <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
+        <Show when={sortedTopics().length > 0 || searchResults().length > 0}>
-                  <a href="/topics?by=shouts">{t('By shouts')}</a>
+          <Show when={searchParams().by === 'title'}>
-                </li>
-                <li classList={{ selected: searchParams().by === 'authors' }}>
-                  <a href="/topics?by=authors">{t('By authors')}</a>
-                </li>
-                <li classList={{ selected: searchParams().by === 'title' }}>
-                  <a
-                    href="/topics?by=title"
-                    onClick={(ev) => {
-                      // just an example
-                      ev.preventDefault()
-                      changeSearchParam('by', 'title')
-                    }}
-                  >
-                    {t('By alphabet')}
-                  </a>
-                </li>
-                <li class="view-switcher__search">
-                  <a href="/topic/search">
-                    <Icon name="search" />
-                    {t('Search topic')}
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <Show
-            when={searchParams().by === 'title'}
-            fallback={() => (
-              <>
-                <For each={sortedTopics().slice(0, limit())}>
-                  {(topic) => (
-                    <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
-                  )}
-                </For>
-                <Show when={sortedTopics().length > limit()}>
-                  <div class="row">
-                    <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
-                      <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                        {t('Load more')}
-                      </button>
-                    </div>
-                  </div>
-                </Show>
-              </>
-            )}
-          >
             <For each={sortedKeys()}>
               {(letter) => (
                 <div class={clsx(styles.group, 'group')}>
@@ -142,8 +153,57 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
               )}
             </For>
           </Show>
-        </div>
+
-      </Show>
+          <Show when={searchResults().length > 1}>
+            <For each={searchResults().slice(0, limit())}>
+              {(topic) => (
+                <TopicCard
+                  topic={topic}
+                  compact={false}
+                  subscribed={subscribed(topic.slug)}
+                  showPublications={true}
+                />
+              )}
+            </For>
+          </Show>
+
+          <Show when={searchParams().by === 'authors'}>
+            <For each={sortedTopics().slice(0, limit())}>
+              {(topic) => (
+                <TopicCard
+                  topic={topic}
+                  compact={false}
+                  subscribed={subscribed(topic.slug)}
+                  showPublications={true}
+                />
+              )}
+            </For>
+          </Show>
+
+          <Show when={searchParams().by === 'shouts'}>
+            <For each={sortedTopics().slice(0, limit())}>
+              {(topic) => (
+                <TopicCard
+                  topic={topic}
+                  compact={false}
+                  subscribed={subscribed(topic.slug)}
+                  showPublications={true}
+                />
+              )}
+            </For>
+          </Show>
+
+          <Show when={sortedTopics().length > limit()}>
+            <div class="row">
+              <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
+                <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
+                  {t('Load more')}
+                </button>
+              </div>
+            </div>
+          </Show>
+        </Show>
+      </div>
     </div>
   )
 }

src/components/Views/Home.tsx

@@ -11,7 +11,6 @@ import RowShort from '../Feed/RowShort'
 import Slider from '../Feed/Slider'
 import Group from '../Feed/Group'
 import type { Shout, Topic } from '../../graphql/types.gen'
-import { Icon } from '../_shared/Icon'
 import { t } from '../../utils/intl'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'

src/components/Views/Search.tsx

@@ -4,6 +4,7 @@ import type { Shout } from '../../graphql/types.gen'
 import { ArticleCard } from '../Feed/Card'
 import { t } from '../../utils/intl'
 import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
+import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { useRouter } from '../../stores/router'
 
 type SearchPageSearchParams = {
@@ -15,31 +16,49 @@ type Props = {
   results: Shout[]
 }
 
+const LOAD_MORE_PAGE_SIZE = 50
+
 export const SearchView = (props: Props) => {
   const { sortedArticles } = useArticlesStore({ shouts: props.results })
-  const [getQuery, setQuery] = createSignal(props.query)
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+  const [query, setQuery] = createSignal(props.query)
+  const [offset, setOffset] = createSignal(0)
 
   const { searchParams, handleClientRouteLinkClick } = useRouter<SearchPageSearchParams>()
-
+  let searchEl: HTMLInputElement
-  const handleQueryChange = (ev) => {
+  const handleQueryChange = (_ev) => {
-    setQuery(ev.target.value)
+    setQuery(searchEl.value)
   }
 
-  const handleSubmit = (_ev) => {
+  const loadMore = async () => {
-    // TODO page
+    saveScrollPosition()
-    // TODO sort
+    const { hasMore } = await loadShouts({
-    loadShouts({ filters: { title: getQuery(), body: getQuery() }, limit: 50 })
+      filters: {
+        title: query(),
+        body: query()
+      },
+      offset: offset(),
+      limit: LOAD_MORE_PAGE_SIZE
+    })
+    setIsLoadMoreButtonVisible(hasMore)
+    setOffset(offset() + LOAD_MORE_PAGE_SIZE)
+    restoreScrollPosition()
   }
 
   return (
     <div class="search-page wide-container">
       <form action="/search" class="search-form row">
         <div class="col-sm-9">
-          {/*FIXME t*/}
+          <input
-          <input type="search" name="q" onChange={handleQueryChange} placeholder="Введите текст..." />
+            type="search"
+            name="q"
+            ref={searchEl}
+            onInput={handleQueryChange}
+            placeholder={t('Enter text') + '...'}
+          />
         </div>
         <div class="col-sm-3">
-          <button class="button" type="submit" onClick={handleSubmit}>
+          <button class="button" type="submit" onClick={loadMore}>
             {t('Search')}
           </button>
         </div>
@@ -51,14 +70,18 @@ export const SearchView = (props: Props) => {
             selected: searchParams().by === 'relevance'
           }}
         >
-          <a href="?by=relevance">{t('By relevance')}</a>
+          <a href="?by=relevance" onClick={handleClientRouteLinkClick}>
+            {t('By relevance')}
+          </a>
         </li>
         <li
           classList={{
             selected: searchParams().by === 'rating'
           }}
         >
-          <a href="?by=rating">{t('Top rated')}</a>
+          <a href="?by=rating" onClick={handleClientRouteLinkClick}>
+            {t('Top rated')}
+          </a>
         </li>
       </ul>
 
@@ -83,9 +106,13 @@ export const SearchView = (props: Props) => {
           </div>
         </div>
 
-        <h3>{t('Topics')}</h3>
+        <Show when={isLoadMoreButtonVisible()}>
-
+          <p class="load-more-container">
-        <h3>{t('Authors')}</h3>
+            <button class="button" onClick={loadMore}>
+              {t('Load more')}
+            </button>
+          </p>
+        </Show>
       </Show>
     </div>
   )

src/locales/ru.json

@@ -176,5 +176,6 @@
   "Video": "Видео",
   "Literature": "Литература",
   "We can't find you, check email or": "Не можем вас найти, проверьте адрес электронной почты или",
-  "register": "зарегистрируйтесь"
+  "register": "зарегистрируйтесь",
+  "Enter text": "Введите текст"
 }

src/styles/AllTopics.module.scss

@@ -27,6 +27,11 @@
 
   .container {
     width: auto;
+
+    .search-input {
+      display: inline-block;
+      width: 100px !important;
+    }
   }
 }