dev
This commit is contained in:
parent
cdcf9afcc2
commit
090a8f2633
|
|
@ -23,7 +23,7 @@ module.exports = {
|
|||
},
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
// 'plugin:@typescript-eslint/recommended-requiring-type-checking', // 23-01-2024 681 problems
|
||||
// 'plugin:@typescript-eslint/recommended-requiring-type-checking', // 30-01-2024 699 problems
|
||||
],
|
||||
rules: {
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
|
|
@ -40,12 +40,12 @@ module.exports = {
|
|||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
mocha: true,
|
||||
// mocha: true,
|
||||
},
|
||||
globals: {},
|
||||
rules: {
|
||||
// Solid
|
||||
'solid/reactivity': 'off', // too many 'should be used within JSX'
|
||||
'solid/reactivity': 'off',
|
||||
'solid/no-innerhtml': 'off',
|
||||
|
||||
/** Unicorn **/
|
||||
|
|
@ -65,6 +65,7 @@ module.exports = {
|
|||
'unicorn/no-array-callback-reference': 'warn',
|
||||
'unicorn/no-array-method-this-argument': 'warn',
|
||||
'unicorn/no-for-loop': 'off',
|
||||
'unicorn/prefer-switch': 'warn',
|
||||
|
||||
'sonarjs/no-duplicate-string': ['warn', { threshold: 5 }],
|
||||
'sonarjs/prefer-immediate-return': 'warn',
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -16,3 +16,4 @@ stats.html
|
|||
*.scss.d.ts
|
||||
pnpm-lock.yaml
|
||||
bun.lockb
|
||||
.jj
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
"typograf": "7.1.0",
|
||||
"uniqolor": "1.1.0",
|
||||
"vike": "0.4.148",
|
||||
"vite": "4.5.1",
|
||||
"vite": "4.5.2",
|
||||
"vite-plugin-mkcert": "1.16.0",
|
||||
"vite-plugin-sass-dts": "1.3.11",
|
||||
"vite-plugin-solid": "2.7.2",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { Dynamic } from 'solid-js/web'
|
|||
import { ConfirmProvider } from '../context/confirm'
|
||||
import { ConnectProvider } from '../context/connect'
|
||||
import { EditorProvider } from '../context/editor'
|
||||
import { FollowingProvider } from '../context/following'
|
||||
import { InboxProvider } from '../context/inbox'
|
||||
import { LocalizeProvider } from '../context/localize'
|
||||
import { MediaQueryProvider } from '../context/mediaQuery'
|
||||
|
|
@ -90,7 +91,7 @@ type Props = PageProps & { is404: boolean }
|
|||
|
||||
export const App = (props: Props) => {
|
||||
const { page, searchParams } = useRouter<RootSearchParams>()
|
||||
let is404 = props.is404
|
||||
const is404 = createMemo(() => props.is404)
|
||||
|
||||
createEffect(() => {
|
||||
if (!searchParams().m) {
|
||||
|
|
@ -106,8 +107,7 @@ export const App = (props: Props) => {
|
|||
const pageComponent = createMemo(() => {
|
||||
const result = pagesMap[page()?.route || 'home']
|
||||
|
||||
if (is404 || !result || page()?.path === '/404') {
|
||||
is404 = false
|
||||
if (is404() || !result || page()?.path === '/404') {
|
||||
return FourOuFourPage
|
||||
}
|
||||
|
||||
|
|
@ -122,15 +122,17 @@ export const App = (props: Props) => {
|
|||
<SnackbarProvider>
|
||||
<ConfirmProvider>
|
||||
<SessionProvider onStateChangeCallback={console.log}>
|
||||
<ConnectProvider>
|
||||
<NotificationsProvider>
|
||||
<EditorProvider>
|
||||
<InboxProvider>
|
||||
<Dynamic component={pageComponent()} {...props} />
|
||||
</InboxProvider>
|
||||
</EditorProvider>
|
||||
</NotificationsProvider>
|
||||
</ConnectProvider>
|
||||
<FollowingProvider>
|
||||
<ConnectProvider>
|
||||
<NotificationsProvider>
|
||||
<EditorProvider>
|
||||
<InboxProvider>
|
||||
<Dynamic component={pageComponent()} {...props} />
|
||||
</InboxProvider>
|
||||
</EditorProvider>
|
||||
</NotificationsProvider>
|
||||
</ConnectProvider>
|
||||
</FollowingProvider>
|
||||
</SessionProvider>
|
||||
</ConfirmProvider>
|
||||
</SnackbarProvider>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,12 @@ import { openPage } from '@nanostores/router'
|
|||
import { clsx } from 'clsx'
|
||||
import { createEffect, createMemo, createSignal, Match, Show, Switch } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useMediaQuery } from '../../../context/mediaQuery'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { Author, FollowingEntity } from '../../../graphql/schema/core.gen'
|
||||
import { router, useRouter } from '../../../stores/router'
|
||||
import { follow, unfollow } from '../../../stores/zine/common'
|
||||
// import { capitalize } from '../../../utils/capitalize'
|
||||
import { isCyrillic } from '../../../utils/cyrillic'
|
||||
import { translit } from '../../../utils/ru2en'
|
||||
import { Button } from '../../_shared/Button'
|
||||
|
|
@ -33,7 +32,7 @@ type Props = {
|
|||
export const AuthorBadge = (props: Props) => {
|
||||
const { mediaMatches } = useMediaQuery()
|
||||
const [isMobileView, setIsMobileView] = createSignal(false)
|
||||
const [isSubscribing, setIsSubscribing] = createSignal(false)
|
||||
const [followed, setFollowed] = createSignal(false)
|
||||
|
||||
createEffect(() => {
|
||||
setIsMobileView(!mediaMatches.sm)
|
||||
|
|
@ -41,33 +40,14 @@ export const AuthorBadge = (props: Props) => {
|
|||
|
||||
const {
|
||||
author,
|
||||
subscriptions,
|
||||
actions: { loadSubscriptions, requireAuthentication },
|
||||
actions: { requireAuthentication },
|
||||
} = useSession()
|
||||
const { setFollowing } = useFollowing()
|
||||
const { changeSearchParams } = useRouter()
|
||||
const { t, formatDate, lang } = useLocalize()
|
||||
const subscribed = createMemo(() => {
|
||||
const sss = subscriptions()
|
||||
return sss?.authors.some((a: Author) => a?.slug === props.author.slug)
|
||||
})
|
||||
|
||||
const subscribe = async (really = true) => {
|
||||
setIsSubscribing(true)
|
||||
|
||||
await (really
|
||||
? follow({ what: FollowingEntity.Author, slug: props.author.slug })
|
||||
: unfollow({ what: FollowingEntity.Author, slug: props.author.slug }))
|
||||
|
||||
await loadSubscriptions()
|
||||
setIsSubscribing(false)
|
||||
}
|
||||
const handleSubscribe = (really: boolean) => {
|
||||
requireAuthentication(() => {
|
||||
subscribe(really)
|
||||
}, 'subscribe')
|
||||
}
|
||||
|
||||
const initChat = () => {
|
||||
// eslint-disable-next-line solid/reactivity
|
||||
requireAuthentication(() => {
|
||||
openPage(router, `inbox`)
|
||||
changeSearchParams({
|
||||
|
|
@ -88,6 +68,14 @@ export const AuthorBadge = (props: Props) => {
|
|||
return props.author.name
|
||||
})
|
||||
|
||||
const handleFollowClick = () => {
|
||||
const value = !followed()
|
||||
requireAuthentication(() => {
|
||||
setFollowed(value)
|
||||
setFollowing(FollowingEntity.Author, props.author.slug, value)
|
||||
}, 'subscribe')
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
|
||||
<div class={styles.basicInfo}>
|
||||
|
|
@ -135,37 +123,24 @@ export const AuthorBadge = (props: Props) => {
|
|||
<div class={styles.actions}>
|
||||
<Show
|
||||
when={!props.minimizeSubscribeButton}
|
||||
fallback={
|
||||
<CheckButton
|
||||
text={t('Follow')}
|
||||
checked={subscribed()}
|
||||
onClick={() => handleSubscribe(!subscribed())}
|
||||
/>
|
||||
}
|
||||
fallback={<CheckButton text={t('Follow')} checked={followed()} onClick={handleFollowClick} />}
|
||||
>
|
||||
<Show
|
||||
when={subscribed()}
|
||||
when={followed()}
|
||||
fallback={
|
||||
<Button
|
||||
variant={props.iconButtons ? 'secondary' : 'bordered'}
|
||||
size="S"
|
||||
value={
|
||||
<Show
|
||||
when={props.iconButtons}
|
||||
fallback={
|
||||
<Show when={isSubscribing()} fallback={t('Subscribe')}>
|
||||
{t('subscribing...')}
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<Show when={props.iconButtons} fallback={t('Subscribe')}>
|
||||
<Icon name="author-subscribe" class={stylesButton.icon} />
|
||||
</Show>
|
||||
}
|
||||
onClick={() => handleSubscribe(true)}
|
||||
onClick={handleFollowClick}
|
||||
isSubscribeButton={true}
|
||||
class={clsx(styles.actionButton, {
|
||||
[styles.iconed]: props.iconButtons,
|
||||
[stylesButton.subscribed]: subscribed(),
|
||||
[stylesButton.subscribed]: followed(),
|
||||
})}
|
||||
/>
|
||||
}
|
||||
|
|
@ -186,11 +161,11 @@ export const AuthorBadge = (props: Props) => {
|
|||
<Icon name="author-unsubscribe" class={stylesButton.icon} />
|
||||
</Show>
|
||||
}
|
||||
onClick={() => handleSubscribe(false)}
|
||||
onClick={handleFollowClick}
|
||||
isSubscribeButton={true}
|
||||
class={clsx(styles.actionButton, {
|
||||
[styles.iconed]: props.iconButtons,
|
||||
[stylesButton.subscribed]: subscribed(),
|
||||
[stylesButton.subscribed]: followed(),
|
||||
})}
|
||||
/>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import type { Author } from '../../../graphql/schema/core.gen'
|
||||
import type { Author, Community } from '../../../graphql/schema/core.gen'
|
||||
|
||||
import { openPage, redirectPage } from '@nanostores/router'
|
||||
import { clsx } from 'clsx'
|
||||
import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
|
||||
import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
|
||||
import { SubscriptionFilter } from '../../../pages/types'
|
||||
import { router, useRouter } from '../../../stores/router'
|
||||
import { follow, unfollow } from '../../../stores/zine/common'
|
||||
import { isCyrillic } from '../../../utils/cyrillic'
|
||||
import { isAuthor } from '../../../utils/isAuthor'
|
||||
import { translit } from '../../../utils/ru2en'
|
||||
|
|
@ -33,32 +33,14 @@ export const AuthorCard = (props: Props) => {
|
|||
const { t, lang } = useLocalize()
|
||||
const {
|
||||
author,
|
||||
subscriptions,
|
||||
isSessionLoaded,
|
||||
actions: { loadSubscriptions, requireAuthentication },
|
||||
actions: { requireAuthentication },
|
||||
} = useSession()
|
||||
|
||||
const [isSubscribing, setIsSubscribing] = createSignal(false)
|
||||
const [following, setFollowing] = createSignal<Array<Author | Topic>>(props.following)
|
||||
const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
|
||||
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
|
||||
|
||||
const subscribed = createMemo<boolean>(() =>
|
||||
subscriptions().authors.some((a: Author) => a?.slug === props.author.slug),
|
||||
)
|
||||
|
||||
const subscribe = async (really = true) => {
|
||||
setIsSubscribing(true)
|
||||
|
||||
await (really
|
||||
? follow({ what: FollowingEntity.Author, slug: props.author.slug })
|
||||
: unfollow({ what: FollowingEntity.Author, slug: props.author.slug }))
|
||||
|
||||
await loadSubscriptions()
|
||||
setIsSubscribing(false)
|
||||
}
|
||||
|
||||
const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
|
||||
|
||||
const [followed, setFollowed] = createSignal()
|
||||
const { setFollowing } = useFollowing()
|
||||
const name = createMemo(() => {
|
||||
if (lang() !== 'ru' && isCyrillic(props.author.name)) {
|
||||
if (props.author.name === 'Дискурс') {
|
||||
|
|
@ -71,9 +53,12 @@ export const AuthorCard = (props: Props) => {
|
|||
return props.author.name
|
||||
})
|
||||
|
||||
onMount(() => setAuthorSubs(props.following))
|
||||
|
||||
// TODO: reimplement AuthorCard
|
||||
const { changeSearchParams } = useRouter()
|
||||
const initChat = () => {
|
||||
// eslint-disable-next-line solid/reactivity
|
||||
requireAuthentication(() => {
|
||||
openPage(router, `inbox`)
|
||||
changeSearchParams({
|
||||
|
|
@ -82,30 +67,30 @@ export const AuthorCard = (props: Props) => {
|
|||
}, 'discussions')
|
||||
}
|
||||
|
||||
const handleSubscribe = () => {
|
||||
requireAuthentication(() => {
|
||||
subscribe(!subscribed())
|
||||
}, 'subscribe')
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
if (props.following) {
|
||||
if (subscriptionFilter() === 'users') {
|
||||
setFollowing(props.following.filter((s) => 'name' in s))
|
||||
if (subscriptionFilter() === 'authors') {
|
||||
setAuthorSubs(props.following.filter((s) => 'name' in s))
|
||||
} else if (subscriptionFilter() === 'topics') {
|
||||
setFollowing(props.following.filter((s) => 'title' in s))
|
||||
setAuthorSubs(props.following.filter((s) => 'title' in s))
|
||||
} else if (subscriptionFilter() === 'communities') {
|
||||
setAuthorSubs(props.following.filter((s) => 'title' in s))
|
||||
} else {
|
||||
setFollowing(props.following)
|
||||
setAuthorSubs(props.following)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const followButtonText = createMemo(() => {
|
||||
if (isSubscribing()) {
|
||||
return t('subscribing...')
|
||||
}
|
||||
const handleFollowClick = () => {
|
||||
const value = !followed()
|
||||
requireAuthentication(() => {
|
||||
setFollowed(value)
|
||||
setFollowing(FollowingEntity.Author, props.author.slug, value)
|
||||
}, 'subscribe')
|
||||
}
|
||||
|
||||
if (subscribed()) {
|
||||
const followButtonText = createMemo(() => {
|
||||
if (followed()) {
|
||||
return (
|
||||
<>
|
||||
<span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
|
||||
|
|
@ -214,11 +199,11 @@ export const AuthorCard = (props: Props) => {
|
|||
fallback={
|
||||
<div class={styles.authorActions}>
|
||||
<Button
|
||||
onClick={handleSubscribe}
|
||||
onClick={handleFollowClick}
|
||||
value={followButtonText()}
|
||||
isSubscribeButton={true}
|
||||
class={clsx({
|
||||
[stylesButton.subscribed]: subscribed(),
|
||||
[stylesButton.subscribed]: followed(),
|
||||
})}
|
||||
/>
|
||||
<Button
|
||||
|
|
@ -279,8 +264,8 @@ export const AuthorCard = (props: Props) => {
|
|||
</button>
|
||||
<span class="view-switcher__counter">{props.following.length}</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('users')}>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('authors')}>
|
||||
{t('Authors')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
|
|
@ -300,7 +285,7 @@ export const AuthorCard = (props: Props) => {
|
|||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<div class="col-24">
|
||||
<For each={following()}>
|
||||
<For each={authorSubs()}>
|
||||
{(subscription) =>
|
||||
isAuthor(subscription) ? (
|
||||
<AuthorBadge author={subscription} />
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
import type { Shout } from '../../graphql/schema/core.gen'
|
||||
|
||||
import { createComputed, createSignal, Show, For } from 'solid-js'
|
||||
import { createSignal, createEffect, For, Show } from 'solid-js'
|
||||
|
||||
import { ArticleCard } from './ArticleCard'
|
||||
import { ArticleCardProps } from './ArticleCard/ArticleCard'
|
||||
|
||||
const x = [
|
||||
['12', '12'],
|
||||
['8', '16'],
|
||||
['16', '8'],
|
||||
]
|
||||
const columnSizes = ['col-md-12', 'col-md-8', 'col-md-16']
|
||||
|
||||
export const Row2 = (props: {
|
||||
articles: Shout[]
|
||||
|
|
@ -18,10 +13,10 @@ export const Row2 = (props: {
|
|||
noAuthorLink?: boolean
|
||||
noauthor?: boolean
|
||||
}) => {
|
||||
const [y, setY] = createSignal(0)
|
||||
const [columnIndex, setColumnIndex] = createSignal(0)
|
||||
|
||||
// FIXME: random can break hydration
|
||||
createComputed(() => setY(Math.floor(Math.random() * x.length)))
|
||||
// Update column index on component mount
|
||||
createEffect(() => setColumnIndex(Math.floor(Math.random() * columnSizes.length)))
|
||||
|
||||
return (
|
||||
<Show when={props.articles && props.articles.length > 0}>
|
||||
|
|
@ -29,31 +24,16 @@ export const Row2 = (props: {
|
|||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<For each={props.articles}>
|
||||
{(a, i) => {
|
||||
// FIXME: refactor this, too ugly now
|
||||
const className = `col-md-${props.isEqual ? '12' : x[y()][i()]}`
|
||||
let desktopCoverSize: ArticleCardProps['desktopCoverSize']
|
||||
|
||||
switch (className) {
|
||||
case 'col-md-8': {
|
||||
desktopCoverSize = 'S'
|
||||
break
|
||||
}
|
||||
case 'col-md-12': {
|
||||
desktopCoverSize = 'M'
|
||||
break
|
||||
}
|
||||
default: {
|
||||
desktopCoverSize = 'L'
|
||||
}
|
||||
}
|
||||
|
||||
{(article, _idx) => {
|
||||
const className = columnSizes[props.isEqual ? 0 : columnIndex() % columnSizes.length]
|
||||
const big = className === 'col-md-12' ? 'M' : 'L'
|
||||
const desktopCoverSize = className === 'col-md-8' ? 'S' : big
|
||||
return (
|
||||
<div class={className}>
|
||||
<ArticleCard
|
||||
article={a}
|
||||
article={article}
|
||||
settings={{
|
||||
isWithCover: props.isEqual || x[y()][i()] === '16',
|
||||
isWithCover: props.isEqual || className === 'col-md-16',
|
||||
nodate: props.isEqual || props.nodate,
|
||||
noAuthorLink: props.noAuthorLink,
|
||||
noauthor: props.noauthor,
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@ import { getPagePath } from '@nanostores/router'
|
|||
import { clsx } from 'clsx'
|
||||
import { createSignal, For, Show } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { Author } from '../../../graphql/schema/core.gen'
|
||||
import { router, useRouter } from '../../../stores/router'
|
||||
import { useArticlesStore } from '../../../stores/zine/articles'
|
||||
import { useSeenStore } from '../../../stores/zine/seen'
|
||||
|
|
@ -15,7 +16,7 @@ import styles from './Sidebar.module.scss'
|
|||
export const Sidebar = () => {
|
||||
const { t } = useLocalize()
|
||||
const { seen } = useSeenStore()
|
||||
const { subscriptions } = useSession()
|
||||
const { subscriptions } = useFollowing()
|
||||
const { page } = useRouter()
|
||||
const { articlesByTopic } = useArticlesStore()
|
||||
const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
|
||||
|
|
@ -27,7 +28,6 @@ export const Sidebar = () => {
|
|||
const checkAuthorIsSeen = (authorSlug: string) => {
|
||||
return Boolean(seen()[authorSlug])
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={styles.sidebar}>
|
||||
<ul class={styles.feedFilters}>
|
||||
|
|
@ -111,7 +111,7 @@ export const Sidebar = () => {
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<Show when={subscriptions().authors.length > 0 || subscriptions().topics.length > 0}>
|
||||
<Show when={subscriptions.authors.length > 0 || subscriptions.topics.length > 0}>
|
||||
<h4
|
||||
classList={{ [styles.opened]: isSubscriptionsVisible() }}
|
||||
onClick={() => {
|
||||
|
|
@ -122,22 +122,19 @@ export const Sidebar = () => {
|
|||
</h4>
|
||||
|
||||
<ul class={clsx(styles.subscriptions, { [styles.hidden]: !isSubscriptionsVisible() })}>
|
||||
<For each={subscriptions().authors}>
|
||||
{(author) => (
|
||||
<For each={subscriptions.authors}>
|
||||
{(a: Author) => (
|
||||
<li>
|
||||
<a
|
||||
href={`/author/${author.slug}`}
|
||||
classList={{ [styles.unread]: checkAuthorIsSeen(author.slug) }}
|
||||
>
|
||||
<a href={`/author/${a.slug}`} classList={{ [styles.unread]: checkAuthorIsSeen(a.slug) }}>
|
||||
<div class={styles.sidebarItemName}>
|
||||
<Userpic name={author.name} userpic={author.pic} size="XS" class={styles.userpic} />
|
||||
<div class={styles.sidebarItemNameLabel}>{author.name}</div>
|
||||
<Userpic name={a.name} userpic={a.pic} size="XS" class={styles.userpic} />
|
||||
<div class={styles.sidebarItemNameLabel}>{a.name}</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
<For each={subscriptions().topics}>
|
||||
<For each={subscriptions.topics}>
|
||||
{(topic) => (
|
||||
<li>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -148,8 +148,10 @@ export const Header = (props: Props) => {
|
|||
}
|
||||
|
||||
onMount(async () => {
|
||||
const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT })
|
||||
setRandomTopics(topics)
|
||||
if (window.location.pathname === '/' || window.location.pathname === '') {
|
||||
const topics = await apiClient.getRandomTopics({ amount: RANDOM_TOPICS_COUNT })
|
||||
setRandomTopics(topics)
|
||||
}
|
||||
})
|
||||
|
||||
const handleToggleMenuByLink = (event: MouseEvent, route: keyof typeof ROUTES) => {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const ProfileSettings = () => {
|
|||
const [addLinkForm, setAddLinkForm] = createSignal<boolean>(false)
|
||||
const [incorrectUrl, setIncorrectUrl] = createSignal<boolean>(false)
|
||||
const [isUserpicUpdating, setIsUserpicUpdating] = createSignal(false)
|
||||
const [userpicFile, setUserpicFile] = createSignal<any | null>(null)
|
||||
const [userpicFile, setUserpicFile] = createSignal(null)
|
||||
const [uploadError, setUploadError] = createSignal(false)
|
||||
const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false)
|
||||
const [hostname, setHostname] = createSignal<string | null>(null)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import type { Topic } from '../../graphql/schema/core.gen'
|
||||
|
||||
import { clsx } from 'clsx'
|
||||
import { createMemo, createSignal, Show } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../context/following'
|
||||
import { useLocalize } from '../../context/localize'
|
||||
import { useSession } from '../../context/session'
|
||||
import { FollowingEntity } from '../../graphql/schema/core.gen'
|
||||
import { follow, unfollow } from '../../stores/zine/common'
|
||||
import { FollowingEntity, type Topic } from '../../graphql/schema/core.gen'
|
||||
import { capitalize } from '../../utils/capitalize'
|
||||
import { Button } from '../_shared/Button'
|
||||
import { CheckButton } from '../_shared/CheckButton'
|
||||
|
|
@ -36,32 +34,21 @@ interface TopicProps {
|
|||
|
||||
export const TopicCard = (props: TopicProps) => {
|
||||
const { t, lang } = useLocalize()
|
||||
const title = createMemo(() =>
|
||||
capitalize(lang() === 'en' ? props.topic.slug.replaceAll('-', ' ') : props.topic.title || ''),
|
||||
)
|
||||
const {
|
||||
subscriptions,
|
||||
isSessionLoaded,
|
||||
actions: { loadSubscriptions, requireAuthentication },
|
||||
author,
|
||||
actions: { requireAuthentication },
|
||||
} = useSession()
|
||||
const { setFollowing, loading: subLoading } = useFollowing()
|
||||
const [followed, setFollowed] = createSignal()
|
||||
|
||||
const [isSubscribing, setIsSubscribing] = createSignal(false)
|
||||
|
||||
const subscribed = createMemo(() => {
|
||||
return subscriptions().topics.some((topic) => topic.slug === props.topic.slug)
|
||||
})
|
||||
|
||||
const subscribe = async (really = true) => {
|
||||
setIsSubscribing(true)
|
||||
|
||||
await (really
|
||||
? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
|
||||
: unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
|
||||
|
||||
await loadSubscriptions()
|
||||
setIsSubscribing(false)
|
||||
}
|
||||
|
||||
const handleSubscribe = () => {
|
||||
const handleFollowClick = () => {
|
||||
const value = !followed()
|
||||
requireAuthentication(() => {
|
||||
subscribe(!subscribed())
|
||||
setFollowed(value)
|
||||
setFollowing(FollowingEntity.Topic, props.topic.slug, value)
|
||||
}, 'subscribe')
|
||||
}
|
||||
|
||||
|
|
@ -69,12 +56,12 @@ export const TopicCard = (props: TopicProps) => {
|
|||
return (
|
||||
<>
|
||||
<Show when={props.iconButton}>
|
||||
<Show when={subscribed()} fallback="+">
|
||||
<Show when={followed()} fallback="+">
|
||||
<Icon name="check-subscribed" />
|
||||
</Show>
|
||||
</Show>
|
||||
<Show when={!props.iconButton}>
|
||||
<Show when={subscribed()} fallback={t('Follow')}>
|
||||
<Show when={followed()} fallback={t('Follow')}>
|
||||
<span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
|
||||
<span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
|
||||
</Show>
|
||||
|
|
@ -83,10 +70,6 @@ export const TopicCard = (props: TopicProps) => {
|
|||
)
|
||||
}
|
||||
|
||||
const title = createMemo(() =>
|
||||
capitalize(lang() === 'en' ? props.topic.slug.replaceAll('-', ' ') : props.topic.title || ''),
|
||||
)
|
||||
|
||||
return (
|
||||
<div class={styles.topicContainer}>
|
||||
<div
|
||||
|
|
@ -141,24 +124,28 @@ export const TopicCard = (props: TopicProps) => {
|
|||
}}
|
||||
>
|
||||
<ShowOnlyOnClient>
|
||||
<Show when={isSessionLoaded()}>
|
||||
<Show when={author()}>
|
||||
<Show
|
||||
when={!props.minimizeSubscribeButton}
|
||||
fallback={
|
||||
<CheckButton text={t('Follow')} checked={subscribed()} onClick={handleSubscribe} />
|
||||
<CheckButton
|
||||
text={t('Follow')}
|
||||
checked={Boolean(followed())}
|
||||
onClick={handleFollowClick}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
variant="bordered"
|
||||
size="M"
|
||||
value={subscribeValue()}
|
||||
onClick={handleSubscribe}
|
||||
onClick={handleFollowClick}
|
||||
isSubscribeButton={true}
|
||||
class={clsx(styles.actionButton, {
|
||||
[styles.isSubscribing]: isSubscribing(),
|
||||
[stylesButton.subscribed]: subscribed(),
|
||||
[styles.isSubscribing]: subLoading(),
|
||||
[stylesButton.subscribed]: followed(),
|
||||
})}
|
||||
disabled={isSubscribing()}
|
||||
// disabled={subLoading()}
|
||||
/>
|
||||
</Show>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import type { Topic } from '../../graphql/schema/core.gen'
|
||||
|
||||
import { clsx } from 'clsx'
|
||||
import { createMemo, Show } from 'solid-js'
|
||||
import { createEffect, createSignal, Show } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../context/following'
|
||||
import { useLocalize } from '../../context/localize'
|
||||
import { useSession } from '../../context/session'
|
||||
import { FollowingEntity } from '../../graphql/schema/core.gen'
|
||||
import { follow, unfollow } from '../../stores/zine/common'
|
||||
import { Button } from '../_shared/Button'
|
||||
|
||||
import styles from './Full.module.scss'
|
||||
|
|
@ -16,23 +16,26 @@ type Props = {
|
|||
}
|
||||
|
||||
export const FullTopic = (props: Props) => {
|
||||
const {
|
||||
subscriptions,
|
||||
actions: { requireAuthentication, loadSubscriptions },
|
||||
} = useSession()
|
||||
|
||||
const { t } = useLocalize()
|
||||
const { subscriptions, setFollowing } = useFollowing()
|
||||
const {
|
||||
actions: { requireAuthentication },
|
||||
} = useSession()
|
||||
const [followed, setFollowed] = createSignal()
|
||||
|
||||
const subscribed = createMemo(() =>
|
||||
subscriptions().topics.some((topic) => topic.slug === props.topic?.slug),
|
||||
)
|
||||
createEffect(() => {
|
||||
const subs = subscriptions
|
||||
if (subs?.topics.length !== 0) {
|
||||
const items = subs.topics || []
|
||||
setFollowed(items.some((x: Topic) => x?.slug === props.topic?.slug))
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubscribe = (really: boolean) => {
|
||||
requireAuthentication(async () => {
|
||||
await (really
|
||||
? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
|
||||
: unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
|
||||
loadSubscriptions()
|
||||
const handleFollowClick = (_ev) => {
|
||||
const really = !followed()
|
||||
setFollowed(really)
|
||||
requireAuthentication(() => {
|
||||
setFollowing(FollowingEntity.Topic, props.topic.slug, really)
|
||||
}, 'follow')
|
||||
}
|
||||
|
||||
|
|
@ -41,16 +44,11 @@ export const FullTopic = (props: Props) => {
|
|||
<h1>#{props.topic?.title}</h1>
|
||||
<p>{props.topic?.body}</p>
|
||||
<div class={clsx(styles.topicActions)}>
|
||||
<Show when={!subscribed()}>
|
||||
<Button variant="primary" onClick={() => handleSubscribe(true)} value={t('Follow the topic')} />
|
||||
</Show>
|
||||
<Show when={subscribed()}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => handleSubscribe(false)}
|
||||
value={t('Unfollow the topic')}
|
||||
/>
|
||||
</Show>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleFollowClick}
|
||||
value={followed() ? t('Unfollow the topic') : t('Follow the topic')}
|
||||
/>
|
||||
<a class={styles.write} href={`/create/?topicId=${props.topic?.id}`}>
|
||||
{t('Write about the topic')}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import { clsx } from 'clsx'
|
||||
import { createEffect, createMemo, createSignal, Show } from 'solid-js'
|
||||
import { createEffect, createSignal, Show } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useMediaQuery } from '../../../context/mediaQuery'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
|
||||
import { follow, unfollow } from '../../../stores/zine/common'
|
||||
import { capitalize } from '../../../utils/capitalize'
|
||||
import { getImageUrl } from '../../../utils/getImageUrl'
|
||||
import { Button } from '../../_shared/Button'
|
||||
import { CheckButton } from '../../_shared/CheckButton'
|
||||
|
||||
import styles from './TopicBadge.module.scss'
|
||||
|
||||
type Props = {
|
||||
topic: Topic
|
||||
minimizeSubscribeButton?: boolean
|
||||
|
|
@ -21,29 +22,23 @@ export const TopicBadge = (props: Props) => {
|
|||
const { t, lang } = useLocalize()
|
||||
const { mediaMatches } = useMediaQuery()
|
||||
const [isMobileView, setIsMobileView] = createSignal(false)
|
||||
const [isSubscribing, setIsSubscribing] = createSignal(false)
|
||||
const {
|
||||
actions: { requireAuthentication },
|
||||
} = useSession()
|
||||
const { setFollowing, loading: subLoading } = useFollowing()
|
||||
const [followed, setFollowed] = createSignal()
|
||||
|
||||
const handleFollowClick = () => {
|
||||
const value = !followed()
|
||||
requireAuthentication(() => {
|
||||
setFollowed(value)
|
||||
setFollowing(FollowingEntity.Topic, props.topic.slug, value)
|
||||
}, 'subscribe')
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
setIsMobileView(!mediaMatches.sm)
|
||||
})
|
||||
const {
|
||||
subscriptions,
|
||||
actions: { loadSubscriptions },
|
||||
} = useSession()
|
||||
|
||||
const subscribed = createMemo(() =>
|
||||
subscriptions().topics.some((topic) => topic.slug === props.topic.slug),
|
||||
)
|
||||
|
||||
const subscribe = async (really = true) => {
|
||||
setIsSubscribing(true)
|
||||
|
||||
await (really
|
||||
? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
|
||||
: unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
|
||||
|
||||
await loadSubscriptions()
|
||||
setIsSubscribing(false)
|
||||
}
|
||||
|
||||
const title = () =>
|
||||
lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
|
||||
|
|
@ -82,23 +77,23 @@ export const TopicBadge = (props: Props) => {
|
|||
<Show
|
||||
when={!props.minimizeSubscribeButton}
|
||||
fallback={
|
||||
<CheckButton text={t('Follow')} checked={subscribed()} onClick={() => subscribe(!subscribed)} />
|
||||
<CheckButton text={t('Follow')} checked={Boolean(followed())} onClick={handleFollowClick} />
|
||||
}
|
||||
>
|
||||
<Show
|
||||
when={subscribed()}
|
||||
when={followed()}
|
||||
fallback={
|
||||
<Button
|
||||
variant="primary"
|
||||
size="S"
|
||||
value={isSubscribing() ? t('subscribing...') : t('Subscribe')}
|
||||
onClick={() => subscribe(true)}
|
||||
value={subLoading() ? t('subscribing...') : t('Subscribe')}
|
||||
onClick={handleFollowClick}
|
||||
class={styles.subscribeButton}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={() => subscribe(false)}
|
||||
onClick={handleFollowClick}
|
||||
variant="bordered"
|
||||
size="S"
|
||||
value={t('Following')}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import { Meta } from '@solidjs/meta'
|
|||
import { clsx } from 'clsx'
|
||||
import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
|
||||
|
||||
import { useFollowing } from '../../context/following'
|
||||
import { useLocalize } from '../../context/localize'
|
||||
import { useSession } from '../../context/session'
|
||||
import { useRouter } from '../../stores/router'
|
||||
import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'
|
||||
import { capitalize } from '../../utils/capitalize'
|
||||
|
|
@ -41,7 +41,7 @@ export const AllTopicsView = (props: Props) => {
|
|||
sortBy: searchParams().by || 'shouts',
|
||||
})
|
||||
|
||||
const { subscriptions } = useSession()
|
||||
const { subscriptions } = useFollowing()
|
||||
|
||||
createEffect(() => {
|
||||
if (!searchParams().by) {
|
||||
|
|
@ -76,7 +76,7 @@ export const AllTopicsView = (props: Props) => {
|
|||
return keys
|
||||
})
|
||||
|
||||
const subscribed = (topicSlug: string) => subscriptions().topics.some((topic) => topic.slug === topicSlug)
|
||||
const subscribed = (topicSlug: string) => subscriptions.topics.some((topic) => topic.slug === topicSlug)
|
||||
|
||||
const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
|
||||
const [searchQuery, setSearchQuery] = createSignal('')
|
||||
|
|
@ -191,7 +191,7 @@ export const AllTopicsView = (props: Props) => {
|
|||
{(topic) => (
|
||||
<>
|
||||
<TopicCard
|
||||
topic={topic as Topic}
|
||||
topic={topic}
|
||||
compact={false}
|
||||
subscribed={subscribed(topic.slug)}
|
||||
showPublications={true}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import type { Author, Shout, Topic } from '../../../graphql/schema/core.gen'
|
||||
import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
|
||||
|
||||
import { getPagePath } from '@nanostores/router'
|
||||
import { Meta } from '@solidjs/meta'
|
||||
import { clsx } from 'clsx'
|
||||
import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffect } from 'solid-js'
|
||||
import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffect, on } from 'solid-js'
|
||||
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { apiClient } from '../../../graphql/client/core'
|
||||
|
|
@ -13,6 +13,7 @@ import { loadAuthor, useAuthorsStore } 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 { Loading } from '../../_shared/Loading'
|
||||
import { Comment } from '../../Article/Comment'
|
||||
|
|
@ -44,21 +45,32 @@ export const AuthorView = (props: Props) => {
|
|||
const [followers, setFollowers] = createSignal<Author[]>([])
|
||||
const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
|
||||
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
|
||||
const author = createMemo(() => authorEntities()[props.authorSlug])
|
||||
|
||||
createEffect(async () => {
|
||||
// current author
|
||||
const [author, setAuthor] = createSignal<Author>()
|
||||
createEffect(() => {
|
||||
try {
|
||||
const a = authorEntities()[props.authorSlug]
|
||||
setAuthor(a)
|
||||
} catch (error) {
|
||||
console.debug(error)
|
||||
}
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (author() && author().id && !author().stat) {
|
||||
const a = await loadAuthor({ slug: '', author_id: author().id })
|
||||
const a = loadAuthor({ slug: '', author_id: author().id })
|
||||
console.debug(`[AuthorView] loaded author:`, a)
|
||||
}
|
||||
})
|
||||
|
||||
const bioContainerRef: { current: HTMLDivElement } = { current: null }
|
||||
const bioWrapperRef: { current: HTMLDivElement } = { current: null }
|
||||
|
||||
const fetchSubscriptions = async (): Promise<{ authors: Author[]; topics: Topic[] }> => {
|
||||
try {
|
||||
const [getAuthors, getTopics] = await Promise.all([
|
||||
apiClient.getAuthorFollowingUsers({ slug: props.authorSlug }),
|
||||
apiClient.getAuthorFollowingAuthors({ slug: props.authorSlug }),
|
||||
apiClient.getAuthorFollowingTopics({ slug: props.authorSlug }),
|
||||
])
|
||||
const authors = getAuthors
|
||||
|
|
@ -76,32 +88,27 @@ export const AuthorView = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
checkBioHeight()
|
||||
|
||||
// pagination
|
||||
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
|
||||
await loadMore()
|
||||
}
|
||||
})
|
||||
|
||||
createEffect(async () => {
|
||||
const slug = author()?.slug
|
||||
if (slug) {
|
||||
console.debug('[AuthorView] load subscriptions')
|
||||
const fetchData = async () => {
|
||||
const slug = author()?.slug || props.authorSlug
|
||||
if (slug && getPage().route === 'authorComments' && author()) {
|
||||
try {
|
||||
const { authors, topics } = await fetchSubscriptions()
|
||||
setFollowing([...(authors || []), ...(topics || [])])
|
||||
const userSubscribers = await apiClient.getAuthorFollowers({ slug })
|
||||
setFollowers(userSubscribers || [])
|
||||
const flwrs = await apiClient.getAuthorFollowers({ slug })
|
||||
setFollowers(flwrs || [])
|
||||
console.info('[components.Author] following data loaded')
|
||||
} catch (error) {
|
||||
console.error('[AuthorView] error:', error)
|
||||
console.error('[components.Author] fetch error', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
document.title = author()?.name
|
||||
if (author()) {
|
||||
console.info('[components.Author] profile data loaded')
|
||||
document.title = author().name
|
||||
fetchData()
|
||||
}
|
||||
})
|
||||
|
||||
const loadMore = async () => {
|
||||
|
|
@ -115,42 +122,66 @@ export const AuthorView = (props: Props) => {
|
|||
restoreScrollPosition()
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
checkBioHeight()
|
||||
|
||||
// pagination
|
||||
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
|
||||
fetchData()
|
||||
loadMore()
|
||||
}
|
||||
})
|
||||
|
||||
const pages = createMemo<Shout[][]>(() =>
|
||||
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
|
||||
)
|
||||
|
||||
const [commented, setCommented] = createSignal([])
|
||||
const fetchComments = async (commenter: Author) => {
|
||||
const data = await apiClient.getReactionsBy({
|
||||
by: { comment: true, created_by: commenter.id },
|
||||
})
|
||||
console.debug(`[components.Author] fetched ${data.length} comments`)
|
||||
setCommented(data)
|
||||
}
|
||||
|
||||
createEffect(async () => {
|
||||
if (getPage().route === 'authorComments' && props.author) {
|
||||
try {
|
||||
const data = await apiClient.getReactionsBy({
|
||||
by: { comment: true, created_by: props.author.id },
|
||||
})
|
||||
setCommented(data)
|
||||
} catch (error) {
|
||||
console.error('[getReactionsBy comment]', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
const [commented, setCommented] = createSignal<Reaction[]>([])
|
||||
createEffect(
|
||||
on(
|
||||
author,
|
||||
(a: Author) => {
|
||||
if (getPage().route === 'authorComments') {
|
||||
console.debug('[components.Author] routed to comments')
|
||||
try {
|
||||
if (a) fetchComments(a)
|
||||
} catch (error) {
|
||||
console.error('[components.Author] fetch error', error)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ defer: true },
|
||||
),
|
||||
)
|
||||
|
||||
const ogImage = props.author?.pic
|
||||
? getImageUrl(props.author.pic, { width: 1200 })
|
||||
: getImageUrl('production/image/logo_image.png')
|
||||
const description = getDescription(props.author?.bio)
|
||||
const ogTitle = props.author?.name
|
||||
const ogImage = createMemo(() =>
|
||||
author()?.pic
|
||||
? getImageUrl(author()?.pic, { width: 1200 })
|
||||
: getImageUrl('production/image/logo_image.png'),
|
||||
)
|
||||
const description = createMemo(() => getDescription(author()?.bio))
|
||||
|
||||
return (
|
||||
<div class={styles.authorPage}>
|
||||
<Meta name="descprition" content={description} />
|
||||
<Meta name="og:type" content="profile" />
|
||||
<Meta name="og:title" content={ogTitle} />
|
||||
<Meta name="og:image" content={ogImage} />
|
||||
<Meta name="og:description" content={description} />
|
||||
<Meta name="twitter:card" content="summary_large_image" />
|
||||
<Meta name="twitter:title" content={ogTitle} />
|
||||
<Meta name="twitter:description" content={description} />
|
||||
<Meta name="twitter:image" content={ogImage} />
|
||||
<Show when={author()}>
|
||||
<Meta name="descprition" content={description()} />
|
||||
<Meta name="og:type" content="profile" />
|
||||
<Meta name="og:title" content={author().name} />
|
||||
<Meta name="og:image" content={ogImage()} />
|
||||
<Meta name="og:description" content={description()} />
|
||||
<Meta name="twitter:card" content="summary_large_image" />
|
||||
<Meta name="twitter:title" content={author().name} />
|
||||
<Meta name="twitter:description" content={description()} />
|
||||
<Meta name="twitter:image" content={ogImage()} />
|
||||
</Show>
|
||||
<div class="wide-container">
|
||||
<Show when={author()} fallback={<Loading />}>
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -28,9 +28,10 @@ export const ProfileSubscriptions = () => {
|
|||
|
||||
const fetchSubscriptions = async () => {
|
||||
try {
|
||||
const slug = author()?.slug
|
||||
const [getAuthors, getTopics] = await Promise.all([
|
||||
apiClient.getAuthorFollowingUsers({ slug: author()?.slug }),
|
||||
apiClient.getAuthorFollowingTopics({ slug: author()?.slug }),
|
||||
apiClient.getAuthorFollowingAuthors({ slug }),
|
||||
apiClient.getAuthorFollowingTopics({ slug }),
|
||||
])
|
||||
setFollowing([...getAuthors, ...getTopics])
|
||||
setFiltered([...getAuthors, ...getTopics])
|
||||
|
|
@ -42,7 +43,7 @@ export const ProfileSubscriptions = () => {
|
|||
|
||||
createEffect(() => {
|
||||
if (following()) {
|
||||
if (subscriptionFilter() === 'users') {
|
||||
if (subscriptionFilter() === 'authors') {
|
||||
setFiltered(following().filter((s) => 'name' in s))
|
||||
} else if (subscriptionFilter() === 'topics') {
|
||||
setFiltered(following().filter((s) => 'title' in s))
|
||||
|
|
@ -80,8 +81,8 @@ export const ProfileSubscriptions = () => {
|
|||
{t('All')}
|
||||
</button>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('users')}>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('authors')}>
|
||||
{t('Authors')}
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { redirectPage } from '@nanostores/router'
|
||||
import { clsx } from 'clsx'
|
||||
import { createEffect, createSignal, lazy, onMount, Show } from 'solid-js'
|
||||
import { createEffect, createMemo, createSignal, lazy, onMount, Show } from 'solid-js'
|
||||
import { createStore } from 'solid-js/store'
|
||||
|
||||
import { ShoutForm, useEditorContext } from '../../../context/editor'
|
||||
|
|
@ -16,7 +16,6 @@ import { Icon } from '../../_shared/Icon'
|
|||
import { Image } from '../../_shared/Image'
|
||||
import { TopicSelect, UploadModalContent } from '../../Editor'
|
||||
import { Modal } from '../../Nav/Modal'
|
||||
import { EMPTY_TOPIC } from '../Edit'
|
||||
|
||||
import styles from './PublishSettings.module.scss'
|
||||
import stylesBeside from '../../Feed/Beside.module.scss'
|
||||
|
|
@ -36,21 +35,26 @@ const shorten = (str: string, maxLen: number) => {
|
|||
return `${result}...`
|
||||
}
|
||||
|
||||
const EMPTY_TOPIC: Topic = {
|
||||
id: -1,
|
||||
slug: '',
|
||||
}
|
||||
const emptyConfig = {
|
||||
coverImageUrl: '',
|
||||
mainTopic: EMPTY_TOPIC,
|
||||
slug: '',
|
||||
title: '',
|
||||
subtitle: '',
|
||||
description: '',
|
||||
selectedTopics: [],
|
||||
}
|
||||
|
||||
export const PublishSettings = (props: Props) => {
|
||||
const { t } = useLocalize()
|
||||
const { author } = useSession()
|
||||
const { sortedTopics } = useTopicsStore()
|
||||
|
||||
const [topics, setTopics] = createSignal<Topic[]>(sortedTopics())
|
||||
|
||||
onMount(async () => {
|
||||
await loadAllTopics()
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
setTopics(sortedTopics())
|
||||
})
|
||||
|
||||
const composeDescription = () => {
|
||||
if (!props.form.description) {
|
||||
const cleanFootnotes = props.form.body.replaceAll(/<footnote data-value=".*?">.*?<\/footnote>/g, '')
|
||||
|
|
@ -60,23 +64,32 @@ export const PublishSettings = (props: Props) => {
|
|||
return props.form.description
|
||||
}
|
||||
|
||||
const initialData: Partial<ShoutForm> = {
|
||||
coverImageUrl: props.form.coverImageUrl,
|
||||
mainTopic: props.form.mainTopic || EMPTY_TOPIC,
|
||||
slug: props.form.slug,
|
||||
title: props.form.title,
|
||||
subtitle: props.form.subtitle,
|
||||
description: composeDescription(),
|
||||
selectedTopics: [],
|
||||
}
|
||||
const initialData = createMemo(() => {
|
||||
return {
|
||||
coverImageUrl: props.form?.coverImageUrl,
|
||||
mainTopic: props.form?.mainTopic || EMPTY_TOPIC,
|
||||
slug: props.form?.slug,
|
||||
title: props.form?.title,
|
||||
subtitle: props.form?.subtitle,
|
||||
description: composeDescription(),
|
||||
selectedTopics: [],
|
||||
}
|
||||
})
|
||||
|
||||
const [settingsForm, setSettingsForm] = createStore(emptyConfig)
|
||||
|
||||
onMount(() => {
|
||||
setSettingsForm(initialData())
|
||||
loadAllTopics()
|
||||
})
|
||||
|
||||
createEffect(() => setTopics(sortedTopics()))
|
||||
|
||||
const {
|
||||
formErrors,
|
||||
actions: { setForm, setFormErrors, saveShout, publishShout },
|
||||
} = useEditorContext()
|
||||
|
||||
const [settingsForm, setSettingsForm] = createStore(initialData)
|
||||
|
||||
const handleUploadModalContentCloseSetCover = (image: UploadedFile) => {
|
||||
hideModal()
|
||||
setSettingsForm('coverImageUrl', image.url)
|
||||
|
|
@ -110,7 +123,7 @@ export const PublishSettings = (props: Props) => {
|
|||
})
|
||||
}
|
||||
const handleCancelClick = () => {
|
||||
setSettingsForm(initialData)
|
||||
setSettingsForm(initialData())
|
||||
handleBackClick()
|
||||
}
|
||||
const handlePublishSubmit = () => {
|
||||
|
|
@ -149,9 +162,9 @@ export const PublishSettings = (props: Props) => {
|
|||
[styles.hasImage]: settingsForm.coverImageUrl,
|
||||
})}
|
||||
>
|
||||
<Show when={settingsForm.coverImageUrl ?? initialData.coverImageUrl}>
|
||||
<Show when={settingsForm.coverImageUrl ?? initialData().coverImageUrl}>
|
||||
<div class={styles.shoutCardCover}>
|
||||
<Image src={settingsForm.coverImageUrl} alt={initialData.title} width={800} />
|
||||
<Image src={settingsForm.coverImageUrl} alt={initialData().title} width={800} />
|
||||
</div>
|
||||
</Show>
|
||||
<div class={styles.text}>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import type { Shout, Topic } from '../../graphql/schema/core.gen'
|
|||
|
||||
import { Meta } from '@solidjs/meta'
|
||||
import { clsx } from 'clsx'
|
||||
import { For, Show, createMemo, onMount, createSignal } from 'solid-js'
|
||||
import { For, Show, createMemo, onMount, createSignal, createEffect } from 'solid-js'
|
||||
|
||||
import { useLocalize } from '../../context/localize'
|
||||
import { useRouter } from '../../stores/router'
|
||||
|
|
@ -39,23 +39,27 @@ const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3
|
|||
export const TopicView = (props: Props) => {
|
||||
const { t, lang } = useLocalize()
|
||||
const { searchParams, changeSearchParams } = useRouter<TopicsPageSearchParams>()
|
||||
|
||||
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
|
||||
|
||||
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
|
||||
const { topicEntities } = useTopicsStore({ topics: [props.topic] })
|
||||
|
||||
const { authorsByTopic } = useAuthorsStore()
|
||||
|
||||
const topic = createMemo(() =>
|
||||
props.topic?.slug in topicEntities() ? topicEntities()[props.topic.slug] : props.topic,
|
||||
const [topic, setTopic] = createSignal<Topic>()
|
||||
createEffect(() => {
|
||||
const topics = topicEntities()
|
||||
if (props.topicSlug && !topic() && topics) {
|
||||
setTopic(topics[props.topicSlug])
|
||||
}
|
||||
})
|
||||
const title = createMemo(
|
||||
() =>
|
||||
`#${capitalize(
|
||||
lang() === 'en'
|
||||
? topic()?.slug.replace(/-/, ' ')
|
||||
: topic()?.title || topic()?.slug.replace(/-/, ' '),
|
||||
true,
|
||||
)}`,
|
||||
)
|
||||
const title = () =>
|
||||
`#${capitalize(
|
||||
lang() === 'en' ? topic()?.slug.replace(/-/, ' ') : topic()?.title || topic()?.slug.replace(/-/, ' '),
|
||||
true,
|
||||
)}`
|
||||
onMount(() => (document.title = title()))
|
||||
|
||||
const loadMore = async () => {
|
||||
saveScrollPosition()
|
||||
|
|
|
|||
127
src/context/following.tsx
Normal file
127
src/context/following.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import { createEffect, createSignal, createContext, Accessor, useContext, JSX, onMount } from 'solid-js'
|
||||
import { createStore } from 'solid-js/store'
|
||||
|
||||
import { apiClient } from '../graphql/client/core'
|
||||
import { Author, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen'
|
||||
|
||||
import { useSession } from './session'
|
||||
|
||||
type SubscriptionsData = {
|
||||
topics?: Topic[]
|
||||
authors?: Author[]
|
||||
communities?: Community[]
|
||||
}
|
||||
|
||||
interface FollowingContextType {
|
||||
loading: Accessor<boolean>
|
||||
subscriptions: SubscriptionsData
|
||||
setSubscriptions: (subscriptions: SubscriptionsData) => void
|
||||
setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
|
||||
loadSubscriptions: () => void
|
||||
follow: (what: FollowingEntity, slug: string) => Promise<void>
|
||||
unfollow: (what: FollowingEntity, slug: string) => Promise<void>
|
||||
}
|
||||
|
||||
const FollowingContext = createContext<FollowingContextType>()
|
||||
|
||||
export function useFollowing() {
|
||||
return useContext(FollowingContext)
|
||||
}
|
||||
|
||||
const EMPTY_SUBSCRIPTIONS = {
|
||||
topics: [],
|
||||
authors: [],
|
||||
communities: [],
|
||||
}
|
||||
|
||||
export const FollowingProvider = (props: { children: JSX.Element }) => {
|
||||
const [loading, setLoading] = createSignal<boolean>(false)
|
||||
const [subscriptions, setSubscriptions] = createStore<SubscriptionsData>(EMPTY_SUBSCRIPTIONS)
|
||||
const { author } = useSession()
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
if (apiClient.private) {
|
||||
console.debug('[context.following] fetching subs data...')
|
||||
const result = await apiClient.getMySubscriptions()
|
||||
setSubscriptions(result || EMPTY_SUBSCRIPTIONS)
|
||||
console.info('[context.following] subs:', subscriptions)
|
||||
}
|
||||
} catch (error) {
|
||||
console.info('[context.following] cannot get subs', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const follow = async (what: FollowingEntity, slug: string) => {
|
||||
if (!author()) return
|
||||
try {
|
||||
await apiClient.follow({ what, slug })
|
||||
setSubscriptions((prevSubscriptions) => {
|
||||
const updatedSubs = { ...prevSubscriptions }
|
||||
if (!updatedSubs[what]) updatedSubs[what] = []
|
||||
const exists = updatedSubs[what]?.some((entity) => entity.slug === slug)
|
||||
if (!exists) updatedSubs[what].push(slug)
|
||||
return updatedSubs
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const unfollow = async (what: FollowingEntity, slug: string) => {
|
||||
if (!author()) return
|
||||
try {
|
||||
await apiClient.unfollow({ what, slug })
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const loadData = (_a?: Author) => {
|
||||
// console.debug('[context.following] current subs:', subscriptions)
|
||||
if (!subscriptions?.authors?.length && !subscriptions?.topics?.length) {
|
||||
// && subscriptions.communites?.length
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
createEffect(() => {
|
||||
if (author()) loadData()
|
||||
})
|
||||
onMount(loadData)
|
||||
|
||||
const setFollowing = (what: FollowingEntity, slug: string, value = true) => {
|
||||
setSubscriptions((prevSubscriptions) => {
|
||||
const updatedSubs = { ...prevSubscriptions }
|
||||
if (!updatedSubs[what]) updatedSubs[what] = []
|
||||
if (value) {
|
||||
const exists = updatedSubs[what]?.some((entity) => entity.slug === slug)
|
||||
if (!exists) updatedSubs[what].push(slug)
|
||||
} else {
|
||||
updatedSubs[what] = (updatedSubs[what] || []).filter((x) => x !== slug)
|
||||
}
|
||||
return updatedSubs
|
||||
})
|
||||
try {
|
||||
;(value ? follow : unfollow)(what, slug)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
|
||||
const value: FollowingContextType = {
|
||||
loading,
|
||||
subscriptions,
|
||||
setSubscriptions,
|
||||
setFollowing,
|
||||
loadSubscriptions: fetchData,
|
||||
follow,
|
||||
unfollow,
|
||||
}
|
||||
|
||||
return <FollowingContext.Provider value={value}>{props.children}</FollowingContext.Provider>
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
|
|||
|
||||
const createReaction = async (input: ReactionInput): Promise<void> => {
|
||||
const reaction = await apiClient.createReaction(input)
|
||||
|
||||
if (!reaction) return
|
||||
const changes = {
|
||||
[reaction.id]: reaction,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { AuthModalSource } from '../components/Nav/AuthModal/types'
|
||||
import type { Author, Result } from '../graphql/schema/core.gen'
|
||||
import type { Author } from '../graphql/schema/core.gen'
|
||||
import type { Accessor, JSX, Resource } from 'solid-js'
|
||||
|
||||
import {
|
||||
|
|
@ -41,19 +41,17 @@ const defaultConfig: ConfigType = {
|
|||
}
|
||||
|
||||
export type SessionContextType = {
|
||||
config: ConfigType
|
||||
config: Accessor<ConfigType>
|
||||
session: Resource<AuthToken>
|
||||
author: Resource<Author | null>
|
||||
authError: Accessor<string>
|
||||
isSessionLoaded: Accessor<boolean>
|
||||
subscriptions: Accessor<Result>
|
||||
isAuthenticated: Accessor<boolean>
|
||||
actions: {
|
||||
loadSession: () => AuthToken | Promise<AuthToken>
|
||||
setSession: (token: AuthToken | null) => void // setSession
|
||||
loadAuthor: (info?: unknown) => Author | Promise<Author>
|
||||
setAuthor: (a: Author) => void
|
||||
loadSubscriptions: () => Promise<void>
|
||||
requireAuthentication: (
|
||||
callback: (() => Promise<void>) | (() => void),
|
||||
modalSource: AuthModalSource,
|
||||
|
|
@ -77,11 +75,6 @@ export function useSession() {
|
|||
return useContext(SessionContext)
|
||||
}
|
||||
|
||||
const EMPTY_SUBSCRIPTIONS = {
|
||||
topics: [],
|
||||
authors: [],
|
||||
}
|
||||
|
||||
export const SessionProvider = (props: {
|
||||
onStateChangeCallback(state: AuthToken): unknown
|
||||
children: JSX.Element
|
||||
|
|
@ -91,12 +84,12 @@ export const SessionProvider = (props: {
|
|||
actions: { showSnackbar },
|
||||
} = useSnackbar()
|
||||
const { searchParams, changeSearchParams } = useRouter()
|
||||
const [configuration, setConfig] = createSignal<ConfigType>(defaultConfig)
|
||||
const authorizer = createMemo(() => new Authorizer(configuration()))
|
||||
const [config, setConfig] = createSignal<ConfigType>(defaultConfig)
|
||||
const authorizer = createMemo(() => new Authorizer(config()))
|
||||
const [oauthState, setOauthState] = createSignal<string>()
|
||||
|
||||
// handle callback's redirect_uri
|
||||
createEffect(async () => {
|
||||
createEffect(() => {
|
||||
// oauth
|
||||
const state = searchParams()?.state
|
||||
if (state) {
|
||||
|
|
@ -120,43 +113,44 @@ export const SessionProvider = (props: {
|
|||
})
|
||||
|
||||
// load
|
||||
let minuteLater
|
||||
let minuteLater: NodeJS.Timeout | null
|
||||
|
||||
const [isSessionLoaded, setIsSessionLoaded] = createSignal(false)
|
||||
const [authError, setAuthError] = createSignal('')
|
||||
const [session, { refetch: loadSession, mutate: setSession }] = createResource<AuthToken>(
|
||||
async () => {
|
||||
try {
|
||||
const s = await authorizer().getSession()
|
||||
console.info('[context.session] loading session', s)
|
||||
|
||||
// Set session expiration time in local storage
|
||||
const expires_at = new Date(Date.now() + s.expires_in * 1000)
|
||||
localStorage.setItem('expires_at', `${expires_at.getTime()}`)
|
||||
// Function to load session data
|
||||
const sessionData = async () => {
|
||||
try {
|
||||
const s = await authorizer().getSession()
|
||||
console.info('[context.session] loading session', s)
|
||||
|
||||
// Set up session expiration check timer
|
||||
minuteLater = setTimeout(checkSessionIsExpired, 60 * 1000)
|
||||
console.info(`[context.session] will refresh in ${s.expires_in / 60} mins`)
|
||||
// Set session expiration time in local storage
|
||||
const expires_at = new Date(Date.now() + s.expires_in * 1000)
|
||||
localStorage.setItem('expires_at', `${expires_at.getTime()}`)
|
||||
|
||||
// Set the session loaded flag
|
||||
setIsSessionLoaded(true)
|
||||
// Set up session expiration check timer
|
||||
minuteLater = setTimeout(checkSessionIsExpired, 60 * 1000)
|
||||
console.info(`[context.session] will refresh in ${s.expires_in / 60} mins`)
|
||||
|
||||
return s
|
||||
} catch (error) {
|
||||
console.info('[context.session] cannot refresh session', error)
|
||||
setAuthError(error)
|
||||
// Set the session loaded flag
|
||||
setIsSessionLoaded(true)
|
||||
|
||||
// Set the session loaded flag even if there's an error
|
||||
setIsSessionLoaded(true)
|
||||
return s
|
||||
} catch (error) {
|
||||
console.info('[context.session] cannot refresh session', error)
|
||||
setAuthError(error)
|
||||
|
||||
return null
|
||||
}
|
||||
},
|
||||
{
|
||||
ssrLoadFrom: 'initial',
|
||||
initialValue: null,
|
||||
},
|
||||
)
|
||||
// Set the session loaded flag even if there's an error
|
||||
setIsSessionLoaded(true)
|
||||
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const [session, { refetch: loadSession, mutate: setSession }] = createResource<AuthToken>(sessionData, {
|
||||
ssrLoadFrom: 'initial',
|
||||
initialValue: null,
|
||||
})
|
||||
|
||||
const checkSessionIsExpired = () => {
|
||||
const expires_at_data = localStorage.getItem('expires_at')
|
||||
|
|
@ -177,26 +171,17 @@ export const SessionProvider = (props: {
|
|||
}
|
||||
|
||||
onCleanup(() => clearTimeout(minuteLater))
|
||||
|
||||
const [author, { refetch: loadAuthor, mutate: setAuthor }] = createResource<Author | null>(
|
||||
async () => {
|
||||
const u = session()?.user
|
||||
return u ? (await apiClient.getAuthorId({ user: u.id.trim() })) || null : null
|
||||
},
|
||||
{
|
||||
ssrLoadFrom: 'initial',
|
||||
initialValue: null,
|
||||
},
|
||||
)
|
||||
|
||||
const [subscriptions, setSubscriptions] = createSignal<Result>(EMPTY_SUBSCRIPTIONS)
|
||||
const loadSubscriptions = async (): Promise<void> => {
|
||||
const result = await apiClient.getMySubscriptions()
|
||||
setSubscriptions(result || EMPTY_SUBSCRIPTIONS)
|
||||
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<Author | null>(authorData, {
|
||||
ssrLoadFrom: 'initial',
|
||||
initialValue: null,
|
||||
})
|
||||
|
||||
// when session is loaded
|
||||
createEffect(async () => {
|
||||
createEffect(() => {
|
||||
if (session()) {
|
||||
const token = session()?.access_token
|
||||
if (token) {
|
||||
|
|
@ -206,23 +191,24 @@ export const SessionProvider = (props: {
|
|||
notifierClient.connect(token)
|
||||
inboxClient.connect(token)
|
||||
}
|
||||
if (!author()) {
|
||||
const a = await loadAuthor()
|
||||
if (a) {
|
||||
await loadSubscriptions()
|
||||
addAuthors([a])
|
||||
} else {
|
||||
reset()
|
||||
}
|
||||
}
|
||||
if (!author()) loadAuthor()
|
||||
|
||||
setIsSessionLoaded(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// when author is loaded
|
||||
createEffect(() => {
|
||||
if (author()) {
|
||||
addAuthors([author()])
|
||||
} else {
|
||||
reset()
|
||||
}
|
||||
})
|
||||
|
||||
const reset = () => {
|
||||
setIsSessionLoaded(true)
|
||||
setSubscriptions(EMPTY_SUBSCRIPTIONS)
|
||||
setSession(null)
|
||||
setAuthor(null)
|
||||
}
|
||||
|
|
@ -252,10 +238,10 @@ export const SessionProvider = (props: {
|
|||
)
|
||||
|
||||
const [authCallback, setAuthCallback] = createSignal<() => void>(() => {})
|
||||
const requireAuthentication = async (callback: () => void, modalSource: AuthModalSource) => {
|
||||
const requireAuthentication = (callback: () => void, modalSource: AuthModalSource) => {
|
||||
setAuthCallback((_cb) => callback)
|
||||
if (!session()) {
|
||||
await loadSession()
|
||||
loadSession()
|
||||
if (!session()) {
|
||||
showModal('auth', modalSource)
|
||||
}
|
||||
|
|
@ -323,7 +309,6 @@ export const SessionProvider = (props: {
|
|||
const isAuthenticated = createMemo(() => Boolean(author()))
|
||||
const actions = {
|
||||
loadSession,
|
||||
loadSubscriptions,
|
||||
requireAuthentication,
|
||||
signUp,
|
||||
signIn,
|
||||
|
|
@ -339,9 +324,8 @@ export const SessionProvider = (props: {
|
|||
}
|
||||
const value: SessionContextType = {
|
||||
authError,
|
||||
config: configuration(),
|
||||
config,
|
||||
session,
|
||||
subscriptions,
|
||||
isSessionLoaded,
|
||||
author,
|
||||
actions,
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import type {
|
|||
QueryLoad_Authors_ByArgs,
|
||||
QueryLoad_Shouts_SearchArgs,
|
||||
QueryLoad_Shouts_Random_TopArgs,
|
||||
Community,
|
||||
} from '../schema/core.gen'
|
||||
|
||||
import { createGraphQLClient } from '../createGraphQLClient'
|
||||
|
|
@ -37,20 +38,24 @@ import authorBy from '../query/core/author-by'
|
|||
import authorFollowers from '../query/core/author-followers'
|
||||
import authorId from '../query/core/author-id'
|
||||
import authorsAll from '../query/core/authors-all'
|
||||
import authorFollowed from '../query/core/authors-followed-by'
|
||||
import authorsLoadBy from '../query/core/authors-load-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 userFollowedTopics from '../query/core/topics-by-author'
|
||||
import authorFollowedAuthors from '../query/core/authors-followed-by'
|
||||
import authorFollowedTopics from '../query/core/topics-followed-by'
|
||||
import authorFollowedCommunities from '../query/core/communities-followed-by'
|
||||
import topicsRandomQuery from '../query/core/topics-random'
|
||||
|
||||
const publicGraphQLClient = createGraphQLClient('core')
|
||||
|
||||
export const apiClient = {
|
||||
private: null,
|
||||
connect: (token: string) => (apiClient.private = createGraphQLClient('core', token)), // NOTE: use it after token appears
|
||||
connect: (token: string) => {
|
||||
// NOTE: use it after token appears
|
||||
apiClient.private = createGraphQLClient('core', token)
|
||||
},
|
||||
|
||||
getRandomTopShouts: async (params: QueryLoad_Shouts_Random_TopArgs) => {
|
||||
const response = await publicGraphQLClient.query(loadShoutsTopRandom, params).toPromise()
|
||||
|
|
@ -119,14 +124,18 @@ export const apiClient = {
|
|||
const response = await publicGraphQLClient.query(authorFollowers, { slug }).toPromise()
|
||||
return response.data.get_author_followers
|
||||
},
|
||||
getAuthorFollowingUsers: async ({ slug }: { slug: string }): Promise<Author[]> => {
|
||||
const response = await publicGraphQLClient.query(authorFollowed, { slug }).toPromise()
|
||||
getAuthorFollowingAuthors: async ({ slug }: { slug: string }): Promise<Author[]> => {
|
||||
const response = await publicGraphQLClient.query(authorFollowedAuthors, { slug }).toPromise()
|
||||
return response.data.get_author_followed
|
||||
},
|
||||
getAuthorFollowingTopics: async ({ slug }: { slug: string }): Promise<Topic[]> => {
|
||||
const response = await publicGraphQLClient.query(userFollowedTopics, { slug }).toPromise()
|
||||
const response = await publicGraphQLClient.query(authorFollowedTopics, { slug }).toPromise()
|
||||
return response.data.get_topics_by_author
|
||||
},
|
||||
getAuthorFollowingCommunities: async ({ slug }: { slug: string }): Promise<Community[]> => {
|
||||
const response = await publicGraphQLClient.query(authorFollowedCommunities, { slug }).toPromise()
|
||||
return response.data.get_communities_by_author
|
||||
},
|
||||
updateProfile: async (input: ProfileInput) => {
|
||||
const response = await apiClient.private.mutation(updateProfile, { profile: input }).toPromise()
|
||||
return response.data.update_profile
|
||||
|
|
@ -200,7 +209,7 @@ export const apiClient = {
|
|||
const resp = await publicGraphQLClient.query(shoutsLoadBy, { options }).toPromise()
|
||||
if (resp.error) console.error(resp)
|
||||
|
||||
return resp.data.load_shouts_by
|
||||
return resp.data?.load_shouts_by
|
||||
},
|
||||
|
||||
getShoutsSearch: async ({ text, limit, offset }: QueryLoad_Shouts_SearchArgs) => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ export default gql`
|
|||
id
|
||||
body
|
||||
kind
|
||||
range
|
||||
created_at
|
||||
reply_to
|
||||
stat {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { gql } from '@urql/core'
|
||||
|
||||
export default gql`
|
||||
query AuthorsAllQuery($by: AuthorsBy, $limit: Int, $offset: Int) {
|
||||
query AuthorsAllQuery($by: AuthorsBy!, $limit: Int, $offset: Int) {
|
||||
load_authors_by(by: $by, limit: $limit, offset: $offset) {
|
||||
id
|
||||
slug
|
||||
|
|
|
|||
17
src/graphql/query/core/communities-followed-by.ts
Normal file
17
src/graphql/query/core/communities-followed-by.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { gql } from '@urql/core'
|
||||
|
||||
export default gql`
|
||||
query LoadCommunitiesFollowedBy($slug: String, $user: String, $author_id: Int) {
|
||||
get_communities_by_author(slug: $slug, user: $user, author_id: $author_id) {
|
||||
id
|
||||
slug
|
||||
title
|
||||
pic
|
||||
stat {
|
||||
shouts
|
||||
followers
|
||||
authors
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { gql } from '@urql/core'
|
||||
|
||||
export default gql`
|
||||
query UserFollowingTopicsQuery($slug: String, $user: String, $author_id: Int) {
|
||||
query LoadTopicsFollowedBy($slug: String, $user: String, $author_id: Int) {
|
||||
get_topics_by_author(slug: $slug, user: $user, author_id: $author_id) {
|
||||
id
|
||||
slug
|
||||
|
|
@ -50,4 +50,4 @@ export type UploadedFile = {
|
|||
originalFilename?: string
|
||||
}
|
||||
|
||||
export type SubscriptionFilter = 'all' | 'users' | 'topics'
|
||||
export type SubscriptionFilter = 'all' | 'authors' | 'topics' | 'communities'
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import { apiClient } from '../../graphql/client/core'
|
||||
import { FollowingEntity } from '../../graphql/schema/core.gen'
|
||||
|
||||
export const follow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
|
||||
await apiClient.follow({ what, slug })
|
||||
}
|
||||
export const unfollow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
|
||||
await apiClient.unfollow({ what, slug })
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ export const getImageUrl = (
|
|||
src: string,
|
||||
options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
|
||||
) => {
|
||||
const filename = src.split('/').pop()
|
||||
const filename = src?.split('/').pop()
|
||||
const isAudio = src.toLowerCase().split('.').pop() in ['wav', 'mp3', 'ogg', 'aif', 'flac']
|
||||
const base = isAudio ? cdnUrl : `${thumborUrl}/unsafe/`
|
||||
const sizeUrlPart = isAudio ? '' : getSizeUrlPart(options)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { onCleanup, onMount } from 'solid-js'
|
||||
|
||||
export const useEscKeyDownHandler = (onEscKeyDown: () => void) => {
|
||||
export const useEscKeyDownHandler = (onEscKeyDown: (ev) => void) => {
|
||||
const keydownHandler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onEscKeyDown()
|
||||
onEscKeyDown(e)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user