Merge pull request #92 from SimonDmz/feature-indexeddb-awareness

Feature indexeddb awareness

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pearl",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "private": true,
   "dependencies": {
     "@date-io/date-fns": "1.x",
@@ -13,7 +13,10 @@
     "@testing-library/user-event": "^11.2.5",
     "clsx": "^1.1.1",
     "date-fns": "^2.18.0",
-    "dexie": "^2.0.4",
+    "dexie": "^3.2.1",
+    "dexie-export-import": "^1.0.3",
+    "dexie-react-hooks": "^1.1.1",
+    "downloadjs": "^1.4.7",
     "font-awesome": "^4.7.0",
     "keycloak-js": "^10.0.2",
     "prop-types": "^15.7.2",

src/App.js

@@ -1,17 +1,21 @@
-import { useAuth } from 'utils/auth/initAuth';
-import { useServiceWorker } from 'utils/hooks/useServiceWorker';
-import Preloader from 'components/common/loader';
-import Notification from 'components/common/Notification';
-import { ThemeProvider, CssBaseline } from '@material-ui/core';
-import theme from './theme';
-import Palette from 'components/common/palette';
-import Home from 'components/panel-body/home';
-import D from 'i18n';
 import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/core/styles';
+
 import { Route, useLocation } from 'react-router-dom';
-import SynchronizeWrapper from 'components/sychronizeWrapper';
+
+import D from 'i18n';
+import { DatabaseConsole } from 'components/panel-body/databaseConsole';
+import Home from 'components/panel-body/home';
+import Notification from 'components/common/Notification';
 import { NotificationWrapper } from 'components/notificationWrapper';
+import Palette from 'components/common/palette';
+import Preloader from 'components/common/loader';
 import { ResetData } from 'components/panel-body/resetData';
+import SynchronizeWrapper from 'components/sychronizeWrapper';
+import theme from './theme';
+import { useAuth } from 'utils/auth/initAuth';
+import { useServiceWorker } from 'utils/hooks/useServiceWorker';
 
 function App() {
   const { pathname } = useLocation();
@@ -32,6 +36,7 @@ function App() {
               )}
               <Route path="/support/palette" component={Palette} />
               <Route path="/support/reset-data" component={ResetData} />
+              <Route path="/support/database" component={DatabaseConsole} />
             </NotificationWrapper>
           </SynchronizeWrapper>
         )}

src/AppRooter.js

@@ -1,6 +1,6 @@
+import React from 'react';
 import App from 'App';
 import QueenContainer from 'components/panel-body/queen-container';
