Experimental: caching status + context

Cache all statuses from Status page so that it can load faster when
navigating between statuses. Uses sessionStorage
This commit is contained in:
Lim Chee Aun 2022-12-21 01:02:48 +08:00
parent 3fede678c7
commit 04323f05ff

View file

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