From 9b4cede871bfec53bb42a32598f44a65cd1d7f5e Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Sun, 27 Nov 2022 11:15:03 +0300 Subject: [PATCH] beautiful all-topics and all-authors, some icons --- public/icons/arrow-circle-left.svg | 3 ++ public/icons/arrow-circle-right.svg | 3 ++ public/icons/bookmark-x.svg | 5 ++- public/icons/bookmark.svg | 5 ++- src/components/Article/Comment.tsx | 2 +- src/components/Article/CommentsTree.tsx | 54 ++++++++++++++++++------- src/components/Article/FullArticle.tsx | 2 +- src/components/Feed/Beside.tsx | 4 +- src/components/Nav/Header.module.scss | 5 ++- src/components/Nav/Header.tsx | 2 +- src/components/Views/AllAuthors.tsx | 51 ++++++++--------------- src/components/Views/AllTopics.tsx | 50 +++++++++-------------- src/graphql/query/reactions-load-by.ts | 6 +-- src/styles/Article.module.scss | 2 + 14 files changed, 102 insertions(+), 92 deletions(-) create mode 100644 public/icons/arrow-circle-left.svg create mode 100644 public/icons/arrow-circle-right.svg diff --git a/public/icons/arrow-circle-left.svg b/public/icons/arrow-circle-left.svg new file mode 100644 index 00000000..d5454bb1 --- /dev/null +++ b/public/icons/arrow-circle-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/arrow-circle-right.svg b/public/icons/arrow-circle-right.svg new file mode 100644 index 00000000..6d6cc2b3 --- /dev/null +++ b/public/icons/arrow-circle-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/bookmark-x.svg b/public/icons/bookmark-x.svg index 611542d8..e55f6b2d 100644 --- a/public/icons/bookmark-x.svg +++ b/public/icons/bookmark-x.svg @@ -1,3 +1,4 @@ - - + + diff --git a/public/icons/bookmark.svg b/public/icons/bookmark.svg index 9930c548..54831593 100644 --- a/public/icons/bookmark.svg +++ b/public/icons/bookmark.svg @@ -1,3 +1,4 @@ - - + + diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index a9771fc0..7db7a643 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -122,7 +122,7 @@ export default (props: { containerCssClass={stylesHeader.control} trigger={ } diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index f240110c..c65dd059 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -5,20 +5,28 @@ import { t } from '../../utils/intl' import { showModal } from '../../stores/ui' import styles from '../../styles/Article.module.scss' import { useReactionsStore } from '../../stores/zine/reactions' -import { createEffect, createMemo, createSignal, onMount, Suspense } from 'solid-js' +import { createMemo, createSignal, onMount } from 'solid-js' import type { Reaction } from '../../graphql/types.gen' import { clsx } from 'clsx' +import { byCreated, byStat } from '../../utils/sortby' +import { Loading } from '../Loading' const ARTICLE_COMMENTS_PAGE_SIZE = 50 const MAX_COMMENT_LEVEL = 6 export const CommentsTree = (props: { shout: string; reactions?: Reaction[] }) => { const [getCommentsPage, setCommentsPage] = createSignal(0) + const [commentsOrder, setCommentsOrder] = createSignal<'rating' | 'createdAt'>('createdAt') const [isCommentsLoading, setIsCommentsLoading] = createSignal(false) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const { session } = useSession() const { sortedReactions, loadReactionsBy } = useReactionsStore({ reactions: props.reactions }) - const reactions = createMemo(() => sortedReactions()) // .filter(r => r.shout.slug === props.shout) ) + const reactions = createMemo(() => + sortedReactions() + .sort(commentsOrder() === 'rating' ? byStat('rating') : byCreated) + .filter((r) => r.shout.slug === props.shout) + ) + const loadMore = async () => { try { const page = getCommentsPage() @@ -44,29 +52,38 @@ export const CommentsTree = (props: { shout: string; reactions?: Reaction[] }) = onMount(async () => await loadMore()) return ( <> - + }>

{t('Comments')} {reactions().length.toString() || ''}

-
-
- - -
-
- {(reaction: Reaction) => ( } + fallback={ +
+
+ + +
+
+ } >
{t('To leave a comment you please')} diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index f5b91f0b..063d8bf2 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -99,7 +99,7 @@ export const FullArticle = (props: ArticleProps) => { setIsSharePopupVisible(isVisible) }} containerCssClass={stylesHeader.control} - trigger={} + trigger={} />
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index e97842fb..f9a98079 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -37,14 +37,14 @@ export const Beside = (props: BesideProps) => { {t('All authors')} - + {t('All topics')} - +
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 41ad97ec..5f98f2b2 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -12,7 +12,10 @@ padding: 0 divide($container-padding-x, 2); } } - + .icon { + height: 1.2em; + width: 1.2em; + } a:hover { .icon { filter: invert(1); diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index 875a83bd..7eb8356d 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -127,7 +127,7 @@ export const Header = (props: Props) => { setIsSharePopupVisible(isVisible) }} containerCssClass={styles.control} - trigger={} + trigger={} /> diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx index 25fbdcf5..6052f171 100644 --- a/src/components/Views/AllAuthors.tsx +++ b/src/components/Views/AllAuthors.tsx @@ -41,7 +41,8 @@ export const AllAuthorsView = (props: Props) => { } }) createEffect(() => { - setAuthorsSort(searchParams().by || 'name') + setAuthorsSort(searchParams().by || 'shouts') + setFilteredAuthors(sortedAuthors()) setLimit(PAGE_SIZE) }) @@ -81,23 +82,23 @@ export const AllAuthorsView = (props: Props) => { {t('By name')}
  • - +
  • + +
    • ) - const [searchResults, setSearchResults] = createSignal([]) + const [filteredAuthors, setFilteredAuthors] = createSignal([]) // eslint-disable-next-line sonarjs/cognitive-complexity - const searchAuthors = (value) => { + const filterAuthors = (value) => { /* very stupid search algorithm with no deps */ let q = value.toLowerCase() if (q.length > 0) { - console.debug(q) - setSearchResults([]) - + setFilteredAuthors([]) if (locale() === 'ru') q = translit(q, 'ru') - const aaa: Author[] = [] + const aaa: Author[] = sortedAuthors() sortedAuthors().forEach((a) => { let flag = false a.slug.split('-').forEach((w) => { @@ -112,16 +113,17 @@ export const AllAuthorsView = (props: Props) => { }) } - if (flag && !aaa.includes(a)) aaa.push(a) + if (!flag && aaa.includes(a)) { + const idx = aaa.indexOf(a) + aaa.splice(idx, 1) + } }) - - setSearchResults((sr: Author[]) => [...sr, ...aaa]) - changeSearchParam('by', '') + setFilteredAuthors(aaa) } } return (
    - 0 || searchResults().length > 0}> + 0 || filteredAuthors().length > 0}>
    @@ -174,29 +176,10 @@ export const AllAuthorsView = (props: Props) => { - 0}> - - {(author) => ( - <> - - - - )} - - -
    - + {(author) => ( <> {
    - limit()}> + limit() && searchParams().by !== 'name'}>
    @@ -127,7 +130,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
    - 0 || searchResults().length > 0}> + 0}>
      @@ -173,21 +176,8 @@ export const AllTopicsView = (props: AllTopicsViewProps) => { - 1}> - - {(topic) => ( - - )} - - - - + {(topic) => ( <> { - limit()}> + limit() && searchParams().by !== 'title'}>