discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

localstorage-fix

Browse Source
This commit is contained in:
Untone 2024-07-06 09:24:37 +03:00
parent 47622f996b
commit fa79a0cd5d
3 changed files with 28 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Article/CommentsTree.tsx
View File

@ -52,10 +52,10 @@ export const CommentsTree = (props: Props) => {
}) })
const { seen } = useFeed() const { seen } = useFeed()
const shoutLastSeen = createMemo(() => seen()[props.shoutSlug] ?? 0) const shoutLastSeen = createMemo(() => seen()[props.shoutSlug] ?? 0)
const currentDate = new Date()
const setCookie = () => localStorage?.setItem(`${props.shoutSlug}`, `${currentDate}`)
onMount(() => { onMount(() => {
const currentDate = new Date()
const setCookie = () => localStorage?.setItem(`${props.shoutSlug}`, `${currentDate}`)
if (!shoutLastSeen()) { if (!shoutLastSeen()) {
setCookie() setCookie()
} else if (currentDate.getTime() > shoutLastSeen()) { } else if (currentDate.getTime() > shoutLastSeen()) {

48
src/components/Article/FullArticle.tsx
View File

@ -91,7 +91,7 @@ export const FullArticle = (props: Props) => {
const mainTopic = createMemo(() => { const mainTopic = createMemo(() => {
const mainTopicSlug = (props.article?.topics?.length || 0) > 0 ? props.article.main_topic : null 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) { if (mt) {
mt.title = lang() === 'en' ? capitalize(mt.slug.replace(/-/, ' ')) : mt.title mt.title = lang() === 'en' ? capitalize(mt.slug.replace(/-/, ' ')) : mt.title
return mt return mt
@ -107,10 +107,10 @@ export const FullArticle = (props: Props) => {
} }
const body = createMemo(() => { const body = createMemo(() => {
if (props.article.layout === 'literature') { if (props.article?.layout === 'literature') {
try { try {
if (props.article?.media) { if (props.article?.media) {
const media = JSON.parse(props.article.media) const media = JSON.parse(props.article?.media)
if (media.length > 0) { if (media.length > 0) {
return media[0].body return media[0].body
} }
@ -119,7 +119,7 @@ export const FullArticle = (props: Props) => {
console.error(error) console.error(error)
} }
} }
return props.article.body return props.article?.body || ''
}) })
const imageUrls = createMemo(() => { const imageUrls = createMemo(() => {
@ -362,19 +362,19 @@ export const FullArticle = (props: Props) => {
onClick={handleArticleBodyClick} onClick={handleArticleBodyClick}
> >
{/*TODO: Check styles.shoutTopic*/} {/*TODO: Check styles.shoutTopic*/}
<Show when={props.article.layout !== 'audio'}> <Show when={props.article?.layout !== 'audio'}>
<div class={styles.shoutHeader}> <div class={styles.shoutHeader}>
<Show when={mainTopic()}> <Show when={mainTopic()}>
<CardTopic title={mainTopic()?.title || ''} slug={mainTopic()?.slug || ''} /> <CardTopic title={mainTopic()?.title || ''} slug={mainTopic()?.slug || ''} />
</Show> </Show>
<h1>{props.article.title}</h1> <h1>{props.article?.title || ''}</h1>
<Show when={props.article.subtitle}> <Show when={props.article?.subtitle}>
<h4>{props.article.subtitle}</h4> <h4>{props.article?.subtitle || ''}</h4>
</Show> </Show>
<div class={styles.shoutAuthor}> <div class={styles.shoutAuthor}>
<For each={props.article.authors}> <For each={props.article?.authors}>
{(a: Maybe<Author>, index: () => number) => ( {(a: Maybe<Author>, index: () => number) => (
<> <>
<Show when={index() > 0}>, </Show> <Show when={index() > 0}>, </Show>
@ -385,39 +385,39 @@ export const FullArticle = (props: Props) => {
</div> </div>
<Show <Show
when={ when={
props.article.cover && props.article?.cover &&
props.article.layout !== 'video' && props.article?.layout !== 'video' &&
props.article.layout !== 'image' props.article?.layout !== 'image'
} }
> >
<figure class="img-align-column"> <figure class="img-align-column">
<Image <Image
width={800} width={800}
alt={props.article.cover_caption || ''} alt={props.article?.cover_caption || ''}
src={props.article.cover || ''} src={props.article?.cover || ''}
/> />
<figcaption innerHTML={props.article.cover_caption || ''} /> <figcaption innerHTML={props.article?.cover_caption || ''} />
</figure> </figure>
</Show> </Show>
</div> </div>
</Show> </Show>
<Show when={props.article.lead}> <Show when={props.article?.lead}>
<section class={styles.lead} innerHTML={props.article.lead || ''} /> <section class={styles.lead} innerHTML={props.article?.lead || ''} />
</Show> </Show>
<Show when={props.article.layout === 'audio'}> <Show when={props.article?.layout === 'audio'}>
<AudioHeader <AudioHeader
title={props.article.title} title={props.article?.title || ''}
cover={props.article.cover || ''} cover={props.article?.cover || ''}
artistData={media()?.[0]} artistData={media()?.[0]}
topic={mainTopic() as Topic} topic={mainTopic() as Topic}
/> />
<Show when={media().length > 0}> <Show when={media().length > 0}>
<div class="media-items"> <div class="media-items">
<AudioPlayer media={media()} articleSlug={props.article.slug} body={body()} /> <AudioPlayer media={media()} articleSlug={props.article?.slug || ''} body={body()} />
</div> </div>
</Show> </Show>
</Show> </Show>
<Show when={media() && props.article.layout === 'video'}> <Show when={media() && props.article?.layout === 'video'}>
<div class="media-items"> <div class="media-items">
<For each={media() || []}> <For each={media() || []}>
{(m: MediaItem) => ( {(m: MediaItem) => (
@ -576,9 +576,9 @@ export const FullArticle = (props: Props) => {
</div> </div>
</Show> </Show>
<Show when={props.article.topics?.length}> <Show when={props.article?.topics?.length}>
<div class={styles.topicsList}> <div class={styles.topicsList}>
<For each={props.article.topics}> <For each={props.article?.topics || []}>
{(topic) => ( {(topic) => (
<div class={styles.shoutTopic}> <div class={styles.shoutTopic}>
<A href={`/topic/${topic?.slug || ''}`}> <A href={`/topic/${topic?.slug || ''}`}>

5
src/components/_shared/DarkModeToggle/DarkModeToggle.tsx
View File

@ -10,14 +10,13 @@ type Props = {
class?: string class?: string
} }
const editorDarkModeSelected = localStorage?.getItem('editorDarkMode')
const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode')
export const DarkModeToggle = (props: Props) => { export const DarkModeToggle = (props: Props) => {
const { t } = useLocalize() const { t } = useLocalize()
const [editorDarkMode, setEditorDarkMode] = createSignal(false) const [editorDarkMode, setEditorDarkMode] = createSignal(false)
onMount(() => { onMount(() => {
const editorDarkModeSelected = localStorage?.getItem('editorDarkMode')
const editorDarkModeAttr = document.documentElement.getAttribute('editorDarkMode')
if (editorDarkModeSelected === 'true') { if (editorDarkModeSelected === 'true') {
setEditorDarkMode(true) setEditorDarkMode(true)
document.documentElement.dataset.editorDarkMode = 'true' document.documentElement.dataset.editorDarkMode = 'true'