Caching fetched resources

src/components/layout.module.css

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

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,6 +26,9 @@ export default function Todos() {
   const [activeGroups, setActiveGroups] = useState(null)
 
   useEffect(() => {
+    if (globalState.todos) {
+      setTodos(globalState.todos)
+    } else {
       fetch(`${constants.apiUrl}todos`, {
         credentials: 'include',
       })
@@ -34,7 +37,11 @@ export default function Todos() {
         })
         .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,
+                  })
                 })
             }}
           />

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;

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

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') {
+        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 {
+        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])

src/pages/contact.js

@@ -8,10 +8,13 @@ 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(() => {
+    if (globalState.contacts) {
+      setContacts(globalState.contacts)
+    } else {
       fetch(constants.apiUrl + 'contacts.json', {
         method: 'GET',
         credentials: 'include',
@@ -25,7 +28,11 @@ export default function Contact() {
         })
         .then((res) => {
           setContacts(res)
+          setGlobalState({
+            contacts: res,
           })
+        })
+    }
   }, [])
 
   return (

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

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(() => {
+    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,
+                    },
+                  })
                 })
               }}
             >

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

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,18 +96,31 @@ export default function RankList({ globalData }) {
   const getList = () => {
     setSum()
     setRanklist(null)
+    if (globalState.ranklist) {
+      const { list, sum, selfuserId } = globalState.ranklist
+      setRanklist(list || [])
+      setSum(sum)
+      if (selfuserId) {
+        setSelfUserId(selfuserId)
+      }
+    } else {
       getListFromServer(since)
         .then((data) => {
-        setRanklist(data.list || [])
+          const { list, sum, selfuserId } = data
-        setSum(data.sum)
+          setRanklist(list || [])
-        if (data.selfuserId) {
+          setSum(sum)
-          setSelfUserId(data.selfuserId)
+          if (selfuserId) {
+            setSelfUserId(selfuserId)
           }
+          setGlobalState({
+            ranklist: data,
+          })
         })
         .catch(() => {
           setRanklist(null)
         })
     }
+  }
 
   useEffect(() => {
     getList()

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(() => {
+    if (globalState.supportedSites) {
+      setSupportedSites(globalState.supportedSites)
+    } else {
       fetchSupportedSites().then((res) => {
         setSupportedSites(res)
+        setGlobalState({
+          supportedSites: res,
         })
+      })
+    }
   }, [])
 
   return (

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)
+                                    getDir(currDir, true)
-                                      .then((res) => {
-                                        setDirs(res.files)
-                                      })
-                                      .catch((res) => {
-                                        alert(res.msg)
-                                      })
                                   })
                                 }
                               }}
@@ -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)
-                        })
+                      getDir(currDir, true)
-                        .catch((res) => {
-                          alert(res.msg)
-                        })
                     })
                   }}
                 >
@@ -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)
-                        })
+                      getRootDir()
-                        .catch((res) => {
-                          alert(res.msg)
-                        })
                     })
                   }}
                 >