Caching fetched resources

This commit is contained in:
mrfry 2021-06-09 09:48:31 +02:00
parent 7e93e41edc
commit 3daeef184a
12 changed files with 213 additions and 85 deletions

View file

@ -66,7 +66,6 @@
flex-direction: column;
width: 150px;
background-color: #222426;
position: fixed;
height: 100%;
overflow: auto;

View file

@ -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,
})
})
}}
/>

View file

@ -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;

View file

@ -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}
>
<Component
{...pageProps}
router={router}
globalData={globalData}
refetchGlobalData={getGlobalProps}
setGlobalState={updateGlobalState}
globalState={globalState}
/>
</Layout>
</>

View file

@ -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])

View file

@ -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 (

View file

@ -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() {
</div>
<br />
<hr />
<Todos />
<Todos globalState={globalState} setGlobalState={setGlobalState} />
<hr />
<div id={'gitrepo'} className={styles.gitRepos}>
<div>

View file

@ -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,
},
})
})
}}
>

View file

@ -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 {

View file

@ -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(() => {

View file

@ -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 (

View file

@ -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()
})
}}
>