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,15 +26,22 @@ export default function Todos() {
   const [activeGroups, setActiveGroups] = useState(null)
 
   useEffect(() => {
-    fetch(`${constants.apiUrl}todos`, {
-      credentials: 'include',
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setTodos(data)
+    if (globalState.todos) {
+      setTodos(globalState.todos)
+    } else {
+      fetch(`${constants.apiUrl}todos`, {
+        credentials: 'include',
       })
+        .then((resp) => {
+          return resp.json()
+        })
+        .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,
+                  })
                 })
             }}
           />