From 704251d57ff162b8ccd42628afe772ac831ca8cf Mon Sep 17 00:00:00 2001
From: "tuan.cna" <tuan.cna@ots/vn>
Date: Fri, 30 May 2025 14:11:38 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=97=20Use=20REACT=5FAPP=5FAPI=5FBASE?=
 =?UTF-8?q?=5FURL=20from=20Environment=20Variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🌐 Environment Configuration:
- Use REACT_APP_API_BASE_URL from .env file
- Dynamic API endpoint construction
- Support for different environments (dev, staging, prod)

🔧 Enhanced API Integration:
- Added proper HTTP headers (Content-Type, Accept)
- Improved error handling with HTTP status checks
- Added console logging for debugging
- Fallback pagination when API doesn't provide it
- Better error state management

📊 API Call Structure:
- URL: \Projects
- Method: GET with proper headers
- Query params: page, pageSize
- Error handling for network issues
- Response validation

🚀 Production Ready:
- Environment-based configuration
- Robust error handling
- Debug logging for development
- Graceful fallbacks for missing data
- Clean error states

Current API Base URL: https://trantran.zenstores.com.vn/api/
---
 .../projects/projecttracker.jsx               | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/feature-module/projects/projecttracker.jsx b/src/feature-module/projects/projecttracker.jsx
index b8fd8b3..5d15244 100644
--- a/src/feature-module/projects/projecttracker.jsx
+++ b/src/feature-module/projects/projecttracker.jsx
@@ -37,8 +37,23 @@ const ProjectTracker = () => {
   const loadProjects = async (page = 1, pageSize = 10) => {
     setLoading(true);
     try {
-      const response = await fetch(`/api/Projects?page=${page}&pageSize=${pageSize}`);
+      const apiBaseUrl = process.env.REACT_APP_API_BASE_URL || '';
+      console.log('Loading projects from:', `${apiBaseUrl}Projects`);
+
+      const response = await fetch(`${apiBaseUrl}Projects?page=${page}&pageSize=${pageSize}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
       const result = await response.json();
+      console.log('API Response:', result);
 
       if (result.data) {
         // Map API data to table format
@@ -63,10 +78,28 @@ const ProjectTracker = () => {
         }));
 
         setProjectData(mappedData);
-        setPagination(result.pagination);
+        setPagination(result.pagination || {
+          currentPage: 1,
+          pageSize: 10,
+          totalCount: result.data.length,
+          totalPages: 1
+        });
+
+        console.log('Mapped data:', mappedData);
+      } else {
+        console.warn('No data found in API response');
+        setProjectData([]);
       }
     } catch (error) {
       console.error('Error loading projects:', error);
+      // Set empty data on error
+      setProjectData([]);
+      setPagination({
+        currentPage: 1,
+        pageSize: 10,
+        totalCount: 0,
+        totalPages: 1
+      });
     } finally {
       setLoading(false);
     }