Merge pull request #1653 from maxicapodacqua/feature/pictogram-not-found

Adding message for pictogram not found

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

@@ -0,0 +1,20 @@
+import { Typography } from '@material-ui/core';
+import { SentimentDissatisfied } from '@material-ui/icons';
+import './SymbolNotFound.css';
+import { FormattedMessage } from 'react-intl';
+import messages from './SymbolNotFound.messages';
+
+function SymbolNotFound() {
+  return (
+    <div className="SymbolNotFound__box">
+      <SentimentDissatisfied />
+      <Typography variant="h5">
+        <FormattedMessage {...messages.symbolNotFoundTitle} />
+      </Typography>
+      <Typography>
+        <FormattedMessage {...messages.symbolNotFoundText} />
+      </Typography>
+    </div>
+  );
+}
+export default SymbolNotFound;

src/components/Board/SymbolSearch/SymbolNotFound/SymbolNotFound.css

@@ -0,0 +1,11 @@
+.SymbolNotFound__box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  height: 70%;
+  justify-content: center;
+}
+.SymbolNotFound__box .MuiSvgIcon-root {
+  font-size: 100px;
+}

src/components/Board/SymbolSearch/SymbolNotFound/SymbolNotFound.messages.js

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  symbolNotFoundTitle: {
+    id: 'cboard.components.SymbolNotFound.symbolNotFoundTitle',
+    defaultMessage: 'Oh no!'
+  },
+  symbolNotFoundText: {
+    id: 'cboard.components.SymbolNotFound.symbolNotFoundText',
+    defaultMessage: 'Pictogram not found'
+  }
+});

src/components/Board/SymbolSearch/SymbolNotFound/index.js

@@ -0,0 +1 @@
+export { default } from './SymbolNotFound.component';

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

@@ -18,6 +18,7 @@ import Symbol from '../Symbol';
 import { LABEL_POSITION_BELOW } from '../../Settings/Display/Display.constants';
 import messages from './SymbolSearch.messages';
 import './SymbolSearch.css';
+import SymbolNotFound from './SymbolNotFound';
 
 const SymbolSets = {
   mulberry: '0',
@@ -63,6 +64,8 @@ export class SymbolSearch extends PureComponent {
     super(props);
     this.state = {
       openMirror: false,
+      isFetchingArasaac: false,
+      isFetchingGlobalsymbols: false,
       value: '',
       suggestions: [],
       skin: 'white',
@@ -147,6 +150,9 @@ export class SymbolSearch extends PureComponent {
       return [];
     }
     try {
+      this.setState({
+        isFetchingArasaac: true
+      });
       const arasaacDB = await getArasaacDB();
       const imagesFromDB = await arasaacDB.getImagesByKeyword(
         searchText.trim()
@@ -168,7 +174,10 @@ export class SymbolSearch extends PureComponent {
             fromArasaac: true
           };
         });
-        this.setState({ suggestions: [...suggestions, ...arasaacSuggestions] });
+        this.setState({
+          suggestions: [...suggestions, ...arasaacSuggestions],
+          isFetchingArasaac: false
+        });
       } else {
         const data = await API.arasaacPictogramsSearch(locale, searchText);
         if (data.length) {
@@ -190,14 +199,19 @@ export class SymbolSearch extends PureComponent {
             }
           );
           this.setState({
-            suggestions: [...suggestions, ...arasaacSuggestions]
+            suggestions: [...suggestions, ...arasaacSuggestions],
+            isFetchingArasaac: false
           });
         }
       }
 
       return [];
     } catch (err) {
       return [];
+    } finally {
+      this.setState({
+        isFetchingArasaac: false
+      });
     }
   };
 
@@ -207,6 +221,9 @@ export class SymbolSearch extends PureComponent {
     } = this.props;
     try {
       let language = locale !== 'me' ? locale : 'cnr';
+      this.setState({
+        isFetchingGlobalsymbols: true
+      });
       const data = await API.globalsymbolsPictogramsSearch(
         language,
         searchText
@@ -256,12 +273,17 @@ export class SymbolSearch extends PureComponent {
           });
         });
         this.setState({
-          suggestions: [...suggestions, ...globalsymbolsSuggestions]
+          suggestions: [...suggestions, ...globalsymbolsSuggestions],
+          isFetchingGlobalsymbols: false
         });
       }
       return [];
     } catch (err) {
       return [];
+    } finally {
+      this.setState({
+        isFetchingGlobalsymbols: false
+      });
     }
   };
 
@@ -416,6 +438,13 @@ export class SymbolSearch extends PureComponent {
         {clearButton}
       </div>
     );
+    const symbolNotFound =
+      !this.state.isFetchingArasaac &&
+      !this.state.isFetchingGlobalsymbols &&
+      this.state.value.trim() !== '' &&
+      this.state.suggestions.length === 0 ? (
+        <SymbolNotFound />
+      ) : null;
 
     return (
       <div>
@@ -429,6 +458,7 @@ export class SymbolSearch extends PureComponent {
             options={this.state.symbolSets}
             onChange={this.handleChangeOption}
           />
+          {symbolNotFound}
         </FullScreenDialog>
       </div>
     );

src/components/UI/FullScreenDialog/FullScreenDialog.js

@@ -55,7 +55,9 @@ const styles = {
   },
   content: {
     maxWidth: '680px',
-    margin: '0 auto'
+    margin: '0 auto',
+    height: '100%',
+    overflowY: 'hidden'
   },
   contentFullWidth: {
     margin: '0 auto'

src/translations/src/cboard.json

@@ -139,6 +139,8 @@
   "cboard.components.ColorSelect.colorScheme": "Color Scheme",
   "cboard.components.FullScreenButton.fullscreen": "Full screen",
   "cboard.components.FullScreenButton.exitFullscreen": "Exit full screen",
+  "cboard.components.SymbolNotFound.symbolNotFoundText": "Oh no!",
+  "cboard.components.SymbolNotFound.symbolNotFoundTitle": "Pictogram not found",
   "cboard.components.SymbolSearch.searchSymbolLibrary": "Search symbol library",
   "cboard.components.SymbolSearch.clearText": "Clear text",
   "cboard.components.InputImage.uploadImage": "Upload image",