#469 Make ideas/actions pretty and recognisable

Author: Adriána Kohanová

js/components/tracking/EditableText.js

@@ -11,17 +11,20 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const EditableInput = props => {
+const EditableInput = ({ dataText, index, updateText }) => {
   const inputRef = useRef(null);
   const [inputVisible, setInputVisible] = useState(false);
-  const [text, setText] = useState(props.text);
+  const [text, setText] = useState(dataText);
   const classes = useStyles();
 
-  function onClickOutSide(e) {
+  const onClickOutSide = e => {
     if (inputRef.current && !inputRef.current.contains(e.target)) {
       setInputVisible(false);
+      if (updateText && text !== dataText) {
+        updateText(text);
+      }
     }
-  }
+  };
 
   useEffect(() => {
     // Handle outside clicks on mounted state
@@ -47,7 +50,7 @@ const EditableInput = props => {
           }}
         />
       ) : (
-        <Grid item key={props.index}>
+        <Grid item key={index}>
           {<span onClick={() => setInputVisible(true)}>{text}</span>}
           {
             <IconButton color={'primary'} size="small" onClick={() => setInputVisible(true)}>

js/components/tracking/timelineView.js

@@ -1,10 +1,12 @@
 import React, { useState, useRef, memo } from 'react';
+import { useDispatch } from 'react-redux';
 import { makeStyles, IconButton, Tooltip, Grid } from '@material-ui/core';
 import { Check, Clear, Warning, Favorite, Star } from '@material-ui/icons';
 import { actionAnnotation } from '../../reducers/tracking/constants';
 import { TimelineEvent } from 'react-event-timeline';
 import EditableText from './editableText';
 import palette from '../../theme/palette';
+import { updateTrackingActions } from '../../reducers/tracking/dispatchActions';
 
 const useStyles = makeStyles(theme => ({
   headerGrid: {
@@ -23,6 +25,8 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const TimelineView = memo(({ data, index }) => {
+  const dispatch = useDispatch();
+
   const ref = useRef(null);
   const [isHovering, setIsHovering] = useState(false);
   const [updatedIcon, setUpdatedIcon] = useState(null);
@@ -51,7 +55,14 @@ const TimelineView = memo(({ data, index }) => {
   };
 
   const annotationActions = [
-    <IconButton className={classes.iconButton} color={'primary'} onClick={() => setUpdatedIcon(actionAnnotation.CHECK)}>
+    <IconButton
+      className={classes.iconButton}
+      color={'primary'}
+      onClick={() => {
+        setUpdatedIcon(actionAnnotation.CHECK);
+        updateDataAnnotation(actionAnnotation.CHECK);
+      }}
+    >
       <Tooltip title="Check">
         <Check />
       </Tooltip>
@@ -61,6 +72,7 @@ const TimelineView = memo(({ data, index }) => {
       color={'primary'}
       onClick={() => {
         setUpdatedIcon(actionAnnotation.CLEAR);
+        updateDataAnnotation(actionAnnotation.CLEAR);
       }}
     >
       <Tooltip title="Clear">
@@ -72,6 +84,7 @@ const TimelineView = memo(({ data, index }) => {
       color={'primary'}
       onClick={() => {
         setUpdatedIcon(actionAnnotation.WARNING);
+        updateDataAnnotation(actionAnnotation.WARNING);
       }}
     >
       <Tooltip title="Warning">
@@ -83,6 +96,7 @@ const TimelineView = memo(({ data, index }) => {
       color={'primary'}
       onClick={() => {
         setUpdatedIcon(actionAnnotation.FAVORITE);
+        updateDataAnnotation(actionAnnotation.FAVORITE);
       }}
     >
       <Tooltip title="Favorite">
@@ -94,6 +108,7 @@ const TimelineView = memo(({ data, index }) => {
       color={'primary'}
       onClick={() => {
         setUpdatedIcon(actionAnnotation.STAR);
+        updateDataAnnotation(actionAnnotation.STAR);
       }}
     >
       <Tooltip title="Star">
@@ -102,6 +117,16 @@ const TimelineView = memo(({ data, index }) => {
     </IconButton>
   ];
 
+  const updateDataText = text => {
+    data.text = text;
+    dispatch(updateTrackingActions(data));
+  };
+
+  const updateDataAnnotation = annotation => {
+    data.annotation = annotation;
+    dispatch(updateTrackingActions(data));
+  };
+
   return (
     <div ref={ref} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
       <TimelineEvent
@@ -111,7 +136,7 @@ const TimelineView = memo(({ data, index }) => {
             <Grid container justify="flex-start" direction="row" alignItems="center" className={classes.headerGrid}>
               {
                 <Grid item xs={8} className={classes.grid}>
-                  <EditableText text={data.text} index={index} />
+                  <EditableText dataText={data.text} index={index} updateText={updateDataText} />
                 </Grid>
               }
               {isHovering && (
@@ -137,7 +162,6 @@ const TimelineView = memo(({ data, index }) => {
         }
         createdAt={new Date(data.timestamp).toLocaleString()}
         icon={updatedIcon && updatedIcon != null ? getActionIcon(updatedIcon) : getActionIcon(data.annotation)}
-        //icon={getActionIcon(data.annotation)}
         iconColor={palette.primary.main}
         className={classes.timelineEvent}
       ></TimelineEvent>

js/components/tracking/trackingModal.js

@@ -4,7 +4,6 @@ import Modal from '../common/Modal';
 import { Grid, makeStyles, IconButton, Tooltip } from '@material-ui/core';
 import { Timeline } from 'react-event-timeline';
 import { Close } from '@material-ui/icons';
-import palette from '../../theme/palette';
 import { Panel } from '../common';
 import TimelineView from './timelineView';
 import { setProjectTrackingActions } from '../../reducers/tracking/dispatchActions';

js/reducers/tracking/dispatchActions.js

@@ -1528,3 +1528,30 @@ export const sendInitTrackingActionByProjectId = target_on => (dispatch, getStat
     dispatch(saveTrackingActions(actions, snapshotID));
   }
 };
+
+export const updateTrackingActions = action => (dispatch, getState) => {
+  const state = getState();
+  const project = state.projectReducers.currentProject;
+  const projectActions = state.trackingReducers.project_actions_list;
+  const projectID = project && project.projectID;
+  const actionID = action && action.Id;
+
+  if (projectID && actionID) {
+    const dataToSend = {
+      last_update_date: moment().format(),
+      actions: JSON.stringify(projectActions)
+    };
+    return api({
+      url: `${base_url}/api/session-actions/${projectID}/${actionID}`,
+      method: METHOD.PUT,
+      data: JSON.stringify(dataToSend)
+    })
+      .then(() => {})
+      .catch(error => {
+        throw new Error(error);
+      })
+      .finally(() => {});
+  } else {
+    return Promise.resolve();
+  }
+};