Caching fetched resources

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