charts data issue still a work in progress

airqo-platform · Sep 24, 2024 · 5818ffa · 5818ffa
1 parent 0be341b
commit 5818ffa
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 85 deletions.
diff --git a/platform/eslint.config.mjs b/platform/eslint.config.mjs
@@ -42,7 +42,16 @@ export default [
           endOfLine: 'auto',
         },
       ],
-      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      'no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          ignoreRestSiblings: true,
+          argsIgnorePattern: '^_',
+        },
+      ],
       'no-console': 'warn',
       'no-debugger': 'error',
       ...eslintConfigPrettier.rules,

diff --git a/platform/src/common/components/Charts/Charts.jsx b/platform/src/common/components/Charts/Charts.jsx
@@ -20,6 +20,7 @@ import {
   fetchAnalyticsData,
   setAnalyticsData,
 } from '@/lib/store/services/charts/ChartData';
+import { getAnalyticsData } from '@/core/apis/DeviceRegistry';
 import {
   renderCustomizedLegend,
   CustomDot,
@@ -42,9 +43,6 @@ const useAnalyticsData = (customBody) => {
   const chartData = useSelector((state) => state.chart);
   const analyticsData = useSelector((state) => state.analytics.data);
   const refreshChart = useSelector((state) => state.chart.refreshChart);
-  const preferencesLoading = useSelector(
-    (state) => state.userDefaults.status === 'loading',
-  );
   const isLoading = useSelector(
     (state) => state.analytics.status === 'loading',
   );
@@ -74,7 +72,7 @@ const useAnalyticsData = (customBody) => {
   );
 
   const fetchData = useCallback(async () => {
-    if (preferencesLoading || !preferenceData.length) return;
+    if (!preferenceData.length) return;
 
     const { selected_sites } = preferenceData[0];
     const chartSites = selected_sites?.map((site) => site['_id']);
@@ -94,12 +92,10 @@ const useAnalyticsData = (customBody) => {
     try {
       setError(null);
       const startTime = Date.now();
-      dispatch(setAnalyticsData(null));
       await dispatch(fetchAnalyticsData(body));
       setLoadingTime(Date.now() - startTime);
     } catch (err) {
       setError(err.message);
-      dispatch(setAnalyticsData(null));
     } finally {
       dispatch(setRefreshChart(false));
     }

diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
@@ -15,6 +15,7 @@ import {
 import { updateCards } from '@/lib/store/services/checklists/CheckList';
 import SetChartDetails from '@/core/utils/SetChartDetails';
 import LogoutUser from '@/core/utils/LogoutUser';
+import { getIndividualUserPreferences } from '@/lib/store/services/account/userDefaultsSlice';
 
 const INACTIVITY_TIMEOUT = 3600000; // 1 hour in milliseconds
 const CHECK_INTERVAL = 10000; // 10 seconds
@@ -36,6 +37,13 @@ const Layout = ({
   const isCollapsed = useSelector((state) => state.sidebar.isCollapsed);
   const isMapRoute = router.pathname === '/map';
 
+  useEffect(() => {
+    const userId = JSON.parse(localStorage.getItem('loggedUser'))?._id;
+    if (userId) {
+      dispatch(getIndividualUserPreferences(userId));
+    }
+  }, [dispatch]);
+
   // Set chart details based on preference data
   useEffect(() => {
     SetChartDetails(dispatch, preferenceData);

diff --git a/platform/src/common/components/SideBar/SideBarItem.jsx b/platform/src/common/components/SideBar/SideBarItem.jsx
@@ -134,7 +134,7 @@ SideBarDropdownItem.propTypes = {
 SidebarItem.propTypes = {
   Icon: PropTypes.elementType,
   label: PropTypes.string.isRequired,
-  navPath: PropTypes.string.isRequired,
+  navPath: PropTypes.string,
   onClick: PropTypes.func,
   children: PropTypes.node,
   toggleMethod: PropTypes.func,

diff --git a/platform/src/core/utils/SetChartDetails.jsx b/platform/src/core/utils/SetChartDetails.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   resetChartStore,
   setChartDataAtOnce,

diff --git a/platform/src/lib/store/index.js b/platform/src/lib/store/index.js
@@ -11,18 +11,18 @@ import collocationReducer from './services/collocation';
 import collocationDataReducer from './services/collocation/collocationDataSlice';
 import { createAccountSlice } from './services/account/CreationSlice';
 import { userLoginSlice } from './services/account/LoginSlice';
-import { chartSlice } from './services/charts/ChartSlice';
+import chartsReducer from './services/charts/ChartSlice';
 import { gridsSlice } from './services/deviceRegistry/GridsSlice';
-import { defaultsSlice } from './services/account/UserDefaultsSlice';
+import defaultsReducer from './services/account/UserDefaultsSlice';
 import userDefaultsReducer from './services/charts/userDefaultsSlice';
-import { recentMeasurementsSlice } from './services/deviceRegistry/RecentMeasurementsSlice';
-import { cardSlice } from './services/checklists/CheckList';
+import recentMeasurementReducer from './services/deviceRegistry/RecentMeasurementsSlice';
+import cardReducer from './services/checklists/CheckList';
 import checklistsReducer from './services/checklists/CheckData';
 import analyticsReducer from './services/charts/ChartData';
 import { groupInfoSlice } from './services/groups/GroupInfoSlice';
 import { mapSlice } from './services/map/MapSlice';
 import { locationSearchSlice } from './services/search/LocationSearchSlice';
-import { apiClientSlice } from './services/apiClient/index';
+import apiClientReducer from './services/apiClient/index';
 import sidebarReducer from './services/sideBar/SideBarSlice';
 import modalSlice from './services/downloadModal';
 
@@ -35,18 +35,18 @@ const appReducer = combineReducers({
   collocationData: collocationDataReducer,
   creation: createAccountSlice.reducer,
   login: userLoginSlice.reducer,
-  chart: chartSlice.reducer,
+  chart: chartsReducer,
   grids: gridsSlice.reducer,
-  defaults: defaultsSlice.reducer,
-  cardChecklist: cardSlice.reducer,
+  defaults: defaultsReducer,
+  cardChecklist: cardReducer,
   map: mapSlice.reducer,
   userDefaults: userDefaultsReducer,
-  recentMeasurements: recentMeasurementsSlice.reducer,
+  recentMeasurements: recentMeasurementReducer,
   checklists: checklistsReducer,
   analytics: analyticsReducer,
   groupInfo: groupInfoSlice.reducer,
   locationSearch: locationSearchSlice.reducer,
-  apiClient: apiClientSlice.reducer,
+  apiClient: apiClientReducer,
 });
 
 const rootReducer = (state, action) => {

diff --git a/platform/src/lib/store/services/account/UserDefaultsSlice.js b/platform/src/lib/store/services/account/UserDefaultsSlice.js
@@ -16,81 +16,78 @@ const initialState = {
   individual_preferences: [],
 };
 
+// Async actions using createAsyncThunk
 export const postUserPreferences = createAsyncThunk(
-  '/post/preferences',
+  'preferences/post', // Updated action type
   async (data, { rejectWithValue }) => {
     try {
       const response = await postUserPreferencesApi(data);
       return response;
     } catch (error) {
-      if (!error.response) {
-        throw error;
-      }
-      return rejectWithValue(error.response.data);
+      return rejectWithValue(
+        error.response ? error.response.data : { message: error.message },
+      );
     }
   },
 );
 
 export const updateUserPreferences = createAsyncThunk(
-  '/update/preferences',
+  'preferences/update',
   async (data, { rejectWithValue }) => {
     try {
       const response = await updateUserPreferencesApi(data);
       return response;
     } catch (error) {
-      if (!error.response) {
-        throw error;
-      }
-      return rejectWithValue(error.response.data);
+      return rejectWithValue(
+        error.response ? error.response.data : { message: error.message },
+      );
     }
   },
 );
 
 export const getIndividualUserPreferences = createAsyncThunk(
-  '/get/individual/preference',
+  'preferences/getIndividual',
   async (identifier, { rejectWithValue }) => {
     try {
       const response = await getUserPreferencesApi(identifier);
       return response;
     } catch (error) {
-      if (!error.response) {
-        throw error;
-      }
-      return rejectWithValue(error.response.data);
+      return rejectWithValue(
+        error.response ? error.response.data : { message: error.message },
+      );
     }
   },
 );
 
 export const replaceUserPreferences = createAsyncThunk(
-  '/replace/individual/preference',
+  'preferences/replace',
   async (data, { rejectWithValue }) => {
     try {
       const response = await patchUserPreferencesApi(data);
       return response;
     } catch (error) {
-      if (!error.response) {
-        throw error;
-      }
-      return rejectWithValue(error.response.data);
+      return rejectWithValue(
+        error.response ? error.response.data : { message: error.message },
+      );
     }
   },
 );
 
 export const postUserDefaults = createAsyncThunk(
-  '/post/userDefaults',
+  'preferences/postDefaults',
   async (data, { rejectWithValue }) => {
     try {
       const response = await postUserDefaultsApi(data);
       return response;
     } catch (error) {
-      if (!error.response) {
-        throw error;
-      }
-      return rejectWithValue(error.response.data);
+      return rejectWithValue(
+        error.response ? error.response.data : { message: error.message },
+      );
     }
   },
 );
 
+// Create Slice
 export const defaultsSlice = createSlice({
   name: 'defaults',
   initialState,
@@ -103,58 +100,58 @@ export const defaultsSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
+    const handlePending = (state) => {
+      state.success = false;
+      state.errors = null;
+    };
+    const handleRejected = (state, action) => {
+      state.errors = action.payload
+        ? action.payload.message
+        : action.error.message;
+      state.success = false;
+    };
+
     builder
+      // Post user preferences
       .addCase(postUserPreferences.pending, (state) => {
-        state.success = false;
-        state.errors = null;
+        handlePending(state);
         state.post_response = [];
       })
       .addCase(postUserPreferences.fulfilled, (state, action) => {
         state.post_response = action.payload;
-        state.success = action.payload.success;
-      })
-      .addCase(postUserPreferences.rejected, (state, action) => {
-        state.errors = action.error.message;
-        state.success = false;
+        state.success = true;
       })
+      .addCase(postUserPreferences.rejected, handleRejected)
+
+      // Update user preferences
       .addCase(updateUserPreferences.pending, (state) => {
-        state.success = false;
-        state.errors = null;
+        handlePending(state);
         state.update_response = [];
       })
       .addCase(updateUserPreferences.fulfilled, (state, action) => {
         state.update_response = action.payload;
-        state.success = action.payload.success;
-      })
-      .addCase(updateUserPreferences.rejected, (state, action) => {
-        state.errors = action.error.message;
-        state.success = false;
+        state.success = true;
       })
+      .addCase(updateUserPreferences.rejected, handleRejected)
+
+      // Get individual user preferences
       .addCase(getIndividualUserPreferences.pending, (state) => {
-        state.success = false;
-        state.errors = null;
+        handlePending(state);
         state.individual_preferences = [];
       })
       .addCase(getIndividualUserPreferences.fulfilled, (state, action) => {
         state.individual_preferences = action.payload.preferences;
-        state.success = action.payload.success;
-      })
-      .addCase(getIndividualUserPreferences.rejected, (state, action) => {
-        state.errors = action.error.message;
-        state.success = false;
-      })
-      .addCase(replaceUserPreferences.pending, (state) => {
-        state.success = false;
-        state.errors = null;
+        state.success = true;
       })
+      .addCase(getIndividualUserPreferences.rejected, handleRejected)
+
+      // Replace user preferences
+      .addCase(replaceUserPreferences.pending, handlePending)
       .addCase(replaceUserPreferences.fulfilled, (state, action) => {
         state.individual_preferences = action.payload.preferences;
-        state.success = action.payload.success;
+        state.success = true;
       })
-      .addCase(replaceUserPreferences.rejected, (state, action) => {
-        state.errors = action.error.message;
-        state.success = false;
-      });
+      .addCase(replaceUserPreferences.rejected, handleRejected);
   },
 });
 

diff --git a/platform/src/pages/analytics/index.jsx b/platform/src/pages/analytics/index.jsx
@@ -1,15 +1,12 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import withAuth from '@/core/utils/protectedRoute';
 import Layout from '@/components/Layout';
 import OverView from './_components/OverView';
-import { useDispatch } from 'react-redux';
-import { fetchUserPreferences } from '@/lib/store/services/charts/userDefaultsSlice';
 import AlertBox from '@/components/AlertBox';
 
 import useOutsideClick from '@/core/utils/useOutsideClick';
 
 const AuthenticatedHomePage = () => {
-  const dispatch = useDispatch();
   const [alert, setAlert] = useState({ type: '', message: '', show: false });
   const [customise, setCustomise] = useState(false);
 
@@ -19,13 +16,6 @@ const AuthenticatedHomePage = () => {
     if (customise) setCustomise(false);
   });
 
-  useEffect(() => {
-    const userId = JSON.parse(localStorage.getItem('loggedUser'))?._id;
-    if (userId) {
-      dispatch(fetchUserPreferences(userId));
-    }
-  }, [dispatch]);
-
   return (
     <Layout
       topbarTitle={'Analytics'}