Feature/Clear Arasaac db

src/components/Board/SymbolSearch/SymbolSearch.component.js

@@ -273,6 +273,13 @@ export class SymbolSearch extends PureComponent {
       const imageArasaacUrl = await API.arasaacPictogramsGetImageUrl(
         suggestionImageReq
       );
+
+      // return static url when cannot retrive the image from arasaac server
+      if (!imageArasaacUrl.length && suggestion.keyPath)
+        return `https://static.arasaac.org/pictograms/${suggestion.keyPath}/${
+          suggestion.keyPath
+        }_500.png`;
+
       return imageArasaacUrl.length ? imageArasaacUrl : suggestion.src;
     };
 

src/components/Settings/Symbols/DeleteArasaacDialog.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { intlShape, injectIntl } from 'react-intl';
+import messages from './Symbols.messages';
+
+import PropTypes from 'prop-types';
+
+DeleteArasaacDialog.propTypes = {
+  intl: intlShape.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onDialogAcepted: PropTypes.func.isRequired,
+  isDeleting: PropTypes.bool.isRequired
+};
+
+function DeleteArasaacDialog(props) {
+  const { open, onClose, onDialogAcepted, intl, isDeleting } = props;
+
+  const handleDialogAccepted = () => {
+    onDialogAcepted();
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog
+      onClose={handleClose}
+      aria-labelledby="download-arasaac"
+      open={open}
+    >
+      <DialogTitle id="delet-arasaac-dialog-title">
+        {intl.formatMessage(messages.deletArasaac)}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="delet-arasaac-dialog-description">
+          {intl.formatMessage(messages.deletArasaacSecondary)}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color="primary" disabled={isDeleting}>
+          {intl.formatMessage(messages.cancel)}
+        </Button>
+        <Button
+          onClick={handleDialogAccepted}
+          variant="contained"
+          color="primary"
+          autoFocus
+          disabled={isDeleting}
+        >
+          {isDeleting ? (
+            <CircularProgress size={25} thickness={7} />
+          ) : (
+            intl.formatMessage(messages.delete)
+          )}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default injectIntl(DeleteArasaacDialog);

src/components/Settings/Symbols/Symbols.component.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import IconButton from '../../UI/IconButton/IconButton';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
 
 import FullScreenDialog from '../../UI/FullScreenDialog';
 import Downloader from './../../UI/Downloader';
@@ -16,53 +18,57 @@ import './Symbols.css';
 const propTypes = {
   onClose: PropTypes.func.isRequired,
   onCompleted: PropTypes.func.isRequired,
-  updateSymbolsSettings: PropTypes.func.isRequired,
+  handleOpenDialogs: PropTypes.func.isRequired,
   arasaacDownload: PropTypes.object,
   arasaacProcess: PropTypes.string,
   symbolsSettings: PropTypes.object.isRequired,
   noConnection: PropTypes.func.isRequired,
+  intl: PropTypes.object.isRequired
 };
 
 class Symbols extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      arasaacEnabled: props.symbolsSettings.arasaacActive,
-      noConnectionEnabled: false,
+      noConnectionEnabled: false
     };
   }
 
