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

Feature/profile links update (#215)

Browse Source 
* Change tabs by route
* Refactoring Author profile
This commit is contained in:
Ilya Y 2023-09-16 09:26:19 +03:00 committed by GitHub
parent f060841672
commit db417ea51d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/App.tsx
View File

@ -45,6 +45,11 @@ import { EditorProvider } from '../context/editor'
// const SomePage = lazy(() => import('./Pages/SomePage')) // const SomePage = lazy(() => import('./Pages/SomePage'))
const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = { const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
author: AuthorPage,
authorComments: AuthorPage,
authorAbout: AuthorPage,
authorFollowing: AuthorPage,
authorFollowers: AuthorPage,
inbox: InboxPage, inbox: InboxPage,
expo: LayoutShoutsPage, expo: LayoutShoutsPage,
connect: ConnectPage, connect: ConnectPage,
@ -56,7 +61,6 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
topics: AllTopicsPage, topics: AllTopicsPage,
topic: TopicPage, topic: TopicPage,
authors: AllAuthorsPage, authors: AllAuthorsPage,
author: AuthorPage,
feed: FeedPage, feed: FeedPage,
feedMy: FeedPage, feedMy: FeedPage,
feedNotifications: FeedPage, feedNotifications: FeedPage,

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

@ -10,7 +10,7 @@ import { useSession } from '../../../context/session'
import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient' import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
import { FollowingEntity, Topic } from '../../../graphql/types.gen' import { FollowingEntity, Topic } from '../../../graphql/types.gen'
import { router, useRouter } from '../../../stores/router' import { router, useRouter } from '../../../stores/router'
import { openPage } from '@nanostores/router' import { openPage, redirectPage } from '@nanostores/router'
import { useLocalize } from '../../../context/localize' import { useLocalize } from '../../../context/localize'
import { ConditionalWrapper } from '../../_shared/ConditionalWrapper' import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
import { Modal } from '../../Nav/Modal' import { Modal } from '../../Nav/Modal'
@ -38,7 +38,7 @@ type Props = {
isNowrap?: boolean isNowrap?: boolean
class?: string class?: string
followers?: Author[] followers?: Author[]
subscriptions?: Array<Author | Topic> following?: Array<Author | Topic>
showPublicationsCounter?: boolean showPublicationsCounter?: boolean
} }
@ -48,7 +48,7 @@ function isAuthor(value: Author | Topic): value is Author {
export const AuthorCard = (props: Props) => { export const AuthorCard = (props: Props) => {
const { t, lang } = useLocalize() const { t, lang } = useLocalize()
const { page } = useRouter()
const { const {
session, session,
isSessionLoaded, isSessionLoaded,
@ -56,7 +56,7 @@ export const AuthorCard = (props: Props) => {
} = useSession() } = useSession()
const [isSubscribing, setIsSubscribing] = createSignal(false) const [isSubscribing, setIsSubscribing] = createSignal(false)
const [subscriptions, setSubscriptions] = createSignal<Array<Author | Topic>>(props.subscriptions) const [following, setFollowing] = createSignal<Array<Author | Topic>>(props.following)
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all') const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
const [userpicUrl, setUserpicUrl] = createSignal<string>() const [userpicUrl, setUserpicUrl] = createSignal<string>()
@ -105,17 +105,27 @@ export const AuthorCard = (props: Props) => {
} }
createEffect(() => { createEffect(() => {
if (props.subscriptions) { if (props.following) {
if (subscriptionFilter() === 'users') { if (subscriptionFilter() === 'users') {
setSubscriptions(props.subscriptions.filter((s) => 'name' in s)) setFollowing(props.following.filter((s) => 'name' in s))
} else if (subscriptionFilter() === 'topics') { } else if (subscriptionFilter() === 'topics') {
setSubscriptions(props.subscriptions.filter((s) => 'title' in s)) setFollowing(props.following.filter((s) => 'title' in s))
} else { } else {
setSubscriptions(props.subscriptions) setFollowing(props.following)
} }
} }
}) })
createEffect(() => {
if (page().route === 'authorFollowing') {
showModal('following')
}
})
const handleCloseFollowModals = () => {
redirectPage(router, 'author', { slug: props.author.slug })
}
if (props.isAuthorPage && props.author.userpic.includes('assets.discours.io')) { if (props.isAuthorPage && props.author.userpic.includes('assets.discours.io')) {
setUserpicUrl(props.author.userpic.replace('100x', '500x500')) setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
} }
@ -201,12 +211,18 @@ export const AuthorCard = (props: Props) => {
<Show <Show
when={ when={
(props.followers && props.followers.length > 0) || (props.followers && props.followers.length > 0) ||
(props.subscriptions && props.subscriptions.length > 0) (props.following && props.following.length > 0)
} }
> >
<div class={styles.subscribersContainer}> <div class={styles.subscribersContainer}>
<Show when={props.followers && props.followers.length > 0}> <Show when={props.followers && props.followers.length > 0}>
<div class={styles.subscribers} onClick={() => showModal('followers')}> <div
class={styles.subscribers}
onClick={() => {
redirectPage(router, 'authorFollowers', { slug: props.author.slug })
showModal('followers')
}}
>
<For each={props.followers.slice(0, 3)}> <For each={props.followers.slice(0, 3)}>
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />} {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
</For> </For>
@ -220,9 +236,15 @@ export const AuthorCard = (props: Props) => {
</div> </div>
</div> </div>
</Show> </Show>
<Show when={props.subscriptions && props.subscriptions.length > 0}> <Show when={props.following && props.following.length > 0}>
<div class={styles.subscribers} onClick={() => showModal('subscriptions')}> <div
<For each={props.subscriptions.slice(0, 3)}> class={styles.subscribers}
onClick={() => {
redirectPage(router, 'authorFollowing', { slug: props.author.slug })
showModal('following')
}}
>
<For each={props.following.slice(0, 3)}>
{(f) => { {(f) => {
if ('name' in f) { if ('name' in f) {
return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} /> return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
@ -233,8 +255,8 @@ export const AuthorCard = (props: Props) => {
}} }}
</For> </For>
<div class={styles.subscribersCounter}> <div class={styles.subscribersCounter}>
{props.subscriptions.length}&nbsp; {props.following.length}&nbsp;
{getNumeralsDeclension(props.subscriptions.length, [ {getNumeralsDeclension(props.following.length, [
t('subscription'), t('subscription'),
t('subscription_rp'), t('subscription_rp'),
t('subscriptions') t('subscriptions')
@ -344,7 +366,7 @@ export const AuthorCard = (props: Props) => {
</div> </div>
<Show when={props.followers}> <Show when={props.followers}>
<Modal variant="wide" name="followers" maxHeight> <Modal variant="wide" name="followers" onClose={handleCloseFollowModals} maxHeight>
<> <>
<h2>{t('Followers')}</h2> <h2>{t('Followers')}</h2>
<div class={styles.listWrapper}> <div class={styles.listWrapper}>
@ -370,8 +392,8 @@ export const AuthorCard = (props: Props) => {
</Modal> </Modal>
</Show> </Show>
<Show when={props.subscriptions}> <Show when={props.following}>
<Modal variant="wide" name="subscriptions" maxHeight> <Modal variant="wide" name="following" onClose={handleCloseFollowModals} maxHeight>
<> <>
<h2>{t('Subscriptions')}</h2> <h2>{t('Subscriptions')}</h2>
<ul class="view-switcher"> <ul class="view-switcher">
@ -379,14 +401,14 @@ export const AuthorCard = (props: Props) => {
<button type="button" onClick={() => setSubscriptionFilter('all')}> <button type="button" onClick={() => setSubscriptionFilter('all')}>
{t('All')} {t('All')}
</button> </button>
<span class={styles.switcherCounter}>{props.subscriptions.length}</span> <span class={styles.switcherCounter}>{props.following.length}</span>
</li> </li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}> <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
<button type="button" onClick={() => setSubscriptionFilter('users')}> <button type="button" onClick={() => setSubscriptionFilter('users')}>
{t('Users')} {t('Users')}
</button> </button>
<span class={styles.switcherCounter}> <span class={styles.switcherCounter}>
{props.subscriptions.filter((s) => 'name' in s).length} {props.following.filter((s) => 'name' in s).length}
</span> </span>
</li> </li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}> <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
@ -394,7 +416,7 @@ export const AuthorCard = (props: Props) => {
{t('Topics')} {t('Topics')}
</button> </button>
<span class={styles.switcherCounter}> <span class={styles.switcherCounter}>
{props.subscriptions.filter((s) => 'title' in s).length} {props.following.filter((s) => 'title' in s).length}
</span> </span>
</li> </li>
</ul> </ul>
@ -402,7 +424,7 @@ export const AuthorCard = (props: Props) => {
<div class={styles.listWrapper}> <div class={styles.listWrapper}>
<div class="row"> <div class="row">
<div class="col-24"> <div class="col-24">
<For each={subscriptions()}> <For each={following()}>
{(subscription: Author | Topic) => {(subscription: Author | Topic) =>
isAuthor(subscription) ? ( isAuthor(subscription) ? (
<AuthorCard <AuthorCard

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

@ -26,14 +26,12 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
<a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a> <a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
</li> </li>
<li> <li>
<a href={`${getPagePath(router, 'author', { slug: user().slug })}/?by=subscriptions`}> <a href={`${getPagePath(router, 'authorFollowing', { slug: user().slug })}`}>
{t('Subscriptions')} {t('Subscriptions')}
</a> </a>
</li> </li>
<li> <li>
<a href={`${getPagePath(router, 'author', { slug: user().slug })}/?by=commented`}> <a href={`${getPagePath(router, 'authorComments', { slug: user().slug })}`}>{t('Comments')}</a>
{t('Comments')}
</a>
</li> </li>
<li> <li>
<a href="#">{t('Bookmarks')}</a> <a href="#">{t('Bookmarks')}</a>

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

@ -5,7 +5,7 @@ import { Row2 } from '../../Feed/Row2'
import { Row3 } from '../../Feed/Row3' import { Row3 } from '../../Feed/Row3'
import { useAuthorsStore } from '../../../stores/zine/authors' import { useAuthorsStore } from '../../../stores/zine/authors'
import { loadShouts, useArticlesStore } from '../../../stores/zine/articles' import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
import { useRouter } from '../../../stores/router' import { router, useRouter } from '../../../stores/router'
import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll' import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
import { splitToPages } from '../../../utils/splitToPages' import { splitToPages } from '../../../utils/splitToPages'
import styles from './Author.module.scss' import styles from './Author.module.scss'
@ -17,15 +17,13 @@ import { Comment } from '../../Article/Comment'
import { useLocalize } from '../../../context/localize' import { useLocalize } from '../../../context/localize'
import { AuthorRatingControl } from '../../Author/AuthorRatingControl' import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
import { hideModal } from '../../../stores/ui' import { hideModal } from '../../../stores/ui'
import { getPagePath } from '@nanostores/router'
type Props = { type Props = {
shouts: Shout[] shouts: Shout[]
author: Author author: Author
authorSlug: string authorSlug: string
} // route?: 'author' | 'authorComments' | 'authorAbout' | 'authorFollowing' | 'authorFollowers' | string
export type AuthorPageSearchParams = {
by: '' | 'viewed' | 'rating' | 'commented' | 'recent' | 'about' | 'popular'
} }
export const PRERENDERED_ARTICLES_COUNT = 12 export const PRERENDERED_ARTICLES_COUNT = 12
@ -34,9 +32,9 @@ const LOAD_MORE_PAGE_SIZE = 9
export const AuthorView = (props: Props) => { export const AuthorView = (props: Props) => {
const { t } = useLocalize() const { t } = useLocalize()
const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
const { authorEntities } = useAuthorsStore({ authors: [props.author] }) const { authorEntities } = useAuthorsStore({ authors: [props.author] })
const { page } = useRouter()
const author = createMemo(() => authorEntities()[props.authorSlug]) const author = createMemo(() => authorEntities()[props.authorSlug])
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
@ -79,9 +77,6 @@ export const AuthorView = (props: Props) => {
checkBioHeight() checkBioHeight()
if (!searchParams().by) {
changeSearchParam('by', 'rating')
}
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
await loadMore() await loadMore()
} }
@ -109,14 +104,14 @@ export const AuthorView = (props: Props) => {
// return t('Top recent') // return t('Top recent')
// }) // })
const pages = createMemo<Shout[][]>(() => const shouts = createMemo<Shout[][]>(() =>
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
) )
const [commented, setCommented] = createSignal([]) const [commented, setCommented] = createSignal([])
createEffect(async () => { createEffect(async () => {
if (searchParams().by === 'commented') { if (page().route === 'authorComments') {
try { try {
const data = await apiClient.getReactionsBy({ const data = await apiClient.getReactionsBy({
by: { comment: true, createdBy: props.authorSlug } by: { comment: true, createdBy: props.authorSlug }
@ -136,32 +131,27 @@ export const AuthorView = (props: Props) => {
author={author()} author={author()}
isAuthorPage={true} isAuthorPage={true}
followers={followers()} followers={followers()}
subscriptions={subscriptions()} following={subscriptions()}
/> />
</Show> </Show>
<div class={clsx(styles.groupControls, 'row')}> <div class={clsx(styles.groupControls, 'row')}>
<div class="col-md-16"> <div class="col-md-16">
<ul class="view-switcher"> <ul class="view-switcher">
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'rating' }}> <li classList={{ 'view-switcher__item--selected': page().route === 'author' }}>
<button type="button" onClick={() => changeSearchParam('by', 'rating')}> <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>{t('Publications')}</a>
{t('Publications')}
</button>
</li> </li>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'commented' }}> <li classList={{ 'view-switcher__item--selected': page().route === 'authorComments' }}>
<button type="button" onClick={() => changeSearchParam('by', 'commented')}> <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
{t('Comments')} {t('Comments')}
</button> </a>
</li> </li>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'about' }}> <li classList={{ 'view-switcher__item--selected': page().route === 'authorAbout' }}>
<button <a
type="button" onClick={() => checkBioHeight()}
onClick={() => { href={getPagePath(router, 'authorAbout', { slug: props.authorSlug })}
changeSearchParam('by', 'about')
checkBioHeight()
}}
> >
{t('About myself')} {t('About myself')}
</button> </a>
</li> </li>
</ul> </ul>
</div> </div>
@ -175,7 +165,7 @@ export const AuthorView = (props: Props) => {
</div> </div>
<Switch> <Switch>
<Match when={searchParams().by === 'about'}> <Match when={page().route === 'authorAbout'}>
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-md-20 col-lg-18"> <div class="col-md-20 col-lg-18">
@ -199,7 +189,7 @@ export const AuthorView = (props: Props) => {
</div> </div>
</div> </div>
</Match> </Match>
<Match when={searchParams().by === 'commented'}> <Match when={page().route === 'authorComments'}>
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-md-20 col-lg-18"> <div class="col-md-20 col-lg-18">
@ -213,7 +203,7 @@ export const AuthorView = (props: Props) => {
</div> </div>
</Match> </Match>
<Match when={searchParams().by === 'rating'}> <Match when={page().route === 'author'}>
<Show when={sortedArticles().length === 1}> <Show when={sortedArticles().length === 1}>
<Row1 article={sortedArticles()[0]} noAuthorLink={true} /> <Row1 article={sortedArticles()[0]} noAuthorLink={true} />
</Show> </Show>
@ -234,15 +224,15 @@ export const AuthorView = (props: Props) => {
<Row1 article={sortedArticles()[6]} noAuthorLink={true} /> <Row1 article={sortedArticles()[6]} noAuthorLink={true} />
<Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noAuthorLink={true} /> <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noAuthorLink={true} />
<For each={pages()}> <For each={shouts()}>
{(page) => ( {(shout) => (
<> <>
<Row1 article={page[0]} noAuthorLink={true} /> <Row1 article={shout[0]} noAuthorLink={true} />
<Row2 articles={page.slice(1, 3)} isEqual={true} noAuthorLink={true} /> <Row2 articles={shout.slice(1, 3)} isEqual={true} noAuthorLink={true} />
<Row1 article={page[3]} noAuthorLink={true} /> <Row1 article={shout[3]} noAuthorLink={true} />
<Row2 articles={page.slice(4, 6)} isEqual={true} noAuthorLink={true} /> <Row2 articles={shout.slice(4, 6)} isEqual={true} noAuthorLink={true} />
<Row1 article={page[6]} noAuthorLink={true} /> <Row1 article={shout[6]} noAuthorLink={true} />
<Row2 articles={page.slice(7, 9)} isEqual={true} noAuthorLink={true} /> <Row2 articles={shout.slice(7, 9)} isEqual={true} noAuthorLink={true} />
</> </>
)} )}
</For> </For>

2
src/pages/author.page.server.ts
View File

@ -1,7 +1,7 @@
import type { PageContext } from '../renderer/types' import type { PageContext } from '../renderer/types'
import { apiClient } from '../utils/apiClient' import { apiClient } from '../utils/apiClient'
import type { PageProps } from './types' import type { PageProps } from './types'
import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author/Author' import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Author'
export const onBeforeRender = async (pageContext: PageContext) => { export const onBeforeRender = async (pageContext: PageContext) => {
const { slug } = pageContext.routeParams const { slug } = pageContext.routeParams

1
src/pages/author.page.tsx
View File

@ -10,7 +10,6 @@ import { ReactionsProvider } from '../context/reactions'
export const AuthorPage = (props: PageProps) => { export const AuthorPage = (props: PageProps) => {
const { page } = useRouter() const { page } = useRouter()
const slug = createMemo(() => page().params['slug'] as string) const slug = createMemo(() => page().params['slug'] as string)
const [isLoaded, setIsLoaded] = createSignal( const [isLoaded, setIsLoaded] = createSignal(

4
src/pages/authorAbout.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.authorAbout)

4
src/pages/authorComment.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.authorComments)

4
src/pages/authorFollowers.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.authorFollowers)

4
src/pages/authorFollowing.page.route.ts Normal file
View File

@ -0,0 +1,4 @@
import { ROUTES } from '../stores/router'
import { getServerRoute } from '../utils/getServerRoute'
export default getServerRoute(ROUTES.authorFollowing)

4
src/stores/router.ts
View File

@ -16,6 +16,10 @@ export const ROUTES = {
topic: '/topic/:slug', topic: '/topic/:slug',
authors: '/authors', authors: '/authors',
author: '/author/:slug', author: '/author/:slug',
authorComments: '/author/:slug/comments',
authorAbout: '/author/:slug/about',
authorFollowers: '/author/:slug/followers',
authorFollowing: '/author/:slug/following',
feed: '/feed', feed: '/feed',
feedMy: '/feed/my', feedMy: '/feed/my',
feedNotifications: '/feed/notifications', feedNotifications: '/feed/notifications',

4
src/stores/ui.ts
View File

@ -21,7 +21,7 @@ export type ModalType =
| 'editorInsertLink' | 'editorInsertLink'
| 'simplifiedEditorInsertLink' | 'simplifiedEditorInsertLink'
| 'followers' | 'followers'
| 'subscriptions' | 'following'
type WarnKind = 'error' | 'warn' | 'info' type WarnKind = 'error' | 'warn' | 'info'
@ -45,7 +45,7 @@ export const MODALS: Record<ModalType, ModalType> = {
editorInsertLink: 'editorInsertLink', editorInsertLink: 'editorInsertLink',
simplifiedEditorInsertLink: 'simplifiedEditorInsertLink', simplifiedEditorInsertLink: 'simplifiedEditorInsertLink',
followers: 'followers', followers: 'followers',
subscriptions: 'subscriptions' following: 'following'
} }
const [modal, setModal] = createSignal<ModalType | null>(null) const [modal, setModal] = createSignal<ModalType | null>(null)