Feature/improve phrase

src/api/api.js

@@ -626,6 +626,30 @@ class API {
       return data;
     }
   }
+
+  async improvePhrase({ phrase, language }) {
+    const authToken = getAuthToken();
+    if (!(authToken && authToken.length)) {
+      throw new Error('Need to be authenticated to perform this request');
+    }
+
+    try {
+      const headers = {
+        Authorization: `Bearer ${authToken}`
+      };
+
+      const { data } = await this.axiosInstance.post(
+        `/gpt/edit`,
+        { phrase, language },
+        {
+          headers
+        }
+      );
+      return data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
 }
 
 const API_INSTANCE = new API({});

src/components/App/App.reducer.js

@@ -50,7 +50,8 @@ const initialState = {
     quickUnlockActive: false,
     removeOutputActive: false,
     vocalizeFolders: false,
-    liveMode: false
+    liveMode: false,
+    improvePhraseActive: false
   },
   symbolsSettings: {
     arasaacActive: false

src/components/App/__tests__/App.reducer.test.js

@@ -6,7 +6,7 @@ import {
   FINISH_FIRST_VISIT,
   UPDATE_CONNECTIVITY,
   UPDATE_DISPLAY_SETTINGS,
-  UPDATE_NAVIGATION_SETTINGS,
+  UPDATE_NAVIGATION_SETTINGS
 } from '../App.constants';
 import appReducer from '../App.reducer';
 
@@ -24,9 +24,9 @@ describe('reducer', () => {
         communicatorTour: {
           isCommBoardsEnabled: true,
           isPublicBoardsEnabled: true,
-          isAllMyBoardsEnabled: true,
+          isAllMyBoardsEnabled: true
         },
-        isAnalyticsTourEnabled: true,
+        isAnalyticsTourEnabled: true
       },
       displaySettings: {
         uiSize: DISPLAY_SIZE_STANDARD,
@@ -35,7 +35,7 @@ describe('reducer', () => {
         hideOutputActive: false,
         increaseOutputButtons: false,
         labelPosition: 'Below',
-        darkThemeActive: false,
+        darkThemeActive: false
       },
       navigationSettings: {
         active: false,
@@ -47,11 +47,12 @@ describe('reducer', () => {
         quickUnlockActive: false,
         removeOutputActive: false,
         vocalizeFolders: false,
+        improvePhraseActive: false
       },
       symbolsSettings: {
-        arasaacActive: false,
+        arasaacActive: false
       },
-      userData: {},
+      userData: {}
     };
     uData = { name: 'martin bedouret', email: '[email protected]' };
     mockApp = {
@@ -62,7 +63,7 @@ describe('reducer', () => {
         labelPosition: 'Below',
         fontFamily: DEFAULT_FONT_FAMILY,
         fontSize: 'Standard',
-        darkThemeActive: false,
+        darkThemeActive: false
       },
       isConnected: true,
       isFirstVisit: false,
@@ -76,8 +77,9 @@ describe('reducer', () => {
         quickUnlockActive: false,
         removeOutputActive: false,
         vocalizeFolders: false,
+        improvePhraseActive: false
       },
-      userData: uData,
+      userData: uData
     };
   });
   it('should return the initial state', () => {
@@ -86,57 +88,57 @@ describe('reducer', () => {
   it('should handle login ', () => {
     const login = {
       type: LOGIN_SUCCESS,
-      payload: uData,
+      payload: uData
     };
     expect(appReducer(initialState, login)).toEqual({
       ...initialState,
       userData: uData,
-      isFirstVisit: false,
+      isFirstVisit: false
     });
   });
   it('should handle logout', () => {
     const logout = {
-      type: LOGOUT,
+      type: LOGOUT
     };
     expect(appReducer(initialState, logout)).toEqual(initialState);
   });
   it('should handle updateDisplaySettings', () => {
     const updateDisplaySettings = {
       type: UPDATE_DISPLAY_SETTINGS,
-      payload: mockApp.displaySettings,
+      payload: mockApp.displaySettings
     };
     expect(appReducer(initialState, updateDisplaySettings)).toEqual({
       ...initialState,
-      displaySettings: mockApp.displaySettings,
+      displaySettings: mockApp.displaySettings
     });
   });
   it('should handle updateNavigationSettings', () => {
     const updateNavigationSettings = {
       type: UPDATE_NAVIGATION_SETTINGS,
-      payload: mockApp.navigationSettings,
+      payload: mockApp.navigationSettings
     };
     expect(appReducer(initialState, updateNavigationSettings)).toEqual({
       ...initialState,
-      navigationSettings: mockApp.navigationSettings,
+      navigationSettings: mockApp.navigationSettings
     });
   });
   it('should handle finishFirstVisit ', () => {
     const finishFirstVisit = {
-      type: FINISH_FIRST_VISIT,
+      type: FINISH_FIRST_VISIT
     };
     expect(appReducer(initialState, finishFirstVisit)).toEqual({
       ...initialState,
-      isFirstVisit: false,
+      isFirstVisit: false
     });
   });
   it('should handle updateConnectivity', () => {
     const updateConnectivity = {
       type: UPDATE_CONNECTIVITY,
-      payload: false,
+      payload: false
     };
     expect(appReducer(initialState, updateConnectivity)).toEqual({
       ...initialState,
-      isConnected: false,
+      isConnected: false
     });
   });
 });

src/components/Board/Board.actions.js

@@ -17,6 +17,7 @@ import {
   CLICK_SYMBOL,
   CLICK_OUTPUT,
   CHANGE_OUTPUT,
+  CHANGE_IMPROVED_PHRASE,
   CHANGE_LIVE_MODE,
   REPLACE_BOARD,
   HISTORY_REMOVE_BOARD,
@@ -324,9 +325,40 @@ export function clickOutput(outputPhrase) {
 }
 
 export function changeOutput(output) {
-  return {
-    type: CHANGE_OUTPUT,
-    output
+  return async (dispatch, getState) => {
+    const {
+      app: {
+        navigationSettings: { improvePhraseActive }
+      }
+    } = getState();
+    if (improvePhraseActive) dispatch(improvePhrase(output));
+    dispatch({
+      type: CHANGE_OUTPUT,
+      output
+    });
+  };
+}
+
+export function improvePhrase(output) {
+  const improvePhrase = async language => {
+    const MIN_TILES_TO_IMPROVE = 1;
+    if (output.length <= MIN_TILES_TO_IMPROVE) return '';
+    const labels = output.map(symbol => symbol.label);
+    const phrase = labels.join(' '); //this.handlePhraseToShare();
+    const improvedPhrase = await API.improvePhrase({ phrase, language });
+    return improvedPhrase.phrase;
+  };
+  return async (dispatch, getState) => {
+    try {
+      const language = getState().language.lang;
+      const improvedPhrase = await improvePhrase(language);
+      dispatch({
+        type: CHANGE_IMPROVED_PHRASE,
+        improvedPhrase
+      });
+    } catch (err) {
+      console.log('error', err);
+    }
   };
 }
 

src/components/Board/Board.component.js

@@ -34,6 +34,7 @@ import './Board.css';
 import BoardTour from './BoardTour/BoardTour';
 import ScrollButtons from '../ScrollButtons';
 import { NAVIGATION_BUTTONS_STYLE_SIDES } from '../Settings/Navigation/Navigation.constants';
+import ImprovePhraseOutput from './ImprovePhraseOutput';
 
 export class Board extends Component {
   static propTypes = {
@@ -315,7 +316,9 @@ export class Board extends Component {
       setIsScroll,
       isScroll,
       totalRows,
-      changeDefaultBoard
+      changeDefaultBoard,
+      improvedPhrase,
+      speak
     } = this.props;
 
     const tiles = this.renderTiles(board.tiles);
@@ -524,7 +527,12 @@ export class Board extends Component {
               />
             )}
           </div>
-
+          {navigationSettings.improvePhraseActive && (
+            <ImprovePhraseOutput
+              improvedPhrase={improvedPhrase}
+              speak={speak}
+            />
+          )}
           <Dialog
             open={this.state.openTitleDialog}
             aria-labelledby="board-dialog-title"

src/components/Board/Board.constants.js

@@ -15,6 +15,7 @@ export const FOCUS_TILE = 'cboard/Board/FOCUS_TILE';
 export const CLICK_SYMBOL = 'cboard/Board/CLICK_SYMBOL';
 export const CLICK_OUTPUT = 'cboard/Board/CLICK_OUTPUT';
 export const CHANGE_OUTPUT = 'cboard/Board/CHANGE_OUTPUT';
+export const CHANGE_IMPROVED_PHRASE = 'cboard/Board/CHANGE_IMPROVED_PHRASE';
 export const CHANGE_LIVE_MODE = 'cboard/Board/CHANGE_LIVE_MODE';
 export const HISTORY_REMOVE_BOARD = 'cboard/Board/HISTORY_REMOVE_BOARD';
 export const UNMARK_BOARD = 'cboard/Board/UNMARK_BOARD';

src/components/Board/Board.container.js

@@ -1540,7 +1540,9 @@ export class BoardContainer extends Component {
       navHistory,
       board,
       focusTile,
-      isPremiumRequiredModalOpen
+      isPremiumRequiredModalOpen,
+      improvedPhrase,
+      speak
     } = this.props;
 
     if (!this.state.translatedBoard) {
@@ -1614,6 +1616,8 @@ export class BoardContainer extends Component {
           totalRows={this.state.totalRows}
           ref={this.boardRef}
           changeDefaultBoard={this.props.changeDefaultBoard}
+          improvedPhrase={improvedPhrase}
+          speak={speak}
         />
         <Dialog
           open={!!this.state.copyPublicBoard && !isPremiumRequiredModalOpen}
@@ -1726,7 +1730,8 @@ const mapStateToProps = ({
     offlineVoiceAlert,
     isRootBoardTourEnabled: liveHelp.isRootBoardTourEnabled,
     isUnlockedTourEnabled: liveHelp.isUnlockedTourEnabled,
-    isPremiumRequiredModalOpen: premiumRequiredModalState?.open
+    isPremiumRequiredModalOpen: premiumRequiredModalState?.open,
+    improvedPhrase: board.improvedPhrase
   };
 };
 

src/components/Board/Board.reducer.js

@@ -17,6 +17,7 @@ import {
   EDIT_TILES,
   FOCUS_TILE,
   CHANGE_OUTPUT,
+  CHANGE_IMPROVED_PHRASE,
   REPLACE_BOARD,
   HISTORY_REMOVE_BOARD,
   UNMARK_BOARD,
@@ -48,7 +49,8 @@ const initialState = {
   isFetching: false,
   images: [],
   isFixed: false,
-  isLiveMode: false
+  isLiveMode: false,
+  improvedPhrase: ''
 };
 
 function reconcileBoards(localBoard, remoteBoard) {
@@ -411,6 +413,11 @@ function boardReducer(state = initialState, action) {
       return {
         ...state
       };
+    case CHANGE_IMPROVED_PHRASE:
+      return {
+        ...state,
+        improvedPhrase: action.improvedPhrase
+      };
     default:
       return state;
   }

src/components/Board/ImprovePhraseOutput/ImprovePhraseOutput.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './ImprovePhraseOutput.module.css';
+
+import { Typography } from '@material-ui/core';
+import { PlayArrow } from '@material-ui/icons';
+
+const propTypes = {
+  isRootBoardTourEnabled: PropTypes.bool,
+  isUnlockedTourEnabled: PropTypes.bool,
+  isLocked: PropTypes.bool,
+  disableTour: PropTypes.func.isRequired
+};
+
+function ImprovePhraseOutput({ improvedPhrase, speak }) {
+  const handlePlay = async () => {
+    if (!improvedPhrase || improvedPhrase.length === 0) return;
+    speak(improvedPhrase);
+  };
+  const enabledControllsClassname = improvedPhrase
+    ? `${styles.text_and_controls} ${styles.enabled}`
+    : styles.text_and_controls;
+
+  return (
+    <div
+      tabIndex="0"
+      className={enabledControllsClassname}
+      onClick={handlePlay}
+    >
+      <Typography variant="h5">{improvedPhrase}</Typography>
+      {improvedPhrase && (
+        <PlayArrow className={styles.playArrow} fontSize="large" />
+      )}
+    </div>
+  );
+}
+
+ImprovePhraseOutput.propTypes = propTypes;
+
+export default ImprovePhraseOutput;

src/components/Board/ImprovePhraseOutput/ImprovePhraseOutput.module.css

@@ -0,0 +1,29 @@
+.text_and_controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0px 3px 4px 3px #c1c1c1;
+  padding: 0.5em 1.5em 0.5em 2em;
+  margin: 0.5em 0.5em;
+  border-radius: 0.5em;
+  transition: box-shadow 0.3s;
+  border: 2px solid transparent;
+  height: 3em;
+  background-color: indigo;
+  color: white;
+}
+
+.text_and_controls.enabled:hover,
+.text_and_controls.enabled:focus {
+  outline: none;
+  border: 2px solid #ffffff; /* Red border */
+}
+
+.text_and_controls .playArrow,
+.text_and_controls {
+  transition: all 0.3s;
+}
+.text_and_controls.enabled:hover .playArrow,
+.text_and_controls.enabled:focus .playArrow {
+  transform: scale(1.2);
+}