From 04323f05ffc86b6c86ba788fd2a7926834cdff7b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 21 Dec 2022 01:02:48 +0800
Subject: [PATCH] Experimental: caching status + context

Cache all statuses from Status page so that it can load faster when
navigating between statuses. Uses sessionStorage
---
 src/pages/status.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index aa3a2a6c..71026c19 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -13,20 +13,29 @@ import Loader from '../components/loader';
 import Status from '../components/status';
 import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
+import store from '../utils/store';
 import useTitle from '../utils/useTitle';
 
 function StatusPage({ id }) {
   const snapStates = useSnapshot(states);
-  const [statuses, setStatuses] = useState([{ id }]);
+  const cachedStatuses = store.session.getJSON('statuses-' + id);
+  const [statuses, setStatuses] = useState(cachedStatuses || [{ id }]);
   const [uiState, setUIState] = useState('default');
   const heroStatusRef = useRef();
 
-  useEffect(async () => {
+  useEffect(() => {
     const containsStatus = statuses.find((s) => s.id === id);
     if (!containsStatus) {
       setStatuses([{ id }]);
+    } else {
+      const cachedStatuses = store.session.getJSON('statuses-' + id);
+      if (cachedStatuses) {
+        setStatuses(cachedStatuses);
+      }
     }
+  }, [id]);
 
+  useEffect(async () => {
     setUIState('loading');
 
     const hasStatus = snapStates.statuses.has(id);
@@ -93,6 +102,7 @@ function StatusPage({ id }) {
       ];
       console.log({ allStatuses });
       setStatuses(allStatuses);
+      store.session.setJSON('statuses-' + id, allStatuses);
     } catch (e) {
       console.error(e);
       setUIState('error');