From 9ba07368fef2603a5aaa4b04f35446366a44cefe Mon Sep 17 00:00:00 2001 From: prasadhonrao Date: Sat, 26 Oct 2024 18:16:45 +0100 Subject: [PATCH] Refactor configuration handling in webapp - Move configuration values to a separate JSON file - Add fetchConfig function to retrieve configuration based on environment - Update services to use fetchApiEndPoint for API base URI - Remove API_BASE_URI constant from services - Update fetch calls in services to use fetchApiEndPoint for endpoint URLs --- src/webapp/public/config/config.json | 8 +++++++ src/webapp/src/services/adminService.js | 17 ++++++++----- src/webapp/src/services/bootcampService.js | 28 ++++++++++++++-------- src/webapp/src/services/courseService.js | 17 ++++++++----- src/webapp/src/services/reviewService.js | 20 ++++++++++------ src/webapp/src/services/userService.js | 26 +++++++++++++------- src/webapp/src/utils/configService.js | 28 ++++++++++++++++++++++ 7 files changed, 106 insertions(+), 38 deletions(-) create mode 100644 src/webapp/public/config/config.json create mode 100644 src/webapp/src/utils/configService.js diff --git a/src/webapp/public/config/config.json b/src/webapp/public/config/config.json new file mode 100644 index 0000000..33af519 --- /dev/null +++ b/src/webapp/public/config/config.json @@ -0,0 +1,8 @@ +{ + "development": { + "react_app_devcamper_base_api_uri": "http://localhost:5000/api/v1" + }, + "production": { + "react_app_devcamper_base_api_uri": "http://devcamper.webapi/api/v1" + } +} diff --git a/src/webapp/src/services/adminService.js b/src/webapp/src/services/adminService.js index 74478d8..058d40d 100644 --- a/src/webapp/src/services/adminService.js +++ b/src/webapp/src/services/adminService.js @@ -1,8 +1,9 @@ -const API_BASE_URI = process.env.REACT_APP_DEVCAMPER_BASE_API_URI + '/admin'; +import { fetchApiEndPoint } from '../utils/configService'; const adminService = { getUsers: async () => { - const res = await fetch(`${API_BASE_URI}/users`); + const uri = await fetchApiEndPoint(`/admin/users`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch users'); } @@ -10,7 +11,8 @@ const adminService = { }, getUser: async (id) => { - const res = await fetch(`${API_BASE_URI}/users/${id}`); + const uri = await fetchApiEndPoint(`/admin/users/${id}`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch user'); } @@ -18,7 +20,8 @@ const adminService = { }, createUser: async (user) => { - const res = await fetch(`${API_BASE_URI}/users`, { + const uri = await fetchApiEndPoint(`/admin/users`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -32,7 +35,8 @@ const adminService = { }, updateUser: async (id, user) => { - const res = await fetch(`${API_BASE_URI}/users/${id}`, { + const uri = await fetchApiEndPoint(`/admin/users/${id}`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -46,7 +50,8 @@ const adminService = { }, deleteUser: async (id) => { - const res = await fetch(`${API_BASE_URI}/users/${id}`, { + const uri = await fetchApiEndPoint(`/admin/users/${id}`); + const res = await fetch(uri, { method: 'DELETE', }); if (!res.ok) { diff --git a/src/webapp/src/services/bootcampService.js b/src/webapp/src/services/bootcampService.js index 77718dd..2b48ba1 100644 --- a/src/webapp/src/services/bootcampService.js +++ b/src/webapp/src/services/bootcampService.js @@ -1,19 +1,21 @@ import { getAuthHeaders } from '../helpers/auth'; - -const API_BASE_URI = process.env.REACT_APP_DEVCAMPER_BASE_API_URI; +import { fetchApiEndPoint } from '../utils/configService'; const bootcampService = { getBootcamps: async (fields) => { const query = fields ? `?select=${fields.join(',')}` : ''; - const res = await fetch(`${API_BASE_URI}/bootcamps${query}`); + const uri = await fetchApiEndPoint(`/bootcamps${query}`); + const res = await fetch(uri); if (!res.ok) { + console.log(`Failed to fetch bootcamps: ${res.status}`); throw new Error('Failed to fetch bootcamps'); } return res.json(); }, getBootcampsByPublisher: async (publisherId) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/publisher/${publisherId}`, { + const uri = await fetchApiEndPoint(`/bootcamps/publisher/${publisherId}`); + const res = await fetch(uri, { headers: getAuthHeaders(), }); if (!res.ok) { @@ -23,7 +25,8 @@ const bootcampService = { }, getBootcamp: async (id) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/${id}`); + const uri = await fetchApiEndPoint(`/bootcamps/${id}`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch bootcamp'); } @@ -31,7 +34,8 @@ const bootcampService = { }, createBootcamp: async (bootcamp) => { - const res = await fetch(`${API_BASE_URI}/bootcamps`, { + const uri = await fetchApiEndPoint(`/bootcamps`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -45,7 +49,8 @@ const bootcampService = { }, updateBootcamp: async (id, bootcamp) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/${id}`, { + const uri = await fetchApiEndPoint(`/bootcamps/${id}`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -59,7 +64,8 @@ const bootcampService = { }, deleteBootcamp: async (id) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/${id}`, { + const uri = await fetchApiEndPoint(`/bootcamps/${id}`); + const res = await fetch(uri, { method: 'DELETE', }); if (!res.ok) { @@ -69,7 +75,8 @@ const bootcampService = { }, getBootcampsInRadius: async (zipcode, distance) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/radius/${zipcode}/${distance}`); + const uri = await fetchApiEndPoint(`/bootcamps/radius/${zipcode}/${distance}`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch bootcamps in radius'); } @@ -77,7 +84,8 @@ const bootcampService = { }, getCoursesByBootcampId: async (bootcampId) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/${bootcampId}/courses`); + const uri = await fetchApiEndPoint(`/bootcamps/${bootcampId}/courses`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch bootcamp courses'); } diff --git a/src/webapp/src/services/courseService.js b/src/webapp/src/services/courseService.js index c2ba922..4107733 100644 --- a/src/webapp/src/services/courseService.js +++ b/src/webapp/src/services/courseService.js @@ -1,8 +1,9 @@ -const API_BASE_URI = process.env.REACT_APP_DEVCAMPER_BASE_API_URI + '/courses'; +import { fetchApiEndPoint } from '../utils/configService'; const courseService = { getCourses: async () => { - const res = await fetch(`${API_BASE_URI}/`); + const uri = await fetchApiEndPoint(`/courses`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch courses'); } @@ -10,7 +11,8 @@ const courseService = { }, getCourse: async (courseId) => { - const res = await fetch(`${API_BASE_URI}/${courseId}`); + const uri = await fetchApiEndPoint(`/courses/${courseId}`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch course'); } @@ -18,7 +20,8 @@ const courseService = { }, createCourse: async (bootcampId, course, token) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/${bootcampId}/`, { + const uri = await fetchApiEndPoint(`/courses/bootcamps/${bootcampId}/`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -33,7 +36,8 @@ const courseService = { }, updateCourse: async (courseId, course) => { - const res = await fetch(`${API_BASE_URI}/${courseId}`, { + const uri = await fetchApiEndPoint(`/courses/${courseId}`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -47,7 +51,8 @@ const courseService = { }, deleteCourse: async (courseId) => { - const res = await fetch(`${API_BASE_URI}/${courseId}`, { + const uri = await fetchApiEndPoint(`/courses/${courseId}`); + const res = await fetch(uri, { method: 'DELETE', }); if (!res.ok) { diff --git a/src/webapp/src/services/reviewService.js b/src/webapp/src/services/reviewService.js index ee59f5d..7235c9f 100644 --- a/src/webapp/src/services/reviewService.js +++ b/src/webapp/src/services/reviewService.js @@ -1,8 +1,9 @@ -const API_BASE_URI = process.env.REACT_APP_DEVCAMPER_BASE_API_URI; +import { fetchApiEndPoint } from '../utils/configService'; const reviewService = { getReviewsByBootcamp: async (bootcampId) => { - const res = await fetch(`${API_BASE_URI}/bootcamps/${bootcampId}/reviews`); + const uri = await fetchApiEndPoint(`/bootcamps/${bootcampId}/reviews`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch reviews'); } @@ -10,7 +11,8 @@ const reviewService = { }, getReviews: async () => { - const res = await fetch(`${API_BASE_URI}/reviews`); + const uri = await fetchApiEndPoint(`/reviews`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch reviews'); } @@ -18,7 +20,8 @@ const reviewService = { }, getReview: async (id) => { - const res = await fetch(`${API_BASE_URI}/reviews/${id}`); + const uri = await fetchApiEndPoint(`/reviews/${id}`); + const res = await fetch(uri); if (!res.ok) { throw new Error('Failed to fetch review'); } @@ -26,7 +29,8 @@ const reviewService = { }, createReview: async (review) => { - const res = await fetch(`${API_BASE_URI}/reviews`, { + const uri = await fetchApiEndPoint(`/reviews`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -40,7 +44,8 @@ const reviewService = { }, updateReview: async (id, review) => { - const res = await fetch(`${API_BASE_URI}/reviews/${id}`, { + const uri = await fetchApiEndPoint(`/reviews/${id}`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -54,7 +59,8 @@ const reviewService = { }, deleteReview: async (id) => { - const res = await fetch(`${API_BASE_URI}/reviews/${id}`, { + const uri = await fetchApiEndPoint(`/reviews/${id}`); + const res = await fetch(uri, { method: 'DELETE', }); if (!res.ok) { diff --git a/src/webapp/src/services/userService.js b/src/webapp/src/services/userService.js index cfe9fa1..b7a4362 100644 --- a/src/webapp/src/services/userService.js +++ b/src/webapp/src/services/userService.js @@ -1,9 +1,10 @@ import { getToken } from '../helpers/auth'; -const API_BASE_URI = process.env.REACT_APP_DEVCAMPER_BASE_API_URI + '/user'; +import { fetchApiEndPoint } from '../utils/configService'; const userService = { register: async (user) => { - const res = await fetch(`${API_BASE_URI}/register`, { + const uri = await fetchApiEndPoint(`/user/register`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -17,7 +18,8 @@ const userService = { }, login: async (user) => { - const res = await fetch(`${API_BASE_URI}/login`, { + const uri = await fetchApiEndPoint(`/user/login`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -31,7 +33,8 @@ const userService = { }, logout: async () => { - const res = await fetch(`${API_BASE_URI}/logout`, { + const uri = await fetchApiEndPoint(`/user/logout`); + const res = await fetch(uri, { method: 'GET', }); if (!res.ok) { @@ -41,8 +44,9 @@ const userService = { }, getMe: async () => { + const uri = await fetchApiEndPoint(`/user/getMe`); const token = getToken(); - const res = await fetch(`${API_BASE_URI}/me`, { + const res = await fetch(uri, { method: 'GET', headers: { Authorization: `Bearer ${token}`, @@ -55,7 +59,8 @@ const userService = { }, forgotPassword: async (email) => { - const res = await fetch(`${API_BASE_URI}/forgotpassword`, { + const uri = await fetchApiEndPoint(`/user/forgotpassword`); + const res = await fetch(uri, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -69,7 +74,8 @@ const userService = { }, resetPassword: async (password) => { - const res = await fetch(`${API_BASE_URI}/resetpassword`, { + const uri = await fetchApiEndPoint(`/user/resetpassword`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -84,7 +90,8 @@ const userService = { updateDetails: async (user) => { const token = getToken(); - const res = await fetch(`${API_BASE_URI}/updatedetails`, { + const uri = await fetchApiEndPoint(`/user/updatedetails`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -99,7 +106,8 @@ const userService = { }, updatePassword: async (password) => { - const res = await fetch(`${API_BASE_URI}/updatepassword`, { + const uri = await fetchApiEndPoint(`/user/updatepassword`); + const res = await fetch(uri, { method: 'PUT', headers: { 'Content-Type': 'application/json', diff --git a/src/webapp/src/utils/configService.js b/src/webapp/src/utils/configService.js new file mode 100644 index 0000000..d27f0db --- /dev/null +++ b/src/webapp/src/utils/configService.js @@ -0,0 +1,28 @@ +let config = null; + +export const fetchConfig = async () => { + if (!config) { + const response = await fetch('/config/config.json'); + if (!response.ok) { + throw new Error('Failed to fetch configuration'); + } + const json = await response.json(); + const env = process.env.NODE_ENV || 'development'; + console.log(`Using configuration for environment: ${env}`); + console.log(`Configuration: ${JSON.stringify(json[env], null, 2)}`); + config = json[env]; + } + return config; +}; + +export const getConfigValue = async (key) => { + const config = await fetchConfig(); + return config[key]; +}; + +export const fetchApiEndPoint = async (endpoint) => { + const config = await fetchConfig(); + const api = config.react_app_devcamper_base_api_uri; + console.log(`fetchApi endpoint: ${api}${endpoint}`); + return `${api}${endpoint}`; +};