Persisted cart and auth data in localstorage

Author: sivadass

src/contexts/auth.jsx

@@ -1,4 +1,6 @@
-import React, { useReducer, createContext } from "react";
+import React, { useReducer, createContext, useEffect } from "react";
+import _get from "lodash.get";
+import useLocalStorage from "hooks/useLocalStorage";
 
 const initialState = {
   isLoggedIn: false,
@@ -60,7 +62,18 @@ export const signOut = (dispatch) => {
 };
 
 const AuthProvider = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const [persistedUser, setPersistedUser] = useLocalStorage("user", null);
+  const persistedUserState = {
+    ...initialState,
+    user: persistedUser,
+    isLoggedIn: _get(persistedUser, "username", "").length > 0
+  };
+  const [state, dispatch] = useReducer(reducer, persistedUserState);
+
+  useEffect(() => {
+    setPersistedUser(state.user);
+  }, [state.isLoggedIn]);
+
   return (
     <AuthDispatchContext.Provider value={dispatch}>
       <AuthStateContext.Provider value={state}>

src/contexts/cart.jsx

@@ -1,4 +1,5 @@
-import React, { useReducer, createContext } from "react";
+import React, { useReducer, createContext, useEffect } from "react";
+import useLocalStorage from "hooks/useLocalStorage";
 
 const initialState = {
   isCartOpen: false,
@@ -85,7 +86,18 @@ export const clearCart = (dispatch) => {
 };
 
 const CartProvider = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const [persistedCartItems, setPersistedCartItems] = useLocalStorage(
+    "cartItems",
+    []
+  );
+  const persistedCartState = {
+    isCartOpen: false,
+    items: persistedCartItems || []
+  };
+  const [state, dispatch] = useReducer(reducer, persistedCartState);
+  useEffect(() => {
+    setPersistedCartItems(state.items);
+  }, [JSON.stringify(state.items)]);
   return (
     <CartDispatchContext.Provider value={dispatch}>
       <CartStateContext.Provider value={state}>

src/pages/auth.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { Formik, Form, Field } from "formik";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import * as Yup from "yup";
 import _get from "lodash.get";
 import { AuthDispatchContext, signIn } from "contexts/auth";
@@ -14,7 +14,9 @@ const LoginSchema = Yup.object().shape({
 const AuthPage = () => {
   const authDispatch = useContext(AuthDispatchContext);
   const history = useHistory();
-
+  const location = useLocation();
+  const fromUrl = _get(location, "state.from.pathname");
+  console.log("location => ", location);
   const goToForgotPassword = (e) => {
     e.preventDefault();
   };
@@ -25,7 +27,11 @@ const AuthPage = () => {
 
   const signInSuccess = (userData) => {
     signIn(authDispatch, userData);
-    history.push("/");
+    if (fromUrl) {
+      history.push(fromUrl);
+    } else {
+      history.push("/");
+    }
   };
 
   return (