Change followers modal logic (#257)

src/components/App.tsx

@@ -48,8 +48,6 @@ const pagesMap: Record<keyof typeof ROUTES, Component<PageProps>> = {
   author: AuthorPage,
   authorComments: AuthorPage,
   authorAbout: AuthorPage,
-  authorFollowing: AuthorPage,
-  authorFollowers: AuthorPage,
   inbox: InboxPage,
   expo: ExpoPage,
   expoLayout: ExpoPage,

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -640,6 +640,7 @@
   margin-top: 1rem;
   margin-right: 3rem;
   vertical-align: top;
+  border-bottom: unset !important;
 
   &:last-child {
     margin-right: 0;

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -14,7 +14,6 @@ import { openPage, redirectPage } from '@nanostores/router'
 import { useLocalize } from '../../../context/localize'
 import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
 import { Modal } from '../../Nav/Modal'
-import { showModal } from '../../../stores/ui'
 import { SubscriptionFilter } from '../../../pages/types'
 import { isAuthor } from '../../../utils/isAuthor'
 import { AuthorBadge } from '../AuthorBadge'
@@ -22,8 +21,6 @@ import { TopicBadge } from '../../Topic/TopicBadge'
 import { Button } from '../../_shared/Button'
 import { getShareUrl, SharePopup } from '../../Article/SharePopup'
 import stylesHeader from '../../Nav/Header/Header.module.scss'
-import { getDescription } from '../../../utils/meta'
-import { Popover } from '../../_shared/Popover'
 
 type Props = {
   caption?: string
@@ -52,7 +49,6 @@ type Props = {
 
 export const AuthorCard = (props: Props) => {
   const { t, lang } = useLocalize()
-  const { page } = useRouter()
   const {
     session,
     isSessionLoaded,
@@ -122,12 +118,6 @@ export const AuthorCard = (props: Props) => {
     }
   })
 
-  createEffect(() => {
-    if (page().route === 'authorFollowing') {
-      showModal('following')
-    }
-  })
-
   const handleCloseFollowModals = () => {
     redirectPage(router, 'author', { slug: props.author.slug })
   }
@@ -225,20 +215,14 @@ export const AuthorCard = (props: Props) => {
               <div class={styles.subscribersContainer}>
                 <Switch>
                   <Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
-                    <div
-                      class={styles.subscribers}
-                      onClick={() => {
-                        redirectPage(router, 'authorFollowers', { slug: props.author.slug })
-                        showModal('followers')
-                      }}
-                    >
+                    <a href="?modal=followers" class={styles.subscribers}>
                       <For each={props.followers.slice(0, 3)}>
                         {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
                       </For>
                       <div class={styles.subscribersCounter}>
                         {t('SubscriptionWithCount', { count: props.followers.length })}
                       </div>
-                    </div>
+                    </a>
                   </Match>
                   <Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
                     <Button
@@ -250,13 +234,7 @@ export const AuthorCard = (props: Props) => {
                 </Switch>
                 <Switch>
                   <Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
-                    <div
-                      class={styles.subscribers}
-                      onClick={() => {
-                        redirectPage(router, 'authorFollowing', { slug: props.author.slug })
-                        showModal('following')
-                      }}
-                    >
+                    <a href="?modal=following" class={styles.subscribers}>
                       <For each={props.following.slice(0, 3)}>
                         {(f) => {
                           if ('name' in f) {
@@ -270,7 +248,7 @@ export const AuthorCard = (props: Props) => {
                       <div class={styles.subscribersCounter}>
                         {t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
                       </div>
-                    </div>
+                    </a>
                   </Match>
                   <Match when={props.following && props.following.length > 0 && props.isCurrentUser}>
                     <SharePopup

src/components/Nav/ProfilePopup.tsx

@@ -26,7 +26,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
           <a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
         </li>
         <li>
-          <a href={`${getPagePath(router, 'authorFollowing', { slug: user().slug })}`}>
+          <a href={`${getPagePath(router, 'author', { slug: user().slug })}?modal=following`}>
             {t('Subscriptions')}
           </a>
         </li>

src/components/Views/Author/Author.tsx

@@ -207,7 +207,6 @@ export const AuthorView = (props: Props) => {
             </div>
           </div>
         </Match>
-
         <Match when={page().route === 'author'}>
           <Show when={sortedArticles().length === 1}>
             <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />

src/pages/authorFollowers.page.route.ts

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

src/pages/authorFollowing.page.route.ts

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

src/stores/router.ts

@@ -18,8 +18,6 @@ export const ROUTES = {
   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',