articles cache invalidation for feed pages, minor fixes (#288)

Co-authored-by: Igor Lobanov <igor.lobanov@onetwotrip.com>

src/components/Views/Home.tsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import Banner from '../Discours/Banner'
 import { Topics } from '../Nav/Topics'
 import { Row5 } from '../Feed/Row5'
@@ -132,7 +132,7 @@ export const HomeView = (props: Props) => {
         <Show when={topMonthArticles()}>
           <Slider title={t('Top month articles')}>
             <For each={topMonthArticles()}>
-              {(a: Shout) => (
+              {(a) => (
                 <ArticleCard
                   article={a}
                   settings={{

src/context/session.tsx

@@ -66,7 +66,9 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
       resetToken()
       return null
     } finally {
+      setTimeout(() => {
         setIsSessionLoaded(true)
+      }, 0)
     }
   }
 
@@ -123,8 +125,8 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
 
   const confirmEmail = async (token: string) => {
     const authResult = await apiClient.confirmEmail({ token })
-    mutate(authResult)
     setToken(authResult.token)
+    mutate(authResult)
   }
 
   const actions = {

src/pages/feed.page.tsx

@@ -1,6 +1,6 @@
 import { PageLayout } from '../components/_shared/PageLayout'
 import { FeedView } from '../components/Views/Feed'
-import { Match, onCleanup, Switch } from 'solid-js'
+import { createEffect, Match, on, onCleanup, Switch } from 'solid-js'
 import { loadMyFeed, loadShouts, resetSortedArticles } from '../stores/zine/articles'
 import { ReactionsProvider } from '../context/reactions'
 import { useRouter } from '../stores/router'
@@ -23,6 +23,16 @@ export const FeedPage = () => {
     return loadMyFeed(options)
   }
 
+  createEffect(
+    on(
+      () => page().route,
+      () => {
+        resetSortedArticles()
+      },
+      { defer: true }
+    )
+  )
+
   return (
     <PageLayout>
       <ReactionsProvider>

src/stores/zine/articles.ts

@@ -12,7 +12,8 @@ const [topArticles, setTopArticles] = createSignal<Shout[]>([])
 const [topMonthArticles, setTopMonthArticles] = createSignal<Shout[]>([])
 
 const articlesByAuthor = createLazyMemo(() => {
-  return Object.values(articleEntities()).reduce((acc, article) => {
+  return Object.values(articleEntities()).reduce(
+    (acc, article) => {
       article.authors.forEach((author) => {
         if (!acc[author.slug]) {
           acc[author.slug] = []
@@ -21,11 +22,14 @@ const articlesByAuthor = createLazyMemo(() => {
       })
 
       return acc
-  }, {} as { [authorSlug: string]: Shout[] })
+    },
+    {} as { [authorSlug: string]: Shout[] }
+  )
 })
 
 const articlesByTopic = createLazyMemo(() => {
-  return Object.values(articleEntities()).reduce((acc, article) => {
+  return Object.values(articleEntities()).reduce(
+    (acc, article) => {
       article.topics.forEach((topic) => {
         if (!acc[topic.slug]) {
           acc[topic.slug] = []
@@ -34,11 +38,14 @@ const articlesByTopic = createLazyMemo(() => {
       })
 
       return acc
-  }, {} as { [authorSlug: string]: Shout[] })
+    },
+    {} as { [authorSlug: string]: Shout[] }
+  )
 })
 
 const articlesByLayout = createLazyMemo(() => {
-  return Object.values(articleEntities()).reduce((acc, article) => {
+  return Object.values(articleEntities()).reduce(
+    (acc, article) => {
       if (!acc[article.layout]) {
         acc[article.layout] = []
       }
@@ -46,7 +53,9 @@ const articlesByLayout = createLazyMemo(() => {
       acc[article.layout].push(article)
 
       return acc
-  }, {} as { [layout: string]: Shout[] })
+    },
+    {} as { [layout: string]: Shout[] }
+  )
 })
 
 const topViewedArticles = createLazyMemo(() => {
@@ -65,10 +74,13 @@ const topCommentedArticles = createLazyMemo(() => {
 const addArticles = (...args: Shout[][]) => {
   const allArticles = args.flatMap((articles) => articles || [])
 
-  const newArticleEntities = allArticles.reduce((acc, article) => {
+  const newArticleEntities = allArticles.reduce(
+    (acc, article) => {
       acc[article.slug] = article
       return acc
-  }, {} as { [articleSLug: string]: Shout })
+    },
+    {} as { [articleSLug: string]: Shout }
+  )
 
   setArticleEntities((prevArticleEntities) => {
     return {
@@ -77,7 +89,8 @@ const addArticles = (...args: Shout[][]) => {
     }
   })
 
-  const authorsByTopic = allArticles.reduce((acc, article) => {
+  const authorsByTopic = allArticles.reduce(
+    (acc, article) => {
       const { authors, topics } = article
 
       topics.forEach((topic) => {
@@ -93,7 +106,9 @@ const addArticles = (...args: Shout[][]) => {
       })
 
       return acc
-  }, {} as { [topicSlug: string]: Author[] })
+    },
+    {} as { [topicSlug: string]: Author[] }
+  )
 
   addAuthorsByTopic(authorsByTopic)
 }

src/utils/getImageUrl.ts

@@ -11,19 +11,15 @@ const getSizeUrlPart = (options: { width?: number; height?: number } = {}) => {
   return `${widthString}x${heightString}/`
 }
 
-// I'm not proud of this
 export const getImageUrl = (src: string, options: { width?: number; height?: number } = {}) => {
   const sizeUrlPart = getSizeUrlPart(options)
 
-  if (!src.startsWith(thumborUrl)) {
-    return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
-  }
+  const thumborPrefix = `${thumborUrl}/unsafe/`
 
-  if (src.startsWith(`${thumborUrl}/unsafe`)) {
-    const thumborKey = src.replace(`${thumborUrl}/unsafe`, '')
+  if (src.startsWith(thumborPrefix)) {
+    const thumborKey = src.replace(thumborPrefix, '')
     return `${thumborUrl}/unsafe/${sizeUrlPart}${thumborKey}`
   }
 
-  const thumborKey = src.replace(`${thumborUrl}`, '')
-  return `${thumborUrl}/${sizeUrlPart}${thumborKey}`
+  return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
 }