Hook up get user address request to frontend

Author: kkamara

frontend/src/components/pages/deliveryAddresses/EditDeliveryAddressComponent.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, } from "react"
 import { useDispatch, useSelector, } from "react-redux"
 import { Helmet, } from "react-helmet"
-import { useNavigate } from "react-router"
-import { newUserAddress } from "../../../redux/actions/createUserAddressesActions"
+import { useNavigate, useParams, } from "react-router"
 import Error from "../../layouts/Error"
+import { getUserAddress } from "../../../redux/actions/userAddressActions"
 
 import "./EditDeliveryAddressComponent.scss"
 
@@ -26,22 +26,37 @@ export default function NewDeliveryAddressComponent() {
 
   const dispatch = useDispatch()
   const state = useSelector(state => ({
-    createUserAddress: state.createUserAddress,
+    userAddress: state.userAddress,
   }))
 
   const [error, setError] = useState("")
   const navigate = useNavigate()
+  const { userAddressId } = useParams()
 
   useEffect(() => {
-    if (false === state.createUserAddress.loading) {
-      if (null !== state.createUserAddress.error) {
-        setError(state.createUserAddress.error)
+    dispatch(getUserAddress(userAddressId))
+  }, [])
+
+  useEffect(() => {
+    if (false === state.userAddress.loading) {
+      if (null !== state.userAddress.error) {
+        setError(state.userAddress.error)
       }
-      if (null !== state.createUserAddress.data) {
-        navigate("/user/addresses")
+      if (null !== state.userAddress.data) {
+        setAddressLine1(state.userAddress.data.addressLine1)
+        if (state.userAddress.data.addressLine2) {
+          setAddressLine2(state.userAddress.data.addressLine2)
+        }
+        setZipCode(state.userAddress.data.zipCode)
+        setCity(state.userAddress.data.city)
+        setState(state.userAddress.data.state)
+        if (state.userAddress.data.telephoneAreaCode) {
+          setTelephoneAreaCode(state.userAddress.data.telephoneAreaCode)
+        }
+        setTelephone(state.userAddress.data.telephone)
       }
     }
-  }, [state.createUserAddress])
+  }, [state.userAddress])
 
   const handleAddressLine1Change = e => {
     setAddressLine1(e.target.value)
@@ -73,7 +88,7 @@ export default function NewDeliveryAddressComponent() {
 
   const handleFormSubmit = e => {
     e.preventDefault()
-    dispatch(newUserAddress({
+    dispatch(editUserAddress({
       addressLine1,
       addressLine2,
       zipCode,
@@ -84,7 +99,7 @@ export default function NewDeliveryAddressComponent() {
     }))
   }
 
-  if (state.createUserAddress.loading) {
+  if (state.userAddress.loading) {
     return (
       <div className="container product-container text-center">
         <Helmet>

frontend/src/redux/actions/userAddressActions.js

@@ -0,0 +1,40 @@
+import HttpService from "../../services/HttpService"
+import { userAddress, } from "../types"
+
+export const getUserAddress = userAddressId => {
+  return async dispatch => {
+    const http = new HttpService()
+
+    dispatch({ type: userAddress.GET_USER_ADDRESS_PENDING, })
+
+    let tokenId = "user-token"
+    if (null === localStorage.getItem(tokenId)) {
+      tokenId = ""
+    }
+    const path = "/user-addresses/"+userAddressId
+    await http.getData(path, tokenId)
+      .then(res => {
+        dispatch({
+          type: userAddress.GET_USER_ADDRESS_SUCCESS,
+          payload: res.data.data,
+        })
+      }).catch(error => {
+        let message
+        if ("ERR_NETWORK" === error.code) {
+          message = "Server unavailable."
+        } else if (
+          error.response &&
+          error.response.data &&
+          error.response.data.error
+        ) {
+          message = error.response.data.error
+        } else {
+          message = "Something went wrong. Please come back later."
+        }
+        dispatch({ 
+          type: userAddress.GET_USER_ADDRESS_ERROR, 
+          payload: message,
+        })
+      })
+  }
+}

frontend/src/redux/reducers/index.js

@@ -27,6 +27,7 @@ import userAddressesReducer from "./userAddressesReducer"
 import createCheckoutReducer from "./createCheckoutReducer"
 import createUserAddressReducer from "./createUserAddressReducer"
 import deleteUserAddressReducer from "./deleteUserAddressReducer"
+import userAddressReducer from "./userAddressReducer"
 
 export default combineReducers({
   auth: authReducer,
@@ -57,4 +58,5 @@ export default combineReducers({
   createCheckout: createCheckoutReducer,
   createUserAddress: createUserAddressReducer,
   deleteUserAddress: deleteUserAddressReducer,
+  userAddress: userAddressReducer,
 })

frontend/src/redux/reducers/userAddressReducer.js

@@ -0,0 +1,36 @@
+import { userAddress, } from "../types"
+
+const initState = {
+  data: null,
+  error: null,
+  loading: true,
+}
+
+export default function userAddressReducer (state = initState, action) {
+  switch (action.type) {
+    
+    case userAddress.GET_USER_ADDRESS_ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+      }
+    
+    case userAddress.GET_USER_ADDRESS_PENDING:
+      return {
+        ...state,
+        loading: true,
+      }
+    
+    case userAddress.GET_USER_ADDRESS_SUCCESS:
+      return {
+        ...state,
+        data: action.payload,
+        loading: false,
+        error: null,
+      }
+
+    default:
+      return state
+  }
+}

frontend/src/redux/types.js

@@ -180,4 +180,10 @@ export const deleteUserAddress = {
   DELETE_USER_ADDRESS_SUCCESS: "DELETE_USER_ADDRESS_SUCCESS",
   DELETE_USER_ADDRESS_ERROR: "DELETE_USER_ADDRESS_ERROR",
   DELETE_USER_ADDRESS_PENDING: "DELETE_USER_ADDRESS_PENDING",
+}
+
+export const userAddress = {
+  GET_USER_ADDRESS_SUCCESS: "GET_USER_ADDRESS_SUCCESS",
+  GET_USER_ADDRESS_ERROR: "GET_USER_ADDRESS_ERROR",
+  GET_USER_ADDRESS_PENDING: "GET_USER_ADDRESS_PENDING",
 }