discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

refactoring: subscribe-term separated to newsletter and following

Browse Source
This commit is contained in:
Untone 2024-06-06 08:44:59 +03:00
parent 35cb6c1a44
commit cada98f135
18 changed files with 84 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/Comment/Comment.tsx
View File

@ -48,7 +48,7 @@ export const Comment = (props: Props) => {
const canEdit = createMemo(
() =>
Boolean(author()?.id) &&
(props.comment?.created_by?.slug === author().slug || session()?.user?.roles.includes('editor')),
(props.comment?.created_by?.slug === author()?.slug || session()?.user?.roles.includes('editor')),
)
const body = createMemo(() => (editedBody() ? editedBody().trim() : props.comment.body.trim() || ''))

4
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -17,8 +17,8 @@ import { SharePopup, getShareUrl } from '../../Article/SharePopup'
import { Modal } from '../../Nav/Modal'
import { TopicBadge } from '../../Topic/TopicBadge'
import { Button } from '../../_shared/Button'
import { FollowingCounters } from '../../_shared/FollowingCounters'
import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
import { Subscribers } from '../../_shared/Subscribers'
import { AuthorBadge } from '../AuthorBadge'
import { Userpic } from '../Userpic'
@ -195,7 +195,7 @@ export const AuthorCard = (props: Props) => {
</Show>
<Show when={props.followers?.length > 0 || props.flatFollows?.length > 0}>
<div class={styles.subscribersContainer}>
<Subscribers
<FollowingCounters
followers={props.followers}
followersAmount={props.author?.stat?.followers}
following={props.flatFollows}

4
src/components/Discours/Footer.tsx
View File

@ -3,7 +3,7 @@ import { For, createMemo } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { Icon } from '../_shared/Icon'
import { Subscribe } from '../_shared/Subscribe'
import { Newsletter } from '../_shared/Newsletter'
import styles from './Footer.module.scss'
@ -133,7 +133,7 @@ export const Footer = () => {
<div class="col-md-6">
<h5>{t('Subscription')}</h5>
<p>{t('Join our maillist')}</p>
<Subscribe />
<Newsletter />
</div>
</div>

4
src/components/Nav/Header/Header.tsx
View File

@ -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) => {
</ul>
<h4>{t('Newsletter')}</h4>
<Subscribe variant={'mobileSubscription'} />
<Newsletter variant={'mobileSubscription'} />
<h4>{t('Language')}</h4>
<select

6
src/components/Nav/ProfilePopup.tsx
View File

@ -21,7 +21,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
<Popup {...props} horizontalAnchor="right" popupCssClass={styles.profilePopup}>
<ul class="nodash">
<li>
<a class={styles.action} href={getPagePath(router, 'author', { slug: author().slug })}>
<a class={styles.action} href={getPagePath(router, 'author', { slug: author()?.slug })}>
<Icon name="profile" class={styles.icon} />
{t('Profile')}
</a>
@ -35,7 +35,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
<li>
<a
class={styles.action}
href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}
href={`${getPagePath(router, 'author', { slug: author()?.slug })}?m=following`}
>
<Icon name="feed-all" class={styles.icon} />
{t('Subscriptions')}
@ -44,7 +44,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
<li>
<a
class={styles.action}
href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}
href={`${getPagePath(router, 'authorComments', { slug: author()?.slug })}`}
>
<Icon name="comment" class={styles.icon} />
{t('Comments')}

4
src/components/Topic/Full.tsx
View File

@ -9,8 +9,8 @@ import { useSession } from '../../context/session'
import { FollowingEntity } from '../../graphql/schema/core.gen'
import { Button } from '../_shared/Button'
import { FollowingCounters } from '../_shared/FollowingCounters'
import { Icon } from '../_shared/Icon'
import { Subscribers } from '../_shared/Subscribers'
import styles from './Full.module.scss'
type Props = {
@ -55,7 +55,7 @@ export const FullTopic = (props: Props) => {
</div>
</Show>
<Subscribers
<FollowingCounters
followers={props.followers}
followersAmount={props.topic?.stat?.followers}
following={props.authors}

87
src/components/Views/Author/Author.tsx
View File

@ -1,33 +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 { Placeholder } from '../../Feed/Placeholder'
import styles from './Author.module.scss'
type Props = {
@ -35,6 +32,7 @@ type Props = {
shouts?: Shout[]
author?: Author
}
export const PRERENDERED_ARTICLES_COUNT = 12
const LOAD_MORE_PAGE_SIZE = 9
@ -164,11 +162,7 @@ export const AuthorView = (props: Props) => {
<div class={clsx(styles.groupControls, 'row')}>
<div class="col-md-16">
<ul class="view-switcher">
<li
classList={{
'view-switcher__item--selected': getPage().route === 'author',
}}
>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'author' }}>
<a
href={getPagePath(router, 'author', {
slug: props.authorSlug,
@ -180,11 +174,7 @@ export const AuthorView = (props: Props) => {
<span class="view-switcher__counter">{author().stat.shouts}</span>
</Show>
</li>
<li
classList={{
'view-switcher__item--selected': getPage().route === 'authorComments',
}}
>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
<a
href={getPagePath(router, 'authorComments', {
slug: props.authorSlug,
@ -196,11 +186,7 @@ export const AuthorView = (props: Props) => {
<span class="view-switcher__counter">{author().stat.comments}</span>
</Show>
</li>
<li
classList={{
'view-switcher__item--selected': getPage().route === 'authorAbout',
}}
>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorAbout' }}>
<a
onClick={() => checkBioHeight()}
href={getPagePath(router, 'authorAbout', {
@ -284,38 +270,31 @@ export const AuthorView = (props: Props) => {
</Show>
<Show when={sortedArticles().length > 0}>
<Show when={sortedArticles().length === 1}>
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
</Show>
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
<Show when={sortedArticles().length === 2}>
<Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
</Show>
<Show when={sortedArticles().length === 3}>
<Row3 articles={sortedArticles()} noauthor={true} nodate={true} />
</Show>
<Show when={sortedArticles().length > 3}>
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
<Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noauthor={true} />
<Row1 article={sortedArticles()[3]} noauthor={true} nodate={true} />
<Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noauthor={true} />
<Row1 article={sortedArticles()[6]} noauthor={true} nodate={true} />
<Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noauthor={true} />
<For each={pages()}>
{(page) => (
<>
<Row1 article={page[0]} noauthor={true} nodate={true} />
<Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
<Row1 article={page[3]} noauthor={true} nodate={true} />
<Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
<Row1 article={page[6]} noauthor={true} nodate={true} />
<Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
</>
)}
</For>
<Show when={sortedArticles().length > 1}>
<Switch>
<Match when={sortedArticles().length === 2}>
<Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
</Match>
<Match when={sortedArticles().length === 3}>
<Row3 articles={sortedArticles()} noauthor={true} nodate={true} />
</Match>
<Match when={sortedArticles().length > 3}>
<For each={pages()}>
{(page) => (
<>
<Row1 article={page[0]} noauthor={true} nodate={true} />
<Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
<Row1 article={page[3]} noauthor={true} nodate={true} />
<Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
<Row1 article={page[6]} noauthor={true} nodate={true} />
<Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
</>
)}
</For>
</Match>
</Switch>
</Show>
<Show when={isLoadMoreButtonVisible()}>

0
src/components/_shared/Subscribers/Subscribers.module.scss → src/components/_shared/FollowingCounters/FollowingCounters.module.scss
View File

4
src/components/_shared/Subscribers/Subscribers.tsx → src/components/_shared/FollowingCounters/FollowingCounters.tsx
View File

@ -5,7 +5,7 @@ import { useLocalize } from '../../../context/localize'
import { Author, Topic } from '../../../graphql/schema/core.gen'
import { Userpic } from '../../Author/Userpic'
import styles from './Subscribers.module.scss'
import styles from './FollowingCounters.module.scss'
type Props = {
followers?: Author[]
@ -14,7 +14,7 @@ type Props = {
followingAmount?: number
}
export const Subscribers = (props: Props) => {
export const FollowingCounters = (props: Props) => {
const { t } = useLocalize()
return (

1
src/components/_shared/FollowingCounters/index.ts Normal file
View File

@ -0,0 +1 @@
export { FollowingCounters } from './FollowingCounters'

0
src/components/_shared/Subscribe/Subscribe.module.scss → src/components/_shared/Newsletter/Newsletter.module.scss
View File

4
src/components/_shared/Subscribe/Subscribe.tsx → src/components/_shared/Newsletter/Newsletter.tsx
View File

@ -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('')

1
src/components/_shared/Newsletter/index.ts Normal file
View File

@ -0,0 +1 @@
export { Newsletter } from './Newsletter'

1
src/components/_shared/Subscribe/index.ts
View File

@ -1 +0,0 @@
export { Subscribe } from './Subscribe'

1
src/components/_shared/Subscribers/index.ts
View File

@ -1 +0,0 @@
export { Subscribers } from './Subscribers'

52
src/context/session.tsx
View File

@ -32,7 +32,7 @@ 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'
@ -203,7 +203,6 @@ export const SessionProvider = (props: {
ssrLoadFrom: 'initial',
initialValue: null,
})
const author = createMemo(() => session()?.user?.app_data?.profile)
const checkSessionIsExpired = () => {
const expires_at_data = localStorage.getItem('expires_at')
@ -225,38 +224,46 @@ export const SessionProvider = (props: {
onCleanup(() => clearTimeout(minuteLater))
const [author, setAuthor] = createSignal<Author>()
// when session is loaded
createEffect(
on(
session,
(s: AuthToken) => {
() => session(),
async (s: AuthToken) => {
if (s) {
const token = s?.access_token
if (token) {
if (!inboxClient.private) {
apiClient.connect(token)
inboxClient.connect(token)
}
try {
const profile = session()?.user?.app_data?.profile
if (profile?.id) addAuthors([profile])
} catch (e) {
console.error(e)
}
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 {
reset()
console.warn('app_data is empty')
if (s?.user) {
try {
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 {
console.warn(s)
setSession(null)
setAuthor(null)
setIsSessionLoaded(true)
}
}
}
},
{ defer: true },
),
)
const reset = () => {
setIsSessionLoaded(true)
setSession(null)
}
// initial effect
onMount(() => {
@ -311,7 +318,8 @@ export const SessionProvider = (props: {
const signOut = async () => {
const authResult: ApiResponse<GenericResponse> = await authorizer().logout()
console.debug(authResult)
reset()
setSession(null)
setIsSessionLoaded(true)
showSnackbar({ body: t("You've successfully logged out") })
console.debug(session())
}

2
src/graphql/query/core/author-followers.ts
View File

@ -1,7 +1,7 @@
import { gql } from '@urql/core'
export default gql`
query UserSubscribersQuery($slug: String, $user: String, $author_id: Int) {
query UserFollowingCountersQuery($slug: String, $user: String, $author_id: Int) {
get_author_followers(slug: $slug, user: $user, author_id: $author_id) {
id
slug

4
src/pages/about/manifest.page.tsx
View File

@ -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 = () => {
<Feedback />
</Modal>
<Modal variant="wide" name="subscribe">
<Subscribe />
<Newsletter />
</Modal>
<Meta name="descprition" content={description} />
<Meta name="keywords" content={t('keywords')} />