Harshavarma: Fix job posting analytics not rendering

src/actions/EnhancedPopularityAnalytics/EnhancedPopularityActions.js

@@ -0,0 +1,56 @@
+import {ENHANCED_POPULARITY_DATA_REQUEST, ENHANCED_POPULARITY_DATA_SUCCESS, ENHANCED_POPULARITY_DATA_FAILURE,
+  ENHANCED_POPULARITY_ROLES_REQUEST, ENHANCED_POPULARITY_ROLES_SUCCESS, ENHANCED_POPULARITY_ROLES_FAILURE
+} from '../../constants/EnchanedPopularityAnalytics/EnchanedPopularityConstants';
+import { ENDPOINTS } from '../../utils/URL';
+
+export const fetchEnhancedPopularityData = ({ range, roles = [], includeLowVolume, token }) => async(dispatch) => {
+
+    const url = ENDPOINTS.ENHANCED_POPULARITY(
+      range,
+      roles,
+      null, // start (optional)
+      null, // end (optional)
+      includeLowVolume,
+    );
+
+    dispatch({type: ENHANCED_POPULARITY_DATA_REQUEST});
+
+    try {
+        const response = await fetch(url, {
+          method: 'GET',  
+          headers: {
+                'Authorization': `${token}`
+            }
+        });
+        const data = await response.json();
+
+        if(!response.ok) {
+          throw new Error(data.error || 'Failed to fetch data');
+        }
+
+        dispatch({type: ENHANCED_POPULARITY_DATA_SUCCESS, payload: data});
+    } catch (error) {
+        dispatch({type: ENHANCED_POPULARITY_DATA_FAILURE, payload: error.message});
+    }
+};
+
+export const fetchEnhancedRoles = (token) => async(dispatch) => {
+  dispatch({type: ENHANCED_POPULARITY_ROLES_REQUEST});
+  try {
+    const response = await fetch(ENDPOINTS.ENHANCED_POPULARITY_ROLES, {
+      method: 'GET',  
+      headers: {
+            'Authorization': `${token}`
+        }
+    });
+    const data = await response.json();
+
+    if(!response.ok) {
+      throw new Error(data.error || 'Failed to fetch data');
+    }
+
+    dispatch({type: ENHANCED_POPULARITY_ROLES_SUCCESS, payload: data});
+  } catch (error) {
+    dispatch({type: ENHANCED_POPULARITY_ROLES_FAILURE, payload: error.message});
+  }
+};

src/components/EnhancedPopularityTimelineAnalytics/EnhancedPopularityTimelineChart.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useId } from 'react';
+import React, { useState, useMemo, useId, useEffect } from 'react';
 import {
   LineChart,
   Line,
@@ -10,34 +10,40 @@
   ResponsiveContainer,
 } from 'recharts';
 import Select from 'react-select';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styles from './EnhancedPopularityTimelineChart.module.css';
 import { ENDPOINTS } from '../../utils/URL';
+import {
+  fetchEnhancedPopularityData,
+  fetchEnhancedRoles,
+} from '../../actions/EnhancedPopularityAnalytics/EnhancedPopularityActions';
 
 /**
  * Enhanced Popularity Timeline Chart Component
  */
 
 // --- Data Fetching Functions ---
