Caching fetched resources

src/pages/contact.js

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