diff --git a/src/components/Views/AllTopics/AllTopics.tsx b/src/components/Views/AllTopics/AllTopics.tsx index 6183c26e..ae76c775 100644 --- a/src/components/Views/AllTopics/AllTopics.tsx +++ b/src/components/Views/AllTopics/AllTopics.tsx @@ -2,7 +2,7 @@ import type { Topic } from '../../../graphql/schema/core.gen' import { Meta } from '@solidjs/meta' import { clsx } from 'clsx' -import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js' +import { For, Show, createEffect, createMemo, createSignal } from 'solid-js' import { useLocalize } from '../../../context/localize' import { useTopics } from '../../../context/topics' import { useRouter } from '../../../stores/router' @@ -33,13 +33,7 @@ export const AllTopics = (props: Props) => { const [limit, setLimit] = createSignal(PAGE_SIZE) const ALPHABET = lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ#'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'] - const { sortedTopics, setTopicsSort, addTopics } = useTopics() - onMount(() => { - setTopicsSort(searchParams()?.by || 'shouts') - if (props.topics) { - addTopics(props.topics) - } - }) + const { sortedTopics, setTopicsSort } = useTopics() createEffect(() => { if (!searchParams().by) { diff --git a/src/context/topics.tsx b/src/context/topics.tsx index ff8ce45c..eb8c3e93 100644 --- a/src/context/topics.tsx +++ b/src/context/topics.tsx @@ -13,6 +13,7 @@ type TopicsContextType = { topTopics: Accessor setTopicsSort: (sortBy: string) => void addTopics: (topics: Topic[]) => void + loadTopics: () => Promise } const TopicsContext = createContext() @@ -33,11 +34,13 @@ const setupIndexedDB = async () => { }) } -const getTopicsFromIndexedDB = (db) => { +const getTopicsFromIndexedDB = async (db) => { const tx = db.transaction(STORE_NAME, 'readonly') const store = tx.objectStore(STORE_NAME) - return store.getAll() + const topics = await store.getAll() + return { topics, timestamp: tx.done } } + const saveTopicsToIndexedDB = async (db, topics) => { const tx = db.transaction(STORE_NAME, 'readwrite') const store = tx.objectStore(STORE_NAME) @@ -105,14 +108,22 @@ export const TopicsProvider = (props: { children: JSX.Element }) => { } }) } + const [db, setDb] = createSignal() + const loadTopics = async () => { + const ttt = await apiClient.getAllTopics() + await saveTopicsToIndexedDB(db(), ttt) + return ttt + } onMount(async () => { const db = await setupIndexedDB() - let topics = await getTopicsFromIndexedDB(db) + setDb(db) + let { topics, timestamp } = await getTopicsFromIndexedDB(db) - if (topics.length < 100) { - topics = await apiClient.getAllTopics() - await saveTopicsToIndexedDB(db, topics) + if (topics.length < 100 || Date.now() - timestamp > 3600000) { + const newTopics = await loadTopics() + await saveTopicsToIndexedDB(db, newTopics) + topics = newTopics } addTopics(topics) setRandomTopics(topics) @@ -125,6 +136,7 @@ export const TopicsProvider = (props: { children: JSX.Element }) => { randomTopics, topTopics, addTopics, + loadTopics, } return {props.children}