#485 Put tooltips on undo/redo buttons that show the action being undone/redone

Author: Adriána Kohanová

js/components/preview/viewerControls/index.js

@@ -3,7 +3,7 @@
  */
 
 import React, { memo, useState, useContext, useEffect, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '../../common/Inputs/Button';
 import { Settings, Mouse, PersonalVideo, Undo, Redo } from '@material-ui/icons';
 import { ButtonGroup, Grid, makeStyles, Tooltip } from '@material-ui/core';
@@ -44,6 +44,7 @@ export const ViewerControls = memo(({}) => {
   const [redoTooltip, setRedoTooltip] = useState('Redo');
   const [canUndo, setCanUndo] = useState(true);
   const [canRedo, setCanRedo] = useState(false);
+  const isActionTracking = useSelector(state => state.trackingReducers.isActionTracking);
 
   const openDrawer = key => {
     //close all and open selected by key
@@ -85,12 +86,16 @@ export const ViewerControls = memo(({}) => {
   });
 
   useEffect(() => {
+    if (isActionTracking === false) {
+      setUndoTooltip(dispatch(getUndoActionText()));
+      setRedoTooltip(dispatch(getRedoActionText()));
+    }
     window.addEventListener('keydown', handleUserKeyPress);
 
     return () => {
       window.removeEventListener('keydown', handleUserKeyPress);
     };
-  }, [handleUserKeyPress]);
+  }, [handleUserKeyPress, dispatch, isActionTracking]);
 
   return (
     <>

js/reducers/tracking/actions.js

@@ -106,6 +106,13 @@ export const setIsActionsRestoring = function(isActionRestoring, isActionRestore
   };
 };
 
+export const setIsActionTracking = function(isActionTracking) {
+  return {
+    type: constants.SET_IS_ACTION_TRACKING,
+    isActionTracking: isActionTracking
+  };
+};
+
 export const resetTrackingState = function() {
   return {
     type: constants.RESET_TRACKING_STATE

js/reducers/tracking/constants.js

@@ -15,6 +15,7 @@ export const constants = {
   SET_PROJECT_ACTIONS_LIST: prefix + 'SET_PROJECT_ACTIONS_LIST',
   SET_IS_ACTIONS_SAVING: prefix + 'SET_IS_ACTIONS_SAVING',
   SET_IS_ACTIONS_RESTORING: prefix + 'SET_IS_ACTIONS_RESTORING',
+  SET_IS_ACTION_TRACKING: prefix + 'SET_IS_ACTION_TRACKING',
   RESET_TRACKING_STATE: prefix + 'RESET_TRACKING_STATE',
   SET_TRACKING_IMAGE_SOURCE: prefix + 'SET_TRACKING_IMAGE_SOURCE',
   SET_SNAPSOT_IMAGE_ACTIONS_LIST: prefix + 'SET_SNAPSOT_IMAGE_ACTIONS_LIST'

js/reducers/tracking/dispatchActions.js

@@ -79,7 +79,8 @@ import {
   setIsActionsSaving,
   setIsActionsRestoring,
   appendToUndoRedoActionList,
-  resetTrackingState
+  resetTrackingState,
+  setIsActionTracking
 } from './actions';
 import {
   setSelectedAll,
@@ -1146,7 +1147,17 @@ const getNextUndoAction = () => (dispatch, getState) => {
 
 const getNextRedoAction = () => (dispatch, getState) => {
   const state = getState();
+  const actionUndoList = state.undoableTrackingReducers.future;
+
   let action = { text: '' };
+  let actionss = actionUndoList && actionUndoList[0];
+
+  let actions = actionss && actionss.undo_redo_actions_list;
+  if (actions) {
+    let actionsLenght = actions.length;
+    actionsLenght = actionsLenght > 0 ? actionsLenght - 1 : actionsLenght;
+    action = actions[actionsLenght];
+  }
 
   return action;
 };
@@ -1755,6 +1766,7 @@ export const getRedoActionText = () => (dispatch, getState) => {
 export const appendAndSendTrackingActions = trackAction => (dispatch, getState) => {
   const state = getState();
   const isUndoRedoAction = state.trackingReducers.isUndoRedoAction;
+  dispatch(setIsActionTracking(true));
 
   if (trackAction && trackAction !== null) {
     dispatch(appendToActionList(trackAction, isUndoRedoAction));
@@ -1764,7 +1776,7 @@ export const appendAndSendTrackingActions = trackAction => (dispatch, getState)
       dispatch(appendToUndoRedoActionList(trackAction));
     }
   }
-
+  dispatch(setIsActionTracking(false));
   dispatch(checkSendTrackingActions());
 };
 

js/reducers/tracking/trackingReducers.js

@@ -16,6 +16,7 @@ export const INITIAL_STATE = {
   snapshotActionImageList: [],
   isActionRestoring: false,
   isActionRestored: false,
+  isActionTracking: false,
   trackingImageSource: ''
 };
 
@@ -96,6 +97,10 @@ export function trackingReducers(state = INITIAL_STATE, action = {}) {
         isActionRestoring: action.isActionRestoring,
         isActionRestored: action.isActionRestored
       });
+    case constants.SET_IS_ACTION_TRACKING:
+      return Object.assign({}, state, {
+        isActionTracking: action.isActionTracking
+      });
 
     case constants.SET_TRACKING_IMAGE_SOURCE:
       return Object.assign({}, state, {