diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx index ba395aef2e..6016f465d7 100644 --- 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,7 +79,7 @@ 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)) { @@ -85,15 +87,28 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder 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);