🚚 remove proxy and create custom axios instance

package.json

@@ -50,6 +50,5 @@
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-watch": "^7.0.0",
     "prettier": "^2.1.2"
-  },
-  "proxy": "http://localhost:5000"
+  }
 }

src/App.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import axios from "axios";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { connect } from "react-redux";
+// import axios from "axios";
+import API from "./utils/axiosInstance";
 
 import "./App.css";
 import SignupContainer from "./containers/SignupContainer";
@@ -11,16 +12,14 @@ import PublicRoute from "./containers/PublicRoute";
 import Dashboard from "./containers/Dashboard";
 import EditProfile from "./containers/EditProfile";
 import FourOhFour from "./containers/FourOhFour";
-// import store from "./redux/store";
 
 import { setAuthState } from "./redux/actions/authActions";
 
 const App = ({ isAuth, setAuthState }) => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    axios
-      .get("/auth/state", { withCredentials: true })
+    API.get("/auth/state", { withCredentials: true })
       .then((res) => {
         setAuthState(res.data);
         setIsLoading(false);

src/components/Footer.jsx

@@ -45,18 +45,20 @@ const Footer = ({ type }) => {
   if (type === "login") {
     bottomText = (
       <h2>
-        Don't have an account yet?<Link to="/signup">Register</Link>
+        Don't have an account yet?
+        <Link to="/signup">Register</Link>
       </h2>
     );
   } else if (type === "signup") {
     bottomText = (
       <h2>
-        Already a member?<Link to="/login">Login</Link>
+        Already a member?
+        <Link to="/login">Login</Link>
       </h2>
     );
   }
 
-  const baseURL = "http://localhost:5000";
+  const baseURL = process.env.REACT_APP_BACKEND_URL;
 
   return (
     <FooterParent>

src/redux/actions/authActions.js

@@ -1,4 +1,4 @@
-import axios from "axios";
+import API from "../../utils/axiosInstance";
 
 import {
   SET_CURRENT_USER,
@@ -27,8 +27,7 @@ export const registerUser = (userData, history) => (dispatch) => {
   // Clear previous errors
   dispatch(clearErrors());
 
-  axios
-    .post("/auth/signup", userData)
+  API.post("/auth/signup", userData)
     .then((res) => {
       // console.log(res);
 
@@ -67,8 +66,7 @@ export const loginUser = (userData, history) => (dispatch) => {
   // Clear previous errors
   dispatch(clearErrors());
 
-  axios
-    .post("/auth/login", userData)
+  API.post("/auth/login", userData)
     .then((res) => {
       const {
         name,
@@ -103,8 +101,7 @@ export const loginUser = (userData, history) => (dispatch) => {
 
 // Get user profile
 export const fetchUserProfile = (callback) => (dispatch) => {
-  axios
-    .get("/profile", { withCredentials: true })
+  API.get("/profile", { withCredentials: true })
     .then((res) => {
       const {
         name,
@@ -141,10 +138,7 @@ export const editUserProfile = (userdata, history) => (dispatch) => {
   // Clear previous errors
   dispatch(clearErrors());
 
-  console.log(userdata);
-
-  axios
-    .post("/profile/edit", userdata, { withCredentials: true })
+  API.post("/profile/edit", userdata, { withCredentials: true })
     .then(() => history.push("/"))
     .catch((err) => {
       // console.dir(err);
@@ -155,8 +149,7 @@ export const editUserProfile = (userdata, history) => (dispatch) => {
 // Logout user
 
 export const logoutUser = (history) => (dispatch) => {
-  axios
-    .get("/auth/logout", { withCredentials: true })
+  API.get("/auth/logout", { withCredentials: true })
     .then(() => {
       dispatch({ type: CLEAR_CURRENT_USER });
       history.push("/login");

src/utils/axiosInstance.js

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const API = axios.create({
+  baseURL: process.env.REACT_APP_BACKEND_URL,
+});
+
+export default API;