Fixes apollographql#94 Cart empty after reload.

Saved cart items to local storage for persistence.
JEStaubach · Oct 2, 2019 · ec2cee6 · ec2cee6
1 parent 6988f69
commit ec2cee6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/final/client/src/containers/logout-button.js b/final/client/src/containers/logout-button.js
@@ -11,8 +11,13 @@ export default function LogoutButton() {
     <StyledButton
       data-testid="logout-button"
       onClick={() => {
-        client.writeData({ data: { isLoggedIn: false } });
-        localStorage.clear();
+        client.writeData({
+          data: {
+            isLoggedIn: false,
+            cartItems: [],
+          },
+        });
+        localStorage.setItem('token', '');
       }}
     >
       <ExitIcon />

diff --git a/final/client/src/index.js b/final/client/src/index.js
@@ -29,10 +29,12 @@ const client = new ApolloClient({
   typeDefs,
 });
 
+const token = localStorage.getItem('token');
+const cart = localStorage.getItem('cart');
 cache.writeData({
   data: {
-    isLoggedIn: !!localStorage.getItem('token'),
-    cartItems: [],
+    isLoggedIn: !!token,
+    cartItems: token && cart && JSON.parse(cart)[token] ? JSON.parse(cart)[token] : [],
   },
 });
 

diff --git a/final/client/src/pages/login.js b/final/client/src/pages/login.js
@@ -17,7 +17,13 @@ export default function Login() {
     {
       onCompleted({ login }) {
         localStorage.setItem('token', login);
-        client.writeData({ data: { isLoggedIn: true } });
+        const cart = localStorage.getItem('cart');
+        client.writeData({
+          data: {
+            isLoggedIn: true,
+            cartItems: login && cart && JSON.parse(cart)[login] ? JSON.parse(cart)[login] : [],
+          },
+        });
       }
     }
   );

diff --git a/final/client/src/resolvers.js b/final/client/src/resolvers.js
@@ -32,6 +32,9 @@ export const resolvers = {
           : [...cartItems, id],
       };
       cache.writeQuery({ query: GET_CART_ITEMS, data });
+      const token = localStorage.getItem('token');
+      const cartObj = JSON.parse(localStorage.getItem('cart'));
+      localStorage.setItem('cart', JSON.stringify({...cartObj, [token]: data.cartItems}));
       return data.cartItems;
     },
   },