From 3daeef184a5b8d8d4d19c78907db34680b794c6f Mon Sep 17 00:00:00 2001 From: mrfry Date: Wed, 9 Jun 2021 09:48:31 +0200 Subject: [PATCH] Caching fetched resources --- src/components/layout.module.css | 1 - src/components/todoStuff/todos.js | 28 +++++++++----- src/defaultStyles.css | 2 +- src/pages/_app.js | 12 ++++++ src/pages/allQuestions.js | 59 +++++++++++++++++++++++++---- src/pages/contact.js | 35 ++++++++++------- src/pages/contribute.js | 4 +- src/pages/index.js | 25 ++++++++++--- src/pages/pwRequest.js | 18 +++++++-- src/pages/ranklist.js | 37 ++++++++++++------ src/pages/script.js | 15 ++++++-- src/pages/userfiles.js | 62 ++++++++++++++++++------------- 12 files changed, 213 insertions(+), 85 deletions(-) diff --git a/src/components/layout.module.css b/src/components/layout.module.css index 546555b..152fffe 100644 --- a/src/components/layout.module.css +++ b/src/components/layout.module.css @@ -66,7 +66,6 @@ flex-direction: column; width: 150px; - background-color: #222426; position: fixed; height: 100%; overflow: auto; diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js index efb716c..05e8f20 100644 --- a/src/components/todoStuff/todos.js +++ b/src/components/todoStuff/todos.js @@ -13,7 +13,7 @@ const byVotes = (a, b) => { return b.votes.length - a.votes.length } -export default function Todos() { +export default function Todos({ globalState, setGlobalState }) { const [loaded, setLoaded] = useState(false) const [columns, setColumns] = useState(null) const [cards, setCards] = useState(null) @@ -26,15 +26,22 @@ export default function Todos() { const [activeGroups, setActiveGroups] = useState(null) useEffect(() => { - fetch(`${constants.apiUrl}todos`, { - credentials: 'include', - }) - .then((resp) => { - return resp.json() - }) - .then((data) => { - setTodos(data) + if (globalState.todos) { + setTodos(globalState.todos) + } else { + fetch(`${constants.apiUrl}todos`, { + credentials: 'include', }) + .then((resp) => { + return resp.json() + }) + .then((data) => { + setTodos(data) + setGlobalState({ + todos: data, + }) + }) + } }, []) const setTodos = (data) => { @@ -188,6 +195,9 @@ export default function Todos() { }) .then((data) => { setTodos(data) + setGlobalState({ + todos: data, + }) }) }} /> diff --git a/src/defaultStyles.css b/src/defaultStyles.css index c6ec631..0ff6f87 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -300,7 +300,7 @@ select:hover { .selectContainer > select, .selectContainer > input { - width: 20%; + width: 30%; border-radius: 5px; border: 1.5px solid white; background-color: #9c9c98; diff --git a/src/pages/_app.js b/src/pages/_app.js index a904d9d..0d70e20 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -10,6 +10,7 @@ function MyApp({ Component, pageProps, router }) { const [userId, setUserId] = useState() const [motd, setMotd] = useState() const [unreads, setUnreads] = useState() + const [globalState, setGlobalState] = useState({}) const getGlobalProps = () => { fetch(`${constants.apiUrl}infos?motd=true`, { @@ -50,6 +51,13 @@ function MyApp({ Component, pageProps, router }) { getGlobalProps() }, []) + const updateGlobalState = (newState) => { + setGlobalState({ + ...globalState, + ...newState, + }) + } + const globalData = { userId: userId, motd: motd, @@ -65,12 +73,16 @@ function MyApp({ Component, pageProps, router }) { router={router} globalData={globalData} refetchGlobalData={getGlobalProps} + setGlobalState={updateGlobalState} + globalState={globalState} > diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js index 628e679..48cf713 100644 --- a/src/pages/allQuestions.js +++ b/src/pages/allQuestions.js @@ -70,7 +70,7 @@ function fetchDbs() { }) } -export default function AllQuestions({ router }) { +export default function AllQuestions({ router, globalState, setGlobalState }) { const [subjectsShowing, setSubjectsShowing] = useState(false) const [searchTerm, setSearchTerm] = useState('') const [activeSubjName, setActiveSubjName] = useState('') @@ -112,15 +112,60 @@ export default function AllQuestions({ router }) { useEffect(() => { if (dbs && selectedDb && (selectedDb === 'all' || dbs[selectedDb])) { if (selectedDb === 'all') { - fetchAllData(dbs).then((res) => { - setData(mergeData(res)) + const hasAll = + globalState.dbs && + dbs.every((db) => { + return ( + Object.keys(globalState.dbs).findIndex((key) => { + return db.name === key + }) !== -1 + ) + }) + + if (hasAll) { + const asd = Object.keys(globalState.dbs).map((key) => { + return { + dbName: key, + data: globalState.dbs[key], + } + }) + setData(mergeData(asd)) setFetchingData(false) - }) + } else { + fetchAllData(dbs).then((res) => { + setData(mergeData(res)) + setFetchingData(false) + + let cacheRes = {} + res.forEach((db) => { + cacheRes = { + ...cacheRes, + [db.dbName]: db.data, + } + }) + setGlobalState({ + dbs: cacheRes, + }) + }) + } } else { - fetchData(dbs[selectedDb]).then((res) => { - setData(res.data) + const selected = dbs[selectedDb] + if (globalState.dbs && globalState.dbs[selected.name]) { + setData(globalState.dbs[selected.name]) setFetchingData(false) - }) + } else { + fetchData(dbs[selectedDb]).then((res) => { + setData(res.data) + setFetchingData(false) + + setGlobalState({ + dbs: { + ...globalState.dbs, + [res.dbName]: res.data, + }, + }) + }) + } } } }, [selectedDb, dbs]) diff --git a/src/pages/contact.js b/src/pages/contact.js index 607dff8..7cc7dfc 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -8,24 +8,31 @@ import LoadingIndicator from '../components/LoadingIndicator' import styles from './contact.module.css' -export default function Contact() { +export default function Contact({ globalState, setGlobalState }) { const [contacts, setContacts] = useState() useEffect(() => { - fetch(constants.apiUrl + 'contacts.json', { - method: 'GET', - credentials: 'include', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - }) - .then((res) => { - return res.json() - }) - .then((res) => { - setContacts(res) + if (globalState.contacts) { + setContacts(globalState.contacts) + } else { + fetch(constants.apiUrl + 'contacts.json', { + method: 'GET', + credentials: 'include', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, }) + .then((res) => { + return res.json() + }) + .then((res) => { + setContacts(res) + setGlobalState({ + contacts: res, + }) + }) + } }, []) return ( diff --git a/src/pages/contribute.js b/src/pages/contribute.js index 6dfb01c..02dc3a0 100644 --- a/src/pages/contribute.js +++ b/src/pages/contribute.js @@ -9,7 +9,7 @@ import constants from '../constants.json' import styles from './contribute.module.css' import repos from '../data/repos.json' -export default function contribute() { +export default function Contribute({ globalState, setGlobalState }) { const [showFeedback, setShowFeedback] = useState(false) return ( @@ -52,7 +52,7 @@ export default function contribute() {
- +
diff --git a/src/pages/index.js b/src/pages/index.js index c40d722..4a8ca4c 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -76,7 +76,7 @@ function updateForumPost(forum, postKey, postData) { }, {}) } -export default function Index({ globalData }) { +export default function Index({ globalData, globalState, setGlobalState }) { const userId = globalData.userId const motd = globalData.motd const [news, setNews] = useState(null) @@ -84,13 +84,20 @@ export default function Index({ globalData }) { const [fetchingForum, setFetchingForum] = useState(false) useEffect(() => { - setFetchingForum(true) - fetchForum().then((res) => { - setFetchingForum(false) - const { entries, nextKey } = res + if (globalState.news) { + const { entries, nextKey } = globalState.news setNextEntryKey(nextKey) setNews(entries) - }) + } else { + setFetchingForum(true) + fetchForum().then((res) => { + setFetchingForum(false) + const { entries, nextKey } = res + setNextEntryKey(nextKey) + setNews(entries) + setGlobalState({ news: res }) + }) + } }, []) const renderNews = () => { @@ -281,6 +288,12 @@ export default function Index({ globalData }) { const { entries, nextKey } = res setNextEntryKey(nextKey) setNews({ ...news, ...entries }) + setGlobalState({ + news: { + entries: { ...news, ...entries }, + nextKey: nextKey, + }, + }) }) }} > diff --git a/src/pages/pwRequest.js b/src/pages/pwRequest.js index 678bc51..84babd9 100644 --- a/src/pages/pwRequest.js +++ b/src/pages/pwRequest.js @@ -40,7 +40,7 @@ function requestPw() { }) } -export default function PwRequest({ globalData }) { +export default function PwRequest({ globalData, globalState, setGlobalState }) { const userId = globalData.userId || '...' const [result, setResult] = useState([]) const [daysTillNext, setDaysTillNext] = useState('...') @@ -65,9 +65,16 @@ export default function PwRequest({ globalData }) { } = data useEffect(() => { - fetchAvailablePWS().then((data) => { - setData(data) - }) + if (globalState.availablePWS) { + setData(globalState.availablePWS) + } else { + fetchAvailablePWS().then((data) => { + setData(data) + setGlobalState({ + availablePWS: data, + }) + }) + } const nextDate = 1 const now = new Date() if (now.getDate() === nextDate) { @@ -154,6 +161,9 @@ export default function PwRequest({ globalData }) { onClick={() => { requestPw().then((res) => { setData(res) + setGlobalState({ + availablePWS: res, + }) if (res.success) { setResult([...result, res.pw]) } else { diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js index 64a1b1c..a08ac5b 100644 --- a/src/pages/ranklist.js +++ b/src/pages/ranklist.js @@ -84,7 +84,7 @@ function sortDataBy(data, key) { }) } -export default function RankList({ globalData }) { +export default function RankList({ globalData, globalState, setGlobalState }) { const userId = globalData.userId const [ranklist, setRanklist] = useState(null) const [selfUserId, setSelfUserId] = useState('...') @@ -96,17 +96,30 @@ export default function RankList({ globalData }) { const getList = () => { setSum() setRanklist(null) - getListFromServer(since) - .then((data) => { - setRanklist(data.list || []) - setSum(data.sum) - if (data.selfuserId) { - setSelfUserId(data.selfuserId) - } - }) - .catch(() => { - setRanklist(null) - }) + if (globalState.ranklist) { + const { list, sum, selfuserId } = globalState.ranklist + setRanklist(list || []) + setSum(sum) + if (selfuserId) { + setSelfUserId(selfuserId) + } + } else { + getListFromServer(since) + .then((data) => { + const { list, sum, selfuserId } = data + setRanklist(list || []) + setSum(sum) + if (selfuserId) { + setSelfUserId(selfuserId) + } + setGlobalState({ + ranklist: data, + }) + }) + .catch(() => { + setRanklist(null) + }) + } } useEffect(() => { diff --git a/src/pages/script.js b/src/pages/script.js index 9840a08..eaebbf0 100644 --- a/src/pages/script.js +++ b/src/pages/script.js @@ -22,13 +22,20 @@ function fetchSupportedSites() { }) } -export default function Script() { +export default function Script({ globalState, setGlobalState }) { const [supportedSites, setSupportedSites] = useState() useEffect(() => { - fetchSupportedSites().then((res) => { - setSupportedSites(res) - }) + if (globalState.supportedSites) { + setSupportedSites(globalState.supportedSites) + } else { + fetchSupportedSites().then((res) => { + setSupportedSites(res) + setGlobalState({ + supportedSites: res, + }) + }) + } }, []) return ( diff --git a/src/pages/userfiles.js b/src/pages/userfiles.js index bc904a6..1041c70 100644 --- a/src/pages/userfiles.js +++ b/src/pages/userfiles.js @@ -184,7 +184,12 @@ function uploadFile(dir, file) { }) } -export default function UserFiles({ router, globalData }) { +export default function UserFiles({ + router, + globalData, + globalState, + setGlobalState, +}) { const userId = globalData.userId const [dirs, setDirs] = useState() const [sortBy, setSortBy] = useState('name') @@ -210,23 +215,48 @@ export default function UserFiles({ router, globalData }) { setSearchTerm() if (router.query.dir) { + getDir(dir) + } else { + getRootDir() + } + }, [router.query.dir]) + + const getDir = (dir, nocache) => { + if (!nocache && globalState.userFiles && globalState.userFiles[dir]) { + setDirs(globalState.userFiles[dir]) + } else { listUserDir(dir) .then((res) => { setDirs(res.files) + setGlobalState({ + userFiles: { + ...globalState.userFiles, + [dir]: res.files, + }, + }) }) .catch((res) => { alert(res.msg) }) + } + } + + const getRootDir = (nocache) => { + if (!nocache && globalState.userFilesRoot) { + setDirs(globalState.userFilesRoot) } else { listUserDir() .then((res) => { + setGlobalState({ + userFilesRoot: res.dirs, + }) setDirs(res.dirs) }) .catch((res) => { alert(res.msg) }) } - }, [router.query.dir]) + } const dirSorter = (a, b) => { if (a[sortBy] < b[sortBy]) { @@ -391,13 +421,7 @@ export default function UserFiles({ router, globalData }) { e.stopPropagation() if (confirm(`Biztos törlöd '${name}'-t ?`)) { deleteFile(currDir, name).then(() => { - listUserDir(currDir) - .then((res) => { - setDirs(res.files) - }) - .catch((res) => { - alert(res.msg) - }) + getDir(currDir, true) }) } }} @@ -479,14 +503,8 @@ export default function UserFiles({ router, globalData }) { setUploading(true) uploadFile(currDir, file).then(() => { setUploading(false) - listUserDir(currDir) - .then((res) => { - setDirs(res.files) - setAddingNew(null) - }) - .catch((res) => { - alert(res.msg) - }) + setAddingNew(null) + getDir(currDir, true) }) }} > @@ -507,14 +525,8 @@ export default function UserFiles({ router, globalData }) { setUploading(true) newSubj(newSubjName).then(() => { setUploading(false) - listUserDir() - .then((res) => { - setDirs(res.dirs) - setAddingNew(null) - }) - .catch((res) => { - alert(res.msg) - }) + setAddingNew(null) + getRootDir() }) }} >