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

# Conflicts: # src/components/Views/Search.tsx
2022-11-18 03:45:44 +01:00 · 2022-11-18 03:45:44 +01:00 · e6ca25fffa
commit e6ca25fffa
parent 46b4ecc7ea e39414d975
8 changed files with 184 additions and 105 deletions
--- a/src/components/Author/Card.tsx
+++ b/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'
--- a/src/components/Topic/Card.tsx
+++ b/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={
--- a/src/components/Views/AllAuthors.tsx
+++ b/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) {
-        // name === null for new users
-        return acc
-      }
-
-      const letter = author.name[0].toUpperCase()
-      if (!acc[letter]) {
-        acc[letter] = []
-      }
-
+      let letter = author.name.trim().split(' ').pop().at(0).toUpperCase()
+      if (!/[А-я]/i.test(letter) && locale() === 'ru') letter = '@'
+      if (!acc[letter]) acc[letter] = []
      acc[letter].push(author)
-
      return acc
    }, {} as { [letter: string]: Author[] })
  })
--- a/src/components/Views/AllTopics.tsx
+++ b/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()
-      if (!acc[letter]) {
-        acc[letter] = []
-      }
-
+      let letter = topic.title[0].toUpperCase()
+      if (!/[А-я]/i.test(letter) && locale() === 'ru') 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([])

-  return (
-    <div class={clsx(styles.allTopicsPage, 'container')}>
-      <Show when={sortedTopics().length > 0}>
-        <div class="shift-content">
+      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' || !searchParams().by }}>
+          <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"
-                    onClick={(ev) => {
-                      // just an example
-                      ev.preventDefault()
-                      changeSearchParam('by', 'title')
-                    }}
-                  >
-                    {t('By alphabet')}
-                  </a>
+            <a href="/topics?by=title">{t('By alphabet')}</a>
          </li>
-                <li class="view-switcher__search">
-                  <a href="/topic/search">
+          <li class="search-switcher">
            <Icon name="search" />
-                    {t('Search topic')}
-                  </a>
+            <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')}>
+      <AllTopicsHead />

-          <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>
-              </>
-            )}
-          >
+      <div class="shift-content">
+        <Show when={sortedTopics().length > 0 || searchResults().length > 0}>
+          <Show when={searchParams().by === 'title'}>
            <For each={sortedKeys()}>
              {(letter) => (
                <div class={clsx(styles.group, 'group')}>
@ -142,8 +153,57 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
              )}
            </For>
          </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>
  )
 }
--- a/src/components/Views/Home.tsx
+++ b/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'
--- a/src/components/Views/Search.tsx
+++ b/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>()
-
-  const handleQueryChange = (ev) => {
-    setQuery(ev.target.value)
+  let searchEl: HTMLInputElement
+  const handleQueryChange = (_ev) => {
+    setQuery(searchEl.value)
  }

-  const handleSubmit = (_ev) => {
-    // TODO page
-    // TODO sort
-    loadShouts({ filters: { title: getQuery(), body: getQuery() }, limit: 50 })
+  const loadMore = async () => {
+    saveScrollPosition()
+    const { hasMore } = await loadShouts({
+      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 type="search" name="q" onChange={handleQueryChange} placeholder="Введите текст..." />
+          <input
+            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>
-
-        <h3>{t('Authors')}</h3>
+        <Show when={isLoadMoreButtonVisible()}>
+          <p class="load-more-container">
+            <button class="button" onClick={loadMore}>
+              {t('Load more')}
+            </button>
+          </p>
+        </Show>
      </Show>
    </div>
  )
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -176,5 +176,6 @@
  "Video": "Видео",
  "Literature": "Литература",
  "We can't find you, check email or": "Не можем вас найти, проверьте адрес электронной почты или",
-  "register": "зарегистрируйтесь"
+  "register": "зарегистрируйтесь",
+  "Enter text": "Введите текст"
 }
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@ -27,6 +27,11 @@

  .container {
    width: auto;
+
+    .search-input {
+      display: inline-block;
+      width: 100px !important;
+    }
  }
 }