diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index d31672d8..fa71d5c0 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -291,6 +291,7 @@ "Profile": "Profile", "Publications": "Publications", "PublicationsWithCount": "{count, plural, =0 {no publications} one {{count} publication} other {{count} publications}}", + "FollowersWithCount": "{count, plural, =0 {no followers} one {{count} follower} other {{count} followers}}", "Publish Album": "Publish Album", "Publish Settings": "Publish Settings", "Published": "Published", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index e2c08172..dea97099 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -309,9 +309,10 @@ "Publication settings": "Настройки публикации", "Publications": "Публикации", "PublicationsWithCount": "{count, plural, =0 {нет публикаций} one {{count} публикация} few {{count} публикации} other {{count} публикаций}}", + "FollowersWithCount": "{count, plural, =0 {нет подписчиков} one {{count} подписчик} few {{count} подписчика} other {{count} подписчиков}}", + "Publish": "Опубликовать", "Publish Album": "Опубликовать альбом", "Publish Settings": "Настройки публикации", - "Publish": "Опубликовать", "Published": "Опубликованные", "Punchline": "Панчлайн", "Quit": "Выйти", diff --git a/src/components/App.tsx b/src/components/App.tsx index b024f194..c595ec15 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -94,10 +94,6 @@ export const App = (props: Props) => { const is404 = createMemo(() => props.is404) createEffect(() => { - if (!searchParams().m) { - hideModal() - } - const modal = MODALS[searchParams().m] if (modal) { showModal(modal) diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx index 54b6b570..c8b49fdd 100644 --- a/src/components/Article/Comment/Comment.tsx +++ b/src/components/Article/Comment/Comment.tsx @@ -46,14 +46,13 @@ export const Comment = (props: Props) => { const canEdit = createMemo( () => Boolean(author()?.id) && - (props.comment?.created_by?.id === author().id || session()?.user?.roles.includes('editor')), + (props.comment?.created_by?.slug === author().slug || session()?.user?.roles.includes('editor')), ) - const comment = createMemo(() => props.comment) - const body = createMemo(() => (comment().body || '').trim()) + const body = createMemo(() => (props.comment.body || '').trim()) const remove = async () => { - if (comment()?.id) { + if (props.comment?.id) { try { const isConfirmed = await showConfirm({ confirmBody: t('Are you sure you want to delete this comment?'), @@ -63,7 +62,7 @@ export const Comment = (props: Props) => { }) if (isConfirmed) { - await deleteReaction(comment().id) + await deleteReaction(props.comment.id) await showSnackbar({ body: t('Comment successfully deleted') }) } @@ -113,8 +112,10 @@ export const Comment = (props: Props) => { return (
  • props.lastSeen })} + id={`comment_${props.comment.id}`} + class={clsx(styles.comment, props.class, { + [styles.isNew]: props.comment?.created_at > props.lastSeen, + })} >
    @@ -123,21 +124,21 @@ export const Comment = (props: Props) => { fallback={
    - {comment()?.shout.title || ''} + {props.comment?.shout.title || ''}
    } >
    - +
    @@ -148,23 +149,23 @@ export const Comment = (props: Props) => {
    - {comment().shout.title} + {props.comment.shout.title}
    - - + +
    }> {t('Loading')}

    }> import('../Editor/SimplifiedEditor')) -type CommentsOrder = 'createdAt' | 'rating' | 'newOnly' - -const sortCommentsByRating = (a: Reaction, b: Reaction): -1 | 0 | 1 => { - if (a.reply_to && b.reply_to) { - return 0 - } - - const x = a.stat?.rating || 0 - const y = b.stat?.rating || 0 - - if (x > y) { - return 1 - } - - if (x < y) { - return -1 - } - - return 0 -} - type Props = { articleAuthors: Author[] shoutSlug: string @@ -45,7 +24,8 @@ type Props = { export const CommentsTree = (props: Props) => { const { author } = useSession() const { t } = useLocalize() - const [commentsOrder, setCommentsOrder] = createSignal('createdAt') + const [commentsOrder, setCommentsOrder] = createSignal(ReactionSort.Newest) + const [onlyNew, setOnlyNew] = createSignal(false) const [newReactions, setNewReactions] = createSignal([]) const [clearEditor, setClearEditor] = createSignal(false) const [clickedReplyId, setClickedReplyId] = createSignal() @@ -59,16 +39,13 @@ export const CommentsTree = (props: Props) => { let newSortedComments = [...comments()] newSortedComments = newSortedComments.sort(byCreated) - if (commentsOrder() === 'newOnly') { - return newReactions().reverse() + if (onlyNew()) { + return newReactions().sort(byCreated).reverse() } - if (commentsOrder() === 'rating') { - newSortedComments = newSortedComments.sort(sortCommentsByRating) + if (commentsOrder() === ReactionSort.Like) { + newSortedComments = newSortedComments.sort(byStat('rating')) } - - newSortedComments.reverse() - return newSortedComments }) @@ -91,7 +68,7 @@ export const CommentsTree = (props: Props) => { setCookie() } }) - const handleSubmitComment = async (value) => { + const handleSubmitComment = async (value: string) => { try { await createReaction({ kind: ReactionKind.Comment, @@ -117,31 +94,25 @@ export const CommentsTree = (props: Props) => { 0}>
      0}> -
    • -
      • -
    • +
      • -
    • +
      • diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index c079ad38..024cf1a0 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -58,9 +58,8 @@ export type ArticlePageSearchParams = { const scrollTo = (el: HTMLElement) => { const { top } = el.getBoundingClientRect() - window.scrollTo({ - top: top + window.scrollY - DEFAULT_HEADER_OFFSET, + top: top - DEFAULT_HEADER_OFFSET, left: 0, behavior: 'smooth', }) @@ -152,22 +151,16 @@ export const FullArticle = (props: Props) => { current: HTMLDivElement } = { current: null } - const scrollToComments = () => { - scrollTo(commentsRef.current) - } - createEffect(() => { if (props.scrollToComments) { - scrollToComments() + scrollTo(commentsRef.current) } }) createEffect(() => { if (searchParams()?.scrollTo === 'comments' && commentsRef.current) { - scrollToComments() - changeSearchParams({ - scrollTo: null, - }) + requestAnimationFrame(() => scrollTo(commentsRef.current)) + changeSearchParams({ scrollTo: null }) } }) @@ -177,10 +170,8 @@ export const FullArticle = (props: Props) => { `[id='comment_${searchParams().commentId}']`, ) - changeSearchParams({ commentId: null }) - if (commentElement) { - scrollTo(commentElement) + requestAnimationFrame(() => scrollTo(commentElement)) } } }) @@ -488,7 +479,11 @@ export const FullArticle = (props: Props) => { {(triggerRef: (el) => void) => ( -
      +
      scrollTo(commentsRef.current)} + > {
      - 0}> -
      - {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })} -
      -       + +
      + 0}> +
      {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
      +       + 0}> +
      {t('FollowersWithCount', { count: props.author.stat?.followers ?? 0 })}
      +       +
      +
      diff --git a/src/components/AuthorsList/AuthorsList.module.scss b/src/components/AuthorsList/AuthorsList.module.scss new file mode 100644 index 00000000..bad088be --- /dev/null +++ b/src/components/AuthorsList/AuthorsList.module.scss @@ -0,0 +1,26 @@ +.AuthorsList { + .action { + display: flex; + align-items: center; + justify-content: center; + min-height: 8rem; + } + + .loading { + @include font-size(1.4rem); + + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + width: 100%; + flex-direction: row; + opacity: 0.5; + + .icon { + position: relative; + width: 18px; + height: 18px; + } + } +} diff --git a/src/components/AuthorsList/AuthorsList.tsx b/src/components/AuthorsList/AuthorsList.tsx new file mode 100644 index 00000000..ccde9a92 --- /dev/null +++ b/src/components/AuthorsList/AuthorsList.tsx @@ -0,0 +1,111 @@ +import { clsx } from 'clsx' +import { For, Show, createEffect, createSignal, on, onMount } from 'solid-js' +import { useFollowing } from '../../context/following' +import { useLocalize } from '../../context/localize' +import { apiClient } from '../../graphql/client/core' +import { Author } from '../../graphql/schema/core.gen' +import { setAuthorsByFollowers, setAuthorsByShouts, useAuthorsStore } from '../../stores/zine/authors' +import { AuthorBadge } from '../Author/AuthorBadge' +import { InlineLoader } from '../InlineLoader' +import { Button } from '../_shared/Button' +import styles from './AuthorsList.module.scss' + +type Props = { + class?: string + query: 'followers' | 'shouts' + searchQuery?: string + allAuthorsLength?: number +} + +const PAGE_SIZE = 20 + +export const AuthorsList = (props: Props) => { + const { t } = useLocalize() + const { isOwnerSubscribed } = useFollowing() + const { authorsByShouts, authorsByFollowers } = useAuthorsStore() + const [loading, setLoading] = createSignal(false) + const [currentPage, setCurrentPage] = createSignal({ shouts: 0, followers: 0 }) + const [allLoaded, setAllLoaded] = createSignal(false) + + const fetchAuthors = async (queryType: Props['query'], page: number) => { + setLoading(true) + const offset = PAGE_SIZE * page + const result = await apiClient.loadAuthorsBy({ + by: { order: queryType }, + limit: PAGE_SIZE, + offset, + }) + + if (queryType === 'shouts') { + setAuthorsByShouts((prev) => [...prev, ...result]) + } else { + setAuthorsByFollowers((prev) => [...prev, ...result]) + } + setLoading(false) + } + + const loadMoreAuthors = () => { + const nextPage = currentPage()[props.query] + 1 + fetchAuthors(props.query, nextPage).then(() => + setCurrentPage({ ...currentPage(), [props.query]: nextPage }), + ) + } + + createEffect( + on( + () => props.query, + (query) => { + const authorsList = query === 'shouts' ? authorsByShouts() : authorsByFollowers() + if (authorsList.length === 0 && currentPage()[query] === 0) { + setCurrentPage((prev) => ({ ...prev, [query]: 0 })) + fetchAuthors(query, 0).then(() => setCurrentPage((prev) => ({ ...prev, [query]: 1 }))) + } + }, + ), + ) + + const authorsList = () => (props.query === 'shouts' ? authorsByShouts() : authorsByFollowers()) + + // TODO: do it with backend + // createEffect(() => { + // if (props.searchQuery) { + // // search logic + // } + // }) + + createEffect(() => { + setAllLoaded(props.allAuthorsLength === authorsList.length) + }) + + return ( +
      + + {(author) => ( +
      +
      + +
      +
      + )} +       +
      +
      +
      + 0 && !allLoaded()}> +
      +
      +
      +
      + ) +} diff --git a/src/components/AuthorsList/index.ts b/src/components/AuthorsList/index.ts new file mode 100644 index 00000000..4187ebae --- /dev/null +++ b/src/components/AuthorsList/index.ts @@ -0,0 +1 @@ +export { AuthorsList } from './AuthorsList' diff --git a/src/components/InlineLoader/InlineLoader.module.scss b/src/components/InlineLoader/InlineLoader.module.scss new file mode 100644 index 00000000..dc90c7bd --- /dev/null +++ b/src/components/InlineLoader/InlineLoader.module.scss @@ -0,0 +1,18 @@ +.InlineLoader { + @include font-size(1.4rem); + + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + width: 100%; + flex-direction: row; + opacity: 0.5; + + .icon { + position: relative; + width: 18px; + height: 18px; + } + +} diff --git a/src/components/InlineLoader/InlineLoader.tsx b/src/components/InlineLoader/InlineLoader.tsx new file mode 100644 index 00000000..6f36ff4e --- /dev/null +++ b/src/components/InlineLoader/InlineLoader.tsx @@ -0,0 +1,20 @@ +import { clsx } from 'clsx' +import { useLocalize } from '../../context/localize' +import { Loading } from '../_shared/Loading' +import styles from './InlineLoader.module.scss' + +type Props = { + class?: string +} + +export const InlineLoader = (props: Props) => { + const { t } = useLocalize() + return ( +
      +
      + +
      +
      {t('Loading')}
      +
      + ) +} diff --git a/src/components/InlineLoader/index.ts b/src/components/InlineLoader/index.ts new file mode 100644 index 00000000..c94c5a50 --- /dev/null +++ b/src/components/InlineLoader/index.ts @@ -0,0 +1 @@ +export { InlineLoader } from './InlineLoader' diff --git a/src/components/Nav/AuthModal/RegisterForm.tsx b/src/components/Nav/AuthModal/RegisterForm.tsx index a2dd8373..b40cfa8b 100644 --- a/src/components/Nav/AuthModal/RegisterForm.tsx +++ b/src/components/Nav/AuthModal/RegisterForm.tsx @@ -53,7 +53,6 @@ export const RegisterForm = () => { const handleSubmit = async (event: Event) => { event.preventDefault() - if (passwordError()) { setValidationErrors((errors) => ({ ...errors, password: passwordError() })) } else { @@ -102,7 +101,7 @@ export const RegisterForm = () => { redirect_uri: window.location.origin, } const { errors } = await signUp(opts) - if (errors) return + if (errors.length > 0) return setIsSuccess(true) } catch (error) { console.error(error) @@ -134,7 +133,6 @@ export const RegisterForm = () => { ), })) break - case 'verified': setValidationErrors((prev) => ({ email: ( diff --git a/src/components/Nav/AuthModal/SendResetLinkForm.tsx b/src/components/Nav/AuthModal/SendResetLinkForm.tsx index b1880d9d..f429a256 100644 --- a/src/components/Nav/AuthModal/SendResetLinkForm.tsx +++ b/src/components/Nav/AuthModal/SendResetLinkForm.tsx @@ -96,7 +96,6 @@ export const SendResetLinkForm = () => { placeholder={t('Email')} onInput={(event) => handleEmailInput(event.currentTarget.value)} /> -
      diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index c0d2d466..dfbb2e71 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -142,10 +142,8 @@ export const Header = (props: Props) => { } onMount(async () => { - if (window.location.pathname === '/' || window.location.pathname === '') { - const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT }) - setRandomTopics(topics) - } + const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT }) + setRandomTopics(topics) }) const handleToggleMenuByLink = (event: MouseEvent, route: keyof typeof ROUTES) => { diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx index a4ccd348..9f7f712e 100644 --- a/src/components/Topic/TopicBadge/TopicBadge.tsx +++ b/src/components/Topic/TopicBadge/TopicBadge.tsx @@ -75,7 +75,7 @@ export const TopicBadge = (props: Props) => { when={props.topic.body} fallback={
      - {t('PublicationsWithCount', { count: props.topic.stat.shouts ?? 0 })} + {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
      } > diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx deleted file mode 100644 index 6275621f..00000000 --- a/src/components/Views/AllAuthors.tsx +++ /dev/null @@ -1,234 +0,0 @@ -import type { Author } from '../../graphql/schema/core.gen' - -import { Meta } from '@solidjs/meta' -import { clsx } from 'clsx' -import { For, Show, createEffect, createMemo, createSignal } from 'solid-js' - -import { useFollowing } from '../../context/following' -import { useLocalize } from '../../context/localize' -import { useRouter } from '../../stores/router' -import { loadAuthors, setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors' -import { dummyFilter } from '../../utils/dummyFilter' -import { getImageUrl } from '../../utils/getImageUrl' -import { scrollHandler } from '../../utils/scroll' -import { authorLetterReduce, translateAuthor } from '../../utils/translate' -import { AuthorBadge } from '../Author/AuthorBadge' -import { Loading } from '../_shared/Loading' -import { SearchField } from '../_shared/SearchField' - -import styles from './AllAuthors.module.scss' - -type AllAuthorsPageSearchParams = { - by: '' | 'name' | 'shouts' | 'followers' -} - -type Props = { - authors: Author[] - isLoaded: boolean -} - -const PAGE_SIZE = 20 - -export const AllAuthorsView = (props: Props) => { - const { t, lang } = useLocalize() - const ALPHABET = - lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ@'] - const [offsetByShouts, setOffsetByShouts] = createSignal(0) - const [offsetByFollowers, setOffsetByFollowers] = createSignal(0) - const { searchParams, changeSearchParams } = useRouter() - const { sortedAuthors } = useAuthorsStore({ - authors: props.authors, - sortBy: searchParams().by || 'name', - }) - - const [searchQuery, setSearchQuery] = createSignal('') - const offset = searchParams()?.by === 'shouts' ? offsetByShouts : offsetByFollowers - createEffect(() => { - let by = searchParams().by - if (by) { - setAuthorsSort(by) - } else { - by = 'name' - changeSearchParams({ by }) - } - }) - - const loadMoreByShouts = async () => { - await loadAuthors({ by: { order: 'shouts_stat' }, limit: PAGE_SIZE, offset: offsetByShouts() }) - setOffsetByShouts((o) => o + PAGE_SIZE) - } - const loadMoreByFollowers = async () => { - await loadAuthors({ by: { order: 'followers_stat' }, limit: PAGE_SIZE, offset: offsetByFollowers() }) - setOffsetByFollowers((o) => o + PAGE_SIZE) - } - - const isStatsLoaded = createMemo(() => sortedAuthors()?.some((author) => author.stat)) - - createEffect(async () => { - if (!isStatsLoaded()) { - await loadMoreByShouts() - await loadMoreByFollowers() - } - }) - - const showMore = async () => - await { - shouts: loadMoreByShouts, - followers: loadMoreByFollowers, - }[searchParams().by]() - - const byLetter = createMemo<{ [letter: string]: Author[] }>(() => { - return sortedAuthors().reduce( - (acc, author) => authorLetterReduce(acc, author, lang()), - {} as { [letter: string]: Author[] }, - ) - }) - - const { isOwnerSubscribed } = useFollowing() - - const sortedKeys = createMemo(() => { - const keys = Object.keys(byLetter()) - keys.sort() - keys.push(keys.shift()) - return keys - }) - - const filteredAuthors = createMemo(() => { - return dummyFilter(sortedAuthors(), searchQuery(), lang()) - }) - - const ogImage = getImageUrl('production/image/logo_image.png') - const ogTitle = t('Authors') - const description = t('List of authors of the open editorial community') - - return ( -
      - - - - - - - - - - - }> -
      -
      -
      -

      {t('Authors')}

      -

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

      - - - -
      -
      - - 0}> - -
      -
      - -
      -
      - - - {(letter) => ( -
      -

      {letter}

      -
      -
      -
      -
      - - {(author) => ( -
      -
      - {translateAuthor(author, lang())} - - {author.stat.shouts} - -
      -
      - )} -       -
      -
      -
      -
      -
      - )} -       -       - - - - {(author) => ( -
      -
      - -
      -
      - )} -       -       - - PAGE_SIZE + offset() && searchParams().by !== 'name'}> -
      -
      - -
      -
      -       -       -
      -       -
      - ) -} diff --git a/src/components/Views/AllAuthors.module.scss b/src/components/Views/AllAuthors/AllAuthors.module.scss similarity index 99% rename from src/components/Views/AllAuthors.module.scss rename to src/components/Views/AllAuthors/AllAuthors.module.scss index 94d4302c..63188b2b 100644 --- a/src/components/Views/AllAuthors.module.scss +++ b/src/components/Views/AllAuthors/AllAuthors.module.scss @@ -81,3 +81,5 @@ overflow-x: auto; } } + + diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx new file mode 100644 index 00000000..3934a73d --- /dev/null +++ b/src/components/Views/AllAuthors/AllAuthors.tsx @@ -0,0 +1,177 @@ +import type { Author } from '../../../graphql/schema/core.gen' + +import { Meta } from '@solidjs/meta' +import { clsx } from 'clsx' +import { For, Show, createEffect, createMemo, createSignal } from 'solid-js' + +import { useLocalize } from '../../../context/localize' +import { useRouter } from '../../../stores/router' +import { setAuthorsSort, useAuthorsStore } from '../../../stores/zine/authors' +import { getImageUrl } from '../../../utils/getImageUrl' +import { scrollHandler } from '../../../utils/scroll' +import { authorLetterReduce, translateAuthor } from '../../../utils/translate' + +import { AuthorsList } from '../../AuthorsList' +import { Loading } from '../../_shared/Loading' +import { SearchField } from '../../_shared/SearchField' + +import styles from './AllAuthors.module.scss' + +type AllAuthorsPageSearchParams = { + by: '' | 'name' | 'shouts' | 'followers' +} + +type Props = { + authors: Author[] + isLoaded: boolean +} + +export const AllAuthors = (props: Props) => { + const { t, lang } = useLocalize() + const [searchQuery, setSearchQuery] = createSignal('') + const ALPHABET = + lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ@'] + const { searchParams, changeSearchParams } = useRouter() + const { sortedAuthors } = useAuthorsStore({ + authors: props.authors, + sortBy: searchParams().by || 'name', + }) + + const filteredAuthors = createMemo(() => { + const query = searchQuery().toLowerCase() + return sortedAuthors().filter((author) => { + return author.name.toLowerCase().includes(query) // Предполагаем, что у автора есть свойство name + }) + }) + + const byLetterFiltered = createMemo<{ [letter: string]: Author[] }>(() => { + return filteredAuthors().reduce( + (acc, author) => authorLetterReduce(acc, author, lang()), + {} as { [letter: string]: Author[] }, + ) + }) + + const sortedKeys = createMemo(() => { + const keys = Object.keys(byLetterFiltered()) + keys.sort() + keys.push(keys.shift()) + return keys + }) + + const ogImage = getImageUrl('production/image/logo_image.png') + const ogTitle = t('Authors') + const description = t('List of authors of the open editorial community') + + return ( +
      + + + + + + + + + + + }> +
      +
      +
      +

      {t('Authors')}

      +

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

      + +
      +
      + + +
      +
      + +
      +
      + + {(letter) => ( +
      +

      {letter}

      +
      +
      +
      +
      + + {(author) => ( +
      +
      + {translateAuthor(author, lang())} + + {author.stat.shouts} + +
      +
      + )} +       +
      +
      +
      +
      +
      + )} +       +       + + + +
      +       +
      + ) +} diff --git a/src/components/Views/AllAuthors/index.ts b/src/components/Views/AllAuthors/index.ts new file mode 100644 index 00000000..13e92537 --- /dev/null +++ b/src/components/Views/AllAuthors/index.ts @@ -0,0 +1 @@ +export { AllAuthors } from './AllAuthors' diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 238b46c0..0437d119 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -23,6 +23,7 @@ import { Row2 } from '../../Feed/Row2' import { Row3 } from '../../Feed/Row3' import { Loading } from '../../_shared/Loading' +import { byCreated } from '../../../utils/sortby' import stylesArticle from '../../Article/Article.module.scss' import styles from './Author.module.scss' @@ -58,9 +59,9 @@ export const AuthorView = (props: Props) => { } }) - createEffect(() => { + createEffect(async () => { if (author()?.id && !author().stat) { - const a = loadAuthor({ slug: '', author_id: author().id }) + const a = await loadAuthor({ slug: '', author_id: author().id }) console.debug('[AuthorView] loaded author:', a) } }) @@ -71,13 +72,7 @@ export const AuthorView = (props: Props) => { const fetchData = async (slug) => { try { const [subscriptionsResult, followersResult] = await Promise.all([ - (async () => { - const [getAuthors, getTopics] = await Promise.all([ - apiClient.getAuthorFollowingAuthors({ slug }), - apiClient.getAuthorFollowingTopics({ slug }), - ]) - return { authors: getAuthors, topics: getTopics } - })(), + apiClient.getAuthorFollows({ slug }), apiClient.getAuthorFollowers({ slug }), ]) @@ -181,7 +176,7 @@ export const AuthorView = (props: Props) => { {t('Comments')} - {author().stat.commented} + {author().stat.comments}
    • @@ -237,7 +232,7 @@ export const AuthorView = (props: Props) => {
        - + {(comment) => }
      diff --git a/src/components/Views/DraftsView/DraftsView.tsx b/src/components/Views/DraftsView/DraftsView.tsx index 17a425f1..193b4bc4 100644 --- a/src/components/Views/DraftsView/DraftsView.tsx +++ b/src/components/Views/DraftsView/DraftsView.tsx @@ -18,7 +18,7 @@ export const DraftsView = () => { const loadDrafts = async () => { if (apiClient.private) { const loadedDrafts = await apiClient.getDrafts() - setDrafts(loadedDrafts || []) + setDrafts(loadedDrafts.reverse() || []) } } diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx index a1010684..aeee25b9 100644 --- a/src/components/Views/Feed/Feed.tsx +++ b/src/components/Views/Feed/Feed.tsx @@ -14,6 +14,7 @@ import { resetSortedArticles, useArticlesStore } from '../../../stores/zine/arti import { useTopAuthorsStore } from '../../../stores/zine/topAuthors' import { useTopicsStore } from '../../../stores/zine/topics' import { getImageUrl } from '../../../utils/getImageUrl' +import { byCreated } from '../../../utils/sortby' import { CommentDate } from '../../Article/CommentDate' import { getShareUrl } from '../../Article/SharePopup' import { AuthorBadge } from '../../Author/AuthorBadge' @@ -48,23 +49,11 @@ type VisibilityItem = { } type FeedSearchParams = { - by: 'publish_date' | 'likes_stat' | 'rating' | 'last_comment' + by: 'publish_date' | 'likes' | 'comments' period: FeedPeriod visibility: VisibilityMode } -const getOrderBy = (by: FeedSearchParams['by']) => { - if (by === 'likes_stat' || by === 'rating') { - return 'likes_stat' - } - - if (by === 'last_comment') { - return 'last_comment' - } - - return '' -} - const getFromDate = (period: FeedPeriod): number => { const now = new Date() let d: Date = now @@ -145,8 +134,8 @@ export const FeedView = (props: Props) => { } const loadTopComments = async () => { - const comments = await loadReactionsBy({ by: { comment: true }, limit: 5 }) - setTopComments(comments) + const comments = await loadReactionsBy({ by: { comment: true }, limit: 50 }) + setTopComments(comments.sort(byCreated).reverse()) } onMount(() => { @@ -178,9 +167,8 @@ export const FeedView = (props: Props) => { offset: sortedArticles().length, } - const orderBy = getOrderBy(searchParams().by) - if (orderBy) { - options.order_by = orderBy + if (searchParams()?.by) { + options.order_by = searchParams().by } const visibilityMode = searchParams().visibility @@ -222,7 +210,7 @@ export const FeedView = (props: Props) => { const ogTitle = t('Feed') const [shareData, setShareData] = createSignal() - const handleShare = (shared) => { + const handleShare = (shared: Shout | undefined) => { showModal('share') setShareData(shared) } @@ -260,19 +248,19 @@ export const FeedView = (props: Props) => { {/*
      • */}
    • - changeSearchParams({ by: 'rating' })}> + changeSearchParams({ by: 'likes' })}> {t('Top rated')}
    • - changeSearchParams({ by: 'last_comment' })}> + changeSearchParams({ by: 'comments' })}> {t('Most commented')}
      • diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index 200434b5..4e4dbce3 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -69,10 +69,12 @@ export const HomeView = (props: Props) => { } const result = await apiClient.getRandomTopicShouts(RANDOM_TOPIC_SHOUTS_COUNT) - if (!result) console.warn('[apiClient.getRandomTopicShouts] failed') + if (!result || result.error) console.warn('[apiClient.getRandomTopicShouts] failed') batch(() => { - if (result?.topic) setRandomTopic(result.topic) - if (result?.shouts) setRandomTopicArticles(result.shouts) + if (!result?.error) { + if (result?.topic) setRandomTopic(result.topic) + if (result?.shouts) setRandomTopicArticles(result.shouts) + } }) }) diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx index 8c342356..6e1b4d8d 100644 --- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx +++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx @@ -29,12 +29,9 @@ export const ProfileSubscriptions = () => { const fetchSubscriptions = async () => { try { const slug = author()?.slug - const [getAuthors, getTopics] = await Promise.all([ - apiClient.getAuthorFollowingAuthors({ slug }), - apiClient.getAuthorFollowingTopics({ slug }), - ]) - setFollowing([...getAuthors, ...getTopics]) - setFiltered([...getAuthors, ...getTopics]) + const authorFollows = await apiClient.getAuthorFollows({ slug }) + setFollowing([...authorFollows['authors']]) + setFiltered([...authorFollows['authors'], ...authorFollows['topics']]) } catch (error) { console.error('[fetchSubscriptions] :', error) throw error diff --git a/src/components/_shared/InviteMembers/InviteMembers.module.scss b/src/components/_shared/InviteMembers/InviteMembers.module.scss index 8710a65a..0e9f8964 100644 --- a/src/components/_shared/InviteMembers/InviteMembers.module.scss +++ b/src/components/_shared/InviteMembers/InviteMembers.module.scss @@ -50,24 +50,6 @@ } } - .loading { - @include font-size(1.4rem); - - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - width: 100%; - flex-direction: row; - opacity: 0.5; - - .icon { - position: relative; - width: 18px; - height: 18px; - } - } - .teaser { min-height: 300px; display: flex; diff --git a/src/components/_shared/InviteMembers/InviteMembers.tsx b/src/components/_shared/InviteMembers/InviteMembers.tsx index 0458c7a5..3eca7cdc 100644 --- a/src/components/_shared/InviteMembers/InviteMembers.tsx +++ b/src/components/_shared/InviteMembers/InviteMembers.tsx @@ -12,6 +12,7 @@ import { Button } from '../Button' import { DropdownSelect } from '../DropdownSelect' import { Loading } from '../Loading' +import { InlineLoader } from '../../InlineLoader' import styles from './InviteMembers.module.scss' type InviteAuthor = Author & { selected: boolean } @@ -62,7 +63,7 @@ export const InviteMembers = (props: Props) => { return authors?.slice(start, end) } - const [pages, _infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher) + const [pages, setEl, { end }] = createInfiniteScroll(fetcher) createEffect( on( @@ -158,11 +159,8 @@ export const InviteMembers = (props: Props) => { )} -
      -
      - -
      -
      {t('Loading')}
      +
      void}> +
      diff --git a/src/context/following.tsx b/src/context/following.tsx index b7a5ab0d..f3208ca9 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -2,20 +2,14 @@ import { Accessor, JSX, createContext, createEffect, createSignal, useContext } import { createStore } from 'solid-js/store' import { apiClient } from '../graphql/client/core' -import { Author, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen' +import { AuthorFollows, FollowingEntity } from '../graphql/schema/core.gen' import { useSession } from './session' -type SubscriptionsData = { - topics?: Topic[] - authors?: Author[] - communities?: Community[] -} - interface FollowingContextType { loading: Accessor - subscriptions: SubscriptionsData - setSubscriptions: (subscriptions: SubscriptionsData) => void + subscriptions: AuthorFollows + setSubscriptions: (subscriptions: AuthorFollows) => void setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void loadSubscriptions: () => void follow: (what: FollowingEntity, slug: string) => Promise @@ -29,7 +23,7 @@ export function useFollowing() { return useContext(FollowingContext) } -const EMPTY_SUBSCRIPTIONS = { +const EMPTY_SUBSCRIPTIONS: AuthorFollows = { topics: [], authors: [], communities: [], @@ -37,15 +31,15 @@ const EMPTY_SUBSCRIPTIONS = { export const FollowingProvider = (props: { children: JSX.Element }) => { const [loading, setLoading] = createSignal(false) - const [subscriptions, setSubscriptions] = createStore(EMPTY_SUBSCRIPTIONS) - const { author } = useSession() + const [subscriptions, setSubscriptions] = createStore(EMPTY_SUBSCRIPTIONS) + const { author, session } = useSession() const fetchData = async () => { setLoading(true) try { if (apiClient.private) { console.debug('[context.following] fetching subs data...') - const result = await apiClient.getMySubscriptions() + const result = await apiClient.getAuthorFollows({ user: session()?.user.id }) setSubscriptions(result || EMPTY_SUBSCRIPTIONS) console.info('[context.following] subs:', subscriptions) } diff --git a/src/context/session.tsx b/src/context/session.tsx index 8da23006..e6086097 100644 --- a/src/context/session.tsx +++ b/src/context/session.tsx @@ -92,33 +92,43 @@ export const SessionProvider = (props: { const authorizer = createMemo(() => new Authorizer(config())) const [oauthState, setOauthState] = createSignal() - // handle callback's redirect_uri - createEffect(() => { - // oauth - const state = searchParams()?.state - if (state) { - setOauthState((_s) => state) - const scope = searchParams()?.scope - ? searchParams()?.scope?.toString().split(' ') - : ['openid', 'profile', 'email'] - if (scope) console.info(`[context.session] scope: ${scope}`) - const url = searchParams()?.redirect_uri || searchParams()?.redirectURL || window.location.href - setConfig((c: ConfigType) => ({ ...c, redirectURL: url.split('?')[0] })) - changeSearchParams({ mode: 'confirm-email', modal: 'auth' }, true) - } - }) + // handle auth state callback + createEffect( + on( + () => searchParams()?.state, + (state) => { + if (state) { + setOauthState((_s) => state) + const scope = searchParams()?.scope + ? searchParams()?.scope?.toString().split(' ') + : ['openid', 'profile', 'email'] + if (scope) console.info(`[context.session] scope: ${scope}`) + const url = searchParams()?.redirect_uri || searchParams()?.redirectURL || window.location.href + setConfig((c: ConfigType) => ({ ...c, redirectURL: url.split('?')[0] })) + changeSearchParams({ mode: 'confirm-email', m: 'auth' }, true) + } + }, + { defer: true }, + ), + ) - // handle email confirm + // handle token confirm createEffect(() => { const token = searchParams()?.token const access_token = searchParams()?.access_token if (access_token) changeSearchParams({ mode: 'confirm-email', - modal: 'auth', + m: 'auth', access_token, }) - else if (token) changeSearchParams({ mode: 'change-password', modal: 'auth', token }) + else if (token) { + changeSearchParams({ + mode: 'change-password', + m: 'auth', + token, + }) + } }) // load @@ -203,7 +213,6 @@ export const SessionProvider = (props: { if (session()) { const token = session()?.access_token if (token) { - // console.log('[context.session] token observer got token', token) if (!inboxClient.private) { apiClient.connect(token) notifierClient.connect(token) @@ -329,7 +338,6 @@ export const SessionProvider = (props: { const response = await authorizer().graphqlQuery({ query: `query { is_registered(email: "${email}") { message }}`, }) - // console.log(response) return response?.data?.is_registered?.message } catch (error) { console.warn(error) diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts index a52c270e..e02a6a0e 100644 --- a/src/graphql/client/core.ts +++ b/src/graphql/client/core.ts @@ -1,7 +1,7 @@ import type { Author, + AuthorFollows, CommonResult, - Community, FollowingEntity, LoadShoutsOptions, MutationDelete_ShoutArgs, @@ -37,16 +37,14 @@ import shoutsLoadSearch from '../query/core/articles-load-search' import loadShoutsUnrated from '../query/core/articles-load-unrated' import authorBy from '../query/core/author-by' import authorFollowers from '../query/core/author-followers' +import authorFollows from '../query/core/author-follows' import authorId from '../query/core/author-id' import authorsAll from '../query/core/authors-all' -import authorFollowedAuthors from '../query/core/authors-followed-by' import authorsLoadBy from '../query/core/authors-load-by' -import authorFollowedCommunities from '../query/core/communities-followed-by' import mySubscriptions from '../query/core/my-followed' import reactionsLoadBy from '../query/core/reactions-load-by' import topicBySlug from '../query/core/topic-by-slug' import topicsAll from '../query/core/topics-all' -import authorFollowedTopics from '../query/core/topics-followed-by' import topicsRandomQuery from '../query/core/topics-random' const publicGraphQLClient = createGraphQLClient('core') @@ -86,7 +84,7 @@ export const apiClient = { return response.data.get_topics_random }, - getRandomTopicShouts: async (limit: number): Promise<{ topic: Topic; shouts: Shout[] }> => { + getRandomTopicShouts: async (limit: number): Promise => { const resp = await publicGraphQLClient.query(articlesLoadRandomTopic, { limit }).toPromise() if (!resp.data) console.error('[graphql.client.core] load_shouts_random_topic', resp) return resp.data.load_shouts_random_topic @@ -96,6 +94,7 @@ export const apiClient = { const response = await apiClient.private.mutation(followMutation, { what, slug }).toPromise() return response.data.follow }, + unfollow: async ({ what, slug }: { what: FollowingEntity; slug: string }) => { const response = await apiClient.private.mutation(unfollowMutation, { what, slug }).toPromise() return response.data.unfollow @@ -107,48 +106,53 @@ export const apiClient = { return response.data.get_topics_all }, + getAllAuthors: async () => { const response = await publicGraphQLClient.query(authorsAll, {}).toPromise() if (!response.data) console.error('[graphql.client.core] getAllAuthors', response) return response.data.get_authors_all }, + getAuthor: async (params: { slug?: string; author_id?: number }): Promise => { const response = await publicGraphQLClient.query(authorBy, params).toPromise() return response.data.get_author }, + getAuthorId: async (params: { user: string }): Promise => { const response = await publicGraphQLClient.query(authorId, params).toPromise() return response.data.get_author_id }, + getAuthorFollowers: async ({ slug }: { slug: string }): Promise => { const response = await publicGraphQLClient.query(authorFollowers, { slug }).toPromise() return response.data.get_author_followers }, - getAuthorFollowingAuthors: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(authorFollowedAuthors, { slug }).toPromise() - return response.data.get_author_followed - }, - getAuthorFollowingTopics: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(authorFollowedTopics, { slug }).toPromise() - return response.data.get_topics_by_author - }, - getAuthorFollowingCommunities: async ({ slug }: { slug: string }): Promise => { - const response = await publicGraphQLClient.query(authorFollowedCommunities, { slug }).toPromise() - return response.data.get_communities_by_author + + getAuthorFollows: async (params: { + slug?: string + author_id?: number + user?: string + }): Promise => { + const response = await publicGraphQLClient.query(authorFollows, params).toPromise() + return response.data.get_author_follows }, + updateAuthor: async (input: ProfileInput) => { const response = await apiClient.private.mutation(updateAuthor, { profile: input }).toPromise() return response.data.update_author }, + getTopic: async ({ slug }: { slug: string }): Promise => { const response = await publicGraphQLClient.query(topicBySlug, { slug }).toPromise() return response.data.get_topic }, + createArticle: async ({ article }: { article: ShoutInput }): Promise => { const response = await apiClient.private.mutation(createArticle, { shout: article }).toPromise() return response.data.create_shout.shout }, + updateArticle: async ({ shout_id, shout_input, @@ -164,10 +168,12 @@ export const apiClient = { console.debug('[graphql.client.core] updateArticle:', response.data) return response.data.update_shout.shout }, + deleteShout: async (params: MutationDelete_ShoutArgs): Promise => { const response = await apiClient.private.mutation(deleteShout, params).toPromise() console.debug('[graphql.client.core] deleteShout:', response) }, + getDrafts: async (): Promise => { const response = await apiClient.private.query(draftsLoad, {}).toPromise() console.debug('[graphql.client.core] getDrafts:', response) @@ -231,9 +237,4 @@ export const apiClient = { .toPromise() return resp.data.load_reactions_by }, - getMySubscriptions: async (): Promise => { - const resp = await apiClient.private.query(mySubscriptions, {}).toPromise() - - return resp.data.get_my_followed - }, } diff --git a/src/graphql/query/core/articles-load-random-topic.ts b/src/graphql/query/core/articles-load-random-topic.ts index 099895a6..c7ee8dc8 100644 --- a/src/graphql/query/core/articles-load-random-topic.ts +++ b/src/graphql/query/core/articles-load-random-topic.ts @@ -53,7 +53,6 @@ export default gql` featured_at stat { viewed - rating commented } diff --git a/src/graphql/query/core/author-by.ts b/src/graphql/query/core/author-by.ts index d40173c1..3f5e0f95 100644 --- a/src/graphql/query/core/author-by.ts +++ b/src/graphql/query/core/author-by.ts @@ -15,10 +15,10 @@ export default gql` last_seen stat { shouts + authors followers - followings rating - commented + comments } } } diff --git a/src/graphql/query/core/author-follows-authors.ts b/src/graphql/query/core/author-follows-authors.ts new file mode 100644 index 00000000..cb624a4a --- /dev/null +++ b/src/graphql/query/core/author-follows-authors.ts @@ -0,0 +1,19 @@ +import { gql } from '@urql/core' + +export default gql` + query GetAuthorFollowsAuthors($slug: String, $user: String, $author_id: Int) { + get_author_follows_authors(slug: $slug, user: $user, author_id: $author_id) { + id + slug + name + pic + bio + created_at + stat { + shouts + authors + followers + } + } + } +` diff --git a/src/graphql/query/core/author-follows-topics.ts b/src/graphql/query/core/author-follows-topics.ts new file mode 100644 index 00000000..efd9a1dd --- /dev/null +++ b/src/graphql/query/core/author-follows-topics.ts @@ -0,0 +1,16 @@ +import { gql } from '@urql/core' + +export default gql` + query GetAuthorFollowsTopics($slug: String, $user: String, $author_id: Int) { + get_author_follows_topics(slug: $slug, user: $user, author_id: $author_id) { + id + slug + title + stat { + shouts + authors + followers + } + } + } +` diff --git a/src/graphql/query/core/author-follows.ts b/src/graphql/query/core/author-follows.ts new file mode 100644 index 00000000..9d46ea2c --- /dev/null +++ b/src/graphql/query/core/author-follows.ts @@ -0,0 +1,37 @@ +import { gql } from '@urql/core' + +export default gql` + query GetAuthorFollows($slug: String, $user: String, $author_id: Int) { + get_author_follows(slug: $slug, user: $user, author_id: $author_id) { + authors { + id + slug + name + pic + bio + created_at + stat { + shouts + authors + followers + } + } + topics { + id + slug + title + stat { + shouts + authors + followers + } + } + #communities { + # id + # slug + # name + # pic + #} + } + } +` diff --git a/src/graphql/query/core/author-id.ts b/src/graphql/query/core/author-id.ts index 38596c1c..8c621479 100644 --- a/src/graphql/query/core/author-id.ts +++ b/src/graphql/query/core/author-id.ts @@ -14,10 +14,10 @@ export default gql` last_seen stat { shouts - comments: commented + authors followers - followings rating + comments rating_shouts rating_comments } diff --git a/src/graphql/query/core/authors-followed-by.ts b/src/graphql/query/core/authors-followed-by.ts deleted file mode 100644 index 06f6f5e9..00000000 --- a/src/graphql/query/core/authors-followed-by.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { gql } from '@urql/core' - -export default gql` - query AuthorsFollowedByQuery($slug: String, $user: String, $author_id: Int) { - get_author_followed(slug: $slug, user: $user, author_id: $author_id) { - id - slug - name - pic - bio - created_at - stat { - shouts - } - } - } -` diff --git a/src/graphql/query/core/authors-load-by.ts b/src/graphql/query/core/authors-load-by.ts index 427889c4..e806919e 100644 --- a/src/graphql/query/core/authors-load-by.ts +++ b/src/graphql/query/core/authors-load-by.ts @@ -11,10 +11,10 @@ export default gql` created_at stat { shouts - comments: commented + authors followers - followings rating + comments rating_shouts rating_comments } diff --git a/src/pages/allAuthors.page.tsx b/src/pages/allAuthors.page.tsx index 87a427b2..7079e8af 100644 --- a/src/pages/allAuthors.page.tsx +++ b/src/pages/allAuthors.page.tsx @@ -1,8 +1,8 @@ import type { PageProps } from './types' -import { createSignal, onMount } from 'solid-js' +import { createEffect, createSignal, onMount } from 'solid-js' -import { AllAuthorsView } from '../components/Views/AllAuthors' +import { AllAuthors } from '../components/Views/AllAuthors/' import { PageLayout } from '../components/_shared/PageLayout' import { useLocalize } from '../context/localize' import { loadAllAuthors } from '../stores/zine/authors' @@ -23,7 +23,7 @@ export const AllAuthorsPage = (props: PageProps) => { return ( - + ) } diff --git a/src/pages/types.ts b/src/pages/types.ts index 05fd3f61..96701c6c 100644 --- a/src/pages/types.ts +++ b/src/pages/types.ts @@ -25,6 +25,7 @@ export type PageProps = { export type RootSearchParams = { m: string // modal lang: string + token: string } export type LayoutType = 'article' | 'audio' | 'video' | 'image' | 'literature' diff --git a/src/stores/zine/authors.ts b/src/stores/zine/authors.ts index db3f0627..131b70c6 100644 --- a/src/stores/zine/authors.ts +++ b/src/stores/zine/authors.ts @@ -3,9 +3,9 @@ import { createSignal } from 'solid-js' import { apiClient } from '../../graphql/client/core' import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen' -import { byStat } from '../../utils/sortby' export type AuthorsSortBy = 'shouts' | 'name' | 'followers' +type SortedAuthorsSetter = (prev: Author[]) => Author[] const [sortAllBy, setSortAllBy] = createSignal('name') @@ -13,21 +13,14 @@ export const setAuthorsSort = (sortBy: AuthorsSortBy) => setSortAllBy(sortBy) const [authorEntities, setAuthorEntities] = createSignal<{ [authorSlug: string]: Author }>({}) const [authorsByTopic, setAuthorsByTopic] = createSignal<{ [topicSlug: string]: Author[] }>({}) +const [authorsByShouts, setSortedAuthorsByShout] = createSignal([]) +const [authorsByFollowers, setSortedAuthorsByFollowers] = createSignal([]) + +export const setAuthorsByShouts = (authors: SortedAuthorsSetter) => setSortedAuthorsByShout(authors) +export const setAuthorsByFollowers = (authors: SortedAuthorsSetter) => setSortedAuthorsByFollowers(authors) const sortedAuthors = createLazyMemo(() => { - const authors = Object.values(authorEntities()) - switch (sortAllBy()) { - case 'followers': { - return authors.sort(byStat('followers')) - } - case 'shouts': { - return authors.sort(byStat('shouts')) - } - case 'name': { - return authors.sort((a, b) => a.name.localeCompare(b.name)) - } - } - return authors + return Object.values(authorEntities()) }) export const addAuthors = (authors: Author[]) => { @@ -108,5 +101,5 @@ export const useAuthorsStore = (initialState: InitialState = {}) => { } addAuthors([...(initialState.authors || [])]) - return { authorEntities, sortedAuthors, authorsByTopic } + return { authorEntities, sortedAuthors, authorsByTopic, authorsByShouts, authorsByFollowers } } diff --git a/src/styles/app.scss b/src/styles/app.scss index ad7a13ef..d563840e 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -204,7 +204,7 @@ a:hover, a:visited, a:link, .link { - border-bottom: 2px solid rgb(0 0 0 / 30%); + border-bottom: 2px solid var(--link-color); text-decoration: none; cursor: pointer; }