diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx index 2f18162a..8067171e 100644 --- a/src/components/Topic/Card.tsx +++ b/src/components/Topic/Card.tsx @@ -120,15 +120,6 @@ export const TopicCard = (props: TopicProps) => { {/* */} {/**/} - - {/* - - {subscribers().toString() + ' ' + t('follower') + plural( - subscribers(), - locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's'] - )} - -*/} @@ -136,7 +127,6 @@ export const TopicCard = (props: TopicProps) => { class={styles.controlContainer} classList={{ 'col-md-3': !props.compact && !props.subscribeButtonBottom }} > - {} { const byLetter = createMemo<{ [letter: string]: Author[] }>(() => { return sortedAuthors().reduce((acc, author) => { let letter = author.name.trim().split(' ').pop().at(0).toUpperCase() - if (!/[а-яА-Я]/i.test(letter) && locale() === 'ru') letter = '#' + if (!/[а-яА-Я]/i.test(letter) && locale() === 'ru') letter = '@' if (!acc[letter]) acc[letter] = [] acc[letter].push(author) return acc diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx index f4c3224a..4e2fe920 100644 --- a/src/components/Views/AllTopics.tsx +++ b/src/components/Views/AllTopics.tsx @@ -1,14 +1,15 @@ -import { createEffect, createMemo, createSignal, For, Show } from 'solid-js' +import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js' import type { Topic } from '../../graphql/types.gen' import { Icon } from '../_shared/Icon' 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' | '' @@ -55,66 +56,77 @@ 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([]) + const searchTopics = (ev) => { + /* 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') + let ttt: Topic[] = [] + sortedTopics().forEach((t: Topic) => { + let flag = false + t.slug.split('-').forEach((w) => { + if (w.startsWith(q)) flag = true + }) + + if (!flag) { + let wrds: string = t.title.toLowerCase() + if (locale() === 'ru') wrds = translit(wrds, 'ru') + wrds.split(' ').forEach((w: string) => { + if (w.startsWith(q)) flag = true + }) + } + + if (flag && !ttt.includes(t)) ttt.push(t) + }) + + setSearchResults((sr: Topic[]) => [...sr, ...ttt]) + changeSearchParam('by', '') + } + } + createEffect(() => {}) + const AllTopicsHead = () => ( +
+
+

{t('Topics')}

+

{t('Subscribe what you like to tune your personal feed')}

+ + +
+
+ ) return (
- 0}> -
- - - ( - <> - - {(topic) => ( - - )} - - limit()}> -
-
- -
-
-
- - )} - > +
+ 0 || searchResults().length > 0}> + {(letter) => (
@@ -140,8 +152,57 @@ export const AllTopicsView = (props: AllTopicsViewProps) => { )} -
-
+ + 1}> + + {(topic) => ( + + )} + + + + + + {(topic) => ( + + )} + + + + + + {(topic) => ( + + )} + + + + limit()}> +
+
+ +
+
+
+
+
) } diff --git a/src/styles/AllTopics.module.scss b/src/styles/AllTopics.module.scss index 976dec91..da4a4bb2 100644 --- 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; + } } }