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

app-data-author

package.json

@@ -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",

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -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>

src/components/Views/Author/Author.tsx

@@ -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 { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
-  const { sortedArticles } = useArticlesStore()
+  const { session } = useSession()
-  const { authorEntities } = useAuthorsStore()
+  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 [author, setAuthor] = createSignal<Author>()
-  const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
+  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 {
+    if (props.authorSlug) {
-      const a = authorEntities()[props.authorSlug]
+      if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
-      setAuthor(a)
+        console.info('my own profile')
-    } catch (error) {
+        const { profile, authors, topics } = session().user.app_data
-      console.debug(error)
+        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' }}>
+                  <li
-                    <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
+                    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' }}>
+                  <li
-                    <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
+                    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>

src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx

@@ -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 () => {
+  createEffect(() => {
-    await fetchSubscriptions()
+    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>

src/context/following.tsx

@@ -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')
+      try {
-      fetchData()
+        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,

src/context/session.tsx

@@ -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 },
     ),
   )