Change API to REACT_APP_API

Author: marcobrunodev

package.json

@@ -14,7 +14,7 @@
     "styled-components": "^4.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "REACT_APP_API=http://localhost:5000 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/containers/DetailsService/index.js

@@ -112,7 +112,7 @@ const DetailsService = ({ id }) => {
   })
 
   const { title, description, week, site, address, district, photo } = service
-  const { API } = process.env
+  const { REACT_APP_API } = process.env
 
   const printDay = day => {
     try {
@@ -126,9 +126,7 @@ const DetailsService = ({ id }) => {
 
   useEffect(() => {
     async function getService() {
-      const res = await axios.get(
-        `${API || 'http://localhost:5000'}/business/${id}`
-      )
+      const res = await axios.get(`${REACT_APP_API}/business/${id}`)
       setService(res.data)
     }
 

src/containers/MainMenu/index.js

@@ -9,12 +9,10 @@ const MainMenu = ({ active, closeMenu, openMenu, updateBusiness }) => {
   const [categories, setCategories] = useState([])
 
   useEffect(() => {
-    const { API_HOST } = process.env
+    const { REACT_APP_API } = process.env
     const featchData = async () => {
-      const res = await axios.get(
-        `${API_HOST || 'http://localhost:5000'}/category`
-      )
-      console.log('URL', `${API_HOST || 'http://localhost:5000'}/category`)
+      const res = await axios.get(`${REACT_APP_API}/category`)
+      console.log('URL', `${REACT_APP_API}/category`)
       console.log('category', res.data)
 
       setCategories(() => res.data)
@@ -24,21 +22,18 @@ const MainMenu = ({ active, closeMenu, openMenu, updateBusiness }) => {
   }, [])
 
   useEffect(() => {
-    const { API } = process.env
+    const { REACT_APP_API } = process.env
 
     const getServicesByActiveCategories = async () => {
       const activeCategories = categories
         .filter(category => category.active)
         .map(category => category.content)
 
-      const { data } = await axios.get(
-        `${API || 'http://localhost:5000'}/business/categories`,
-        {
-          params: {
-            categories: activeCategories
-          }
+      const { data } = await axios.get(`${REACT_APP_API}/business/categories`, {
+        params: {
+          categories: activeCategories
         }
-      )
+      })
 
       updateBusiness(data)
     }

src/containers/ServiceForm/index.js

@@ -28,16 +28,13 @@ const ServiceForm = () => {
   })
   const [categories, setCategories] = useState([])
   const [photo, setPhoto] = useState()
-  const { API } = process.env
+  const { REACT_APP_API } = process.env
 
   const send = async () => {
     const {
       data: { location }
-    } = await axios.post(
-      `${API || 'http://localhost:5000'}/business/photo`,
-      photo
-    )
-    await axios.post(`${API || 'http://localhost:5000'}/business`, {
+    } = await axios.post(`${REACT_APP_API}/business/photo`, photo)
+    await axios.post(`${REACT_APP_API}/business`, {
       ...service,
       photo: location
     })
@@ -74,12 +71,12 @@ const ServiceForm = () => {
 
   useEffect(() => {
     async function getAllCategories() {
-      const res = await axios.get(`${API || 'http://localhost:5000'}/category`)
+      const res = await axios.get(`${REACT_APP_API}/category`)
       setCategories(res.data)
     }
 
     getAllCategories()
-  }, [API])
+  }, [])
 
   return (
     <WrapperCard>