-const fetchEnhancedPopularityData = async ({ range, roles = [], includeLowVolume }) => {
+/*const fetchEnhancedPopularityData = async ({ range, roles = [], includeLowVolume }) => {
   const url = ENDPOINTS.ENHANCED_POPULARITY(
     range,
     roles,
     null, // start (optional)
     null, // end (optional)
     includeLowVolume,
   );
 
   const { data } = await axios.get(url);
+
+  console.log('data ================= ', data);
   return data;
-};
+};*/
 
-const fetchEnhancedRoles = async () => {
+/*const fetchEnhancedRoles = async () => {
   const { data } = await axios.get(ENDPOINTS.ENHANCED_POPULARITY_ROLES);
   return data;
-};
+};*/
 
 // --- Helper Functions ---
 const getRoleColor = (role, index) => {
@@ -66,7 +72,15 @@
 
 const EnhancedPopularityTimelineChart = () => {
   const darkMode = useSelector(state => state.theme.darkMode);
+  const dispatch = useDispatch();
+  const token = localStorage.getItem('token');
 
+  const { data: popularityData, loading: dataLoading, error: queryError } = useSelector(
+    state => state.enhancedPopularityAnalytics,
+  );
+  const { data: rolesData, isLoading: rolesLoading, error: rolesError } = useSelector(
+    state => state.enhancedPopularityRoles,
+  );
   const timeRangeId = useId();
   const roleFilterId = useId();
 
@@ -77,22 +91,37 @@
   const [, setError] = useState('');
   const [, setTooltipVisible] = useState(false);
 
+  useEffect(() => {
+    dispatch(
+      fetchEnhancedPopularityData({
+        range: dateRangeOption,
+        roles: selectedRoles,
+        includeLowVolume: showLowVolume,
+        token,
+      }),
+    );
+  }, [dateRangeOption, selectedRoles]);
+
+  useEffect(() => {
+    dispatch(fetchEnhancedRoles(token));
+  }, []);
+
   // Fetch enhanced roles data
-  const { data: rolesData, isLoading: rolesLoading, error: rolesError } = useQuery({
+  /*const { data: rolesData, isLoading: rolesLoading, error: rolesError } = useQuery({
     queryKey: ['enhancedRoles'],
     queryFn: fetchEnhancedRoles,
   });
 
   // Fetch enhanced popularity data
   const { data: popularityData, isLoading: dataLoading, error: queryError } = useQuery({
     queryKey: ['enhancedPopularityData', dateRangeOption, selectedRoles.join(','), showLowVolume],
     queryFn: () =>
       fetchEnhancedPopularityData({
         range: dateRangeOption.replace('months', ''),
         roles: selectedRoles,
         includeLowVolume: showLowVolume,
       }),
-  });
+  });*/
 
   // Process chart data for Recharts
   const { chartData, roleMetrics } = useMemo(() => {
@@ -162,10 +191,9 @@
         chartData: sortedData,
         roleMetrics: metrics.sort((a, b) => (b.popularityScore || 0) - (a.popularityScore || 0)),
       };
     } catch (error) {
-      console.error('Error processing chart data:', error);
       return { chartData: [], roleMetrics: [] };
     }
   }, [popularityData]);
 
   // Handler for role highlighting
@@ -518,7 +546,7 @@
               <option value="3months">Last 3 Months</option>
               <option value="6months">Last 6 Months</option>
               <option value="12months">Last 12 Months</option>
-              <option value="all">All Time</option>
+              <option value="">All Time</option>
             </select>
           </div>
 

src/constants/EnchanedPopularityAnalytics/EnchanedPopularityConstants.js

@@ -0,0 +1,7 @@
+export const ENHANCED_POPULARITY_DATA_REQUEST = 'ENHANCED_POPULARITY_DATA_REQUEST';
+export const ENHANCED_POPULARITY_DATA_SUCCESS = 'ENHANCED_POPULARITY_DATA_SUCCESS';
+export const ENHANCED_POPULARITY_DATA_FAILURE = 'ENHANCED_POPULARITY_DATA_FAILURE';
+
+export const ENHANCED_POPULARITY_ROLES_REQUEST = 'ENHANCED_POPULARITY_ROLES_REQUEST';
+export const ENHANCED_POPULARITY_ROLES_SUCCESS = 'ENHANCED_POPULARITY_ROLES_SUCCESS';
+export const ENHANCED_POPULARITY_ROLES_FAILURE = 'ENHANCED_POPULARITY_ROLES_FAILURE';

src/reducers/EnhancedPopularityAnalytics/EnchancedPopularityReducer.js

@@ -0,0 +1,40 @@
+import {
+  ENHANCED_POPULARITY_DATA_REQUEST,
+  ENHANCED_POPULARITY_DATA_SUCCESS,
+  ENHANCED_POPULARITY_DATA_FAILURE,
+  ENHANCED_POPULARITY_ROLES_REQUEST,
+  ENHANCED_POPULARITY_ROLES_SUCCESS,
+  ENHANCED_POPULARITY_ROLES_FAILURE,
+} from '../../constants/EnchanedPopularityAnalytics/EnchanedPopularityConstants';
+
+const initialState = {
+  loading: false,
+  data: [],
+  error: null,
+};
+
+export const enhancedPopularityAnalyticsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ENHANCED_POPULARITY_DATA_REQUEST:
+      return { ...state, loading: true, error: null };
+    case ENHANCED_POPULARITY_DATA_SUCCESS:
+      return { ...state, loading: false, data: action.payload };
+    case ENHANCED_POPULARITY_DATA_FAILURE:
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+export const enchancedPopularityRolesReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ENHANCED_POPULARITY_ROLES_REQUEST:
+      return { ...state, loading: true, error: null };
+    case ENHANCED_POPULARITY_ROLES_SUCCESS:
+      return { ...state, loading: false, data: action.payload };
+    case ENHANCED_POPULARITY_ROLES_FAILURE:
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};

src/reducers/index.js

@@ -111,6 +111,12 @@ import browseLessonPlanReducer from './educationPortal/broweLPReducer';
 // Kitchen and Inventory Management
 import { kiCalendarApi } from '../actions/kiCalendarAction';
 
+// Popularity Enhanced
+import {
+  enhancedPopularityAnalyticsReducer,
+  enchancedPopularityRolesReducer,
+} from './EnhancedPopularityAnalytics/EnchancedPopularityReducer';
+
 const localReducers = {
   auth: authReducer,
   allUserProfiles: allUserProfilesReducer,
@@ -201,6 +207,11 @@ const localReducers = {
   // education portal
   browseLessonPlan: browseLessonPlanReducer,
 
+  // enchanced popularity analytics
+  enhancedPopularityAnalytics: enhancedPopularityAnalyticsReducer,
+
+  enhancedPopularityRoles: enchancedPopularityRolesReducer,
+
   // Kitchen and Inventory Management
   [kiCalendarApi.reducerPath]: kiCalendarApi.reducer,
 };

src/utils/URL.js

@@ -537,10 +537,10 @@ export const ENDPOINTS = {
 
     const qs = params.length ? `?${params.join('&')}` : '';
 
-    return `${APIEndpoint.replace('/api', '')}/job-analytics${qs}`;
+    return `${APIEndpoint}/job-analytics-router${qs}`;
   },
 
-  JOB_ANALYTICS_ROLES: `${APIEndpoint.replace('/api', '')}/job-analytics/roles`,
+  JOB_ANALYTICS_ROLES: `${APIEndpoint}/job-analytics-router/roles`,
 
   // pr dashboard endpoints
   PROMOTION_ELIGIBILITY: `${APIEndpoint}/promotion-eligibility`,