auto save of the user checklist items

airqo-platform · Nov 21, 2023 · 9f0d6d1 · 9f0d6d1
1 parent b3b5a90
commit 9f0d6d1
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { fetchUserChecklists } from '@/lib/store/services/checklists/CheckData';
 import { updateCards } from '@/lib/store/services/checklists/CheckList';
 import Head from 'next/head';
+import { updateUserChecklists } from '@/lib/store/services/checklists/CheckData';
 
 const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorderBottom }) => {
   // Constants
@@ -27,6 +28,7 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
   const [collapsed, setCollapsed] = useState(
     () => JSON.parse(localStorage.getItem('collapsed')) || false,
   );
+  const cardCheckList = useSelector((state) => state.cardChecklist.cards);
 
   // Fetching user preferences
   useEffect(() => {
@@ -77,23 +79,36 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
   }, [userInfo, userPreferences, dispatch]);
 
   // Fetching user checklists
-  useEffect(() => {
+  const fetchData = () => {
     if (userInfo?._id && !localStorage.getItem('dataFetched')) {
       dispatch(fetchUserChecklists(userInfo._id)).then((action) => {
         if (fetchUserChecklists.fulfilled.match(action)) {
           const { payload } = action;
           if (payload && payload.length > 0) {
             const { items } = payload[0];
             dispatch(updateCards(items));
-            localStorage.setItem('dataFetched', 'true');
-          } else {
-            localStorage.setItem('dataFetched', 'true');
-            return;
           }
+          localStorage.setItem('dataFetched', 'true');
         }
       });
     }
-  }, [dispatch, userInfo]);
+  };
+
+  useEffect(fetchData, [dispatch, userInfo]);
+
+  // update user checklists when ever the cardCheckList changes
+  const updateUserChecklist = () => {
+    if (userInfo?._id) {
+      dispatch(
+        updateUserChecklists({
+          user_id: userInfo._id,
+          items: cardCheckList,
+        }),
+      );
+    }
+  };
+
+  useEffect(updateUserChecklist, [dispatch, userInfo, cardCheckList]);
 
   useEffect(() => {
     localStorage.setItem('collapsed', collapsed);