From 7cf2918438ae8dd38f7f8609dc758b9d14018308 Mon Sep 17 00:00:00 2001
From: Charlie Zhang <cz317@georgetown.edu>
Date: Fri, 2 Aug 2024 15:41:35 -0400
Subject: [PATCH] Enable keeping downloading history: a) Add ModalManager and
 Signout Modal; b) Create separate modal reducers; c) Create independent
 history db; d) Fix all notification triggering process.

---
 src/renderer/src/App.jsx                      | 21 +++----
 src/renderer/src/output.css                   | 42 +++++++++----
 src/renderer/src/pages/DataDictionary.jsx     | 11 +---
 .../src/pages/DownloadHistory/index.jsx       |  9 ++-
 src/renderer/src/pages/MainPage/index.jsx     | 21 +++----
 .../src/pages/Modals/ModalManager.jsx         | 36 +++++++++++
 .../NotificationModal.jsx}                    | 23 ++++----
 .../src/pages/Modals/SignoutModal.jsx         | 59 +++++++++++++++++++
 src/renderer/src/reducers/authReducer.js      | 44 ++++++++------
 src/renderer/src/reducers/modalReducer.js     | 22 +++++++
 src/renderer/src/reducers/statusReducer.js    | 26 ++++++--
 src/renderer/src/service/db.js                |  8 ++-
 src/renderer/src/store.js                     |  4 +-
 13 files changed, 234 insertions(+), 92 deletions(-)
 create mode 100644 src/renderer/src/pages/Modals/ModalManager.jsx
 rename src/renderer/src/pages/{Modal.jsx => Modals/NotificationModal.jsx} (53%)
 create mode 100644 src/renderer/src/pages/Modals/SignoutModal.jsx
 create mode 100644 src/renderer/src/reducers/modalReducer.js

diff --git a/src/renderer/src/App.jsx b/src/renderer/src/App.jsx
index 6cf6f84..668a455 100644
--- a/src/renderer/src/App.jsx
+++ b/src/renderer/src/App.jsx
@@ -3,26 +3,27 @@ import { HashRouter as Router, Routes, Route, Link, Navigate } from 'react-route
 import { useSelector, useDispatch } from 'react-redux'
 import { initializeAuth, disconnect } from './reducers/authReducer'
 import MainPage from './pages/MainPage'
-import NotificationModal from './pages/Modal'
 import Login from './pages/Login'
 import Footer from './pages/Footer'
 import About from './pages/About'
 import NavBar from './pages/NavBar'
 import HistoryPage from './pages/DownloadHistory'
 import DataDictionary from './pages/DataDictionary'