-import React from 'react';
 import { Route, Switch, useLocation } from 'react-router-dom';
 
 function AppRooter() {

src/Root.js

@@ -1,5 +1,5 @@
-import { useQueenFromConfig } from 'utils/hooks/useQueenFromConfig';
 import React, { useEffect, useState } from 'react';
+import { useQueenFromConfig } from 'utils/hooks/useQueenFromConfig';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { useConfiguration } from 'utils/hooks/configuration';
 import { addOnlineStatusObserver } from 'utils';

src/components/common/IconStatus.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { CheckCircleOutline, Warning, Clear } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import Warning from '@material-ui/icons/Warning';
+import Clear from '@material-ui/icons/Clear';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   success: {

src/components/common/Notification/index.js

@@ -1,7 +1,11 @@
-import { Box, Button, makeStyles, Slide, Snackbar } from '@material-ui/core';
-import D from 'i18n';
 import React, { useEffect, useState } from 'react';
-import { Alert } from '@material-ui/lab';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Slide from '@material-ui/core/Slide';
+import Snackbar from '@material-ui/core/Snackbar';
+import D from 'i18n';
+import Alert from '@material-ui/lab/Alert';
 
 const useStyles = makeStyles(theme => ({
   root: {

src/components/common/Notification/notificationItem.js

@@ -1,14 +1,18 @@
-import { Link, makeStyles, Typography } from '@material-ui/core';
-import { FiberManualRecord } from '@material-ui/icons';
-import { SynchronizeWrapperContext } from 'components/sychronizeWrapper';
-import { formatDistance } from 'date-fns';
 import React, { useContext } from 'react';
-import { dateFnsLocal } from 'utils';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
 import { NOTIFICATION_TYPE_MANAGEMENT, NOTIFICATION_TYPE_SYNC } from 'utils/constants';
-import { NavigationContext } from '../navigation/component';
+
 import D from 'i18n';
+import { FiberManualRecord } from '@material-ui/icons';
+import { NavigationContext } from '../navigation/component';
 import { NotificationWrapperContext } from 'components/notificationWrapper';
-import syncReportIdbService from 'indexedbb/services/syncReport-idb-service';
+import { SynchronizeWrapperContext } from 'components/sychronizeWrapper';
+import { dateFnsLocal } from 'utils';
+import { formatDistance } from 'date-fns';
+import syncReportIdbService from 'utils/indexeddb/services/syncReport-idb-service';
 
 const useStyles = makeStyles(theme => ({
   root: { padding: '1em' },

src/components/common/Notification/notificationsRoot.js

@@ -1,16 +1,14 @@
 import React, { useContext } from 'react';
 import D from 'i18n';
-import {
-  Divider,
-  FormControl,
-  FormHelperText,
-  IconButton,
-  makeStyles,
-  NativeSelect,
-  Paper,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import IconButton from '@material-ui/core/IconButton';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import Paper from '@material-ui/core/Paper';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import { NotificationItem } from './notificationItem';
 import { NotificationWrapperContext } from 'components/notificationWrapper';
 import { Delete, Drafts } from '@material-ui/icons';

src/components/common/loader/index.js

@@ -1,4 +1,5 @@
-import { Backdrop, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Backdrop from '@material-ui/core/Backdrop';
 import D from 'i18n';
 import imgPreloader from 'img/loader.svg';
 import PropTypes from 'prop-types';

src/components/common/navigation/component.js

@@ -1,35 +1,33 @@
-import {
-  Badge,
-  Card,
-  CardMedia,
-  ClickAwayListener,
-  Fade,
-  IconButton,
-  Popper,
-  Tooltip,
-} from '@material-ui/core';
-import { NavLink, Route } from 'react-router-dom';
 import React, { useContext, useEffect, useState } from 'react';
-
+import { NavLink, Route } from 'react-router-dom';
 import AppBar from '@material-ui/core/AppBar';
+import Badge from '@material-ui/core/Badge';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Fade from '@material-ui/core/Fade';
+import IconButton from '@material-ui/core/IconButton';
+import Popper from '@material-ui/core/Popper';
+import Tooltip from '@material-ui/core/Tooltip';
+import MenuIcon from '@material-ui/icons/Menu';
+import Notifications from '@material-ui/icons/Notifications';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
 import D from 'i18n';
 import InfoTile from 'components/panel-body/UEpage/infoTile/infoTile';
-import MenuIcon from '@material-ui/icons/Menu';
 import { NotificationWrapperContext } from 'components/notificationWrapper';
-import { Notifications } from '@material-ui/icons';
 import { NotificationsRoot } from '../Notification/notificationsRoot';
 import OnlineStatus from '../online-status';
 import { PEARL_USER_KEY } from 'utils/constants';
 import PropTypes from 'prop-types';
 import SearchBar from '../search/component';
 import Synchronize from 'components/common/synchronize';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 
 export const NavigationContext = React.createContext();
 
-const Navigation = ({ location, textSearch, setTextSearch, setOpenDrawer, refresh }) => {
+const Navigation = ({ location, textSearch, setTextSearch, setOpenDrawer }) => {
   const { unReadNotificationsNumber } = useContext(NotificationWrapperContext);
   const [disabled, setDisable] = useState(location.pathname.startsWith('/queen'));
 
@@ -133,10 +131,7 @@ const Navigation = ({ location, textSearch, setTextSearch, setOpenDrawer, refres
                 <SearchBar {...routeProps} textSearch={textSearch} setTextSearch={setTextSearch} />
               )}
             />
-            <Route
-              path="/survey-unit/:id"
-              render={routeProps => <InfoTile {...routeProps} refresh={refresh} />}
-            />
+            <Route path="/survey-unit/:id" render={routeProps => <InfoTile {...routeProps} />} />
           </div>
           <div className={classes.column}>
             <ClickAwayListener onClickAway={handleClickAway}>
@@ -183,7 +178,5 @@ Navigation.propTypes = {
   }).isRequired,
   textSearch: PropTypes.string.isRequired,
   setTextSearch: PropTypes.func.isRequired,
-
   setOpenDrawer: PropTypes.func.isRequired,
-  refresh: PropTypes.bool.isRequired,
 };

src/components/common/online-status/index.js

@@ -1,7 +1,7 @@
+import React, { useContext } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import WifiIcon from '@material-ui/icons/Wifi';
 import clsx from 'clsx';
-import React, { useContext } from 'react';
 import { AppContext } from 'Root';
 
 const useStyles = makeStyles(theme => ({

src/components/common/palette.js

@@ -1,5 +1,7 @@
-import { makeStyles, Paper, Typography } from '@material-ui/core';
 import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   primaryMain: {

src/components/common/search/component.js

@@ -1,7 +1,7 @@
+import React from 'react';
 import InputBase from '@material-ui/core/InputBase';
 import { makeStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const SearchBar = ({ textSearch, setTextSearch }) => {
   const handleChange = e => {

src/components/common/synchronize/component.js

@@ -1,8 +1,9 @@
-import { makeStyles, Tooltip } from '@material-ui/core';
+import React, { useContext } from 'react';
+import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
+import { makeStyles } from '@material-ui/core/styles';
 import SyncIcon from 'utils/icons/SyncIcon';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
 import { AppContext } from 'Root';
 import D from 'i18n';
 import { SynchronizeWrapperContext } from 'components/sychronizeWrapper';

src/components/notificationWrapper/index.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import notificationIdbService from 'indexedbb/services/notification-idb-service';
-import syncReportIdbService from 'indexedbb/services/syncReport-idb-service';
+
 import { NOTIFICATION_TYPE_SYNC } from 'utils/constants';
+import notificationIdbService from 'utils/indexeddb/services/notification-idb-service';
+import syncReportIdbService from 'utils/indexeddb/services/syncReport-idb-service';
 
 export const NotificationWrapperContext = React.createContext();
 

src/components/panel-body/UESpage/component.js

@@ -1,19 +1,18 @@
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { applyFilters, sortOnColumnCompareFunction, updateStateWithDates } from 'utils/functions';
-import surveyUnitDBService from 'indexedbb/services/surveyUnit-idb-service';
-import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
+import { applyFilters, sortOnColumnCompareFunction, updateStateWithDates } from 'utils/functions';
+import { useMissingSurveyUnits, useSurveyUnits } from 'utils/hooks/database';
+
 import FilterPanel from './filterPanel';
+import Grid from '@material-ui/core/Grid';
+import PropTypes from 'prop-types';
 import SurveyUnitCard from './material/surveyUnitCard';
-import surveyUnitMissingIdbService from 'indexedbb/services/surveyUnitMissing-idb-service';
+import { makeStyles } from '@material-ui/core/styles';
 
 const UESPage = ({ textSearch }) => {
   const [surveyUnits, setSurveyUnits] = useState([]);
   const [filteredSurveyUnits, setFilteredSurveyUnits] = useState([]);
   const [searchEchoes, setSearchEchoes] = useState([0, 0]);
   const [campaigns, setCampaigns] = useState([]);
-  const [init, setInit] = useState(false);
   const [sortCriteria, setSortCriteria] = useState('remainingDays');
   const [filters, setFilters] = useState({
     search: textSearch,
@@ -25,32 +24,27 @@ const UESPage = ({ textSearch }) => {
 
   const [inaccessibles, setInaccessibles] = useState([]);
 
+  const missingSurveyUnits = useMissingSurveyUnits();
+  const idbSurveyUnits = useSurveyUnits();
+
   useEffect(() => {
-    if (!init) {
-      setInit(true);
-      surveyUnitMissingIdbService
-        .getAll()
-        .then(units => setInaccessibles(units.map(({ id }) => id)));
+    setInaccessibles(missingSurveyUnits.map(({ id }) => id));
+  }, [missingSurveyUnits]);
 
-      surveyUnitDBService.getAll().then(units => {
-        const initializedSU = units.map(su => ({ ...su, selected: false }));
-        setCampaigns([...new Set(units.map(unit => unit.campaign))]);
-        setSurveyUnits(initializedSU);
-        setSearchEchoes([initializedSU.length, initializedSU.length]);
-      });
-    }
-  }, [init]);
+  useEffect(() => {
+    idbSurveyUnits.forEach(su => updateStateWithDates(su));
+  }, [idbSurveyUnits]);
 
   useEffect(() => {
-    setFilters(f => ({ ...f, search: textSearch }));
-  }, [textSearch]);
+    const initializedSU = idbSurveyUnits.map(su => ({ ...su, selected: false }));
+    setCampaigns([...new Set(idbSurveyUnits.map(unit => unit.campaign))]);
+    setSurveyUnits(initializedSU);
+    setSearchEchoes([initializedSU.length, initializedSU.length]);
+  }, [idbSurveyUnits]);
 
   useEffect(() => {
-    surveyUnitDBService.getAll().then(units => {
-      const updateNb = units.map(su => updateStateWithDates(su)).reduce((a, b) => a + b, 0);
-      if (updateNb > 0) setInit(false);
-    });
-  }, [surveyUnits]);
+    setFilters(f => ({ ...f, search: textSearch }));
+  }, [textSearch]);
 
   useEffect(() => {
     const sortSU = su => su.sort(sortOnColumnCompareFunction(sortCriteria));

src/components/panel-body/UESpage/filterPanel/component.js

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
@@ -13,7 +14,6 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import toDoEnum from 'utils/enum/SUToDoEnum';
 import D from 'i18n';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
 
 const FilterPanel = ({
   searchEchoes,

src/components/panel-body/UESpage/material/surveyUnitCard.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import { makeStyles } from '@material-ui/core/styles';
@@ -16,7 +17,6 @@ import {
   isSelectable,
 } from 'utils/functions/surveyUnitFunctions';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Tooltip } from '@material-ui/core';
 import D from 'i18n';

src/components/panel-body/UEpage/atomicInfoTile.js

@@ -1,8 +1,9 @@
-import { Paper, Typography } from '@material-ui/core';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
 import MaterialIcons from 'utils/icons/materialIcons';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const useStyles = makeStyles(theme => ({
   root: {