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

Merge pull request #435 from Discours/feature/session-upgrade

Browse Source 
app-data-author
This commit is contained in:
Tony 2024-04-08 22:15:12 +03:00 committed by GitHub
commit 66ed666b90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 132 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -16,7 +16,7 @@
"hygen": "HYGEN_TMPLS=gen hygen",
"postinstall": "npm run codegen && npx patch-package",
"check:code": "npx @biomejs/biome check src --log-kind=compact --verbose",
"check:code:fix": "npx @biomejs/biome check src --log-kind=compact --verbose --apply-unsafe",
"check:code:fix": "npx @biomejs/biome check src --log-kind=compact",
"lint": "npm run lint:code && stylelint **/*.{scss,css}",
"lint:code": "npx @biomejs/biome lint src --log-kind=compact --verbose",
"lint:code:fix": "npx @biomejs/biome lint src --apply-unsafe --log-kind=compact --verbose",

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

@ -134,7 +134,9 @@ export const AuthorCard = (props: Props) => {
)}
</For>
<div class={styles.subscribersCounter}>
{t('SubscriberWithCount', { count: props.followers.length ?? 0 })}
{t('SubscriberWithCount', {
count: props.followers.length ?? 0,
})}
</div>
</a>
</Show>
@ -169,7 +171,9 @@ export const AuthorCard = (props: Props) => {
}}
</For>
<div class={styles.subscribersCounter}>
{t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
{t('SubscriptionWithCount', {
count: props?.following.length ?? 0,
})}
</div>
</a>
</Show>
@ -234,7 +238,9 @@ export const AuthorCard = (props: Props) => {
title={props.author.name}
description={props.author.bio}
imageUrl={props.author.pic}
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
shareUrl={getShareUrl({
pathname: `/author/${props.author.slug}`,
})}
trigger={<Button variant="secondary" value={t('Share')} />}
/>
</div>
@ -270,13 +276,21 @@ export const AuthorCard = (props: Props) => {
<>
<h2>{t('Subscriptions')}</h2>
<ul class="view-switcher">
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
<li
class={clsx({
'view-switcher__item--selected': subscriptionFilter() === 'all',
})}
>
<button type="button" onClick={() => setSubscriptionFilter('all')}>
{t('All')}
</button>
<span class="view-switcher__counter">{props.following.length}</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
<li
class={clsx({
'view-switcher__item--selected': subscriptionFilter() === 'authors',
})}
>
<button type="button" onClick={() => setSubscriptionFilter('authors')}>
{t('Authors')}
</button>
@ -284,7 +298,11 @@ export const AuthorCard = (props: Props) => {
{props.following.filter((s) => 'name' in s).length}
</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
<li
class={clsx({
'view-switcher__item--selected': subscriptionFilter() === 'topics',
})}
>
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
{t('Topics')}
</button>

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

@ -7,6 +7,7 @@ import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMou
import { useFollowing } from '../../../context/following'
import { useLocalize } from '../../../context/localize'
import { useSession } from '../../../context/session'
import { apiClient } from '../../../graphql/client/core'
import { router, useRouter } from '../../../stores/router'
import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
@ -30,32 +31,47 @@ import styles from './Author.module.scss'
type Props = {
authorSlug: string
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 { loadSubscriptions } = useFollowing()
const { sortedArticles } = useArticlesStore()
const { authorEntities } = useAuthorsStore()
const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
const { session } = useSession()
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { authorEntities } = useAuthorsStore({ authors: [props.author] })
const { page: getPage, searchParams } = useRouter()
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const [isBioExpanded, setIsBioExpanded] = createSignal(false)
const [followers, setFollowers] = createSignal<Author[]>([])
const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
const [author, setAuthor] = createSignal<Author>()
const [followers, setFollowers] = createSignal([])
const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) // flat AuthorFollowsResult
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
const [commented, setCommented] = createSignal<Reaction[]>()
const modal = MODALS[searchParams().m]
// current author
const [author, setAuthor] = createSignal<Author>()
createEffect(() => {
try {
const a = authorEntities()[props.authorSlug]
setAuthor(a)
} catch (error) {
console.debug(error)
if (props.authorSlug) {
if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
console.info('my own profile')
const { profile, authors, topics } = session().user.app_data
setFollowers(myFollowers)
setAuthor(profile)
setFollowing([...authors, ...topics])
}
} else {
try {
const a = authorEntities()[props.authorSlug]
setAuthor(a)
// TODO: add following data retrieval
console.debug('[Author] expecting following data fetched')
} catch (error) {
console.debug(error)
}
}
})
@ -166,31 +182,53 @@ export const AuthorView = (props: Props) => {
<Show when={author()} fallback={<Loading />}>
<>
<div class={styles.authorHeader}>
<AuthorCard author={author()} followers={followers()} following={following()} />
<AuthorCard author={author()} followers={followers() || []} following={following() || []} />
</div>
<div class={clsx(styles.groupControls, 'row')}>
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ 'view-switcher__item--selected': getPage().route === 'author' }}>
<a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
<li
classList={{
'view-switcher__item--selected': getPage().route === 'author',
}}
>
<a
href={getPagePath(router, 'author', {
slug: props.authorSlug,
})}
>
{t('Publications')}
</a>
<Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.shouts}</span>
</Show>
</li>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
<a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
<li
classList={{
'view-switcher__item--selected': getPage().route === 'authorComments',
}}
>
<a
href={getPagePath(router, 'authorComments', {
slug: props.authorSlug,
})}
>
{t('Comments')}
</a>
<Show when={author().stat}>
<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', { slug: props.authorSlug })}
href={getPagePath(router, 'authorAbout', {
slug: props.authorSlug,
})}
>
{t('Profile')}
</a>

54
src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
View File

@ -1,6 +1,7 @@
import { clsx } from 'clsx'
import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
import { useFollowing } from '../../../context/following'
import { useLocalize } from '../../../context/localize'
import { useSession } from '../../../context/session'
import { apiClient } from '../../../graphql/client/core'
@ -20,41 +21,32 @@ import stylesSettings from '../../../styles/FeedSettings.module.scss'
export const ProfileSubscriptions = () => {
const { t, lang } = useLocalize()
const { author } = useSession()
const { author, session } = useSession()
const { subscriptions } = useFollowing()
const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([])
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
const [searchQuery, setSearchQuery] = createSignal('')
const fetchSubscriptions = async () => {
try {
const slug = author()?.slug
const authorFollows = await apiClient.getAuthorFollows({ slug })
setFollowing([...authorFollows['authors']])
setFiltered([...authorFollows['authors'], ...authorFollows['topics']])
} catch (error) {
console.error('[fetchSubscriptions] :', error)
throw error
}
}
createEffect(() => {
if (following()) {
const { authors, topics } = subscriptions
if (authors || topics) {
const fdata = [...(authors || []), ...(topics || [])]
setFollowing(fdata)
if (subscriptionFilter() === 'authors') {
setFiltered(following().filter((s) => 'name' in s))
setFiltered(fdata.filter((s) => 'name' in s))
} else if (subscriptionFilter() === 'topics') {
setFiltered(following().filter((s) => 'title' in s))
setFiltered(fdata.filter((s) => 'title' in s))
} else {
setFiltered(following())
setFiltered(fdata)
}
}
if (searchQuery()) {
setFiltered(dummyFilter(following(), searchQuery(), lang()))
}
})
onMount(async () => {
await fetchSubscriptions()
createEffect(() => {
if (searchQuery()) {
setFiltered(dummyFilter(following(), searchQuery(), lang()))
}
})
return (
@ -73,17 +65,29 @@ export const ProfileSubscriptions = () => {
<p class="description">{t('Here you can manage all your Discours subscriptions')}</p>
<Show when={following()} fallback={<Loading />}>
<ul class="view-switcher">
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
<li
class={clsx({
'view-switcher__item--selected': subscriptionFilter() === 'all',
})}
>
<button type="button" onClick={() => setSubscriptionFilter('all')}>
{t('All')}
</button>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
<li
class={clsx({
'view-switcher__item--selected': subscriptionFilter() === 'authors',
})}
>
<button type="button" onClick={() => setSubscriptionFilter('authors')}>
{t('Authors')}
</button>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
<li
class={clsx({
'view-switcher__item--selected': subscriptionFilter() === 'topics',
})}
>
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
{t('Topics')}
</button>

15
src/context/following.tsx
View File

@ -2,12 +2,13 @@ import { Accessor, JSX, createContext, createEffect, createSignal, useContext }
import { createStore } from 'solid-js/store'
import { apiClient } from '../graphql/client/core'
import { AuthorFollowsResult, FollowingEntity } from '../graphql/schema/core.gen'
import { Author, AuthorFollowsResult, FollowingEntity } from '../graphql/schema/core.gen'
import { useSession } from './session'
interface FollowingContextType {
loading: Accessor<boolean>
followers: Accessor<Array<Author>>
subscriptions: AuthorFollowsResult
setSubscriptions: (subscriptions: AuthorFollowsResult) => void
setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
@ -31,6 +32,7 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollowsResult = {
export const FollowingProvider = (props: { children: JSX.Element }) => {
const [loading, setLoading] = createSignal<boolean>(false)
const [followers, setFollowers] = createSignal<Array<Author>>([])
const [subscriptions, setSubscriptions] = createStore<AuthorFollowsResult>(EMPTY_SUBSCRIPTIONS)
const { author, session } = useSession()
@ -77,8 +79,14 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
createEffect(() => {
if (author()) {
console.debug('[context.following] author update detect')
fetchData()
try {
const { authors, followers, topics } = session().user.app_data
setSubscriptions({ authors, topics })
setFollowers(followers)
if (!authors) fetchData()
} catch (e) {
console.error(e)
}
}
})
@ -116,6 +124,7 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
setSubscriptions,
isOwnerSubscribed,
setFollowing,
followers,
loadSubscriptions: fetchData,
follow,
unfollow,

12
src/context/session.tsx
View File

@ -199,6 +199,7 @@ 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
@ -217,7 +218,15 @@ export const SessionProvider = (props: {
apiClient.connect(token)
inboxClient.connect(token)
}
if (!author()) loadAuthor()
try {
const { profile } = session().user.app_data
setAuthor(profile)
addAuthors([profile])
if (!profile) loadAuthor()
} catch (e) {
console.error(e)
}
setIsSessionLoaded(true)
}
@ -263,7 +272,6 @@ export const SessionProvider = (props: {
() => {
props.onStateChangeCallback(session())
},
{ defer: true },
),
)