-import { servicesDb, dictionaryDb } from './service/db'
+import ModalManager from './pages/Modals/ModalManager'
+import { servicesDb, dictionaryDb, queryDb } from './service/db'
+import { openModal } from './reducers/modalReducer'
 
 const App = () => {
   const dispatch = useDispatch()
   const { dhis2Url, username, password, accessToken } = useSelector((state) => state.auth)
-  const { isLoading, errorMessage } = useSelector((state) => state.status)
+  const { isLoading, notification } = useSelector((state) => state.status)
 
   useEffect(() => {
     dispatch(initializeAuth())
   }, [dispatch])
 
   const handleDisconnect = async () => {
-    dispatch(disconnect())
+    dispatch(openModal({ type: 'SIGN_OUT' }))
   }
 
   const PrivateRoute = ({ children }) => {
@@ -49,7 +50,7 @@ const App = () => {
             path="/history"
             element={
               <PrivateRoute>
-                <HistoryPage dictionaryDb={dictionaryDb} />
+                <HistoryPage queryDb={queryDb} />
               </PrivateRoute>
             }
           />
@@ -61,18 +62,12 @@ const App = () => {
             path="/home"
             element={
               <PrivateRoute>
-                <MainPage
-                  dhis2Url={dhis2Url}
-                  username={username}
-                  password={password}
-                  dictionaryDb={dictionaryDb}
-                  servicesDb={servicesDb}
-                />
+                <MainPage dictionaryDb={dictionaryDb} servicesDb={servicesDb} queryDb={queryDb} />
               </PrivateRoute>
             }
           />
         </Routes>
-        {(isLoading || errorMessage) && <NotificationModal />}
+        <ModalManager />
       </div>
       <Footer />
     </Router>
diff --git a/src/renderer/src/output.css b/src/renderer/src/output.css
index 19f94d4..ee5a5e5 100644
--- a/src/renderer/src/output.css
+++ b/src/renderer/src/output.css
@@ -693,10 +693,6 @@ html {
   margin-top: 1rem;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .mt-8 {
   margin-top: 2rem;
 }
@@ -739,10 +735,6 @@ html {
   height: 1.5rem;
 }
 
-.h-96 {
-  height: 24rem;
-}
-
 .max-h-60 {
   max-height: 15rem;
 }
@@ -853,6 +845,12 @@ html {
   margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -927,10 +925,6 @@ html {
   border-right-width: 1px;
 }
 
-.border-none {
-  border-style: none;
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -976,6 +970,11 @@ html {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -991,6 +990,11 @@ html {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1016,6 +1020,10 @@ html {
   padding: 1.25rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1297,11 +1305,21 @@ html {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-indigo-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
diff --git a/src/renderer/src/pages/DataDictionary.jsx b/src/renderer/src/pages/DataDictionary.jsx
index 576200a..d1f8814 100644
--- a/src/renderer/src/pages/DataDictionary.jsx
+++ b/src/renderer/src/pages/DataDictionary.jsx
@@ -19,16 +19,7 @@ const DataDictionary = ({ dictionaryDb }) => {
     useLiveQuery(() => dictionaryDbRef.current.catOptionCombos.toArray(), []) || []
 
   const data = useMemo(
-    () => [
-      ...elements.map((item) => ({
-        ...item,
-        numerator: null,
-        denominator: null,
-        category: 'DataElement'
-      })),
-      ...indicators.map((item) => ({ ...item, category: 'Indicator' })),
-      ...catOptionCombos.map((item) => ({ ...item, category: 'Category Options' }))
-    ],
+    () => [...elements, ...indicators, ...catOptionCombos],
     [elements, indicators, catOptionCombos]
   )
 
diff --git a/src/renderer/src/pages/DownloadHistory/index.jsx b/src/renderer/src/pages/DownloadHistory/index.jsx
index 9d3e7ae..ab960a0 100644
--- a/src/renderer/src/pages/DownloadHistory/index.jsx
+++ b/src/renderer/src/pages/DownloadHistory/index.jsx
@@ -3,12 +3,11 @@ import { useDispatch, useSelector } from 'react-redux'
 import JSZip from 'jszip'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { objectToCsv, jsonToCsv } from '../../utils/downloadUtils'
-import { fetchCsvData, fetchData } from '../../service/useApi'
-import { setNotification, setLoading, setError } from '../../reducers/statusReducer'
+import { setNotification, setLoading } from '../../reducers/statusReducer'
 
 // eslint-disable-next-line react/prop-types
-const HistoryPage = ({ dictionaryDb }) => {
-  const downloadQueries = useLiveQuery(() => dictionaryDb.query.toArray(), []) || []
+const HistoryPage = ({ queryDb }) => {
+  const downloadQueries = useLiveQuery(() => queryDb.query.toArray(), []) || []
   const [selectedRows, setSelectedRows] = useState([])
   const dispatch = useDispatch()
   const { dhis2Url, username, password } = useSelector((state) => state.auth)
@@ -49,7 +48,7 @@ const HistoryPage = ({ dictionaryDb }) => {
               )
               resolve()
             } else if (e.data.type === 'error') {
-              dispatch(setError(e.data.message))
+              dispatch(setNotification({ message: e.data.message, type: 'error' }))
               reject(new Error(e.data.message))
             }
           }
diff --git a/src/renderer/src/pages/MainPage/index.jsx b/src/renderer/src/pages/MainPage/index.jsx
index affc8a3..9d97370 100644
--- a/src/renderer/src/pages/MainPage/index.jsx
+++ b/src/renderer/src/pages/MainPage/index.jsx
@@ -1,5 +1,4 @@
 import { useState, useRef } from 'react'
-import NotificationModal from '../Modal'
 import OrganizationUnitTree from './OrganizationUnitTree'
 import OrgUnitLevelMenu from './OrgUnitLevelMenu'
 import DateRangeSelector from './DateRangeSelector'
@@ -10,10 +9,10 @@ import { generatePeriods } from '../../utils/dateUtils'
 import { generateDownloadingUrl, createDataChunks } from '../../utils/downloadUtils'
 import DownloadButton from './DownloadButton'
 import { useSelector, useDispatch } from 'react-redux'
-import { setLoading, setError, setNotification } from '../../reducers/statusReducer'
+import { triggerLoading, triggerNotification } from '../../reducers/statusReducer'
 
 // eslint-disable-next-line react/prop-types
-const MainPage = ({ dictionaryDb, servicesDb }) => {
+const MainPage = ({ dictionaryDb, servicesDb, queryDb }) => {
   const servicesDbRef = useRef(servicesDb)
   const dispatch = useDispatch()
   const { selectedOrgUnits, selectedOrgUnitLevels } = useSelector((state) => state.orgUnit)
@@ -59,22 +58,22 @@ const MainPage = ({ dictionaryDb, servicesDb }) => {
           header = headerText.slice(0, indexOfFirstNewline)
         }
         notificationMessages += `Chunk ${index + 1}: \n${dx}(${firstPe}-${lastPe}) finished\n`
-        dispatch(setNotification({ message: notificationMessages, type: 'info' }))
+        dispatch(triggerNotification({ message: notificationMessages, type: 'info' }))
         return blob
       } catch (error) {
         notificationMessages += `Chunk ${index + 1}: \n${dx}(${firstPe}-${lastPe}) failed: ${error.message}\n`
-        dispatch(setNotification({ message: notificationMessages, type: 'error' }))
+        dispatch(triggerNotification({ message: notificationMessages, type: 'error' }))
         return null
       }
     }
     try {
-      dispatch(setLoading(true))
+      dispatch(triggerLoading(true))
       const fetchPromises = chunks.map((chunk, index) => fetchChunk(chunk, index))
       const results = await Promise.all(fetchPromises)
       const dataChunks = results.filter((result) => result !== null)
       const headerBlob = new Blob([header + '\n'], { type: 'text/csv' })
       if (dataChunks.length > 0) {
-        await dictionaryDb.query.add({
+        await queryDb.query.add({
           ou: ou,
           pe: pe,
           dx: dx,
@@ -86,15 +85,17 @@ const MainPage = ({ dictionaryDb, servicesDb }) => {
         downloadLink.href = URL.createObjectURL(csvBlob)
         downloadLink.download = 'dhis2_data.csv'
         downloadLink.click()
-        dispatch(setNotification({ message: 'Download completed successfully', type: 'success' }))
+        dispatch(
+          triggerNotification({ message: 'Download completed successfully', type: 'success' })
+        )
       } else {
         throw new Error('No data chunks were successfully fetched.')
       }
     } catch (error) {
       const errorMessage = error.message ? error.message : error
-      dispatch(setError(errorMessage))
+      dispatch(triggerNotification({ message: errorMessage, type: 'error' }))
     } finally {
-      dispatch(setLoading(false))
+      dispatch(triggerLoading(false))
     }
   }
 
diff --git a/src/renderer/src/pages/Modals/ModalManager.jsx b/src/renderer/src/pages/Modals/ModalManager.jsx
new file mode 100644
index 0000000..6d0d244
--- /dev/null
+++ b/src/renderer/src/pages/Modals/ModalManager.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import NotificationModal from './NotificationModal'
+import SignoutModal from './SignoutModal'
+
+const ModalManager = () => {
+  const modals = useSelector((state) => state.modal.modals)
+  const { isLoading, notification } = useSelector((state) => state.status)
+  const dispatch = useDispatch()
+
+  if (modals.length === 0) return null
+
+  return (
+    <>
+      {modals.map((modal, index) => {
+        switch (modal.type) {
+          case 'NOTIFICATION':
+            return (
+              <NotificationModal
+                key={index}
+                isLoading={isLoading}
+                message={notification.message}
+                type={notification.type}
+              />
+            )
+          case 'SIGN_OUT':
+            return <SignoutModal key={index} />
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}
+
+export default ModalManager
diff --git a/src/renderer/src/pages/Modal.jsx b/src/renderer/src/pages/Modals/NotificationModal.jsx
similarity index 53%
rename from src/renderer/src/pages/Modal.jsx
rename to src/renderer/src/pages/Modals/NotificationModal.jsx
index d4b652f..1fa1cfc 100644
--- a/src/renderer/src/pages/Modal.jsx
+++ b/src/renderer/src/pages/Modals/NotificationModal.jsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { handleExit } from '../reducers/statusReducer'
+import { handleExit } from '../../reducers/statusReducer'
 
 const NotificationModal = () => {
   const dispatch = useDispatch()
-  const { isLoading, errorMessage, notification } = useSelector((state) => state.status)
+  const { isLoading, notification } = useSelector((state) => state.status)
 
   const handleClose = () => dispatch(handleExit())
 
-  if (!isLoading && !notification.message && !errorMessage) return null
+  if (!isLoading && !notification.message) return null
 
   return (
     <div className="fixed inset-0 bg-gray-200 bg-opacity-75 flex items-start justify-center pt-20 z-50">
@@ -21,20 +21,17 @@ const NotificationModal = () => {
         )}
         {notification.message && (
           <p
-            className={`text-${notification.type === 'success' ? 'green' : 'blue'}-600 mb-2 whitespace-pre-wrap`}
+            className={`${notification.type === 'error' ? 'text-red-600' : 'text-blue-600'} mb-2 whitespace-pre-wrap`}
           >
             {notification.message}
           </p>
         )}
-        {errorMessage && <p className="text-red-600 mb-2">{errorMessage}</p>}
-        {!isLoading && (
-          <button
-            onClick={handleClose}
-            className="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 focus:outline-none"
-          >
-            {errorMessage || notification.message ? 'Dismiss' : 'Close'}
-          </button>
-        )}
+        <button
+          onClick={handleClose}
+          className="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 focus:outline-none"
+        >
+          {'Close'}
+        </button>
       </div>
     </div>
   )
diff --git a/src/renderer/src/pages/Modals/SignoutModal.jsx b/src/renderer/src/pages/Modals/SignoutModal.jsx
new file mode 100644
index 0000000..c34e86c
--- /dev/null
+++ b/src/renderer/src/pages/Modals/SignoutModal.jsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { closeModal } from '../../reducers/modalReducer'
+import { disconnect, clearHistory } from '../../reducers/authReducer'
+
+const SignoutModal = () => {
+  const dispatch = useDispatch()
+
+  const handleConfirm = async () => {
+    await dispatch(clearHistory())
+    dispatch(disconnect())
+    dispatch(closeModal())
+  }
+
+  const handleCancel = () => {
+    dispatch(closeModal())
+  }
+
+  const handleDeny = () => {
+    dispatch(disconnect())
+    dispatch(closeModal())
+  }
+
+  return (
+    <div className="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg shadow-lg p-6">
+        <h3 className="text-lg font-semibold text-gray-900">
+          Clear downloading histories on sign out?
+        </h3>
+        <p className="text-gray-600 text-sm">
+          Do you want to remove recorded downloading histories from this device? This operation
+          cannot be undone.
+        </p>
+        <div className="mt-4 flex justify-end space-x-2">
+          <button
+            onClick={handleCancel}
+            className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-gray-800"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            className="px-4 py-2 rounded bg-red-500 hover:bg-red-600 text-white"
+          >
+            Yes
+          </button>
+          <button
+            onClick={handleDeny}
+            className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-gray-800"
+          >
+            No
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SignoutModal
diff --git a/src/renderer/src/reducers/authReducer.js b/src/renderer/src/reducers/authReducer.js
index 3487ea0..c916fbb 100644
--- a/src/renderer/src/reducers/authReducer.js
+++ b/src/renderer/src/reducers/authReducer.js
@@ -7,8 +7,8 @@ import {
   getCategoryOptionCombos,
   getDataSets
 } from '../service/useApi'
-import { dictionaryDb, servicesDb } from '../service/db'
-import { setLoading, setError, setNotification } from '../reducers/statusReducer'
+import { dictionaryDb, servicesDb, queryDb } from '../service/db'
+import { triggerLoading, triggerNotification } from '../reducers/statusReducer'
 
 const initialState = {
   dhis2Url: '',
@@ -44,7 +44,7 @@ export const { setDhis2Url, setUsername, setPassword, setAccessToken, clearAuth
   authSlice.actions
 
 export const initializeAuth = () => async (dispatch) => {
-  dispatch(setLoading(true))
+  dispatch(triggerLoading(true))
   try {
     const storedAccessToken = localStorage.getItem('accessToken')
     const storedDhis2Url = localStorage.getItem('dhis2Url')
@@ -61,17 +61,17 @@ export const initializeAuth = () => async (dispatch) => {
       dispatch(setUsername(storedUsername))
     }
   } catch (error) {
-    dispatch(setError('Failed to initialize authentication'))
+    dispatch(triggerNotification({ message: 'Failed to initialize authentication', type: 'error' }))
   } finally {
-    dispatch(setLoading(false))
+    dispatch(triggerLoading(false))
   }
 }
 
 export const connect = (dhis2Url, username, password) => async (dispatch) => {
-  dispatch(setLoading(true))
   try {
     const data = await getUserInfo(dhis2Url, username, password)
     if (data.id) {
+      dispatch(triggerLoading(true))
       const token = data.id
       dispatch(setAccessToken(token))
       localStorage.setItem('accessToken', token)
@@ -122,36 +122,42 @@ export const connect = (dhis2Url, username, password) => async (dispatch) => {
         dictionaryDb.dataSets.bulkAdd(dataSets)
       ])
 
-      dispatch(setNotification({ message: 'Connected successfully', type: 'success' }))
+      dispatch(triggerNotification({ message: 'Connected successfully', type: 'success' }))
     } else {
-      dispatch(setError('Invalid Username or Password'))
+      dispatch(triggerNotification({ message: 'Invalid Username or Password', type: 'error' }))
     }
   } catch (error) {
-    if (error.message) {
-      dispatch(setError(error.message))
-    } else {
-      dispatch(setError(error))
-    }
+    dispatch(triggerNotification({ message: error.message || error.toString(), type: 'error' }))
     localStorage.clear()
   } finally {
-    dispatch(setLoading(false))
+    dispatch(triggerLoading(false))
+  }
+}
+
+export const clearHistory = () => async (dispatch) => {
+  try {
+    await queryDb.close()
+    await queryDb.delete()
+    console.log('History deleted on logout.')
+  } catch (error) {
+    console.error('Failed to delete db:', error.stack)
   }
 }
 
 export const disconnect = () => async (dispatch) => {
-  dispatch(clearAuth())
-  localStorage.removeItem('accessToken')
-  localStorage.removeItem('password')
   try {
+    dispatch(clearAuth())
+    localStorage.removeItem('accessToken')
+    localStorage.removeItem('password')
     await servicesDb.close()
     await dictionaryDb.close()
     await servicesDb.delete()
     await dictionaryDb.delete()
-    console.log('Database deleted on logout.')
   } catch (error) {
     console.error('Failed to delete db:', error.stack)
+  } finally {
+    window.location.reload()
   }
-  window.location.reload()
 }
 
 export default authSlice.reducer
diff --git a/src/renderer/src/reducers/modalReducer.js b/src/renderer/src/reducers/modalReducer.js
new file mode 100644
index 0000000..aa2970f
--- /dev/null
+++ b/src/renderer/src/reducers/modalReducer.js
@@ -0,0 +1,22 @@
+// modalSlice.js
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+  modals: []
+}
+
+export const modalSlice = createSlice({
+  name: 'modal',
+  initialState,
+  reducers: {
+    openModal: (state, action) => {
+      state.modals.push(action.payload)
+    },
+    closeModal: (state) => {
+      state.modals.pop()
+    }
+  }
+})
+
+export const { openModal, closeModal } = modalSlice.actions
+export default modalSlice.reducer
diff --git a/src/renderer/src/reducers/statusReducer.js b/src/renderer/src/reducers/statusReducer.js
index f97d0f5..85ccfd2 100644
--- a/src/renderer/src/reducers/statusReducer.js
+++ b/src/renderer/src/reducers/statusReducer.js
@@ -1,8 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit'
+import { openModal } from './modalReducer'
 
 const initialState = {
   isLoading: false,
-  errorMessage: '',
   notification: {
     message: '',
     type: ''
@@ -16,9 +16,6 @@ const statusSlice = createSlice({
     setLoading: (state, action) => {
       state.isLoading = action.payload
     },
-    setError: (state, action) => {
-      state.errorMessage = action.payload
-    },
     setNotification: (state, action) => {
       state.notification = { ...state.notification, ...action.payload }
     },
@@ -33,6 +30,23 @@ const statusSlice = createSlice({
   }
 })
 
-export const { setLoading, setError, setNotification, abortDownload, handleExit } =
-  statusSlice.actions
+export const triggerNotification = (payload) => (dispatch) => {
+  dispatch(openModal({ type: 'NOTIFICATION' }))
+
+  dispatch(
+    setNotification({
+      message: payload.message,
+      type: payload.type
+    })
+  )
+}
+
+export const triggerLoading = (isLoading) => (dispatch) => {
+  dispatch(setLoading(isLoading))
+  if (isLoading) {
+    dispatch(openModal({ type: 'NOTIFICATION' }))
+  }
+}
+
+export const { setLoading, setNotification, abortDownload, handleExit } = statusSlice.actions
 export default statusSlice.reducer
diff --git a/src/renderer/src/service/db.js b/src/renderer/src/service/db.js
index 96e4212..e85eec4 100644
--- a/src/renderer/src/service/db.js
+++ b/src/renderer/src/service/db.js
@@ -2,17 +2,21 @@ import Dexie from 'dexie'
 
 export const dictionaryDb = new Dexie('dictionary')
 export const servicesDb = new Dexie('services')
+export const queryDb = new Dexie('query')
 servicesDb.version(1).stores({
   services: '++id'
 })
 
+queryDb.version(1).stores({
+  query: '++id, ou, pe, dx, co, url'
+})
+
 dictionaryDb.version(1).stores({
   dataElements: '++id, category, displayName, displayDescription',
   indicators: '++id, category, displayName, displayDescription, numerator, denominator',
   programIndicators: '++id, category, displayName, displayDescription',
   catOptionCombos: '++id, displayName',
-  dataSets: '++id, displayName',
-  query: '++id, ou, pe, dx, co, url'
+  dataSets: '++id, displayName'
 })
 
 export const changeSchema = async (db, schemaChanges) => {
diff --git a/src/renderer/src/store.js b/src/renderer/src/store.js
index a549c4a..fd805e1 100644
--- a/src/renderer/src/store.js
+++ b/src/renderer/src/store.js
@@ -5,18 +5,18 @@ import categoryReducer from './reducers/categoryReducer'
 import statusReducer from './reducers/statusReducer'
 import orgUnitReducer from './reducers/orgUnitReducer'
 import dataElementsReducer from './reducers/dataElementsReducer'
-import popUpRedcuer from './reducers/exportReducer'
 import mouseReducer from './reducers/mouseReducer'
+import modalReducer from './reducers/modalReducer'
 
 const store = configureStore({
   reducer: {
     auth: authReducer,
     category: categoryReducer,
     status: statusReducer,
+    modal: modalReducer,
     dateRange: dateRangeReducer,
     dataElements: dataElementsReducer,
     orgUnit: orgUnitReducer,
-    popup: popUpRedcuer,
     mouse: mouseReducer
   }
 })