diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index d4a43dd1..00000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,4 +0,0 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -npm run pre-commit diff --git a/codegen.yml b/codegen.yml index 4daa6b5c..eb4811ba 100644 --- a/codegen.yml +++ b/codegen.yml @@ -25,33 +25,6 @@ generates: useTypeImports: true outputPath: './src/graphql/types/core.gen.ts' # namingConvention: change-case#CamelCase # for generated types - - # Generate types for notifier - src/graphql/schema/notifier.gen.ts: - schema: 'https://notifier.discours.io' - plugins: - - 'typescript' - - 'typescript-operations' - - 'typescript-urql' - config: - skipTypename: true - useTypeImports: true - outputPath: './src/graphql/types/notifier.gen.ts' - # namingConvention: change-case#CamelCase # for generated types - - # internal types for auth - # src/graphql/schema/auth.gen.ts: - # schema: 'https://auth.discours.io/graphql' - # plugins: - # - 'typescript' - # - 'typescript-operations' - # - 'typescript-urql' - # config: - # skipTypename: true - # useTypeImports: true - # outputPath: './src/graphql/types/auth.gen.ts' - # namingConvention: change-case#CamelCase # for generated types - hooks: afterAllFileWrite: - prettier --ignore-path .gitignore --write --plugin-search-dir=. src/graphql/schema/*.gen.ts diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 113182a4..5dfd02bb 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 716bf306..573b313c 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -136,7 +136,6 @@ "Each image must be no larger than 5 MB.": "Каждое изображение должно быть размером не больше 5 мб.", "Edit profile": "Редактировать профиль", "Edit": "Редактировать", - "Edited": "Отредактирован", "Editing": "Редактирование", "Editor": "Редактор", "Email": "Почта", @@ -309,9 +308,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 d6af579f..445d4944 100644 --- a/src/components/Article/Comment/Comment.tsx +++ b/src/components/Article/Comment/Comment.tsx @@ -38,17 +38,22 @@ export const Comment = (props: Props) => { const [loading, setLoading] = createSignal(false) const [editMode, setEditMode] = createSignal(false) const [clearEditor, setClearEditor] = createSignal(false) - const { author } = useSession() + const [editedBody, setEditedBody] = createSignal() + const { author, session } = useSession() const { createReaction, deleteReaction, updateReaction } = useReactions() const { showConfirm } = useConfirm() const { showSnackbar } = useSnackbar() - const isCommentAuthor = createMemo(() => props.comment.created_by?.slug === author()?.slug) - const comment = createMemo(() => props.comment) - const body = createMemo(() => (comment().body || '').trim()) + const canEdit = createMemo( + () => + Boolean(author()?.id) && + (props.comment?.created_by?.slug === author().slug || session()?.user?.roles.includes('editor')), + ) + + const body = createMemo(() => (editedBody() ? editedBody().trim() : 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?'), @@ -58,7 +63,7 @@ export const Comment = (props: Props) => { }) if (isConfirmed) { - await deleteReaction(comment().id) + await deleteReaction(props.comment.id) await showSnackbar({ body: t('Comment successfully deleted') }) } @@ -93,11 +98,15 @@ export const Comment = (props: Props) => { const handleUpdate = async (value) => { setLoading(true) try { - await updateReaction(props.comment.id, { + const reaction = await updateReaction({ + id: props.comment.id, kind: ReactionKind.Comment, body: value, shout: props.comment.shout.id, }) + if (reaction) { + setEditedBody(value) + } setEditMode(false) setLoading(false) } catch (error) { @@ -107,9 +116,9 @@ export const Comment = (props: Props) => { return (
  • props.lastSeen, + [styles.isNew]: props.comment?.created_at > props.lastSeen, })} > @@ -119,21 +128,21 @@ export const Comment = (props: Props) => { fallback={
    - {comment()?.shout.title || ''} + {props.comment?.shout.title || ''}
    } >
    - +
    @@ -144,23 +153,23 @@ export const Comment = (props: Props) => {
    - {comment().shout.title} + {props.comment.shout.title}
    - - + +
    }> {t('Loading')}

    }> { {loading() ? t('Loading') : t('Reply')} - +
    ) } diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index 3057ffb6..60054831 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -4,8 +4,8 @@ import { For, Show, createMemo, createSignal, lazy, onMount } from 'solid-js' import { useLocalize } from '../../context/localize' import { useReactions } from '../../context/reactions' import { useSession } from '../../context/session' -import { Author, Reaction, ReactionKind } from '../../graphql/schema/core.gen' -import { byCreated } from '../../utils/sortby' +import { Author, Reaction, ReactionKind, ReactionSort } from '../../graphql/schema/core.gen' +import { byCreated, byStat } from '../../utils/sortby' import { Button } from '../_shared/Button' import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated' @@ -15,27 +15,6 @@ import styles from './Article.module.scss' const SimplifiedEditor = lazy(() => 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 ab14f1e6..f855f170 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', }) @@ -75,10 +74,17 @@ export const FullArticle = (props: Props) => { const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false) const [isActionPopupActive, setIsActionPopupActive] = createSignal(false) const { t, formatDate, lang } = useLocalize() - const { author, isAuthenticated, requireAuthentication } = useSession() + const { author, session, isAuthenticated, requireAuthentication } = useSession() - const formattedDate = createMemo(() => formatDate(new Date((props.article?.published_at || 0) * 1000))) - const canEdit = () => props.article.authors?.some((a) => Boolean(a) && a?.slug === author()?.slug) + const formattedDate = createMemo(() => formatDate(new Date(props.article.published_at * 1000))) + + const canEdit = createMemo( + () => + Boolean(author()?.id) && + (props.article?.authors?.some((a) => Boolean(a) && a?.id === author().id) || + props.article?.created_by?.id === author().id || + session()?.user?.roles.includes('editor')), + ) const mainTopic = createMemo(() => { const mainTopicSlug = props.article.topics.length > 0 ? props.article.main_topic : null @@ -145,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 }) } }) @@ -170,10 +170,8 @@ export const FullArticle = (props: Props) => { `[id='comment_${searchParams().commentId}']`, ) - changeSearchParams({ commentId: null }) - if (commentElement) { - scrollTo(commentElement) + requestAnimationFrame(() => scrollTo(commentElement)) } } }) @@ -466,7 +464,11 @@ export const FullArticle = (props: Props) => { {(triggerRef: (el) => void) => ( -
      +
      scrollTo(commentsRef.current)} + > { showModal('share')} onInviteClick={() => showModal('inviteMembers')} diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss index e78f10ca..8dc68f4b 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss +++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss @@ -58,6 +58,11 @@ } .bio { + @include font-size(1.2rem); + + display: flex; + flex-direction: row; + gap: 1rem; color: var(--black-400); font-weight: 500; } diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx index a3d7e74d..e0ef0334 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.tsx +++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx @@ -118,12 +118,17 @@ export const AuthorBadge = (props: Props) => {
      - 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/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx index 760ce1e3..70841971 100644 --- a/src/components/Feed/ArticleCard/ArticleCard.tsx +++ b/src/components/Feed/ArticleCard/ArticleCard.tsx @@ -106,7 +106,7 @@ const LAYOUT_ASPECT = { export const ArticleCard = (props: ArticleCardProps) => { const { t, lang, formatDate } = useLocalize() - const { author } = useSession() + const { author, session } = useSession() const { changeSearchParams } = useRouter() const [isActionPopupActive, setIsActionPopupActive] = createSignal(false) const [isCoverImageLoadError, setIsCoverImageLoadError] = createSignal(false) @@ -120,9 +120,13 @@ export const ArticleCard = (props: ArticleCardProps) => { props.article?.published_at ? formatDate(new Date(props.article.published_at * 1000)) : '', ) - const canEdit = () => - props.article.authors?.some((a) => a && a?.slug === author()?.slug) || - props.article.created_by?.id === author()?.id + const canEdit = createMemo( + () => + Boolean(author()?.id) && + (props.article?.authors?.some((a) => Boolean(a) && a?.id === author().id) || + props.article?.created_by?.id === author().id || + session()?.user?.roles.includes('editor')), + ) const scrollToComments = (event) => { event.preventDefault() @@ -376,7 +380,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
      props.onShare(props.article)} onInviteClick={props.onInvite} diff --git a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx index 2a3bb496..ce9990bb 100644 --- a/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx +++ b/src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx @@ -10,7 +10,7 @@ import { SoonChip } from '../../_shared/SoonChip' import styles from './FeedArticlePopup.module.scss' type Props = { - isOwner: boolean + canEdit: boolean onInviteClick: () => void onShareClick: () => void } & Omit @@ -41,7 +41,7 @@ export const FeedArticlePopup = (props: Props) => { {t('Share')} - +
      • - +
      • - {/**/} + {/**/} {/*
    • */} {/* { + 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 a21818b1..46d92ffa 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 d3583791..4b46f406 100644 --- a/src/components/Nav/AuthModal/SendResetLinkForm.tsx +++ b/src/components/Nav/AuthModal/SendResetLinkForm.tsx @@ -102,7 +102,6 @@ export const SendResetLinkForm = () => { placeholder={t('Email')} onChange={(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/NotificationsPanel/NotificationView/NotificationGroup.tsx b/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx index 9e931649..3b3d8462 100644 --- a/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx +++ b/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx @@ -4,7 +4,7 @@ import { For, Show } from 'solid-js' import { useLocalize } from '../../../context/localize' import { useNotifications } from '../../../context/notifications' -import { NotificationGroup as Group } from '../../../graphql/schema/notifier.gen' +import { NotificationGroup as Group } from '../../../graphql/schema/core.gen' import { router, useRouter } from '../../../stores/router' import { ArticlePageSearchParams } from '../../Article/FullArticle' import { GroupAvatar } from '../../_shared/GroupAvatar' @@ -39,8 +39,8 @@ const getTitle = (title: string) => { return shoutTitle } -const reactionsCaption = (threadId: string) => - threadId.includes('::') ? 'Some new replies to your comment' : 'Some new comments to your publication' +const threadCaption = (threadId: string) => + threadId.includes(':') ? 'Some new replies to your comment' : 'Some new comments to your publication' export const NotificationGroup = (props: NotificationGroupProps) => { const { t, formatTime, formatDate } = useLocalize() @@ -63,12 +63,12 @@ export const NotificationGroup = (props: NotificationGroupProps) => { return ( <> - {(n: Group) => ( + {(n: Group, index) => ( <> - {t(reactionsCaption(n.id), { commentsCount: n.reactions.length })}{' '} + {t(threadCaption(n.thread), { commentsCount: n.reactions.length })}{' '}
      handleClick(n.id)} + onClick={(_) => handleClick(n.thread)} >
      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..9509b7bf --- /dev/null +++ b/src/components/Views/AllAuthors/AllAuthors.tsx @@ -0,0 +1,179 @@ +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[] + topFollowedAuthors?: Author[] + topWritingAuthors?: 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/AllTopics/AllTopics.tsx b/src/components/Views/AllTopics/AllTopics.tsx index 36548a33..3fe6243d 100644 --- a/src/components/Views/AllTopics/AllTopics.tsx +++ b/src/components/Views/AllTopics/AllTopics.tsx @@ -28,7 +28,7 @@ type Props = { isLoaded: boolean } -const PAGE_SIZE = 20 +export const PAGE_SIZE = 20 export const AllTopics = (props: Props) => { const { t, lang } = useLocalize() diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index bb62322c..1649d92c 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/GroupAvatar/GroupAvatar.tsx b/src/components/_shared/GroupAvatar/GroupAvatar.tsx index 7c63520e..087e9b88 100644 --- a/src/components/_shared/GroupAvatar/GroupAvatar.tsx +++ b/src/components/_shared/GroupAvatar/GroupAvatar.tsx @@ -2,14 +2,13 @@ import { clsx } from 'clsx' import { For } from 'solid-js' import { Author } from '../../../graphql/schema/core.gen' -import { NotificationAuthor } from '../../../graphql/schema/notifier.gen' import { Userpic } from '../../Author/Userpic' import styles from './GroupAvatar.module.scss' type Props = { class?: string - authors: Author[] | NotificationAuthor[] + authors: Author[] } export const GroupAvatar = (props: Props) => { 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/notifications.tsx b/src/context/notifications.tsx index 36507e17..b25ca037 100644 --- a/src/context/notifications.tsx +++ b/src/context/notifications.tsx @@ -8,7 +8,7 @@ import { Portal } from 'solid-js/web' import { NotificationsPanel } from '../components/NotificationsPanel' import { ShowIfAuthenticated } from '../components/_shared/ShowIfAuthenticated' import { notifierClient } from '../graphql/client/notifier' -import { NotificationGroup, QueryLoad_NotificationsArgs } from '../graphql/schema/notifier.gen' +import { NotificationGroup, QueryLoad_NotificationsArgs } from '../graphql/schema/core.gen' import { SSEMessage, useConnect } from './connect' import { useSession } from './session' @@ -51,7 +51,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => { const unread = notificationsResult?.unread || 0 const newGroupsEntries = groups.reduce((acc, group: NotificationGroup) => { - acc[group.id] = group + acc[group.thread] = group return acc }, {}) diff --git a/src/context/reactions.tsx b/src/context/reactions.tsx index 48da0594..f23c5044 100644 --- a/src/context/reactions.tsx +++ b/src/context/reactions.tsx @@ -18,7 +18,7 @@ type ReactionsContextType = { offset?: number }) => Promise createReaction: (reaction: ReactionInput) => Promise - updateReaction: (id: number, reaction: ReactionInput) => Promise + updateReaction: (reaction: ReactionInput) => Promise deleteReaction: (id: number) => Promise } @@ -88,9 +88,10 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => { } } - const updateReaction = async (id: number, input: ReactionInput): Promise => { - const reaction = await apiClient.updateReaction(id, input) + const updateReaction = async (input: ReactionInput): Promise => { + const reaction = await apiClient.updateReaction(input) setReactionEntities(reaction.id, reaction) + return reaction } onCleanup(() => setReactionEntities(reconcile({}))) diff --git a/src/context/session.tsx b/src/context/session.tsx index 8da23006..73659a6c 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,10 +213,8 @@ 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) inboxClient.connect(token) } if (!author()) loadAuthor() @@ -329,7 +337,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 edf40567..753f2f86 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 }, + 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) @@ -178,15 +184,13 @@ export const apiClient = { console.debug('[graphql.client.core] createReaction:', response) return response.data.create_reaction.reaction }, - destroyReaction: async (id: number) => { - const response = await apiClient.private.mutation(reactionDestroy, { id: id }).toPromise() + destroyReaction: async (reaction_id: number) => { + const response = await apiClient.private.mutation(reactionDestroy, { reaction_id }).toPromise() console.debug('[graphql.client.core] destroyReaction:', response) return response.data.delete_reaction.reaction }, - updateReaction: async (id: number, input: ReactionInput) => { - const response = await apiClient.private - .mutation(reactionUpdate, { id: id, reaction: input }) - .toPromise() + updateReaction: async (reaction: ReactionInput) => { + const response = await apiClient.private.mutation(reactionUpdate, { reaction }).toPromise() console.debug('[graphql.client.core] updateReaction:', response) return response.data.update_reaction.reaction }, @@ -233,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/client/notifier.ts b/src/graphql/client/notifier.ts index dc44feba..943f5218 100644 --- a/src/graphql/client/notifier.ts +++ b/src/graphql/client/notifier.ts @@ -4,15 +4,14 @@ import markSeenAfterMutation from '../mutation/notifier/mark-seen-after' import markThreadSeenMutation from '../mutation/notifier/mark-seen-thread' import loadNotifications from '../query/notifier/notifications-load' import { - MutationMark_Seen_AfterArgs, + MutationNotifications_Seen_AfterArgs, NotificationsResult, QueryLoad_NotificationsArgs, -} from '../schema/notifier.gen' +} from '../schema/core.gen' +import { apiClient } from './core' export const notifierClient = { - private: null, - connect: (token: string) => (notifierClient.private = createGraphQLClient('notifier', token)), - + private: apiClient.private, getNotifications: async (params: QueryLoad_NotificationsArgs): Promise => { const resp = await notifierClient.private.query(loadNotifications, params).toPromise() return resp.data?.load_notifications @@ -23,7 +22,7 @@ export const notifierClient = { await notifierClient.private.mutation(markSeenMutation, { notification_id }).toPromise() }, - markSeenAfter: async (options: MutationMark_Seen_AfterArgs): Promise => { + markSeenAfter: async (options: MutationNotifications_Seen_AfterArgs): Promise => { // call when 'mark all as seen' cliecked await notifierClient.private.mutation(markSeenAfterMutation, options).toPromise() }, diff --git a/src/graphql/mutation/core/reaction-update.ts b/src/graphql/mutation/core/reaction-update.ts index 03c32a04..6c20be49 100644 --- a/src/graphql/mutation/core/reaction-update.ts +++ b/src/graphql/mutation/core/reaction-update.ts @@ -1,8 +1,8 @@ import { gql } from '@urql/core' export default gql` - mutation UpdateReactionMutation($id: Int!, $reaction: ReactionInput!) { - update_reaction(id: $id, reaction: $reaction) { + mutation UpdateReactionMutation($reaction: ReactionInput!) { + update_reaction(reaction: $reaction) { error reaction { id 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.server.ts b/src/pages/allAuthors.page.server.ts index dcc8681b..cefcdb28 100644 --- a/src/pages/allAuthors.page.server.ts +++ b/src/pages/allAuthors.page.server.ts @@ -1,12 +1,22 @@ import type { PageContext } from '../renderer/types' import type { PageProps } from './types' +import { PAGE_SIZE } from '../components/Views/AllTopics/AllTopics' import { apiClient } from '../graphql/client/core' export const onBeforeRender = async (_pageContext: PageContext) => { const allAuthors = await apiClient.getAllAuthors() - - const pageProps: PageProps = { allAuthors, seo: { title: '' } } + const topWritingAuthors = await apiClient.loadAuthorsBy({ + by: { order: 'shouts' }, + limit: PAGE_SIZE, + offset: 0, + }) + const topFollowedAuthors = await apiClient.loadAuthorsBy({ + by: { order: 'followers' }, + limit: PAGE_SIZE, + offset: 0, + }) + const pageProps: PageProps = { allAuthors, seo: { title: '' }, topWritingAuthors, topFollowedAuthors } return { pageContext: { diff --git a/src/pages/allAuthors.page.tsx b/src/pages/allAuthors.page.tsx index 87a427b2..c49dc26e 100644 --- a/src/pages/allAuthors.page.tsx +++ b/src/pages/allAuthors.page.tsx @@ -1,14 +1,17 @@ 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 { PAGE_SIZE } from '../components/Views/AllTopics/AllTopics' import { PageLayout } from '../components/_shared/PageLayout' import { useLocalize } from '../context/localize' -import { loadAllAuthors } from '../stores/zine/authors' +import { loadAllAuthors, loadAuthors } from '../stores/zine/authors' export const AllAuthorsPage = (props: PageProps) => { - const [isLoaded, setIsLoaded] = createSignal(Boolean(props.allAuthors)) + const [isLoaded, setIsLoaded] = createSignal( + Boolean(props.allAuthors && props.topFollowedAuthors && props.topWritingAuthors), + ) const { t } = useLocalize() @@ -18,12 +21,19 @@ export const AllAuthorsPage = (props: PageProps) => { } await loadAllAuthors() + await loadAuthors({ by: { order: 'shouts' }, limit: PAGE_SIZE, offset: 0 }) + await loadAuthors({ by: { order: 'followers' }, limit: PAGE_SIZE, offset: 0 }) setIsLoaded(true) }) return ( - + ) } diff --git a/src/pages/types.ts b/src/pages/types.ts index 05fd3f61..af588d9f 100644 --- a/src/pages/types.ts +++ b/src/pages/types.ts @@ -10,6 +10,8 @@ export type PageProps = { homeShouts?: Shout[] author?: Author allAuthors?: Author[] + topWritingAuthors?: Author[] + topFollowedAuthors?: Author[] topic?: Topic allTopics?: Topic[] searchQuery?: string @@ -25,6 +27,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; }