Fix: error message implementation

Author: alishawalunj

src/actions/optStatusBreakdownAction.js

@@ -1,32 +1,24 @@
-/* eslint-disable no-console */
 import axios from 'axios';
 import { ENDPOINTS } from '~/utils/URL';
-import { GET_ERRORS } from '../constants/errors';
 import { GET_OPT_STATUS_BREAKDOWN } from '../constants/optStatusBreakdownConstants';
 
-export const setOptStatusBreakdown = payload => {
-  return {
-    type: GET_OPT_STATUS_BREAKDOWN,
-    payload
-  };
-};
-export const setErrors = payload => {
-  return {
-    type: GET_ERRORS,
-    payload
-  };
-}
-export const fetchOptStatusBreakdown = (startDate = "", endDate = "", role = "") => {
+export const setOptStatusBreakdown = payload => ({
+  type: GET_OPT_STATUS_BREAKDOWN,
+  payload,
+});
+
+export const fetchOptStatusBreakdown = (startDate = '', endDate = '', role = '') => {
   const url = ENDPOINTS.OPT_STATUS_BREAKDOWN(startDate, endDate, role);
+
   return async dispatch => {
     try {
       const response = await axios.get(url);
       dispatch(setOptStatusBreakdown(response.data.breakDown));
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error("Error fetching OPT status breakdown:", error);
+      return response.data;
+    } catch (err) {
+      return err?.response?.data || { message: 'Failed to fetch OPT status breakdown' };
     }
   };
 };
 
-export default fetchOptStatusBreakdown;
+export default fetchOptStatusBreakdown;

src/components/OptStatusPieChart/OptStatusPieChart.jsx

@@ -9,7 +9,7 @@ import { Pie } from 'react-chartjs-2';
 import { useDispatch, useSelector } from 'react-redux';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Chart as ChartJS } from 'chart.js';
-import { fetchOptStatusBreakdown } from '../../actions/optStatusBreakdownAction';
+import fetchOptStatusBreakdown from '../../actions/optStatusBreakdownAction';
 import { roleOptions } from './filter';
 import 'chart.js/auto';
 import styles from './OptStatusPieChart.module.css';
@@ -26,19 +26,36 @@ const COLORS = {
 
 const OptStatusPieChart = () => {
   const dispatch = useDispatch();
-  const { optStatusBreakdown = [] } = useSelector(state => state.optStatusBreakdown);
   const { darkMode } = useSelector(state => state.theme);
 
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const [role, setRole] = useState('');
 
+  const [localBreakdown, setLocalBreakdown] = useState([]);
+  const [localError, setLocalError] = useState('');
+
+  const fetchData = async () => {
+    const response = await dispatch(fetchOptStatusBreakdown(startDate, endDate, role));
+
+    if (response.message) {
+      setLocalError(response.message);
+      setLocalBreakdown([]);
+    } else if (response.breakDown) {
+      setLocalBreakdown(response.breakDown);
+      setLocalError('');
+    } else {
+      setLocalBreakdown([]);
+      setLocalError('Unexpected response from server');
+    }
+  };
+
   useEffect(() => {
-    dispatch(fetchOptStatusBreakdown(startDate, endDate, role));
+    fetchData();
   }, [startDate, endDate, role, dispatch]);
 
-  const labels = optStatusBreakdown.map(d => d.optStatus);
-  const dataCounts = optStatusBreakdown.map(d => d.count);
+  const labels = localBreakdown.map(d => d.optStatus);
+  const dataCounts = localBreakdown.map(d => d.count);
   const total = dataCounts.reduce((sum, value) => sum + value, 0);
   const backgroundColors = labels.map(label => COLORS[label] || '#ccc');
 
@@ -86,7 +103,11 @@ const OptStatusPieChart = () => {
 
         <div className={styles.chartFilterLayout}>
           <div className={styles.pieChartWrapper}>
-            <Pie data={chartData} options={options} />
+            {localError ? (
+              <div className={styles.errorMessage}>{localError}</div>
+            ) : (
+              <Pie data={chartData} options={options} />
+            )}
           </div>
 
           <div className={styles.filters}>

src/components/OptStatusPieChart/OptStatusPieChart.module.css

@@ -147,4 +147,17 @@
   .dateInputs input {
     width: 45%;
   }
+}
+.errorMessage {
+  color: #d32f2f;
+  background: #fdecea;
+  padding: 10px 12px;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.optStatusContainerDarkMode .errorMessage {
+  color: #ffb4ab;
+  background: #5a2120;
 }

src/reducers/optStatusBreakdownReducer.js

@@ -1,3 +1,4 @@
+import { GET_ERRORS } from '../constants/errors';
 import { GET_OPT_STATUS_BREAKDOWN } from '../constants/optStatusBreakdownConstants';
 
 const initialState = {
@@ -15,6 +16,14 @@ export const optStatusBreakdownReducer = (state = initialState, action) => {
         loading: false,
         error: null,
       };
+
+    case GET_ERRORS:
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+      };
+
     default:
       return state;
   }