inbox-authors-preload-2

src/components/Views/Inbox.tsx

@@ -8,6 +8,7 @@ import { useInbox } from '../../context/inbox'
 import { useLocalize } from '../../context/localize'
 import { useSession } from '../../context/session'
 import { useRouter } from '../../stores/router'
+import { AuthorsSortBy, useAuthorsStore } from '../../stores/zine/authors'
 import { showModal } from '../../stores/ui'
 import { Icon } from '../_shared/Icon'
 import { Popover } from '../_shared/Popover'
@@ -23,6 +24,7 @@ import { Modal } from '../Nav/Modal'
 import styles from '../../styles/Inbox.module.scss'
 
 type InboxSearchParams = {
+  by?: string
   initChat: string
   chat: string
 }
@@ -35,14 +37,18 @@ const handleOpenInviteModal = () => {
   showModal('inviteToChat')
 }
 
-export const InboxView = () => {
+type Props = {
+  authors: Author[]
+  isLoaded: boolean
+}
+
+export const InboxView = (props: Props) => {
   const { t } = useLocalize()
   const {
     chats,
     messages,
     actions: { loadChats, loadRecipients, getMessages, sendMessage, createChat },
   } = useInbox()
-
   const [recipients, setRecipients] = createSignal<Author[]>([])
   const [sortByGroup, setSortByGroup] = createSignal(false)
   const [sortByPerToPer, setSortByPerToPer] = createSignal(false)
@@ -53,7 +59,10 @@ export const InboxView = () => {
   const { author } = useSession()
   const currentUserId = createMemo(() => author()?.id)
   const { changeSearchParams, searchParams } = useRouter<InboxSearchParams>()
-
+  const { sortedAuthors } = useAuthorsStore({
+    authors: props.authors,
+    sortBy: (searchParams()?.by as AuthorsSortBy) || 'name',
+  })
   const messagesContainerRef: { current: HTMLDivElement } = {
     current: null,
   }

src/pages/allAuthors.page.server.ts

@@ -4,7 +4,7 @@ import type { PageContext } from '../renderer/types'
 import { apiClient } from '../graphql/client/core'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
-  const allAuthors = await apiClient.getAllAuthors() // limit 50, offset 0
+  const allAuthors = await apiClient.getAllAuthors()
 
   const pageProps: PageProps = { allAuthors, seo: { title: '' } }
 

src/pages/allAuthors.page.tsx

@@ -17,7 +17,7 @@ export const AllAuthorsPage = (props: PageProps) => {
       return
     }
 
-    await loadAllAuthors() // default limit, offset: 60, 0
+    await loadAllAuthors()
     setIsLoaded(true)
   })
 

src/pages/inbox.page.tsx

@@ -3,15 +3,27 @@ import { ShowOnlyOnClient } from '../components/_shared/ShowOnlyOnClient'
 import { InboxView } from '../components/Views/Inbox'
 import { InboxProvider } from '../context/inbox'
 import { useLocalize } from '../context/localize'
+import type { PageProps } from './types'
+import { createSignal, onMount } from 'solid-js'
+import { loadAllAuthors } from '../stores/zine/authors'
 
-export const InboxPage = () => {
+export const InboxPage = (props: PageProps) => {
   const { t } = useLocalize()
+  const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.allAuthors))
 
+  onMount(async () => {
+    if (isLoaded()) {
+      return
+    }
+
+    await loadAllAuthors()
+    setIsLoaded(true)
+  })
   return (
     <PageLayout hideFooter={true} title={t('Inbox')}>
       <ShowOnlyOnClient>
         <InboxProvider>
-          <InboxView />
+          <InboxView isLoaded={isLoaded()} authors={props.allAuthors} />
         </InboxProvider>
       </ShowOnlyOnClient>
     </PageLayout>

src/pages/index.page.server.ts

@@ -1,15 +1,12 @@
 import type { PageProps } from './types'
 import type { PageContext } from '../renderer/types'
 
-import { PRERENDERED_ARTICLES_COUNT } from '../components/Views/Home'
 import { apiClient } from '../graphql/client/core'
 
 export const onBeforeRender = async (_pageContext: PageContext) => {
-  const homeShouts = await apiClient.getShouts({
+  const allAuthors = await apiClient.getAllAuthors()
-    filters: { published: true },
+
-    limit: PRERENDERED_ARTICLES_COUNT,
+  const pageProps: PageProps = { allAuthors, seo: { title: '' } }
-  })
-  const pageProps: PageProps = { homeShouts, seo: { title: '' } }
 
   return {
     pageContext: {