From fa79a0cd5d361810efd98e6e67324704586c0e0e Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Sat, 6 Jul 2024 09:24:37 +0300
Subject: [PATCH] localstorage-fix

---
 src/components/Article/CommentsTree.tsx       |  4 +-
 src/components/Article/FullArticle.tsx        | 48 +++++++++----------
 .../_shared/DarkModeToggle/DarkModeToggle.tsx |  5 +-
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx
index d8ab01f3..7aeb71bf 100644
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@@ -52,10 +52,10 @@ export const CommentsTree = (props: Props) => {
   })
   const { seen } = useFeed()
   const shoutLastSeen = createMemo(() => seen()[props.shoutSlug] ?? 0)
-  const currentDate = new Date()
-  const setCookie = () => localStorage?.setItem(`${props.shoutSlug}`, `${currentDate}`)
 
   onMount(() => {
+    const currentDate = new Date()
+    const setCookie = () => localStorage?.setItem(`${props.shoutSlug}`, `${currentDate}`)
     if (!shoutLastSeen()) {
       setCookie()
     } else if (currentDate.getTime() > shoutLastSeen()) {
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 2ae68a07..5241c6d8 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -91,7 +91,7 @@ export const FullArticle = (props: Props) => {
 
   const mainTopic = createMemo(() => {
     const mainTopicSlug = (props.article?.topics?.length || 0) > 0 ? props.article.main_topic : null
-    const mt = props.article.topics?.find((tpc: Maybe<Topic>) => tpc?.slug === mainTopicSlug)
+    const mt = props.article?.topics?.find((tpc: Maybe<Topic>) => tpc?.slug === mainTopicSlug)
     if (mt) {
       mt.title = lang() === 'en' ? capitalize(mt.slug.replace(/-/, ' ')) : mt.title
       return mt
@@ -107,10 +107,10 @@ export const FullArticle = (props: Props) => {
   }
 
   const body = createMemo(() => {
-    if (props.article.layout === 'literature') {
+    if (props.article?.layout === 'literature') {
       try {
         if (props.article?.media) {
-          const media = JSON.parse(props.article.media)
+          const media = JSON.parse(props.article?.media)
           if (media.length > 0) {
             return media[0].body
           }
@@ -119,7 +119,7 @@ export const FullArticle = (props: Props) => {
         console.error(error)
       }
     }
-    return props.article.body
+    return props.article?.body || ''
   })
 
   const imageUrls = createMemo(() => {
@@ -362,19 +362,19 @@ export const FullArticle = (props: Props) => {
             onClick={handleArticleBodyClick}
           >
             {/*TODO: Check styles.shoutTopic*/}
-            <Show when={props.article.layout !== 'audio'}>
+            <Show when={props.article?.layout !== 'audio'}>
               <div class={styles.shoutHeader}>
                 <Show when={mainTopic()}>
                   <CardTopic title={mainTopic()?.title || ''} slug={mainTopic()?.slug || ''} />
                 </Show>
 
-                <h1>{props.article.title}</h1>
-                <Show when={props.article.subtitle}>
-                  <h4>{props.article.subtitle}</h4>
+                <h1>{props.article?.title || ''}</h1>
+                <Show when={props.article?.subtitle}>
+                  <h4>{props.article?.subtitle || ''}</h4>
                 </Show>
 
                 <div class={styles.shoutAuthor}>
-                  <For each={props.article.authors}>
+                  <For each={props.article?.authors}>
                     {(a: Maybe<Author>, index: () => number) => (
                       <>
                         <Show when={index() > 0}>, </Show>
@@ -385,39 +385,39 @@ export const FullArticle = (props: Props) => {
                 </div>
                 <Show
                   when={
-                    props.article.cover &&
-                    props.article.layout !== 'video' &&
-                    props.article.layout !== 'image'
+                    props.article?.cover &&
+                    props.article?.layout !== 'video' &&
+                    props.article?.layout !== 'image'
                   }
                 >
                   <figure class="img-align-column">
                     <Image
                       width={800}
-                      alt={props.article.cover_caption || ''}
-                      src={props.article.cover || ''}
+                      alt={props.article?.cover_caption || ''}
+                      src={props.article?.cover || ''}
                     />
-                    <figcaption innerHTML={props.article.cover_caption || ''} />
+                    <figcaption innerHTML={props.article?.cover_caption || ''} />
                   </figure>
                 </Show>
               </div>
             </Show>
-            <Show when={props.article.lead}>
-              <section class={styles.lead} innerHTML={props.article.lead || ''} />
+            <Show when={props.article?.lead}>
+              <section class={styles.lead} innerHTML={props.article?.lead || ''} />
             </Show>
-            <Show when={props.article.layout === 'audio'}>
+            <Show when={props.article?.layout === 'audio'}>
               <AudioHeader
-                title={props.article.title}
-                cover={props.article.cover || ''}
+                title={props.article?.title || ''}
+                cover={props.article?.cover || ''}
                 artistData={media()?.[0]}
                 topic={mainTopic() as Topic}
               />
               <Show when={media().length > 0}>
                 <div class="media-items">
-                  <AudioPlayer media={media()} articleSlug={props.article.slug} body={body()} />
+                  <AudioPlayer media={media()} articleSlug={props.article?.slug || ''} body={body()} />
                 </div>
               </Show>
             </Show>
-            <Show when={media() && props.article.layout === 'video'}>
+            <Show when={media() && props.article?.layout === 'video'}>
               <div class="media-items">
                 <For each={media() || []}>
                   {(m: MediaItem) => (
@@ -576,9 +576,9 @@ export const FullArticle = (props: Props) => {
               </div>
             </Show>
 
-            <Show when={props.article.topics?.length}>
+            <Show when={props.article?.topics?.length}>
               <div class={styles.topicsList}>
-                <For each={props.article.topics}>
+                <For each={props.article?.topics || []}>
                   {(topic) => (
                     <div class={styles.shoutTopic}>
                       <A href={`/topic/${topic?.slug || ''}`}>
diff --git a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
index ed86655e..522b28a7 100644
--- a/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
+++ b/src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
@@ -10,14 +10,13 @@ type Props = {
   class?: string
 }
 
-const editorDarkModeSelected = localStorage?.getItem('editorDarkMode')
-const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode')
-
 export const DarkModeToggle = (props: Props) => {
   const { t } = useLocalize()
   const [editorDarkMode, setEditorDarkMode] = createSignal(false)
 
   onMount(() => {
+    const editorDarkModeSelected = localStorage?.getItem('editorDarkMode')
+    const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode')
     if (editorDarkModeSelected === 'true') {
       setEditorDarkMode(true)
       document.documentElement.dataset.editorDarkMode = 'true'