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 {
-      setIsSessionLoaded(true)
+      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,41 +12,50 @@ 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(
-    article.authors.forEach((author) => {
+    (acc, article) => {
-      if (!acc[author.slug]) {
+      article.authors.forEach((author) => {
-        acc[author.slug] = []
+        if (!acc[author.slug]) {
-      }
+          acc[author.slug] = []
-      acc[author.slug].push(article)
+        }
-    })
+        acc[author.slug].push(article)
+      })
 
-    return acc
+      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(
-    article.topics.forEach((topic) => {
+    (acc, article) => {
-      if (!acc[topic.slug]) {
+      article.topics.forEach((topic) => {
-        acc[topic.slug] = []
+        if (!acc[topic.slug]) {
-      }
+          acc[topic.slug] = []
-      acc[topic.slug].push(article)
+        }
-    })
+        acc[topic.slug].push(article)
+      })
 
-    return acc
+      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(
-    if (!acc[article.layout]) {
+    (acc, article) => {
-      acc[article.layout] = []
+      if (!acc[article.layout]) {
-    }
+        acc[article.layout] = []
+      }
 
-    acc[article.layout].push(article)
+      acc[article.layout].push(article)
 
-    return acc
+      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.slug] = article
+    (acc, article) => {
-    return acc
+      acc[article.slug] = article
-  }, {} as { [articleSLug: string]: Shout })
+      return acc
+    },
+    {} as { [articleSLug: string]: Shout }
+  )
 
   setArticleEntities((prevArticleEntities) => {
     return {
@@ -77,23 +89,26 @@ const addArticles = (...args: Shout[][]) => {
     }
   })
 
-  const authorsByTopic = allArticles.reduce((acc, article) => {
+  const authorsByTopic = allArticles.reduce(
-    const { authors, topics } = article
+    (acc, article) => {
+      const { authors, topics } = article
 
-    topics.forEach((topic) => {
+      topics.forEach((topic) => {
-      if (!acc[topic.slug]) {
+        if (!acc[topic.slug]) {
-        acc[topic.slug] = []
+          acc[topic.slug] = []
-      }
-
-      authors.forEach((author) => {
-        if (!acc[topic.slug].some((a) => a.slug === author.slug)) {
-          acc[topic.slug].push(author)
         }
-      })
-    })
 
-    return acc
+        authors.forEach((author) => {
-  }, {} as { [topicSlug: string]: Author[] })
+          if (!acc[topic.slug].some((a) => a.slug === author.slug)) {
+            acc[topic.slug].push(author)
+          }
+        })
+      })
+
+      return acc
+    },
+    {} 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)) {
+  const thumborPrefix = `${thumborUrl}/unsafe/`
-    return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
-  }
 
-  if (src.startsWith(`${thumborUrl}/unsafe`)) {
+  if (src.startsWith(thumborPrefix)) {
-    const thumborKey = src.replace(`${thumborUrl}/unsafe`, '')
+    const thumborKey = src.replace(thumborPrefix, '')
     return `${thumborUrl}/unsafe/${sizeUrlPart}${thumborKey}`
   }
 
-  const thumborKey = src.replace(`${thumborUrl}`, '')
+  return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
-  return `${thumborUrl}/${sizeUrlPart}${thumborKey}`
 }