-  toggleArasaacSymbols = () => {
+  downloadArasaacSymbols = () => {
     if (window.navigator.onLine) {
       this.setState({
-        arasaacEnabled: !this.state.arasaacEnabled,
-        noConnectionEnabled: false,
+        noConnectionEnabled: false
       });
-      this.props.updateSymbolsSettings({
-        arasaacEnabled: !this.state.arasaacEnabled,
+      this.props.handleOpenDialogs({
+        openDownloadArasaacDialog: true
       });
     } else {
       this.setState({
-        noConnectionEnabled: true,
+        noConnectionEnabled: true
       });
       this.props.noConnection(true);
     }
   };
 
-  handleError = () => {
-    this.setState({
-      arasaacEnabled: !this.state.arasaacEnabled,
+  deleteArasaacSymbols = () => {
+    this.props.handleOpenDialogs({
+      openDeleteArasaacDialog: true
     });
   };
 
+  handleError = () => {
+    this.props.onDownloadError();
+  };
+
   render() {
     const {
       onClose,
       arasaacDownload,
       onCompleted,
       arasaacProcess,
       symbolsSettings,
+      intl
     } = this.props;
 
     return (
@@ -74,26 +80,34 @@ class Symbols extends React.Component {
         >
           <Paper>
             <List>
-              <ListItem>
+              <ListItem style={{ paddingRight: 0 }}>
                 <ListItemText
                   className="Symbols__ListItemText"
                   primary={<FormattedMessage {...messages.downloadArasaac} />}
                   secondary={
                     <FormattedMessage {...messages.downloadArasaacSecondary} />
                   }
                 />
-                <ListItemSecondaryAction>
-                  <Switch
-                    checked={this.state.arasaacEnabled}
-                    onChange={this.toggleArasaacSymbols}
-                    value="active"
-                    color="secondary"
-                    disabled={
-                      symbolsSettings.arasaacActive || arasaacDownload.started
-                        ? true
-                        : false
-                    }
-                  />
+                <ListItemSecondaryAction
+                  style={{
+                    visibility: arasaacDownload.started ? 'hidden' : 'visible'
+                  }}
+                >
+                  {symbolsSettings.arasaacActive ? (
+                    <IconButton
+                      label={intl.formatMessage(messages.delete)}
+                      onClick={this.deleteArasaacSymbols}
+                    >
+                      <DeleteForeverIcon fontSize="large" />
+                    </IconButton>
+                  ) : (
+                    <IconButton
+                      label={intl.formatMessage(messages.download)}
+                      onClick={this.downloadArasaacSymbols}
+                    >
+                      <GetAppIcon fontSize="large" />
+                    </IconButton>
+                  )}
                 </ListItemSecondaryAction>
               </ListItem>
             </List>

src/components/Settings/Symbols/Symbols.container.js

@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from 'react-intl';
 import { readFile } from '../../../idb/arasaac/jszip';
-import { getArasaacDB } from '../../../idb/arasaac/arasaacdb';
+import { getArasaacDB, clearArasaacDB } from '../../../idb/arasaac/arasaacdb';
 
 import Symbols from './Symbols.component';
 import DownloadArasaacDialog from './DownloadArasaacDialog';
 import NoConnectionDialog from './NoConnectionDialog';
+import DeleteArasaacDialog from './DeleteArasaacDialog';
 import { updateSymbolsSettings } from '../../App/App.actions';
 
 export class SymbolsContainer extends PureComponent {
@@ -21,33 +22,35 @@ export class SymbolsContainer extends PureComponent {
     this.state = {
       openArasaacDialog: false,
       arasaacProcess: '',
-      openNoConnectionDialog: false
+      openNoConnectionDialog: false,
+      openDeleteArasaacDialog: false,
+      isDeleting: false
     };
-    this.initArasaacDB();
 
     this.arasaacDownload = {};
   }
 
-  initArasaacDB = async () => {
-    const { lang } = this.props;
-    const arasaacDB = getArasaacDB();
-    arasaacDB.initTextStore(lang.slice(0, 2));
-  };
-
-  updateSymbolsSettings = symbolsSettings => {
-    if (symbolsSettings.arasaacEnabled) {
+  handleOpenDialogs = dialog => {
+    if (dialog.openDownloadArasaacDialog) {
       this.setState({
         ...this.state,
         openArasaacDialog: true
       });
     }
+    if (dialog.openDeleteArasaacDialog) {
+      this.setState({
+        ...this.state,
+        openDeleteArasaacDialog: true
+      });
+    }
   };
 
   handleCloseDialogs = () => {
     this.setState({
       ...this.state,
       openArasaacDialog: false,
-      openNoConnectionDialog: false
+      openNoConnectionDialog: false,
+      openDeleteArasaacDialog: false
     });
   };
 
@@ -77,20 +80,41 @@ export class SymbolsContainer extends PureComponent {
     });
   };
 
-  handleCompleted = async file => {
+  handleDeleteDialogAcepted = async () => {
+    this.setState({
+      isDeleting: true
+    });
+    try {
+      await clearArasaacDB();
+    } catch (err) {
+      console.error(err.message);
+    }
+
     this.props.updateSymbolsSettings({
       ...this.props.symbolsSettings,
-      arasaacActive: true
+      arasaacActive: false
     });
+
+    this.setState({
+      openDeleteArasaacDialog: false,
+      isDeleting: false
+    });
+  };
+
+  handleCompleted = async file => {
     this.setState({
       ...this.state,
       arasaacProcess: 'doing'
     });
     try {
       const content = await readFile(file);
       const arasaacDB = await getArasaacDB();
-      arasaacDB.importContent(content);
-      arasaacDB.initTextStore(this.props.lang.slice(0, 2));
+      await arasaacDB.importContent(content);
+      await arasaacDB.initTextStore(this.props.lang.slice(0, 2));
+      this.props.updateSymbolsSettings({
+        ...this.props.symbolsSettings,
+        arasaacActive: true
+      });
       this.setState({
         ...this.state,
         arasaacProcess: 'done'
@@ -104,25 +128,40 @@ export class SymbolsContainer extends PureComponent {
     }
   };
 
+  handleDownloadError = () => {
+    this.setState({
+      ...this.state,
+      arasaacProcess: 'error'
+    });
+  };
+
   render() {
     const { history, symbolsSettings } = this.props;
 
     return (
       <>
         <Symbols
           onClose={history.goBack}
-          updateSymbolsSettings={this.updateSymbolsSettings}
+          handleOpenDialogs={this.handleOpenDialogs}
           symbolsSettings={symbolsSettings}
           arasaacDownload={this.arasaacDownload}
           onCompleted={this.handleCompleted}
           arasaacProcess={this.state.arasaacProcess}
           noConnection={this.handleNoConnection}
+          onDownloadError={this.handleDownloadError}
+          intl={this.props.intl}
         />
         <DownloadArasaacDialog
           onClose={this.handleCloseDialogs}
           onDialogAcepted={this.handleDialogArasaacAcepted}
           open={this.state.openArasaacDialog}
         />
+        <DeleteArasaacDialog
+          onClose={this.handleCloseDialogs}
+          onDialogAcepted={this.handleDeleteDialogAcepted}
+          open={this.state.openDeleteArasaacDialog}
+          isDeleting={this.state.isDeleting}
+        />
         <NoConnectionDialog
           onClose={this.handleCloseDialogs}
           open={this.state.openNoConnectionDialog}