Feature/profile links update (#215)

* Change tabs by route * Refactoring Author profile
2023-09-16 09:26:19 +03:00 · 2023-09-16 09:26:19 +03:00 · db417ea51d
commit db417ea51d
parent f060841672
12 changed files with 102 additions and 69 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -45,6 +45,11 @@ import { EditorProvider } from '../context/editor'
 // const SomePage = lazy(() => import('./Pages/SomePage'))

 const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
+  author: AuthorPage,
+  authorComments: AuthorPage,
+  authorAbout: AuthorPage,
+  authorFollowing: AuthorPage,
+  authorFollowers: AuthorPage,
  inbox: InboxPage,
  expo: LayoutShoutsPage,
  connect: ConnectPage,
@ -56,7 +61,6 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
  topics: AllTopicsPage,
  topic: TopicPage,
  authors: AllAuthorsPage,
-  author: AuthorPage,
  feed: FeedPage,
  feedMy: FeedPage,
  feedNotifications: FeedPage,
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@ -10,7 +10,7 @@ import { useSession } from '../../../context/session'
 import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
 import { FollowingEntity, Topic } from '../../../graphql/types.gen'
 import { router, useRouter } from '../../../stores/router'
-import { openPage } from '@nanostores/router'
+import { openPage, redirectPage } from '@nanostores/router'
 import { useLocalize } from '../../../context/localize'
 import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
 import { Modal } from '../../Nav/Modal'
@ -38,7 +38,7 @@ type Props = {
  isNowrap?: boolean
  class?: string
  followers?: Author[]
-  subscriptions?: Array<Author | Topic>
+  following?: Array<Author | Topic>
  showPublicationsCounter?: boolean
 }

@ -48,7 +48,7 @@ function isAuthor(value: Author | Topic): value is Author {

 export const AuthorCard = (props: Props) => {
  const { t, lang } = useLocalize()
-
+  const { page } = useRouter()
  const {
    session,
    isSessionLoaded,
@ -56,7 +56,7 @@ export const AuthorCard = (props: Props) => {
  } = useSession()

  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 [userpicUrl, setUserpicUrl] = createSignal<string>()

@ -105,17 +105,27 @@ export const AuthorCard = (props: Props) => {
  }

  createEffect(() => {
-    if (props.subscriptions) {
+    if (props.following) {
      if (subscriptionFilter() === 'users') {
-        setSubscriptions(props.subscriptions.filter((s) => 'name' in s))
+        setFollowing(props.following.filter((s) => 'name' in s))
      } else if (subscriptionFilter() === 'topics') {
-        setSubscriptions(props.subscriptions.filter((s) => 'title' in s))
+        setFollowing(props.following.filter((s) => 'title' in s))
      } 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')) {
    setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
  }
@ -201,12 +211,18 @@ export const AuthorCard = (props: Props) => {
            <Show
              when={
                (props.followers && props.followers.length > 0) ||
-                (props.subscriptions && props.subscriptions.length > 0)
+                (props.following && props.following.length > 0)
              }
            >
              <div class={styles.subscribersContainer}>
                <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)}>
                      {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
                    </For>
@ -220,9 +236,15 @@ export const AuthorCard = (props: Props) => {
                    </div>
                  </div>
                </Show>
-                <Show when={props.subscriptions && props.subscriptions.length > 0}>
-                  <div class={styles.subscribers} onClick={() => showModal('subscriptions')}>
-                    <For each={props.subscriptions.slice(0, 3)}>
+                <Show when={props.following && props.following.length > 0}>
+                  <div
+                    class={styles.subscribers}
+                    onClick={() => {
+                      redirectPage(router, 'authorFollowing', { slug: props.author.slug })
+                      showModal('following')
+                    }}
+                  >
+                    <For each={props.following.slice(0, 3)}>
                      {(f) => {
                        if ('name' in f) {
                          return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
@ -233,8 +255,8 @@ export const AuthorCard = (props: Props) => {
                      }}
                    </For>
                    <div class={styles.subscribersCounter}>
-                      {props.subscriptions.length}&nbsp;
-                      {getNumeralsDeclension(props.subscriptions.length, [
+                      {props.following.length}&nbsp;
+                      {getNumeralsDeclension(props.following.length, [
                        t('subscription'),
                        t('subscription_rp'),
                        t('subscriptions')
@ -344,7 +366,7 @@ export const AuthorCard = (props: Props) => {
      </div>

      <Show when={props.followers}>
-        <Modal variant="wide" name="followers" maxHeight>
+        <Modal variant="wide" name="followers" onClose={handleCloseFollowModals} maxHeight>
          <>
            <h2>{t('Followers')}</h2>
            <div class={styles.listWrapper}>
@ -370,8 +392,8 @@ export const AuthorCard = (props: Props) => {
        </Modal>
      </Show>

-      <Show when={props.subscriptions}>
-        <Modal variant="wide" name="subscriptions" maxHeight>
+      <Show when={props.following}>
+        <Modal variant="wide" name="following" onClose={handleCloseFollowModals} maxHeight>
          <>
            <h2>{t('Subscriptions')}</h2>
            <ul class="view-switcher">
@ -379,14 +401,14 @@ export const AuthorCard = (props: Props) => {
                <button type="button" onClick={() => setSubscriptionFilter('all')}>
                  {t('All')}
                </button>
-                <span class={styles.switcherCounter}>{props.subscriptions.length}</span>
+                <span class={styles.switcherCounter}>{props.following.length}</span>
              </li>
              <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
                <button type="button" onClick={() => setSubscriptionFilter('users')}>
                  {t('Users')}
                </button>
                <span class={styles.switcherCounter}>
-                  {props.subscriptions.filter((s) => 'name' in s).length}
+                  {props.following.filter((s) => 'name' in s).length}
                </span>
              </li>
              <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
@ -394,7 +416,7 @@ export const AuthorCard = (props: Props) => {
                  {t('Topics')}
                </button>
                <span class={styles.switcherCounter}>
-                  {props.subscriptions.filter((s) => 'title' in s).length}
+                  {props.following.filter((s) => 'title' in s).length}
                </span>
              </li>
            </ul>
@ -402,7 +424,7 @@ export const AuthorCard = (props: Props) => {
            <div class={styles.listWrapper}>
              <div class="row">
                <div class="col-24">
-                  <For each={subscriptions()}>
+                  <For each={following()}>
                    {(subscription: Author | Topic) =>
                      isAuthor(subscription) ? (
                        <AuthorCard
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@ -26,14 +26,12 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
          <a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
        </li>
        <li>
-          <a href={`${getPagePath(router, 'author', { slug: user().slug })}/?by=subscriptions`}>
+          <a href={`${getPagePath(router, 'authorFollowing', { slug: user().slug })}`}>
            {t('Subscriptions')}
          </a>
        </li>
        <li>
-          <a href={`${getPagePath(router, 'author', { slug: user().slug })}/?by=commented`}>
-            {t('Comments')}
-          </a>
+          <a href={`${getPagePath(router, 'authorComments', { slug: user().slug })}`}>{t('Comments')}</a>
        </li>
        <li>
          <a href="#">{t('Bookmarks')}</a>
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@ -5,7 +5,7 @@ import { Row2 } from '../../Feed/Row2'
 import { Row3 } from '../../Feed/Row3'
 import { useAuthorsStore } from '../../../stores/zine/authors'
 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 { splitToPages } from '../../../utils/splitToPages'
 import styles from './Author.module.scss'
@ -17,15 +17,13 @@ import { Comment } from '../../Article/Comment'
 import { useLocalize } from '../../../context/localize'
 import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
 import { hideModal } from '../../../stores/ui'
+import { getPagePath } from '@nanostores/router'

 type Props = {
  shouts: Shout[]
  author: Author
  authorSlug: string
-}
-
-export type AuthorPageSearchParams = {
-  by: '' | 'viewed' | 'rating' | 'commented' | 'recent' | 'about' | 'popular'
+  // route?: 'author' | 'authorComments' | 'authorAbout' | 'authorFollowing' | 'authorFollowers' | string
 }

 export const PRERENDERED_ARTICLES_COUNT = 12
@ -34,9 +32,9 @@ const LOAD_MORE_PAGE_SIZE = 9
 export const AuthorView = (props: Props) => {
  const { t } = useLocalize()
  const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
-  const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
  const { authorEntities } = useAuthorsStore({ authors: [props.author] })

+  const { page } = useRouter()
  const author = createMemo(() => authorEntities()[props.authorSlug])

  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
@ -79,9 +77,6 @@ export const AuthorView = (props: Props) => {

    checkBioHeight()

-    if (!searchParams().by) {
-      changeSearchParam('by', 'rating')
-    }
    if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
      await loadMore()
    }
@ -109,14 +104,14 @@ export const AuthorView = (props: Props) => {
  //   return t('Top recent')
  // })

-  const pages = createMemo<Shout[][]>(() =>
+  const shouts = createMemo<Shout[][]>(() =>
    splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE)
  )

  const [commented, setCommented] = createSignal([])

  createEffect(async () => {
-    if (searchParams().by === 'commented') {
+    if (page().route === 'authorComments') {
      try {
        const data = await apiClient.getReactionsBy({
          by: { comment: true, createdBy: props.authorSlug }
@ -136,32 +131,27 @@ export const AuthorView = (props: Props) => {
            author={author()}
            isAuthorPage={true}
            followers={followers()}
-            subscriptions={subscriptions()}
+            following={subscriptions()}
          />
        </Show>
        <div class={clsx(styles.groupControls, 'row')}>
          <div class="col-md-16">
            <ul class="view-switcher">
-              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'rating' }}>
-                <button type="button" onClick={() => changeSearchParam('by', 'rating')}>
-                  {t('Publications')}
-                </button>
+              <li classList={{ 'view-switcher__item--selected': page().route === 'author' }}>
+                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>{t('Publications')}</a>
              </li>
-              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'commented' }}>
-                <button type="button" onClick={() => changeSearchParam('by', 'commented')}>
+              <li classList={{ 'view-switcher__item--selected': page().route === 'authorComments' }}>
+                <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
                  {t('Comments')}
-                </button>
+                </a>
              </li>
-              <li classList={{ 'view-switcher__item--selected': searchParams().by === 'about' }}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    changeSearchParam('by', 'about')
-                    checkBioHeight()
-                  }}
+              <li classList={{ 'view-switcher__item--selected': page().route === 'authorAbout' }}>
+                <a
+                  onClick={() => checkBioHeight()}
+                  href={getPagePath(router, 'authorAbout', { slug: props.authorSlug })}
                >
                  {t('About myself')}
-                </button>
+                </a>
              </li>
            </ul>
          </div>
@ -175,7 +165,7 @@ export const AuthorView = (props: Props) => {
      </div>

      <Switch>
-        <Match when={searchParams().by === 'about'}>
+        <Match when={page().route === 'authorAbout'}>
          <div class="wide-container">
            <div class="row">
              <div class="col-md-20 col-lg-18">
@ -199,7 +189,7 @@ export const AuthorView = (props: Props) => {
            </div>
          </div>
        </Match>
-        <Match when={searchParams().by === 'commented'}>
+        <Match when={page().route === 'authorComments'}>
          <div class="wide-container">
            <div class="row">
              <div class="col-md-20 col-lg-18">
@ -213,7 +203,7 @@ export const AuthorView = (props: Props) => {
          </div>
        </Match>

-        <Match when={searchParams().by === 'rating'}>
+        <Match when={page().route === 'author'}>
          <Show when={sortedArticles().length === 1}>
            <Row1 article={sortedArticles()[0]} noAuthorLink={true} />
          </Show>
@ -234,15 +224,15 @@ export const AuthorView = (props: Props) => {
            <Row1 article={sortedArticles()[6]} noAuthorLink={true} />
            <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noAuthorLink={true} />

-            <For each={pages()}>
-              {(page) => (
+            <For each={shouts()}>
+              {(shout) => (
                <>
-                  <Row1 article={page[0]} noAuthorLink={true} />
-                  <Row2 articles={page.slice(1, 3)} isEqual={true} noAuthorLink={true} />
-                  <Row1 article={page[3]} noAuthorLink={true} />
-                  <Row2 articles={page.slice(4, 6)} isEqual={true} noAuthorLink={true} />
-                  <Row1 article={page[6]} noAuthorLink={true} />
-                  <Row2 articles={page.slice(7, 9)} isEqual={true} noAuthorLink={true} />
+                  <Row1 article={shout[0]} noAuthorLink={true} />
+                  <Row2 articles={shout.slice(1, 3)} isEqual={true} noAuthorLink={true} />
+                  <Row1 article={shout[3]} noAuthorLink={true} />
+                  <Row2 articles={shout.slice(4, 6)} isEqual={true} noAuthorLink={true} />
+                  <Row1 article={shout[6]} noAuthorLink={true} />
+                  <Row2 articles={shout.slice(7, 9)} isEqual={true} noAuthorLink={true} />
                </>
              )}
            </For>
--- a/src/pages/author.page.server.ts
+++ b/src/pages/author.page.server.ts
@ -1,7 +1,7 @@
 import type { PageContext } from '../renderer/types'
 import { apiClient } from '../utils/apiClient'
 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) => {
  const { slug } = pageContext.routeParams
--- a/src/pages/author.page.tsx
+++ b/src/pages/author.page.tsx
@ -10,7 +10,6 @@ import { ReactionsProvider } from '../context/reactions'

 export const AuthorPage = (props: PageProps) => {
  const { page } = useRouter()
-
  const slug = createMemo(() => page().params['slug'] as string)

  const [isLoaded, setIsLoaded] = createSignal(
--- a/src/pages/authorAbout.page.route.ts
+++ b/src/pages/authorAbout.page.route.ts
@ -0,0 +1,4 @@
+import { ROUTES } from '../stores/router'
+import { getServerRoute } from '../utils/getServerRoute'
+
+export default getServerRoute(ROUTES.authorAbout)
--- a/src/pages/authorComment.page.route.ts
+++ b/src/pages/authorComment.page.route.ts
@ -0,0 +1,4 @@
+import { ROUTES } from '../stores/router'
+import { getServerRoute } from '../utils/getServerRoute'
+
+export default getServerRoute(ROUTES.authorComments)
--- a/src/pages/authorFollowers.page.route.ts
+++ b/src/pages/authorFollowers.page.route.ts
@ -0,0 +1,4 @@
+import { ROUTES } from '../stores/router'
+import { getServerRoute } from '../utils/getServerRoute'
+
+export default getServerRoute(ROUTES.authorFollowers)
--- a/src/pages/authorFollowing.page.route.ts
+++ b/src/pages/authorFollowing.page.route.ts
@ -0,0 +1,4 @@
+import { ROUTES } from '../stores/router'
+import { getServerRoute } from '../utils/getServerRoute'
+
+export default getServerRoute(ROUTES.authorFollowing)
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@ -16,6 +16,10 @@ export const ROUTES = {
  topic: '/topic/:slug',
  authors: '/authors',
  author: '/author/:slug',
+  authorComments: '/author/:slug/comments',
+  authorAbout: '/author/:slug/about',
+  authorFollowers: '/author/:slug/followers',
+  authorFollowing: '/author/:slug/following',
  feed: '/feed',
  feedMy: '/feed/my',
  feedNotifications: '/feed/notifications',
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@ -21,7 +21,7 @@ export type ModalType =
  | 'editorInsertLink'
  | 'simplifiedEditorInsertLink'
  | 'followers'
-  | 'subscriptions'
+  | 'following'

 type WarnKind = 'error' | 'warn' | 'info'

@ -45,7 +45,7 @@ export const MODALS: Record<ModalType, ModalType> = {
  editorInsertLink: 'editorInsertLink',
  simplifiedEditorInsertLink: 'simplifiedEditorInsertLink',
  followers: 'followers',
-  subscriptions: 'subscriptions'
+  following: 'following'
 }

 const [modal, setModal] = createSignal<ModalType | null>(null)