{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
+ {t('some posts', { count: props.author.stat?.shouts ?? 0 })}
{t('CommentsWithCount', { count: props.author.stat?.comments ?? 0 })}
+ {t('some comments', { count: props.author.stat?.comments ?? 0 })}
{t('FollowersWithCount', { count: props.author.stat?.followers ?? 0 })}
+ {t('some followers', { count: props.author.stat?.followers ?? 0 })}
- handleFollowClick()}
- isSubscribed={isSubscribed()}
- actionMessageType={
- subscribeInAction()?.slug === props.author.slug ? subscribeInAction().type : undefined
- }
+
diff --git a/src/components/Editor/AudioUploader/AudioUploader.tsx b/src/components/Editor/AudioUploader/AudioUploader.tsx
index b5cc4954..de7f2778 100644
--- a/src/components/Editor/AudioUploader/AudioUploader.tsx
+++ b/src/components/Editor/AudioUploader/AudioUploader.tsx
@@ -34,12 +34,14 @@ export const AudioUploader = (props: Props) => {
const handleChangeIndex = (direction: 'up' | 'down', index: number) => {
const media = [...props.audio]
- if (direction === 'up' && index > 0) {
- const copy = media.splice(index, 1)[0]
- media.splice(index - 1, 0, copy)
- } else if (direction === 'down' && index < media.length - 1) {
- const copy = media.splice(index, 1)[0]
- media.splice(index + 1, 0, copy)
+ if (media?.length > 0) {
+ if (direction === 'up' && index > 0) {
+ const copy = media.splice(index, 1)[0]
+ media.splice(index - 1, 0, copy)
+ } else if (direction === 'down' && index < media.length - 1) {
+ const copy = media.splice(index, 1)[0]
+ media.splice(index + 1, 0, copy)
+ }
}
props.onAudioSorted(media)
}
diff --git a/src/components/Editor/extensions/Article.ts b/src/components/Editor/extensions/Article.ts
index e5ff3769..db0a02ce 100644
--- a/src/components/Editor/extensions/Article.ts
+++ b/src/components/Editor/extensions/Article.ts
@@ -12,11 +12,6 @@ declare module '@tiptap/core' {
export default Node.create({
name: 'article',
- defaultOptions: {
- HTMLAttributes: {
- 'data-type': 'incut',
- },
- },
group: 'block',
content: 'block+',
@@ -32,6 +27,12 @@ export default Node.create({
return ['article', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
},
+ addOptions() {
+ return {
+ 'data-type': 'incut',
+ }
+ },
+
addAttributes() {
return {
'data-float': {
diff --git a/src/components/Editor/extensions/CustomBlockquote.ts b/src/components/Editor/extensions/CustomBlockquote.ts
index 3a403b36..024bd6c2 100644
--- a/src/components/Editor/extensions/CustomBlockquote.ts
+++ b/src/components/Editor/extensions/CustomBlockquote.ts
@@ -1,4 +1,4 @@
-import { Blockquote } from '@tiptap/extension-blockquote'
+import { Blockquote, BlockquoteOptions } from '@tiptap/extension-blockquote'
export type QuoteTypes = 'quote' | 'punchline'
@@ -13,11 +13,13 @@ declare module '@tiptap/core' {
export const CustomBlockquote = Blockquote.extend({
name: 'blockquote',
- defaultOptions: {
- HTMLAttributes: {},
- },
group: 'block',
content: 'block+',
+
+ addOptions(): BlockquoteOptions {
+ return {} as BlockquoteOptions
+ },
+
addAttributes() {
return {
'data-float': {
@@ -34,14 +36,12 @@ export const CustomBlockquote = Blockquote.extend({
return {
toggleBlockquote:
(type) =>
- ({ commands }) => {
- return commands.toggleWrap(this.name, { 'data-type': type })
- },
+ ({ commands }) =>
+ commands.toggleWrap(this.name, { 'data-type': type }),
setBlockQuoteFloat:
(value) =>
- ({ commands }) => {
- return commands.updateAttributes(this.name, { 'data-float': value })
- },
+ ({ commands }) =>
+ commands.updateAttributes(this.name, { 'data-float': value }),
}
},
})
diff --git a/src/components/Feed/Placeholder/Placeholder.module.scss b/src/components/Feed/Placeholder/Placeholder.module.scss
new file mode 100644
index 00000000..a2b79da5
--- /dev/null
+++ b/src/components/Feed/Placeholder/Placeholder.module.scss
@@ -0,0 +1,268 @@
+.placeholder {
+ border-radius: 2.2rem;
+ display: flex;
+ font-size: 1.4rem;
+ font-weight: 500;
+ overflow: hidden;
+ position: relative;
+
+ h3 {
+ font-size: 2.4rem;
+ }
+
+ button,
+ .button {
+ align-items: center;
+ border-radius: 1.2rem;
+ display: flex;
+
+ @include font-size(1.5rem);
+
+ gap: 0.6rem;
+ justify-content: center;
+ margin-top: 3rem;
+ padding: 1rem 2rem;
+ width: 100%;
+
+ .icon {
+ height: 2.4rem;
+ width: 2.4rem;
+ }
+ }
+}
+
+.placeholder--feed-mode {
+ flex-direction: column;
+ min-height: 40rem;
+ text-align: center;
+
+ @include media-breakpoint-up(lg) {
+ aspect-ratio: 1 / 0.8;
+ }
+
+ .placeholderCover {
+ flex: 1 100%;
+ position: relative;
+
+ &::after {
+ bottom: 0;
+ content: '';
+ height: 20%;
+ left: 0;
+ position: absolute;
+ width: 100%;
+ }
+
+ img {
+ position: absolute;
+ }
+ }
+
+ &.placeholder--feedMy .placeholderCover::after {
+ background: linear-gradient(to top, #171032, rgb(23 16 50 / 0%));
+ }
+
+ &.placeholder--feedCollaborations .placeholderCover::after {
+ background: linear-gradient(to top, #070709, rgb(7 7 9 / 0%));
+ }
+}
+
+.placeholder--profile-mode {
+ min-height: 40rem;
+
+ @include media-breakpoint-down(lg) {
+ display: block;
+ }
+
+ @include media-breakpoint-up(lg) {
+ max-height: 30rem;
+ min-height: auto;
+ }
+
+ .placeholderCover {
+ flex: 1;
+ padding: 1.6rem;
+
+ @include media-breakpoint-up(lg) {
+ order: 2;
+ position: static;
+ }
+
+ img {
+ aspect-ratio: 16/10;
+ min-width: 40rem;
+ object-fit: contain;
+ width: 100%;
+
+ @include media-breakpoint-up(lg) {
+ object-position: right;
+ }
+ }
+ }
+
+ .placeholderContent {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ font-size: 1.4rem;
+ line-height: 1.2;
+ min-width: 60%;
+ padding: 0 2rem 2rem;
+
+ @include media-breakpoint-up(md) {
+ font-size: 1.6rem;
+ padding: 3rem;
+ }
+
+ @include media-breakpoint-up(lg) {
+ font-size: 2rem;
+ }
+ }
+
+ h3 {
+ @include font-size(3.8rem);
+ }
+
+ .button {
+ background: var(--background-color-invert);
+ bottom: 2rem;
+ color: var(--default-color-invert);
+ font-size: 1.6rem;
+ left: 2rem;
+ right: 2rem;
+ width: 100%;
+
+ @include media-breakpoint-up(lg) {
+ left: auto;
+ position: absolute;
+ width: auto;
+ }
+
+ .icon {
+ filter: invert(1);
+ }
+ }
+}
+
+.placeholderCover {
+ position: relative;
+
+ img {
+ left: 0;
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ }
+}
+
+.placeholderContent {
+ padding: 1.6rem;
+
+ @include media-breakpoint-down(lg) {
+ br {
+ display: none;
+ }
+ }
+}
+
+.placeholder--feedMy,
+.placeholder--feedCollaborations {
+ color: var(--default-color-invert);
+
+ button,
+ .button {
+ background: var(--background-color);
+ color: var(--default-color);
+ }
+}
+
+.placeholder--feedMy {
+ background: #171032;
+
+ .placeholderCover {
+ img {
+ object-position: top;
+ }
+ }
+}
+
+.placeholder--feedCollaborations {
+ background: #070709;
+
+ .placeholderCover {
+ img {
+ object-position: bottom;
+ }
+ }
+}
+
+.placeholder--feedDiscussions {
+ background: #E9E9EE;
+
+ .placeholderCover {
+ padding: 2rem;
+ text-align: center;
+
+ img {
+ height: 90%;
+ mix-blend-mode: multiply;
+ object-fit: contain;
+ top: 10%;
+ }
+ }
+
+ button,
+ .button {
+ background: var(--background-color-invert);
+ color: var(--default-color-invert);
+ }
+}
+
+
+.placeholder--author {
+ background: #E58B72;
+}
+
+.placeholder--authorComments {
+ background: #E9E9EE;
+
+ .placeholderCover {
+ img {
+ mix-blend-mode: multiply;
+ }
+ }
+}
+
+.bottomLinks {
+ display: flex;
+
+ @include font-size(1.6rem);
+
+ gap: 4rem;
+
+ @include media-breakpoint-down(sm) {
+ flex-direction: column;
+ gap: 1.4rem;
+ }
+
+ a {
+ border: none !important;
+ padding-left: 2.6rem;
+ position: relative;
+
+ &:hover {
+ .icon {
+ filter: invert(0);
+ }
+ }
+ }
+
+ .icon {
+ filter: invert(1);
+ height: 1.8rem;
+ left: 0;
+ position: absolute;
+ transition: filter 0.2s;
+ width: 1.8rem;
+ }
+}
diff --git a/src/components/Feed/Placeholder/Placeholder.tsx b/src/components/Feed/Placeholder/Placeholder.tsx
new file mode 100644
index 00000000..a0b7dce2
--- /dev/null
+++ b/src/components/Feed/Placeholder/Placeholder.tsx
@@ -0,0 +1,120 @@
+import { clsx } from 'clsx'
+import { For, Show } from 'solid-js'
+
+import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
+import { Icon } from '../../_shared/Icon'
+import styles from './Placeholder.module.scss'
+
+export type PlaceholderProps = {
+ type: string
+ mode: 'feed' | 'profile'
+}
+
+export const Placeholder = (props: PlaceholderProps) => {
+ const { t } = useLocalize()
+ const { author } = useSession()
+
+ const data = {
+ feedMy: {
+ image: 'placeholder-feed.webp',
+ header: t('Feed settings'),
+ text: t('Placeholder feed'),
+ buttonLabel: author() ? t('Popular authors') : t('Create own feed'),
+ href: '/authors?by=followers',
+ },
+ feedCollaborations: {
+ image: 'placeholder-experts.webp',
+ header: t('Find collaborators'),
+ text: t('Placeholder feedCollaborations'),
+ buttonLabel: t('Find co-authors'),
+ href: '/authors?by=name',
+ },
+ feedDiscussions: {
+ image: 'placeholder-discussions.webp',
+ header: t('Participate in discussions'),
+ text: t('Placeholder feedDiscussions'),
+ buttonLabel: author() ? t('Current discussions') : t('Enter'),
+ href: '/feed?by=last_comment',
+ },
+ author: {
+ image: 'placeholder-join.webp',
+ header: t('Join our team of authors'),
+ text: t('Join our team of authors text'),
+ buttonLabel: t('Create post'),
+ href: '/create',
+ profileLinks: [
+ {
+ href: '/how-to-write-a-good-article',
+ label: t('How to write a good article'),
+ },
+ ],
+ },
+ authorComments: {
+ image: 'placeholder-discussions.webp',
+ header: t('Join discussions'),
+ text: t('Placeholder feedDiscussions'),
+ buttonLabel: t('Go to discussions'),
+ href: '/feed?by=last_comment',
+ profileLinks: [
+ {
+ href: '/about/discussion-rules',
+ label: t('Discussion rules'),
+ },
+ {
+ href: '/about/discussion-rules#ban',
+ label: t('Block rules'),
+ },
+ ],
+ },
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/components/Feed/Placeholder/index.ts b/src/components/Feed/Placeholder/index.ts
new file mode 100644
index 00000000..20413aa5
--- /dev/null
+++ b/src/components/Feed/Placeholder/index.ts
@@ -0,0 +1 @@
+export { Placeholder } from './Placeholder'
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index ab8aacca..a4e4c6a7 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -15,7 +15,7 @@ import styles from './Sidebar.module.scss'
export const Sidebar = () => {
const { t } = useLocalize()
const { seen } = useSeen()
- const { subscriptions } = useFollowing()
+ const { follows } = useFollowing()
const { page } = useRouter()
const { articlesByTopic, articlesByAuthor } = useArticlesStore()
const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
@@ -83,35 +83,9 @@ export const Sidebar = () => {
-
+ 
+
+
+
+
+
+
+ {data[props.type].buttonLabel}
+
+ }
+ >
+
+ {data[props.type].buttonLabel}
+
+
+
+
+
+
+
+
+
+
+
+
+ {(link) => (
+
+
+
+ { @@ -123,7 +97,7 @@ export const Sidebar = () => {
-
-
- @@ -135,7 +109,7 @@ export const Sidebar = () => { )}
-
{
}
}
- createEffect(
- on(
- () => error(),
- () => {
- props.errorMessage?.(error())
- },
- { defer: true },
- ),
- )
- createEffect(() => {
- setError(props.setError)
- })
+ createEffect(on(error, (er) => er && props.errorMessage?.(er), { defer: true }))
+ createEffect(() => setError(props.setError))
return (
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 680dd886..f161364d 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -11,7 +11,7 @@ import { useModalStore } from '../../../stores/ui' import { getDescription } from '../../../utils/meta' import { SharePopup, getShareUrl } from '../../Article/SharePopup' import { Icon } from '../../_shared/Icon' -import { Subscribe } from '../../_shared/Subscribe' +import { Newsletter } from '../../_shared/Newsletter' import { AuthModal } from '../AuthModal' import { ConfirmModal } from '../ConfirmModal' import { HeaderAuth } from '../HeaderAuth' @@ -301,7 +301,7 @@ export const Header = (props: Props) => {
{t('Newsletter')}
-+ {t('Language')}
-- {t('shoutsWithCount', { count: props.topic?.stat?.shouts })} + {t('some shouts', { count: props.topic?.stat?.shouts })} + {t('some authors', { count: props.topic?.stat?.authors })} - {t('authorsWithCount', { count: props.topic?.stat?.authors })} - - - {t('FollowersWithCount', { count: props.topic?.stat?.followers })} + {t('some followers', { count: props.topic?.stat?.followers })}diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 41749ea7..cd3b62d8 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -1,32 +1,30 @@ -import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen' - import { getPagePath } from '@nanostores/router' import { clsx } from 'clsx' import { For, Match, Show, Switch, createEffect, createMemo, createSignal, on, onMount } from 'solid-js' - import { useFollowing } from '../../../context/following' import { useLocalize } from '../../../context/localize' import { Meta, Title } from '../../../context/meta' import { useSession } from '../../../context/session' import { apiClient } from '../../../graphql/client/core' +import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen' import { router, useRouter } from '../../../stores/router' +import { MODALS, hideModal } from '../../../stores/ui' import { loadShouts, useArticlesStore } from '../../../stores/zine/articles' import { loadAuthor } from '../../../stores/zine/authors' import { getImageUrl } from '../../../utils/getImageUrl' import { getDescription } from '../../../utils/meta' import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll' +import { byCreated } from '../../../utils/sortby' import { splitToPages } from '../../../utils/splitToPages' +import stylesArticle from '../../Article/Article.module.scss' import { Comment } from '../../Article/Comment' import { AuthorCard } from '../../Author/AuthorCard' import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating' +import { Placeholder } from '../../Feed/Placeholder' import { Row1 } from '../../Feed/Row1' import { Row2 } from '../../Feed/Row2' import { Row3 } from '../../Feed/Row3' import { Loading } from '../../_shared/Loading' - -import { MODALS, hideModal } from '../../../stores/ui' -import { byCreated } from '../../../utils/sortby' -import stylesArticle from '../../Article/Article.module.scss' import styles from './Author.module.scss' type Props = { @@ -34,71 +32,26 @@ type Props = { shouts?: Shout[] author?: Author } + export const PRERENDERED_ARTICLES_COUNT = 12 const LOAD_MORE_PAGE_SIZE = 9 export const AuthorView = (props: Props) => { const { t } = useLocalize() - const { followers: myFollowers } = useFollowing() - const { session } = useSession() + const { followers: myFollowers, follows: myFollows } = useFollowing() + const { author: me } = useSession() const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) const { page: getPage, searchParams } = useRouter() const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const [isBioExpanded, setIsBioExpanded] = createSignal(false) - const [author, setAuthor] = createSignal- {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })} + {t('some comments', { count: props.topic?.stat?.comments ?? 0 })} () + const [author, setAuthor] = createSignal (props.author) const [followers, setFollowers] = createSignal([]) - const [following, setFollowing] = createSignal }> <> + + ++++ @@ -280,46 +263,47 @@ export const AuthorView = (props: Props) => {- diff --git a/src/components/Views/DraftsView/DraftsView.tsx b/src/components/Views/DraftsView/DraftsView.tsx index 957f7ffe..7c904691 100644 --- a/src/components/Views/DraftsView/DraftsView.tsx +++ b/src/components/Views/DraftsView/DraftsView.tsx @@ -15,20 +15,24 @@ import styles from './DraftsView.module.scss' export const DraftsView = () => { const { author, loadSession } = useSession() const [drafts, setDrafts] = createSignal+ + + ++++ 0}> -- - +- 1}> + -+ ++ ++ + ++ 3}> + ++ {(page) => ( + <> + ++ + + + + + + )} + - - -- 3}> - - -- - - - - - - - {(page) => ( - <> - -- - - - - - - )} - - - -
++ + +
+-}> + }> -diff --git a/src/components/Views/EditView/EditView.tsx b/src/components/Views/EditView/EditView.tsx index 2148a3e4..b44c8269 100644 --- a/src/components/Views/EditView/EditView.tsx +++ b/src/components/Views/EditView/EditView.tsx @@ -27,6 +27,7 @@ import { EditorSwiper } from '../../_shared/SolidSwiper' import { PublishSettings } from '../PublishSettings' +import { Loading } from '../../_shared/Loading' import styles from './EditView.module.scss' const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor')) @@ -145,7 +146,7 @@ export const EditView = (props: Props) => { const handleMediaDelete = (index) => { const copy = [...mediaItems()] - copy.splice(index, 1) + if (copy?.length > 0) copy.splice(index, 1) handleInputChange('media', JSON.stringify(copy)) } @@ -403,7 +404,7 @@ export const EditView = (props: Props) => {+ }> { const { page, searchParams, changeSearchParams } = useRouter () const [isLoading, setIsLoading] = createSignal(false) const [isRightColumnLoaded, setIsRightColumnLoaded] = createSignal(false) - const { session } = useSession() + const { author, session } = useSession() const { loadReactionsBy } = useReactions() const { sortedArticles } = useArticlesStore() const { topTopics } = useTopics() @@ -143,16 +144,20 @@ export const FeedView = (props: Props) => { Promise.all([loadTopComments()]).finally(() => setIsRightColumnLoaded(true)) }) - createEffect(() => { - if (session()?.access_token && !unratedArticles()) { - loadUnratedArticles() - } - }) + createEffect( + on( + [() => session(), unratedArticles], + ([s, seen]) => { + if (s?.access_token && !(seen?.length > 0)) loadUnratedArticles() + }, + { defer: true }, + ), + ) createEffect( on( - () => page().route + searchParams().by + searchParams().period + searchParams().visibility, - () => { + [page, searchParams], + (_, _p) => { resetSortedArticles() loadMore() }, @@ -234,107 +239,113 @@ export const FeedView = (props: Props) => { ---
-
- - {t('Recent')} - - {/*
- */} - {/* {t('Most read')}*/} - {/* */} -
- - changeSearchParams({ by: 'likes' })}> - {t('Top rated')} - - -
- - changeSearchParams({ by: 'last_comment' })}> - {t('Most commented')} - - -
--+ + + ++ + +--
+
- + {t('Recent')} + + {/*
- */} + {/* {t('Most read')}*/} + {/* */} +
- + changeSearchParams({ by: 'likes' })}> + {t('Top rated')} + + +
- + changeSearchParams({ by: 'last_comment' })}> + {t('Most commented')} + + +
++ changeSearchParams({ period: period.value })} + /> + changeSearchParams({ period: period.value })} + onChange={(visibility: VisibilityItem) => + changeSearchParams({ visibility: visibility.value }) + } /> - - - changeSearchParams({ visibility: visibility.value }) - } - /> + }> - 0}> - - {(article) => ( - +handleShare(shared)} - onInvite={() => showModal('inviteMembers')} - article={article} - settings={{ isFeedMode: true }} - desktopCoverSize="M" - /> - )} - }> + 0}> + + {(article) => ( + -handleShare(shared)} + onInvite={() => showModal('inviteMembers')} + article={article} + settings={{ isFeedMode: true }} + desktopCoverSize="M" + /> + )} + -diff --git a/src/components/Views/Inbox/Inbox.tsx b/src/components/Views/Inbox/Inbox.tsx index f74bd32f..1b333850 100644 --- a/src/components/Views/Inbox/Inbox.tsx +++ b/src/components/Views/Inbox/Inbox.tsx @@ -136,21 +136,18 @@ export const InboxView = (props: Props) => { } createEffect( - on( - () => messages(), - () => { - if (!messagesContainerRef.current) { - return - } - if (messagesContainerRef.current.scrollTop >= messagesContainerRef.current.scrollHeight) { - return - } - messagesContainerRef.current.scroll({ - top: messagesContainerRef.current.scrollHeight, - behavior: 'smooth', - }) - }, - ), + on(messages, () => { + if (!messagesContainerRef.current) { + return + } + if (messagesContainerRef.current.scrollTop >= messagesContainerRef.current.scrollHeight) { + return + } + messagesContainerRef.current.scroll({ + top: messagesContainerRef.current.scrollHeight, + behavior: 'smooth', + }) + }), { defer: true }, ) const handleScrollMessageContainer = () => { diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx index 26f1e3c8..26cf9ce1 100644 --- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx +++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx @@ -1,12 +1,11 @@ import { clsx } from 'clsx' -import { For, Show, createEffect, createSignal } from 'solid-js' +import { For, Show, createEffect, createSignal, on } from 'solid-js' import { useFollowing } from '../../../context/following' import { useLocalize } from '../../../context/localize' import { Author, Topic } from '../../../graphql/schema/core.gen' -import { SubscriptionFilter } from '../../../pages/types' +import { FollowsFilter } from '../../../pages/types' import { dummyFilter } from '../../../utils/dummyFilter' -// TODO: refactor styles import { isAuthor } from '../../../utils/isAuthor' import { AuthorBadge } from '../../Author/AuthorBadge' import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation' @@ -19,30 +18,30 @@ import stylesSettings from '../../../styles/FeedSettings.module.scss' export const ProfileSubscriptions = () => { const { t, lang } = useLocalize() - const { subscriptions } = useFollowing() - const [following, setFollowing] = createSignal-+{t('Popular authors')}
- - {t('All authors')} -- + +-++ +{t('Popular authors')}
+ + {t('All authors')} ++ + -
+
-
+
+
+ )}
+
+ {(author) => ( + +-
-
-
-
-
- )}
-
- {(author) => ( - -+ {(article) => ( + + -+ )} + - {(article) => ( - - - -- )} - - - -
++ + +
+('all') + const [followsFilter, setFollowsFilter] = createSignal ('all') const [searchQuery, setSearchQuery] = createSignal('') - createEffect(() => { - const { authors, topics } = subscriptions - if (authors || topics) { - const fdata = [...(authors || []), ...(topics || [])] - setFollowing(fdata) - if (subscriptionFilter() === 'authors') { - setFiltered(fdata.filter((s) => 'name' in s)) - } else if (subscriptionFilter() === 'topics') { - setFiltered(fdata.filter((s) => 'title' in s)) + createEffect(() => setFlatFollows([...(follows?.authors || []), ...(follows?.topics || [])])) + + createEffect( + on([flatFollows, followsFilter], ([flat, mode]) => { + if (mode === 'authors') { + setFiltered(flat.filter((s) => 'name' in s)) + } else if (mode === 'topics') { + setFiltered(flat.filter((s) => 'title' in s)) } else { - setFiltered(fdata) + setFiltered(flat) } - } - }) + }), + { defer: true }, + ) createEffect(() => { if (searchQuery()) { - setFiltered(dummyFilter(following(), searchQuery(), lang())) + setFiltered(dummyFilter(flatFollows(), searchQuery(), lang())) } }) @@ -60,32 +59,32 @@ export const ProfileSubscriptions = () => { diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx index d788d1f6..a8dff6f7 100644 --- a/src/components/Views/Topic.tsx +++ b/src/components/Views/Topic.tsx @@ -1,4 +1,4 @@ -import { LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen' +import { Author, AuthorsBy, LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen' import { clsx } from 'clsx' import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js' @@ -33,6 +33,7 @@ interface Props { topic: Topic shouts: Shout[] topicSlug: string + followers?: Author[] } export const PRERENDERED_ARTICLES_COUNT = 28 @@ -49,13 +50,30 @@ export const TopicView = (props: Props) => { const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal{t('My subscriptions')}
{t('Here you can manage all your Discours subscriptions')}
-}> + }> - -
- -
- - @@ -104,9 +103,9 @@ export const ProfileSubscriptions = () => { {(followingItem) => (
{isAuthor(followingItem) ? ( -)} diff --git a/src/components/Views/PublishSettings/PublishSettings.tsx b/src/components/Views/PublishSettings/PublishSettings.tsx index 44289502..7d6eb712 100644 --- a/src/components/Views/PublishSettings/PublishSettings.tsx +++ b/src/components/Views/PublishSettings/PublishSettings.tsx @@ -40,7 +40,18 @@ const EMPTY_TOPIC: Topic = { id: -1, slug: '', } -const emptyConfig = { + +interface FormConfig { + coverImageUrl?: string + mainTopic?: Topic + slug?: string + title?: string + subtitle?: string + description?: string + selectedTopics?: Topic[] +} + +const emptyConfig: FormConfig = { coverImageUrl: '', mainTopic: EMPTY_TOPIC, slug: '', @@ -78,7 +89,7 @@ export const PublishSettings = (props: Props) => { } }) - const [settingsForm, setSettingsForm] = createStore(emptyConfig) + const [settingsForm, setSettingsForm] = createStore+ ) : ( - + )} (emptyConfig) onMount(() => { setSettingsForm(initialData()) @@ -96,12 +107,12 @@ export const PublishSettings = (props: Props) => { setSettingsForm('coverImageUrl', '') } - const handleTopicSelectChange = (newSelectedTopics) => { + const handleTopicSelectChange = (newSelectedTopics: Topic[]) => { if ( props.form.selectedTopics.length === 0 || - newSelectedTopics.every((topic) => topic.id !== props.form.mainTopic?.id) + newSelectedTopics.every((topic: Topic) => topic.id !== props.form.mainTopic?.id) ) { - setSettingsForm((prev) => { + setSettingsForm((prev: Topic) => { return { ...prev, mainTopic: newSelectedTopics[0], @@ -193,7 +204,8 @@ export const PublishSettings = (props: Props) => { fieldName={t('Header')} placeholder={t('Come up with a title for your story')} initialValue={settingsForm.title} - value={(value) => setSettingsForm('title', value)} + // biome-ignore lint/suspicious/noExplicitAny: + value={(value: any) => setSettingsForm('title', value)} allowEnterKey={false} maxLength={100} /> @@ -203,7 +215,8 @@ export const PublishSettings = (props: Props) => { fieldName={t('Subheader')} placeholder={t('Come up with a subtitle for your story')} initialValue={settingsForm.subtitle || ''} - value={(value) => setSettingsForm('subtitle', value)} + // biome-ignore lint/suspicious/noExplicitAny: + value={(value: any) => setSettingsForm('subtitle', value)} allowEnterKey={false} maxLength={100} /> @@ -214,7 +227,8 @@ export const PublishSettings = (props: Props) => { placeholder={t('Write a short introduction')} label={t('Description')} initialContent={composeDescription()} - onChange={(value) => setForm('description', value)} + // biome-ignore lint/suspicious/noExplicitAny: + onChange={(value: any) => setForm('description', value)} maxLength={DESCRIPTION_MAX_LENGTH} /> () + createEffect( + on([() => props.topicSlug, topic, topicEntities], async ([slug, t, ttt]) => { + if (slug && !t && ttt) { + const current = ttt[slug] + console.debug(current) + setTopic(current) + await loadTopicFollowers() + await loadTopicAuthors() + await loadRandom() + } + }), + ) - createEffect(() => { - const topics = topicEntities() - if (props.topicSlug && !topic() && topics) { - setTopic(topics[props.topicSlug]) - } - }) + const [followers, setFollowers] = createSignal + diff --git a/src/components/_shared/BadgeSubscribeButton/index.ts b/src/components/_shared/BadgeSubscribeButton/index.ts deleted file mode 100644 index b359ecff..00000000 --- a/src/components/_shared/BadgeSubscribeButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { BadgeSubscribeButton } from './BadgeSubscribeButton' diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss index 5ab6be16..495c3466 100644 --- a/src/components/_shared/Button/Button.module.scss +++ b/src/components/_shared/Button/Button.module.scss @@ -175,7 +175,7 @@ } } - &.subscribed { + &.followed { background: #fff; color: #000; @@ -192,4 +192,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss b/src/components/_shared/FollowingButton/FollowingButton.module.scss similarity index 100% rename from src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss rename to src/components/_shared/FollowingButton/FollowingButton.module.scss diff --git a/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx b/src/components/_shared/FollowingButton/FollowingButton.tsx similarity index 78% rename from src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx rename to src/components/_shared/FollowingButton/FollowingButton.tsx index e1d15773..a973364c 100644 --- a/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx +++ b/src/components/_shared/FollowingButton/FollowingButton.tsx @@ -2,35 +2,36 @@ import { clsx } from 'clsx' import { Show, createMemo } from 'solid-js' import { useLocalize } from '../../../context/localize' import { Button } from '../Button' -import stylesButton from '../Button/Button.module.scss' import { CheckButton } from '../CheckButton' import { Icon } from '../Icon' -import styles from './BadgeDubscribeButton.module.scss' + +import stylesButton from '../Button/Button.module.scss' +import styles from './FollowingButton.module.scss' type Props = { class?: string - isSubscribed: boolean - minimizeSubscribeButton?: boolean + isFollowed: boolean + minimize?: boolean action: () => void iconButtons?: boolean - actionMessageType?: 'subscribe' | 'unsubscribe' + actionMessageType?: 'follow' | 'unfollow' } -export const BadgeSubscribeButton = (props: Props) => { +export const FollowingButton = (props: Props) => { const { t } = useLocalize() const inActionText = createMemo(() => { - return props.actionMessageType === 'subscribe' ? t('Subscribing...') : t('Unsubscribing...') + return props.actionMessageType === 'follow' ? t('Following...') : t('Unfollowing...') }) return (} + when={!props.minimize} + fallback={ } > { value={ diff --git a/src/components/_shared/FollowingButton/index.ts b/src/components/_shared/FollowingButton/index.ts new file mode 100644 index 00000000..76cf2618 --- /dev/null +++ b/src/components/_shared/FollowingButton/index.ts @@ -0,0 +1 @@ +export { FollowingButton } from './FollowingButton' diff --git a/src/components/_shared/FollowingCounters/FollowingCounters.module.scss b/src/components/_shared/FollowingCounters/FollowingCounters.module.scss new file mode 100644 index 00000000..84494bd3 --- /dev/null +++ b/src/components/_shared/FollowingCounters/FollowingCounters.module.scss @@ -0,0 +1,50 @@ +.subscribers { + align-items: center; + cursor: pointer; + display: inline-flex; + margin: 0 1rem 0 0; + vertical-align: top; + border-bottom: unset !important; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + .subscribersItem { + position: relative; + + &:nth-child(1) { + z-index: 2; + } + + &:nth-child(2) { + z-index: 1; + } + + &:not(:last-child) { + margin-right: -4px; + box-shadow: 0 0 0 1px var(--background-color); + } + } + + .subscribersCounter { + font-weight: 500; + } + + &:hover { + background: none !important; + + .subscribersCounter { + background: var(--background-color-invert); + } + } +} + +.subscribersList { + display: flex; + margin-right: 0.6rem; +} diff --git a/src/components/_shared/FollowingCounters/FollowingCounters.tsx b/src/components/_shared/FollowingCounters/FollowingCounters.tsx new file mode 100644 index 00000000..99508fc0 --- /dev/null +++ b/src/components/_shared/FollowingCounters/FollowingCounters.tsx @@ -0,0 +1,86 @@ +import { For, Show, createMemo } from 'solid-js' + +import { useLocalize } from '../../../context/localize' + +import { Author, Topic } from '../../../graphql/schema/core.gen' +import { Userpic } from '../../Author/Userpic' + +import styles from './FollowingCounters.module.scss' + +type Props = { + followers?: Author[] + followersAmount?: number + following?: Array+ followingAmount?: number + authors?: Author[] + authorsAmount?: number + topics?: Topic[] + topicsAmount?: number +} + +const UserpicList = (props: { items: Array }) => ( + ++) + +const Counter = (props: { count: number; label: string }) => ( ++ {(item) => ( + ++ )} + {props.label}+) + +export const FollowingCounters = (props: Props) => { + const { t } = useLocalize() + + const getFollowersCount = createMemo(() => props.followersAmount || props.followers?.length || 0) + const getFollowingCount = createMemo(() => props.followingAmount || props.following?.length || 0) + const getAuthorsCount = createMemo(() => props.authorsAmount || props.authors?.length || 0) + const getTopicsCount = createMemo(() => props.topicsAmount || props.topics?.length || 0) + + return ( + <> + +0}> + ++ + + + + 0}> + ++ 0} + fallback={ + <> + + + + ) +} diff --git a/src/components/_shared/FollowingCounters/index.ts b/src/components/_shared/FollowingCounters/index.ts new file mode 100644 index 00000000..33e34c6b --- /dev/null +++ b/src/components/_shared/FollowingCounters/index.ts @@ -0,0 +1 @@ +export { FollowingCounters } from './FollowingCounters' diff --git a/src/components/_shared/InviteMembers/InviteMembers.tsx b/src/components/_shared/InviteMembers/InviteMembers.tsx index 42e5b711..55929943 100644 --- a/src/components/_shared/InviteMembers/InviteMembers.tsx +++ b/src/components/_shared/InviteMembers/InviteMembers.tsx @@ -66,7 +66,7 @@ export const InviteMembers = (props: Props) => { createEffect( on( - () => sortedAuthors(), + sortedAuthors, (currentAuthors) => { setAuthorsToInvite(currentAuthors.map((author) => ({ ...author, selected: false }))) }, diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx index 07619603..b9c46f0c 100644 --- a/src/components/_shared/Lightbox/Lightbox.tsx +++ b/src/components/_shared/Lightbox/Lightbox.tsx @@ -129,8 +129,8 @@ export const Lightbox = (props: Props) => { createEffect( on( - () => zoomLevel(), - () => { + zoomLevel, + (_) => { clearTimeout(fadeTimer) fadeTimer = setTimeout(() => { diff --git a/src/components/_shared/Subscribe/Subscribe.module.scss b/src/components/_shared/Newsletter/Newsletter.module.scss similarity index 100% rename from src/components/_shared/Subscribe/Subscribe.module.scss rename to src/components/_shared/Newsletter/Newsletter.module.scss diff --git a/src/components/_shared/Subscribe/Subscribe.tsx b/src/components/_shared/Newsletter/Newsletter.tsx similarity index 97% rename from src/components/_shared/Subscribe/Subscribe.tsx rename to src/components/_shared/Newsletter/Newsletter.tsx index 63c2341e..d1fa00fc 100644 --- a/src/components/_shared/Subscribe/Subscribe.tsx +++ b/src/components/_shared/Newsletter/Newsletter.tsx @@ -6,12 +6,12 @@ import { validateEmail } from '../../../utils/validateEmail' import { Button } from '../Button' import { Icon } from '../Icon' -import styles from './Subscribe.module.scss' +import styles from './Newsletter.module.scss' type Props = { variant?: 'mobileSubscription' } -export const Subscribe = (props: Props) => { +export const Newsletter = (props: Props) => { const { t } = useLocalize() const [title, setTitle] = createSignal('') diff --git a/src/components/_shared/Newsletter/index.ts b/src/components/_shared/Newsletter/index.ts new file mode 100644 index 00000000..e8f0e231 --- /dev/null +++ b/src/components/_shared/Newsletter/index.ts @@ -0,0 +1 @@ +export { Newsletter } from './Newsletter' diff --git a/src/components/_shared/SolidSwiper/EditorSwiper.tsx b/src/components/_shared/SolidSwiper/EditorSwiper.tsx index 83d691a8..05553e54 100644 --- a/src/components/_shared/SolidSwiper/EditorSwiper.tsx +++ b/src/components/_shared/SolidSwiper/EditorSwiper.tsx @@ -61,7 +61,7 @@ export const EditorSwiper = (props: Props) => { createEffect( on( () => props.images.length, - () => { + (_) => { mainSwipeRef.current?.swiper.update() thumbSwipeRef.current?.swiper.update() }, @@ -121,17 +121,19 @@ export const EditorSwiper = (props: Props) => { const handleChangeIndex = (direction: 'left' | 'right', index: number) => { const images = [...props.images] - if (direction === 'left' && index > 0) { - const copy = images.splice(index, 1)[0] - images.splice(index - 1, 0, copy) - } else if (direction === 'right' && index < images.length - 1) { - const copy = images.splice(index, 1)[0] - images.splice(index + 1, 0, copy) + if (images?.length > 0) { + if (direction === 'left' && index > 0) { + const copy = images.splice(index, 1)[0] + images.splice(index - 1, 0, copy) + } else if (direction === 'right' && index < images.length - 1) { + const copy = images.splice(index, 1)[0] + images.splice(index + 1, 0, copy) + } + props.onImagesSorted(images) + setTimeout(() => { + mainSwipeRef.current.swiper.slideTo(direction === 'left' ? index - 1 : index + 1) + }, 0) } - props.onImagesSorted(images) - setTimeout(() => { - mainSwipeRef.current.swiper.slideTo(direction === 'left' ? index - 1 : index + 1) - }, 0) } const handleSaveBeforeSlideChange = () => { diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx index fd5a1832..77f08d27 100644 --- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx +++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx @@ -45,7 +45,7 @@ export const ImageSwiper = (props: Props) => { createEffect( on( () => props.images.length, - () => { + (_) => { mainSwipeRef.current?.swiper.update() thumbSwipeRef.current?.swiper.update() }, diff --git a/src/components/_shared/Subscribe/index.ts b/src/components/_shared/Subscribe/index.ts deleted file mode 100644 index 77ee7e60..00000000 --- a/src/components/_shared/Subscribe/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Subscribe } from './Subscribe' diff --git a/src/context/connect.tsx b/src/context/connect.tsx index f8ebb1c9..52cba19b 100644 --- a/src/context/connect.tsx +++ b/src/context/connect.tsx @@ -3,9 +3,10 @@ import type { Accessor, JSX } from 'solid-js' import type { Author, Reaction, Shout, Topic } from '../graphql/schema/core.gen' import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source' -import { createContext, createEffect, createSignal, useContext } from 'solid-js' +import { createContext, createEffect, createSignal, on, useContext } from 'solid-js' import { Chat, Message } from '../graphql/schema/chat.gen' +import { sseUrl } from '../utils/config' import { useSession } from './session' const RECONNECT_TIMES = 2 @@ -38,51 +39,57 @@ export const ConnectProvider = (props: { children: JSX.Element }) => { setHandlers((hhh) => [...hhh, handler]) } - createEffect(async () => { - const token = session()?.access_token - if (token && !connected() && retried() <= RECONNECT_TIMES) { - console.info('[context.connect] init SSE connection') - try { - await fetchEventSource('https://connect.discours.io', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: token, - }, - onmessage(event) { - const m: SSEMessage = JSON.parse(event.data || '{}') - console.log('[context.connect] Received message:', m) - messageHandlers().forEach((handler) => handler(m)) - }, - onopen: (response) => { - console.log('[context.connect] SSE connection opened', response) - if (response.ok && response.headers.get('content-type') === EventStreamContentType) { - setConnected(true) - setRetried(0) - return Promise.resolve() - } - return Promise.reject(`SSE: cannot connect to real-time updates, status: ${response.status}`) - }, - onclose() { - console.log('[context.connect] SSE connection closed by server') - setConnected(false) - if (retried() < RECONNECT_TIMES) { - setRetried((r) => r + 1) - } - }, - onerror(err) { - console.error('[context.connect] SSE connection error:', err) - setConnected(false) - if (retried() < RECONNECT_TIMES) { - setRetried((r) => r + 1) - } else throw Error(err) - }, - }) - } catch (error) { - console.error('[context.connect] SSE connection failed:', error) - } - } - }) + createEffect( + on( + () => session()?.access_token, + async (tkn) => { + if (!sseUrl) return + if (!tkn) return + if (!connected() && retried() <= RECONNECT_TIMES) { + console.info('[context.connect] got token, init SSE connection') + try { + await fetchEventSource(sseUrl, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: tkn, + }, + onmessage(event) { + const m: SSEMessage = JSON.parse(event.data || '{}') + console.log('[context.connect] Received message:', m) + messageHandlers().forEach((handler) => handler(m)) + }, + onopen: (response) => { + console.log('[context.connect] SSE connection opened', response) + if (response.ok && response.headers.get('content-type') === EventStreamContentType) { + setConnected(true) + setRetried(0) + return Promise.resolve() + } + return Promise.reject(`SSE: cannot connect to real-time updates: ${response.status}`) + }, + onclose() { + console.log('[context.connect] SSE connection closed by server') + setConnected(false) + if (retried() < RECONNECT_TIMES) { + setRetried((r) => r + 1) + } else throw Error('closed by server') + }, + onerror(err) { + console.error('[context.connect] SSE connection error:', err) + setConnected(false) + if (retried() < RECONNECT_TIMES) { + setRetried((r) => r + 1) + } else throw Error(err) + }, + }) + } catch (error) { + console.error('[context.connect] SSE connection failed:', error) + } + } + }, + ), + ) const value: ConnectContextType = { addHandler, connected } diff --git a/src/context/following.tsx b/src/context/following.tsx index 3f42a6f2..adc2977b 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -1,30 +1,27 @@ -import { Accessor, JSX, createContext, createEffect, createSignal, useContext } from 'solid-js' +import { Accessor, JSX, createContext, createEffect, createSignal, on, useContext } from 'solid-js' import { createStore } from 'solid-js/store' import { apiClient } from '../graphql/client/core' -import { Author, AuthorFollowsResult, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen' +import { Author, AuthorFollowsResult, FollowingEntity } from '../graphql/schema/core.gen' import { useSession } from './session' -export type SubscriptionsData = { - topics?: Topic[] - authors?: Author[] - communities?: Community[] -} - -type SubscribeAction = { slug: string; type: 'subscribe' | 'unsubscribe' } +type FollowingData = { slug: string; type: 'follow' | 'unfollow' } interface FollowingContextType { loading: Accessor0}> + ++ + 0}> + + + } + > ++ + + followers: Accessor + changeFollowing: (what: FollowingEntity, slug: string, value: boolean) => void + + follows: AuthorFollowsResult + loadFollows: () => void + follow: (what: FollowingEntity, slug: string) => Promise unfollow: (what: FollowingEntity, slug: string) => Promise - // followers: Accessor } const FollowingContext = createContext () @@ -42,7 +39,7 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollowsResult = { export const FollowingProvider = (props: { children: JSX.Element }) => { const [loading, setLoading] = createSignal (false) const [followers, setFollowers] = createSignal (EMPTY_SUBSCRIPTIONS) + const [follows, setFollows] = createStore (EMPTY_SUBSCRIPTIONS) const { author, session } = useSession() const fetchData = async () => { @@ -51,68 +48,67 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { if (apiClient.private) { console.debug('[context.following] fetching subs data...') const result = await apiClient.getAuthorFollows({ user: session()?.user.id }) - setSubscriptions(result || EMPTY_SUBSCRIPTIONS) + setFollows(result || EMPTY_SUBSCRIPTIONS) } } catch (error) { - console.info('[context.following] cannot get subs', error) + console.warn('[context.following] cannot get subs', error) } finally { setLoading(false) } } - createEffect(() => { - console.info('[context.following] subs:', subscriptions) - }) - - const [subscribeInAction, setSubscribeInAction] = createSignal () + const [following, setFollowing] = createSignal () const follow = async (what: FollowingEntity, slug: string) => { if (!author()) return - setSubscribeInAction({ slug, type: 'subscribe' }) + setFollowing({ slug, type: 'follow' }) try { - const subscriptionData = await apiClient.follow({ what, slug }) - setSubscriptions((prevSubscriptions) => { - if (!prevSubscriptions[what]) prevSubscriptions[what] = [] - prevSubscriptions[what].push(subscriptionData) - return prevSubscriptions + const result = await apiClient.follow({ what, slug }) + setFollows((subs) => { + if (result.authors) subs['authors'] = result.authors || [] + if (result.topics) subs['topics'] = result.topics || [] + return subs }) } catch (error) { console.error(error) } finally { - setSubscribeInAction() // Сбрасываем состояние действия подписки. + setFollowing() // Сбрасываем состояние действия подписки. } } const unfollow = async (what: FollowingEntity, slug: string) => { if (!author()) return - setSubscribeInAction({ slug: slug, type: 'unsubscribe' }) + setFollowing({ slug: slug, type: 'unfollow' }) try { - await apiClient.unfollow({ what, slug }) + const result = await apiClient.unfollow({ what, slug }) + setFollows((subs) => { + if (result.authors) subs['authors'] = result.authors || [] + if (result.topics) subs['topics'] = result.topics || [] + return subs + }) } catch (error) { console.error(error) } finally { - setSubscribeInAction() + setFollowing() } } - createEffect(() => { - if (author()) { - try { - const appdata = session()?.user.app_data + createEffect( + on( + () => session()?.user.app_data, + (appdata) => { if (appdata) { const { authors, followers, topics } = appdata - setSubscriptions({ authors, topics }) + setFollows({ authors, topics }) setFollowers(followers) if (!authors) fetchData() } - } catch (e) { - console.error(e) - } - } - }) + }, + ), + ) - const setFollowing = (what: FollowingEntity, slug: string, value = true) => { - setSubscriptions((prevSubscriptions) => { - const updatedSubs = { ...prevSubscriptions } + const changeFollowing = (what: FollowingEntity, slug: string, value = true) => { + setFollows((fff) => { + const updatedSubs = { ...fff } if (!updatedSubs[what]) updatedSubs[what] = [] if (value) { const exists = updatedSubs[what]?.some((entity) => entity.slug === slug) @@ -133,15 +129,14 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { const value: FollowingContextType = { loading, - subscriptions, - setSubscriptions, - setFollowing, + follows, + setFollows, + following, + changeFollowing, followers, - loadSubscriptions: fetchData, + loadFollows: fetchData, follow, unfollow, - // followers, - subscribeInAction, } return {props.children} diff --git a/src/context/meta.tsx b/src/context/meta.tsx index bf2e1a1d..461df35b 100644 --- a/src/context/meta.tsx +++ b/src/context/meta.tsx @@ -184,7 +184,7 @@ function initServerProvider() { const index = tags.findIndex( (prev) => prev.tag === tagDesc.tag && getTagKey(prev, properties) === tagDescKey, ) - if (index !== -1) { + if (index !== -1 && tags?.length > 0) { tags.splice(index, 1) } } diff --git a/src/context/session.tsx b/src/context/session.tsx index 27ed21e5..81bfe0d4 100644 --- a/src/context/session.tsx +++ b/src/context/session.tsx @@ -32,27 +32,26 @@ import { inboxClient } from '../graphql/client/chat' import { apiClient } from '../graphql/client/core' import { useRouter } from '../stores/router' import { showModal } from '../stores/ui' -import { addAuthors } from '../stores/zine/authors' +import { addAuthors, loadAuthor } from '../stores/zine/authors' +import { authApiUrl } from '../utils/config' import { useLocalize } from './localize' import { useSnackbar } from './snackbar' const defaultConfig: ConfigType = { - authorizerURL: 'https://auth.discours.io', + authorizerURL: authApiUrl.replace('/graphql', ''), redirectURL: 'https://testing.discours.io', - clientID: 'b9038a34-ca59-41ae-a105-c7fbea603e24', // FIXME: use env? + clientID: '', } export type SessionContextType = { config: Accessorsession: Resource - author: Resource + author: Accessor authError: Accessor isSessionLoaded: Accessor loadSession: () => AuthToken | Promise setSession: (token: AuthToken | null) => void // setSession - loadAuthor: (info?: unknown) => Author | Promise - setAuthor: (a: Author) => void requireAuthentication: ( callback: (() => Promise ) | (() => void), modalSource: AuthModalSource, @@ -66,16 +65,39 @@ export type SessionContextType = { params: ForgotPasswordInput, ) => Promise<{ data: ForgotPasswordResponse; errors: Error[] }> changePassword: (password: string, token: string) => void - confirmEmail: (input: VerifyEmailInput) => Promise // email confirm callback is in auth.discours.io + confirmEmail: (input: VerifyEmailInput) => Promise // email confirm callback is in authorizer setIsSessionLoaded: (loaded: boolean) => void authorizer: () => Authorizer isRegistered: (email: string) => Promise resendVerifyEmail: (params: ResendVerifyEmailInput) => Promise } -// biome-ignore lint/suspicious/noEmptyBlockStatements: -const noop = () => {} - +const noop = () => null +const metaRes = { + data: { + meta: { + version: 'latest', + // client_id: 'b9038a34-ca59-41ae-a105-c7fbea603e24', + is_google_login_enabled: true, + is_facebook_login_enabled: true, + is_github_login_enabled: true, + is_linkedin_login_enabled: false, + is_apple_login_enabled: false, + is_twitter_login_enabled: true, + is_microsoft_login_enabled: false, + is_twitch_login_enabled: false, + is_roblox_login_enabled: false, + is_email_verification_enabled: true, + is_basic_authentication_enabled: true, + is_magic_link_login_enabled: true, + is_sign_up_enabled: true, + is_strong_password_enabled: false, + is_multi_factor_auth_enabled: true, + is_mobile_basic_authentication_enabled: true, + is_phone_verification_enabled: false, + }, + }, +} const SessionContext = createContext () export function useSession() { @@ -96,15 +118,15 @@ export const SessionProvider = (props: { // handle auth state callback createEffect( on( - () => searchParams()?.state, - (state) => { - if (state) { - setOauthState((_s) => state) - const scope = searchParams()?.scope - ? searchParams()?.scope?.toString().split(' ') + searchParams, + (params) => { + if (params?.state) { + setOauthState((_s) => params?.state) + const scope = params?.scope + ? params?.scope?.toString().split(' ') : ['openid', 'profile', 'email'] if (scope) console.info(`[context.session] scope: ${scope}`) - const url = searchParams()?.redirect_uri || searchParams()?.redirectURL || window.location.href + const url = params?.redirect_uri || params?.redirectURL || window.location.href setConfig((c: ConfigType) => ({ ...c, redirectURL: url.split('?')[0] })) changeSearchParams({ mode: 'confirm-email', m: 'auth' }, true) } @@ -202,75 +224,56 @@ export const SessionProvider = (props: { onCleanup(() => clearTimeout(minuteLater)) - const authorData = async () => { - const u = session()?.user - return u ? (await apiClient.getAuthorId({ user: u.id.trim() })) || null : null - } - const [author, { refetch: loadAuthor, mutate: setAuthor }] = createResource (authorData, { - ssrLoadFrom: 'initial', - initialValue: null, - }) - + const [author, setAuthor] = createSignal () // when session is loaded - createEffect(() => { - if (session()) { - const token = session()?.access_token - if (token) { - if (!inboxClient.private) { - apiClient.connect(token) - inboxClient.connect(token) - } - - try { - const appdata = session()?.user.app_data - if (appdata) { - const { profile } = appdata - if (profile?.id) { - setAuthor(profile) - addAuthors([profile]) + createEffect( + on( + () => session(), + async (s: AuthToken) => { + if (s) { + const token = s?.access_token + const profile = s?.user?.app_data?.profile + if (token && !inboxClient.private) { + apiClient.connect(token) + inboxClient.connect(token) + } + if (profile?.id) { + addAuthors([profile]) + setAuthor(profile) + setIsSessionLoaded(true) + } else { + console.warn('app_data is empty') + if (s?.user) { + try { + console.info('Loading author:', s?.user?.nickname) + const a = await loadAuthor({ slug: s?.user?.nickname }) + addAuthors([a]) + setAuthor(a) + s.user.app_data.profile = a + } catch (error) { + console.error('Error loading author:', error) + } } else { - setTimeout(loadAuthor, 15) + console.warn(s) + setSession(null) + setAuthor(null) + setIsSessionLoaded(true) } } - } catch (e) { - console.error(e) } - - setIsSessionLoaded(true) - } - } - }) - - // when author is loaded - createEffect(() => { - if (author()) { - addAuthors([author()]) - } else { - reset() - } - }) - - const reset = () => { - setIsSessionLoaded(true) - setSession(null) - setAuthor(null) - } + }, + { defer: true }, + ), + ) // initial effect - onMount(async () => { - const metaRes = await authorizer().getMetaData() + onMount(() => { setConfig({ ...defaultConfig, ...metaRes, redirectURL: window.location.origin, }) - let s: AuthToken - try { - s = await loadSession() - } catch (error) { - console.warn('[context.session] load session failed', error) - } - if (!s) reset() + loadSession() }) // callback state updater @@ -316,8 +319,10 @@ export const SessionProvider = (props: { const signOut = async () => { const authResult: ApiResponse = await authorizer().logout() console.debug(authResult) - reset() + setSession(null) + setIsSessionLoaded(true) showSnackbar({ body: t("You've successfully logged out") }) + console.debug(session()) } const changePassword = async (password: string, token: string) => { @@ -391,9 +396,7 @@ export const SessionProvider = (props: { updateProfile, setIsSessionLoaded, setSession, - setAuthor, authorizer, - loadAuthor, forgotPassword, changePassword, oauth, diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts index bbfa00f4..2512b771 100644 --- a/src/graphql/client/core.ts +++ b/src/graphql/client/core.ts @@ -5,6 +5,7 @@ import type { LoadShoutsOptions, MutationDelete_ShoutArgs, ProfileInput, + QueryGet_Topic_FollowersArgs, QueryLoad_Authors_ByArgs, QueryLoad_Shouts_Random_TopArgs, QueryLoad_Shouts_SearchArgs, @@ -39,11 +40,11 @@ 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 authorsLoadBy from '../query/core/authors-load-by' import reactionsLoadBy from '../query/core/reactions-load-by' import topicBySlug from '../query/core/topic-by-slug' +import topicFollowers from '../query/core/topic-followers' import topicsAll from '../query/core/topics-all' import topicsRandomQuery from '../query/core/topics-random' @@ -119,16 +120,16 @@ export const apiClient = { 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 За что можно получить дырку в карме и выиграть бан в сообществе
+За что можно получить дырку в карме и выиграть бан в сообществе
-
diff --git a/src/pages/about/manifest.page.tsx b/src/pages/about/manifest.page.tsx index 7599bdce..0c205e64 100644 --- a/src/pages/about/manifest.page.tsx +++ b/src/pages/about/manifest.page.tsx @@ -4,7 +4,7 @@ import { Feedback } from '../../components/Discours/Feedback' import { Modal } from '../../components/Nav/Modal' import Opener from '../../components/Nav/Modal/Opener' import { StaticPage } from '../../components/Views/StaticPage' -import { Subscribe } from '../../components/_shared/Subscribe' +import { Newsletter } from '../../components/_shared/Newsletter' import { useLocalize } from '../../context/localize' import { getImageUrl } from '../../utils/getImageUrl' @@ -24,7 +24,7 @@ export const ManifestPage = () => {
- diff --git a/src/pages/author.page.tsx b/src/pages/author.page.tsx index e23f92d3..c2568540 100644 --- a/src/pages/author.page.tsx +++ b/src/pages/author.page.tsx @@ -1,6 +1,6 @@ import type { PageProps } from './types' -import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' +import { Show, createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js' import { AuthorView, PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author' import { Loading } from '../components/_shared/Loading' @@ -20,38 +20,19 @@ export const AuthorPage = (props: PageProps) => { Boolean(props.authorShouts) && Boolean(props.author) && props.author.slug === slug(), ) - const preload = () => { - return Promise.all([ - loadShouts({ - filters: { author: slug(), featured: false }, - limit: PRERENDERED_ARTICLES_COUNT, - }), - loadAuthor({ slug: slug() }), - ]) - } - - onMount(async () => { - if (isLoaded()) { - return - } - - resetSortedArticles() - await preload() - - setIsLoaded(true) - }) - createEffect( - on( - () => slug(), - async () => { + on(slug, async (s) => { + if (s) { setIsLoaded(false) resetSortedArticles() - await preload() + await loadShouts({ + filters: { author: s, featured: false }, + limit: PRERENDERED_ARTICLES_COUNT, + }) + await loadAuthor({ slug: s }) setIsLoaded(true) - }, - { defer: true }, - ), + } + }), ) onCleanup(() => resetSortedArticles()) diff --git a/src/pages/create.page.tsx b/src/pages/create.page.tsx index e5b7e8a1..c6acd6c0 100644 --- a/src/pages/create.page.tsx +++ b/src/pages/create.page.tsx @@ -17,9 +17,10 @@ import styles from '../styles/Create.module.scss' const handleCreate = async (layout: LayoutType) => { const shout = await apiClient.createArticle({ article: { layout: layout } }) - redirectPage(router, 'edit', { - shoutId: shout?.id.toString(), - }) + shout?.id && + redirectPage(router, 'edit', { + shoutId: shout?.id.toString(), + }) } export const CreatePage = () => { diff --git a/src/pages/edit.page.tsx b/src/pages/edit.page.tsx index aaa08eee..3b5e4f84 100644 --- a/src/pages/edit.page.tsx +++ b/src/pages/edit.page.tsx @@ -7,7 +7,7 @@ import { useLocalize } from '../context/localize' import { useSession } from '../context/session' import { apiClient } from '../graphql/client/core' import { Shout } from '../graphql/schema/core.gen' -import { router, useRouter } from '../stores/router' +import { router } from '../stores/router' import { redirectPage } from '@nanostores/router' import { useSnackbar } from '../context/snackbar' @@ -33,7 +33,6 @@ const getContentTypeTitle = (layout: LayoutType) => { export const EditPage = () => { const { t } = useLocalize() const { session } = useSession() - const { page } = useRouter() const snackbar = useSnackbar() const fail = async (error: string) => { @@ -48,18 +47,21 @@ export const EditPage = () => { createEffect( on( - () => page(), + () => window?.location.pathname, (p) => { - if (p?.path) { - console.debug(p?.path) - const shoutId = p?.path.split('/').pop() - const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10) - console.debug(`editing shout ${shoutIdFromUrl}`) - if (shoutIdFromUrl) { - setShoutId(shoutIdFromUrl) + if (p) { + console.debug(p) + const shoutId = p.split('/').pop() + if (shoutId) { + const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10) + console.debug(`editing shout ${shoutIdFromUrl}`) + if (shoutIdFromUrl) { + setShoutId(shoutIdFromUrl) + } } } }, + { defer: true }, ), ) diff --git a/src/pages/expo/expo.page.tsx b/src/pages/expo/expo.page.tsx index 1a1a2235..a3d3ff09 100644 --- a/src/pages/expo/expo.page.tsx +++ b/src/pages/expo/expo.page.tsx @@ -12,10 +12,9 @@ import { LayoutType } from '../types' export const ExpoPage = (props: PageProps) => { const { t } = useLocalize() const { page } = useRouter() - const getLayout = createMemo+ (() => page().params['layout'] as LayoutType) - - const getTitle = () => { - switch (getLayout()) { + const layout = createMemo(() => page().params['layout'] as LayoutType) + const title = createMemo(() => { + switch (layout()) { case 'audio': { return t('Audio') } @@ -32,22 +31,14 @@ export const ExpoPage = (props: PageProps) => { return t('Art') } } - } + }) - createEffect( - on( - () => getLayout(), - () => { - document.title = getTitle() - }, - { defer: true }, - ), - ) + createEffect(on(title, (t) => (document.title = t), { defer: true })) return ( - + - + - }> - - -- - - +- -- + }> => { const formData = new FormData() diff --git a/tests/basic-routes.spec.ts b/tests/basic-routes.spec.ts index 3b581ef5..b904fbef 100644 --- a/tests/basic-routes.spec.ts +++ b/tests/basic-routes.spec.ts @@ -1,15 +1,15 @@ import { expect, test } from '@playwright/test' -const baseHost = process.env.BASE_URL +const baseHost = process.env.BASE_HOST || 'https://localhost:3000' const pagesTitles = { '/': /Дискурс/, - '/feed': /Дискурс/, - '/create': /Дискурс/, - '/about/donate': /Дискурс/, - '/authors': /Дискурс/, - '/topics': /Дискурс/, - '/inbox': /Дискурс/, + '/feed': /Лента/, + '/create': /Выберите тип публикации/, + '/about/help': /Поддержите Дискурс/, + '/authors': /Авторы/, + '/topics': /Темы и сюжеты/, + '/inbox': /Входящие/, } Object.keys(pagesTitles).forEach((res: string) => { diff --git a/tests/basic-routes.test.js b/tests/basic-routes.test.js index 589b5ae0..a3ffcf78 100644 --- a/tests/basic-routes.test.js +++ b/tests/basic-routes.test.js @@ -5,13 +5,13 @@ import { chromium } from 'playwright' // Define the URLs to visit const pagesToVisit = [ - 'http://localhost:3000/', - 'http://localhost:3000/feed', - 'http://localhost:3000/create', - 'http://localhost:3000/about/donate', - 'http://localhost:3000/authors', - 'http://localhost:3000/topics', - 'http://localhost:3000/inbox', + 'https://localhost:3000/', + 'https://localhost:3000/feed', + 'https://localhost:3000/create', + 'https://localhost:3000/about/donate', + 'https://localhost:3000/authors', + 'https://localhost:3000/topics', + 'https://localhost:3000/inbox', ] // Loop through the pages and visit each one diff --git a/vite.config.ts b/vite.config.ts index f50a5bab..e0660837 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,8 +14,9 @@ const cssModuleHMR = () => { const { modules } = context modules.forEach((module) => { - if (module.id.includes('.module.scss')) { + if (module.id.includes('.scss') || module.id.includes('.css')) { module.isSelfAccepting = true + // module.accept() } }) },