From a3f63e0da0832f252e87282ed8737174fd86f930 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Sun, 27 Nov 2022 20:02:04 +0300 Subject: [PATCH] slider-as-wrapper --- src/components/Article/Comment.tsx | 20 ++- src/components/Article/FullArticle.tsx | 27 ++-- src/components/Author/Card.tsx | 5 +- src/components/Author/Userpic.tsx | 1 + src/components/Feed/Card.module.scss | 5 + src/components/Pages/LayoutShoutsPage.tsx | 19 ++- src/components/Views/AllAuthors.tsx | 133 +++++++++---------- src/components/Views/Home.tsx | 35 ++++- src/components/Views/Topic.tsx | 40 ++++-- src/components/{Feed => _shared}/Slider.scss | 0 src/components/{Feed => _shared}/Slider.tsx | 24 +--- src/locales/ru.json | 1 + 12 files changed, 185 insertions(+), 125 deletions(-) rename src/components/{Feed => _shared}/Slider.scss (100%) rename src/components/{Feed => _shared}/Slider.tsx (76%) diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index 7db7a643..6b498458 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -11,6 +11,7 @@ import { deleteReaction } from '../../stores/zine/reactions' import { formatDate } from '../../utils' import { SharePopup } from './SharePopup' import stylesHeader from '../Nav/Header.module.scss' +import Userpic from '../Author/Userpic' export default (props: { level?: number @@ -40,16 +41,11 @@ export default (props: { - - @{(comment()?.createdBy || { name: 'anonymous' }).name} - -
- - - #{(comment()?.shout || { title: 'Lorem ipsum titled' }).title} - -
+
+ + + {comment()?.shout.title || ''} +
} > @@ -141,9 +137,9 @@ export default (props: {
- +
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 45b2ac0c..2438fae5 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -14,6 +14,7 @@ import { clsx } from 'clsx' import { CommentsTree } from './CommentsTree' import { useSession } from '../../context/session' import VideoPlayer from './VideoPlayer' +import Slider from '../_shared/Slider' interface ArticleProps { article: Shout @@ -29,13 +30,7 @@ interface MediaItem { const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => { return ( <> - - - - } - > + {t('Cannot show this media type')}}>
{props.media.title}
@@ -116,7 +111,21 @@ export const FullArticle = (props: ArticleProps) => {
- + + + {(m: MediaItem) => ( + <> + {m.title} +
+ + )} + + + } + >
{(m: MediaItem) => ( @@ -148,7 +157,7 @@ export const FullArticle = (props: ArticleProps) => {
- {props.article.stat?.viewed} + {props.article.stat?.viewed}
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx index e0987d1a..732d8f10 100644 --- a/src/components/Author/Card.tsx +++ b/src/components/Author/Card.tsx @@ -33,9 +33,6 @@ 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 = createMemo(() => { - return props.caption || props.author.bio || t('Our regular contributor') - }) const name = () => { return props.author.name === 'Дискурс' && locale() !== 'ru' @@ -76,7 +73,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
diff --git a/src/components/Author/Userpic.tsx b/src/components/Author/Userpic.tsx index 77bf37b9..6e16438c 100644 --- a/src/components/Author/Userpic.tsx +++ b/src/components/Author/Userpic.tsx @@ -51,6 +51,7 @@ export default (props: UserpicProps) => { src={props.user.userpic || '/icons/user-default.svg'} alt={props.user.name || ''} classList={{ anonymous: !props.user.userpic }} + loading="lazy" /> } > diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss index 84e2de74..3ef3717e 100644 --- a/src/components/Feed/Card.module.scss +++ b/src/components/Feed/Card.module.scss @@ -20,6 +20,11 @@ a { border: none; } + + .icon { + height: 1.2em; + width: 1.2em; + } } .shoutCardWithBorder { diff --git a/src/components/Pages/LayoutShoutsPage.tsx b/src/components/Pages/LayoutShoutsPage.tsx index af77341c..b1afd31f 100644 --- a/src/components/Pages/LayoutShoutsPage.tsx +++ b/src/components/Pages/LayoutShoutsPage.tsx @@ -13,9 +13,10 @@ import { t } from '../../utils/intl' import { Row3 } from '../Feed/Row3' import { Row2 } from '../Feed/Row2' import { Beside } from '../Feed/Beside' -import Slider from '../Feed/Slider' +import Slider from '../_shared/Slider' import { Row1 } from '../Feed/Row1' import styles from '../../styles/Topic.module.scss' +import { ArticleCard } from '../Feed/Card' export const PRERENDERED_ARTICLES_COUNT = 21 const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3 @@ -106,7 +107,21 @@ export const LayoutShoutsPage = (props: PageProps) => { - + + + {(a: Shout) => ( + + )} + + { +export const AllAuthorsView = (props: AllAuthorsViewProps) => { const [limit, setLimit] = createSignal(PAGE_SIZE) - const { searchParams, changeSearchParam } = useRouter() + const { searchParams, changeSearchParam } = useRouter() + const [filterResults, setFilterResults] = createSignal([]) const { sortedAuthors } = useAuthorsStore({ authors: props.authors, - sortBy: searchParams().by || 'name' + sortBy: (searchParams().by || 'shouts') as AuthorsSortBy }) const { session } = useSession() @@ -41,13 +42,11 @@ export const AllAuthorsView = (props: Props) => { } }) createEffect(() => { - setAuthorsSort(searchParams().by || 'shouts') - setFilteredAuthors(sortedAuthors()) + setAuthorsSort((searchParams().by || 'shouts') as AuthorsSortBy) + setFilterResults(sortedAuthors()) setLimit(PAGE_SIZE) }) - const subscribed = (s) => Boolean(session()?.news?.authors && session()?.news?.authors?.includes(s || '')) - const byLetter = createMemo<{ [letter: string]: Author[] }>(() => { return sortedAuthors().reduce((acc, author) => { let letter = author.name.trim().split(' ').pop().at(0).toUpperCase() @@ -64,6 +63,39 @@ export const AllAuthorsView = (props: Props) => { return keys }) + const subscribed = (s) => Boolean(session()?.news?.authors && session()?.news?.authors?.includes(s || '')) + + // eslint-disable-next-line sonarjs/cognitive-complexity + const filterAuthors = (value) => { + /* very stupid filter by string algorithm with no deps */ + let q = value.toLowerCase() + if (q.length > 0) { + setFilterResults([]) + if (locale() === 'ru') q = translit(q, 'ru') + const aaa: Author[] = sortedAuthors() + sortedAuthors().forEach((author) => { + let flag = false + author.slug.split('-').forEach((w) => { + if (w.startsWith(q)) flag = true + }) + + if (!flag) { + let wrds: string = author.name.toLowerCase() + if (locale() === 'ru') wrds = translit(wrds, 'ru') + wrds.split(' ').forEach((w: string) => { + if (w.startsWith(q)) flag = true + }) + } + + if (!flag && aaa.includes(author)) { + const idx = aaa.indexOf(author) + aaa.splice(idx, 1) + } + }) + setFilterResults(aaa) + } + } + const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE) const AllAuthorsHead = () => (
@@ -76,54 +108,24 @@ export const AllAuthorsView = (props: Props) => { {t('By shouts')}
  • - {t('By rating')} + {t('By popularity')}
    • -
  • +
  • {t('By name')}
    • -
  • +
    • - +
    ) - const [filteredAuthors, setFilteredAuthors] = createSignal([]) - // eslint-disable-next-line sonarjs/cognitive-complexity - const filterAuthors = (value) => { - /* very stupid search algorithm with no deps */ - let q = value.toLowerCase() - if (q.length > 0) { - setFilteredAuthors([]) - if (locale() === 'ru') q = translit(q, 'ru') - const aaa: Author[] = sortedAuthors() - sortedAuthors().forEach((a) => { - let flag = false - a.slug.split('-').forEach((w) => { - if (w.startsWith(q)) flag = true - }) - if (!flag) { - let wrds: string = a.name.toLowerCase() - if (locale() === 'ru') wrds = translit(wrds, 'ru') - wrds.split(' ').forEach((w: string) => { - if (w.startsWith(q)) flag = true - }) - } - - if (!flag && aaa.includes(a)) { - const idx = aaa.indexOf(a) - aaa.splice(idx, 1) - } - }) - setFilteredAuthors(aaa) - } - } return (
    - 0 || filteredAuthors().length > 0}> + 0}>
    @@ -132,7 +134,7 @@ export const AllAuthorsView = (props: Props) => {