From cada98f135ca21c4942cd29b614d6264f9d840af Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Thu, 6 Jun 2024 08:44:59 +0300
Subject: [PATCH] refactoring: subscribe-term separated to newsletter and
 following

---
 src/components/Article/Comment/Comment.tsx    |  2 +-
 .../Author/AuthorCard/AuthorCard.tsx          |  4 +-
 src/components/Discours/Footer.tsx            |  4 +-
 src/components/Nav/Header/Header.tsx          |  4 +-
 src/components/Nav/ProfilePopup.tsx           |  6 +-
 src/components/Topic/Full.tsx                 |  4 +-
 src/components/Views/Author/Author.tsx        | 87 +++++++------------
 .../FollowingCounters.module.scss}            |  0
 .../FollowingCounters.tsx}                    |  4 +-
 .../_shared/FollowingCounters/index.ts        |  1 +
 .../Newsletter.module.scss}                   |  0
 .../Newsletter.tsx}                           |  4 +-
 src/components/_shared/Newsletter/index.ts    |  1 +
 src/components/_shared/Subscribe/index.ts     |  1 -
 src/components/_shared/Subscribers/index.ts   |  1 -
 src/context/session.tsx                       | 52 ++++++-----
 src/graphql/query/core/author-followers.ts    |  2 +-
 src/pages/about/manifest.page.tsx             |  4 +-
 18 files changed, 84 insertions(+), 97 deletions(-)
 rename src/components/_shared/{Subscribers/Subscribers.module.scss => FollowingCounters/FollowingCounters.module.scss} (100%)
 rename src/components/_shared/{Subscribers/Subscribers.tsx => FollowingCounters/FollowingCounters.tsx} (94%)
 create mode 100644 src/components/_shared/FollowingCounters/index.ts
 rename src/components/_shared/{Subscribe/Subscribe.module.scss => Newsletter/Newsletter.module.scss} (100%)
 rename src/components/_shared/{Subscribe/Subscribe.tsx => Newsletter/Newsletter.tsx} (97%)
 create mode 100644 src/components/_shared/Newsletter/index.ts
 delete mode 100644 src/components/_shared/Subscribe/index.ts
 delete mode 100644 src/components/_shared/Subscribers/index.ts

diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx
index 5e94c4a8..a8854832 100644
--- a/src/components/Article/Comment/Comment.tsx
+++ b/src/components/Article/Comment/Comment.tsx
@@ -48,7 +48,7 @@ export const Comment = (props: Props) => {
   const canEdit = createMemo(
     () =>
       Boolean(author()?.id) &&
-      (props.comment?.created_by?.slug === author().slug || session()?.user?.roles.includes('editor')),
+      (props.comment?.created_by?.slug === author()?.slug || session()?.user?.roles.includes('editor')),
   )
 
   const body = createMemo(() => (editedBody() ? editedBody().trim() : props.comment.body.trim() || ''))
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 5df81631..9804b6e3 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -17,8 +17,8 @@ import { SharePopup, getShareUrl } from '../../Article/SharePopup'
 import { Modal } from '../../Nav/Modal'
 import { TopicBadge } from '../../Topic/TopicBadge'
 import { Button } from '../../_shared/Button'
+import { FollowingCounters } from '../../_shared/FollowingCounters'
 import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
-import { Subscribers } from '../../_shared/Subscribers'
 import { AuthorBadge } from '../AuthorBadge'
 import { Userpic } from '../Userpic'
 
@@ -195,7 +195,7 @@ export const AuthorCard = (props: Props) => {
           </Show>
           <Show when={props.followers?.length > 0 || props.flatFollows?.length > 0}>
             <div class={styles.subscribersContainer}>
-              <Subscribers
+              <FollowingCounters
                 followers={props.followers}
                 followersAmount={props.author?.stat?.followers}
                 following={props.flatFollows}
diff --git a/src/components/Discours/Footer.tsx b/src/components/Discours/Footer.tsx
index 6a7a0ebc..ed7b7fd9 100644
--- a/src/components/Discours/Footer.tsx
+++ b/src/components/Discours/Footer.tsx
@@ -3,7 +3,7 @@ import { For, createMemo } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
 import { Icon } from '../_shared/Icon'
-import { Subscribe } from '../_shared/Subscribe'
+import { Newsletter } from '../_shared/Newsletter'
 
 import styles from './Footer.module.scss'
 
@@ -133,7 +133,7 @@ export const Footer = () => {
           <div class="col-md-6">
             <h5>{t('Subscription')}</h5>
             <p>{t('Join our maillist')}</p>
-            <Subscribe />
+            <Newsletter />
           </div>
         </div>
 
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 680dd886..f161364d 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -11,7 +11,7 @@ import { useModalStore } from '../../../stores/ui'
 import { getDescription } from '../../../utils/meta'
 import { SharePopup, getShareUrl } from '../../Article/SharePopup'
 import { Icon } from '../../_shared/Icon'
-import { Subscribe } from '../../_shared/Subscribe'
+import { Newsletter } from '../../_shared/Newsletter'
 import { AuthModal } from '../AuthModal'
 import { ConfirmModal } from '../ConfirmModal'
 import { HeaderAuth } from '../HeaderAuth'
@@ -301,7 +301,7 @@ export const Header = (props: Props) => {
                 </ul>
 
                 <h4>{t('Newsletter')}</h4>
-                <Subscribe variant={'mobileSubscription'} />
+                <Newsletter variant={'mobileSubscription'} />
 
                 <h4>{t('Language')}</h4>
                 <select
diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx
index f29509cc..9e64d0c3 100644
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@@ -21,7 +21,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
     <Popup {...props} horizontalAnchor="right" popupCssClass={styles.profilePopup}>
       <ul class="nodash">
         <li>
-          <a class={styles.action} href={getPagePath(router, 'author', { slug: author().slug })}>
+          <a class={styles.action} href={getPagePath(router, 'author', { slug: author()?.slug })}>
             <Icon name="profile" class={styles.icon} />
             {t('Profile')}
           </a>
@@ -35,7 +35,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
         <li>
           <a
             class={styles.action}
-            href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}
+            href={`${getPagePath(router, 'author', { slug: author()?.slug })}?m=following`}
           >
             <Icon name="feed-all" class={styles.icon} />
             {t('Subscriptions')}
@@ -44,7 +44,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
         <li>
           <a
             class={styles.action}
-            href={`${getPagePath(router, 'authorComments', { slug: author().slug })}`}
+            href={`${getPagePath(router, 'authorComments', { slug: author()?.slug })}`}
           >
             <Icon name="comment" class={styles.icon} />
             {t('Comments')}
diff --git a/src/components/Topic/Full.tsx b/src/components/Topic/Full.tsx
index d0bf8cad..e434b4b1 100644
--- a/src/components/Topic/Full.tsx
+++ b/src/components/Topic/Full.tsx
@@ -9,8 +9,8 @@ import { useSession } from '../../context/session'
 import { FollowingEntity } from '../../graphql/schema/core.gen'
 import { Button } from '../_shared/Button'
 
+import { FollowingCounters } from '../_shared/FollowingCounters'
 import { Icon } from '../_shared/Icon'
-import { Subscribers } from '../_shared/Subscribers'
 import styles from './Full.module.scss'
 
 type Props = {
@@ -55,7 +55,7 @@ export const FullTopic = (props: Props) => {
           </div>
         </Show>
 
-        <Subscribers
+        <FollowingCounters
           followers={props.followers}
           followersAmount={props.topic?.stat?.followers}
           following={props.authors}
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index cbd68c76..cd3b62d8 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -1,33 +1,30 @@
-import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
-
 import { getPagePath } from '@nanostores/router'
 import { clsx } from 'clsx'
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
-
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
 import { Meta, Title } from '../../../context/meta'
 import { useSession } from '../../../context/session'
 import { apiClient } from '../../../graphql/client/core'
+import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
 import { router, useRouter } from '../../../stores/router'
+import { MODALS, hideModal } from '../../../stores/ui'
 import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
 import { loadAuthor } 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 stylesArticle from '../../Article/Article.module.scss'
 import { Comment } from '../../Article/Comment'
 import { AuthorCard } from '../../Author/AuthorCard'
 import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
+import { Placeholder } from '../../Feed/Placeholder'
 import { Row1 } from '../../Feed/Row1'
 import { Row2 } from '../../Feed/Row2'
 import { Row3 } from '../../Feed/Row3'
 import { Loading } from '../../_shared/Loading'
-
-import { MODALS, hideModal } from '../../../stores/ui'
-import { byCreated } from '../../../utils/sortby'
-import stylesArticle from '../../Article/Article.module.scss'
-import { Placeholder } from '../../Feed/Placeholder'
 import styles from './Author.module.scss'
 
 type Props = {
@@ -35,6 +32,7 @@ type Props = {
   shouts?: Shout[]
   author?: Author
 }
+
 export const PRERENDERED_ARTICLES_COUNT = 12
 const LOAD_MORE_PAGE_SIZE = 9
 
@@ -164,11 +162,7 @@ export const AuthorView = (props: Props) => {
             <div class={clsx(styles.groupControls, 'row')}>
               <div class="col-md-16">
                 <ul class="view-switcher">
-                  <li
-                    classList={{
-                      'view-switcher__item--selected': getPage().route === 'author',
-                    }}
-                  >
+                  <li classList={{ 'view-switcher__item--selected': getPage().route === 'author' }}>
                     <a
                       href={getPagePath(router, 'author', {
                         slug: props.authorSlug,
@@ -180,11 +174,7 @@ export const AuthorView = (props: Props) => {
                       <span class="view-switcher__counter">{author().stat.shouts}</span>
                     </Show>
                   </li>
-                  <li
-                    classList={{
-                      'view-switcher__item--selected': getPage().route === 'authorComments',
-                    }}
-                  >
+                  <li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
                     <a
                       href={getPagePath(router, 'authorComments', {
                         slug: props.authorSlug,
@@ -196,11 +186,7 @@ export const AuthorView = (props: Props) => {
                       <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', {
@@ -284,38 +270,31 @@ export const AuthorView = (props: Props) => {
           </Show>
 
           <Show when={sortedArticles().length > 0}>
-            <Show when={sortedArticles().length === 1}>
-              <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
-            </Show>
+            <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
 
-            <Show when={sortedArticles().length === 2}>
-              <Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
-            </Show>
-
-            <Show when={sortedArticles().length === 3}>
-              <Row3 articles={sortedArticles()} noauthor={true} nodate={true} />
-            </Show>
-
-            <Show when={sortedArticles().length > 3}>
-              <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
-              <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noauthor={true} />
-              <Row1 article={sortedArticles()[3]} noauthor={true} nodate={true} />
-              <Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noauthor={true} />
-              <Row1 article={sortedArticles()[6]} noauthor={true} nodate={true} />
-              <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noauthor={true} />
-
-              <For each={pages()}>
-                {(page) => (
-                  <>
-                    <Row1 article={page[0]} noauthor={true} nodate={true} />
-                    <Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
-                    <Row1 article={page[3]} noauthor={true} nodate={true} />
-                    <Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
-                    <Row1 article={page[6]} noauthor={true} nodate={true} />
-                    <Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
-                  </>
-                )}
-              </For>
+            <Show when={sortedArticles().length > 1}>
+              <Switch>
+                <Match when={sortedArticles().length === 2}>
+                  <Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
+                </Match>
+                <Match when={sortedArticles().length === 3}>
+                  <Row3 articles={sortedArticles()} noauthor={true} nodate={true} />
+                </Match>
+                <Match when={sortedArticles().length > 3}>
+                  <For each={pages()}>
+                    {(page) => (
+                      <>
+                        <Row1 article={page[0]} noauthor={true} nodate={true} />
+                        <Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
+                        <Row1 article={page[3]} noauthor={true} nodate={true} />
+                        <Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
+                        <Row1 article={page[6]} noauthor={true} nodate={true} />
+                        <Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
+                      </>
+                    )}
+                  </For>
+                </Match>
+              </Switch>
             </Show>
 
             <Show when={isLoadMoreButtonVisible()}>
diff --git a/src/components/_shared/Subscribers/Subscribers.module.scss b/src/components/_shared/FollowingCounters/FollowingCounters.module.scss
similarity index 100%
rename from src/components/_shared/Subscribers/Subscribers.module.scss
rename to src/components/_shared/FollowingCounters/FollowingCounters.module.scss
diff --git a/src/components/_shared/Subscribers/Subscribers.tsx b/src/components/_shared/FollowingCounters/FollowingCounters.tsx
similarity index 94%
rename from src/components/_shared/Subscribers/Subscribers.tsx
rename to src/components/_shared/FollowingCounters/FollowingCounters.tsx
index d3814a20..fc2228da 100644
--- a/src/components/_shared/Subscribers/Subscribers.tsx
+++ b/src/components/_shared/FollowingCounters/FollowingCounters.tsx
@@ -5,7 +5,7 @@ import { useLocalize } from '../../../context/localize'
 import { Author, Topic } from '../../../graphql/schema/core.gen'
 import { Userpic } from '../../Author/Userpic'
 
-import styles from './Subscribers.module.scss'
+import styles from './FollowingCounters.module.scss'
 
 type Props = {
   followers?: Author[]
@@ -14,7 +14,7 @@ type Props = {
   followingAmount?: number
 }
 
-export const Subscribers = (props: Props) => {
+export const FollowingCounters = (props: Props) => {
   const { t } = useLocalize()
 
   return (
diff --git a/src/components/_shared/FollowingCounters/index.ts b/src/components/_shared/FollowingCounters/index.ts
new file mode 100644
index 00000000..33e34c6b
--- /dev/null
+++ b/src/components/_shared/FollowingCounters/index.ts
@@ -0,0 +1 @@
+export { FollowingCounters } from './FollowingCounters'
diff --git a/src/components/_shared/Subscribe/Subscribe.module.scss b/src/components/_shared/Newsletter/Newsletter.module.scss
similarity index 100%
rename from src/components/_shared/Subscribe/Subscribe.module.scss
rename to src/components/_shared/Newsletter/Newsletter.module.scss
diff --git a/src/components/_shared/Subscribe/Subscribe.tsx b/src/components/_shared/Newsletter/Newsletter.tsx
similarity index 97%
rename from src/components/_shared/Subscribe/Subscribe.tsx
rename to src/components/_shared/Newsletter/Newsletter.tsx
index 63c2341e..d1fa00fc 100644
--- a/src/components/_shared/Subscribe/Subscribe.tsx
+++ b/src/components/_shared/Newsletter/Newsletter.tsx
@@ -6,12 +6,12 @@ import { validateEmail } from '../../../utils/validateEmail'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
 
-import styles from './Subscribe.module.scss'
+import styles from './Newsletter.module.scss'
 
 type Props = {
   variant?: 'mobileSubscription'
 }
-export const Subscribe = (props: Props) => {
+export const Newsletter = (props: Props) => {
   const { t } = useLocalize()
 
   const [title, setTitle] = createSignal('')
diff --git a/src/components/_shared/Newsletter/index.ts b/src/components/_shared/Newsletter/index.ts
new file mode 100644
index 00000000..e8f0e231
--- /dev/null
+++ b/src/components/_shared/Newsletter/index.ts
@@ -0,0 +1 @@
+export { Newsletter } from './Newsletter'
diff --git a/src/components/_shared/Subscribe/index.ts b/src/components/_shared/Subscribe/index.ts
deleted file mode 100644
index 77ee7e60..00000000
--- a/src/components/_shared/Subscribe/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Subscribe } from './Subscribe'
diff --git a/src/components/_shared/Subscribers/index.ts b/src/components/_shared/Subscribers/index.ts
deleted file mode 100644
index cfa0eef9..00000000
--- a/src/components/_shared/Subscribers/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Subscribers } from './Subscribers'
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 92502b83..7e35e6c3 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -32,7 +32,7 @@ import { inboxClient } from '../graphql/client/chat'
 import { apiClient } from '../graphql/client/core'
 import { useRouter } from '../stores/router'
 import { showModal } from '../stores/ui'
-import { addAuthors } from '../stores/zine/authors'
+import { addAuthors, loadAuthor } from '../stores/zine/authors'
 
 import { authApiUrl } from '../utils/config'
 import { useLocalize } from './localize'
@@ -203,7 +203,6 @@ export const SessionProvider = (props: {
     ssrLoadFrom: 'initial',
     initialValue: null,
   })
-  const author = createMemo(() => session()?.user?.app_data?.profile)
 
   const checkSessionIsExpired = () => {
     const expires_at_data = localStorage.getItem('expires_at')
@@ -225,38 +224,46 @@ export const SessionProvider = (props: {
 
   onCleanup(() => clearTimeout(minuteLater))
 
+  const [author, setAuthor] = createSignal<Author>()
   // when session is loaded
   createEffect(
     on(
-      session,
-      (s: AuthToken) => {
+      () => session(),
+      async (s: AuthToken) => {
         if (s) {
           const token = s?.access_token
-          if (token) {
-            if (!inboxClient.private) {
-              apiClient.connect(token)
-              inboxClient.connect(token)
-            }
-
-            try {
-              const profile = session()?.user?.app_data?.profile
-              if (profile?.id) addAuthors([profile])
-            } catch (e) {
-              console.error(e)
-            }
+          const profile = s?.user?.app_data?.profile
+          if (token && !inboxClient.private) {
+            apiClient.connect(token)
+            inboxClient.connect(token)
+          }
+          if (profile?.id) {
+            addAuthors([profile])
+            setAuthor(profile)
             setIsSessionLoaded(true)
           } else {
-            reset()
+            console.warn('app_data is empty')
+            if (s?.user) {
+              try {
+                const a = await loadAuthor({ slug: s?.user?.nickname })
+                addAuthors([a])
+                setAuthor(a)
+                s.user.app_data.profile = a
+              } catch (error) {
+                console.error('Error loading author:', error)
+              }
+            } else {
+              console.warn(s)
+              setSession(null)
+              setAuthor(null)
+              setIsSessionLoaded(true)
+            }
           }
         }
       },
       { defer: true },
     ),
   )
-  const reset = () => {
-    setIsSessionLoaded(true)
-    setSession(null)
-  }
 
   // initial effect
   onMount(() => {
@@ -311,7 +318,8 @@ export const SessionProvider = (props: {
   const signOut = async () => {
     const authResult: ApiResponse<GenericResponse> = await authorizer().logout()
     console.debug(authResult)
-    reset()
+    setSession(null)
+    setIsSessionLoaded(true)
     showSnackbar({ body: t("You've successfully logged out") })
     console.debug(session())
   }
diff --git a/src/graphql/query/core/author-followers.ts b/src/graphql/query/core/author-followers.ts
index 1c8373b8..df6e5e59 100644
--- a/src/graphql/query/core/author-followers.ts
+++ b/src/graphql/query/core/author-followers.ts
@@ -1,7 +1,7 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query UserSubscribersQuery($slug: String, $user: String, $author_id: Int) {
+  query UserFollowingCountersQuery($slug: String, $user: String, $author_id: Int) {
     get_author_followers(slug: $slug, user: $user, author_id: $author_id) {
       id
       slug
diff --git a/src/pages/about/manifest.page.tsx b/src/pages/about/manifest.page.tsx
index 7599bdce..0c205e64 100644
--- a/src/pages/about/manifest.page.tsx
+++ b/src/pages/about/manifest.page.tsx
@@ -4,7 +4,7 @@ import { Feedback } from '../../components/Discours/Feedback'
 import { Modal } from '../../components/Nav/Modal'
 import Opener from '../../components/Nav/Modal/Opener'
 import { StaticPage } from '../../components/Views/StaticPage'
-import { Subscribe } from '../../components/_shared/Subscribe'
+import { Newsletter } from '../../components/_shared/Newsletter'
 import { useLocalize } from '../../context/localize'
 import { getImageUrl } from '../../utils/getImageUrl'
 
@@ -24,7 +24,7 @@ export const ManifestPage = () => {
           <Feedback />
         </Modal>
         <Modal variant="wide" name="subscribe">
-          <Subscribe />
+          <Newsletter />
         </Modal>
         <Meta name="descprition" content={description} />
         <Meta name="keywords" content={t('keywords')} />