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
prasadhonrao · Oct 26, 2024 · 9ba0736 · 9ba0736
1 parent bbf0484
commit 9ba0736
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 38 deletions.
diff --git a/src/webapp/public/config/config.json 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
@@ -1,24 +1,27 @@
-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');
     }
     return res.json();
   },
 
   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');
     }
     return res.json();
   },
 
   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
@@ -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,15 +25,17 @@ 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');
     }
     return res.json();
   },
 
   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,15 +75,17 @@ 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');
     }
     return res.json();
   },
 
   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
@@ -1,24 +1,27 @@
-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');
     }
     return res.json();
   },
 
   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');
     }
     return res.json();
   },
 
   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
@@ -1,32 +1,36 @@
-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');
     }
     return res.json();
   },
 
   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');
     }
     return res.json();
   },
 
   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');
     }
     return res.json();
   },
 
   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
@@ -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
@@ -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}`;
+};