#469 Make ideas/actions pretty and recognisable

m2ms · Dec 16, 2020 · 1d1da57 · 1d1da57
1 parent 4772600
commit 1d1da57
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 85 deletions.
diff --git a/js/components/projects/projectDetailDrawer/index.js b/js/components/projects/projectDetailDrawer/index.js
@@ -1,15 +1,14 @@
-import React, { memo, useContext } from 'react';
-import { IconButton, makeStyles, Drawer, Typography, Grid } from '@material-ui/core';
+import React, { memo } from 'react';
+import { IconButton, makeStyles, Drawer, Typography, Grid, Box } from '@material-ui/core';
 import { Share, Close } from '@material-ui/icons';
 import { Gitgraph, templateExtend, TemplateName } from '@gitgraph/react';
 import { base_url, URLS } from '../../routes/constants';
 import moment from 'moment';
 import Modal from '../../common/Modal';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useRouteMatch } from 'react-router-dom';
 import palette from '../../../theme/palette';
 import { setIsOpenModalBeforeExit, setSelectedSnapshotToSwitch, setSharedSnapshot } from '../../snapshot/redux/actions';
-import { NglContext } from '../../nglView/nglProvider';
+import Gallery from 'react-grid-gallery';
 
 const useStyles = makeStyles(theme => ({
   drawer: {
@@ -72,46 +71,67 @@ const options = {
 export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
   const [open, setOpen] = React.useState(false);
   const classes = useStyles();
-  let history = useHistory();
-  let match = useRouteMatch();
-  const { nglViewList } = useContext(NglContext);
   const dispatch = useDispatch();
-  const projectID = match && match.params && match.params.projectId;
   const currentProjectID = useSelector(state => state.projectReducers.currentProject.projectID);
   const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
   const currentSnapshotList = useSelector(state => state.projectReducers.currentSnapshotList);
   const currentSnapshotTree = useSelector(state => state.projectReducers.currentSnapshotTree);
   const isLoadingTree = useSelector(state => state.projectReducers.isLoadingTree);
+  const currentSnapshotImageList = useSelector(state => state.trackingReducers.snapshotActionImageList);
 
   const handleClickOnCommit = commit => {
     dispatch(setSelectedSnapshotToSwitch(commit.hash));
     dispatch(setIsOpenModalBeforeExit(true));
   };
 
-  const commitFunction = ({ title, description, photo, author, email, hash, isSelected, created }) => ({
+  const commitFunction = ({ title, description, photo, author, email, hash, isSelected, created, images }) => ({
     hash: `${hash}`,
     subject: `${title}`,
     body: (
       <>
-        {/*<img src={require('../../../img/xchemLogo.png')} className={classes.thumbnail} onClick={() => setOpen(true)} />*/}
-        {/*<IconButton>*/}
-        {/*  <Delete />*/}
-        {/*</IconButton>*/}
-        {/*<br />*/}
-        <Typography variant="caption">
-          <b>{`${moment(created).format('LLL')}, ${email}: `}</b>
-          {description}
-        </Typography>
-        <IconButton
-          disabled={!currentProjectID || !hash}
-          onClick={() => {
-            dispatch(
-              setSharedSnapshot({ title, description, url: `${base_url}${URLS.projects}${currentProjectID}/${hash}` })
-            );
-          }}
-        >
-          <Share />
-        </IconButton>
+        <Grid container justify="flex-start" direction="row" alignItems="center" className={classes.title}>
+          {
+            <Box xs={6} flexShrink={1} className={classes.titleMargin}>
+              {/*<img src={require('../../../img/xchemLogo.png')} className={classes.thumbnail} onClick={() => setOpen(true)} />*/}
+              {/*<IconButton>*/}
+              {/*  <Delete />*/}
+              {/*</IconButton>*/}
+              {/*<br />*/}
+              <Typography variant="caption">
+                <b>{`${moment(created).format('LLL')}, ${email}: `}</b>
+                {description}
+              </Typography>
+            </Box>
+          }
+          {
+            <IconButton
+              disabled={!currentProjectID || !hash}
+              onClick={() => {
+                dispatch(
+                  setSharedSnapshot({
+                    title,
+                    description,
+                    url: `${base_url}${URLS.projects}${currentProjectID}/${hash}`
+                  })
+                );
+              }}
+            >
+              <Share />
+            </IconButton>
+          }
+          {
+            <Grid item xs={2}>
+              <Gallery
+                images={images}
+                enableImageSelection={false}
+                backdropClosesModal={true}
+                showImageCount={false}
+                lightboxWidth={2048}
+                rowHeight={30}
+              />
+            </Grid>
+          }
+        </Grid>
       </>
     ),
     onMessageClick: handleClickOnCommit,
@@ -128,6 +148,20 @@ export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
         name: node.title
       });
 
+      let currentSnapshotImage = currentSnapshotImageList.find(i => i.id === node.id);
+      const nodeImages =
+        currentSnapshotImage != null
+          ? [
+              {
+                src: currentSnapshotImage.image,
+                thumbnail: currentSnapshotImage.image,
+                thumbnailWidth: 0,
+                thumbnailHeight: 0,
+                caption: currentSnapshotImage.title
+              }
+            ]
+          : [];
+
       newBranch.commit(
         commitFunction({
           title: node.title || '',
@@ -136,7 +170,8 @@ export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
           email: (node.author && node.author.email) || '',
           hash: node.id,
           isSelected: currentSnapshotID === node.id,
-          created: node.created
+          created: node.created,
+          images: nodeImages
         })
       );
 
@@ -150,6 +185,20 @@ export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
     setShowHistory(false);
   };
 
+  let image = currentSnapshotTree != null ? currentSnapshotImageList.find(i => i.id === currentSnapshotTree.id) : null;
+  const images =
+    image != null
+      ? [
+          {
+            src: image.image,
+            thumbnail: image.image,
+            thumbnailWidth: 0,
+            thumbnailHeight: 0,
+            caption: image.title
+          }
+        ]
+      : [];
+
   return (
     <>
       <Drawer anchor="bottom" open={showHistory} onClose={handleCloseHistory}>
@@ -187,7 +236,8 @@ export const ProjectDetailDrawer = memo(({ showHistory, setShowHistory }) => {
                         email: (currentSnapshotTree.author && currentSnapshotTree.author.email) || '',
                         hash: currentSnapshotTree.id,
                         isSelected: currentSnapshotID === currentSnapshotTree.id,
-                        created: currentSnapshotTree.created
+                        created: currentSnapshotTree.created,
+                        images
                       })
                     );
 

diff --git a/js/components/projects/redux/dispatchActions.js b/js/components/projects/redux/dispatchActions.js
@@ -393,10 +393,9 @@ export const createProjectFromScratch = ({ title, description, target, author, t
     });
 };
 
-export const createProjectWithoutStateModification = data => dispatch => {
-  return api({ url: `${base_url}/api/session-projects/`, method: METHOD.POST, data }).then(response => {
-    return response.data.id;
-  });
+export const createProjectWithoutStateModification = data => async () => {
+  const response = await api({ url: `${base_url}/api/session-projects/`, method: METHOD.POST, data });
+  return response.data.id;
 };
 
 export const createInitSnapshotToProjectWitActions = (session_project, author, parent, target) => (

diff --git a/js/components/snapshot/redux/dispatchActions.js b/js/components/snapshot/redux/dispatchActions.js
@@ -335,15 +335,15 @@ export const createNewSnapshotWithoutStateModification = ({
   });
 };
 
-export const saveAndShareSnapshot = nglViewList => (dispatch, getState) => {
+export const saveAndShareSnapshot = nglViewList => async (dispatch, getState) => {
   const state = getState();
   const targetId = state.apiReducers.target_on;
   const loggedInUserID = DJANGO_CONTEXT['pk'];
 
-  dispatch(captureScreenOfSnapshot());
   dispatch(setDisableRedirect(true));
 
   if (targetId) {
+    dispatch(captureScreenOfSnapshot());
     dispatch(setIsLoadingSnapshotDialog(true));
     const data = {
       title: ProjectCreationType.READ_ONLY,
@@ -353,36 +353,34 @@ export const saveAndShareSnapshot = nglViewList => (dispatch, getState) => {
       tags: '[]'
     };
 
-    dispatch(createProjectWithoutStateModification(data))
-      .then(projectID => {
-        const username = DJANGO_CONTEXT['username'];
-        const title = moment().format('-- YYYY-MM-DD -- HH:mm:ss');
-        const description =
-          loggedInUserID === undefined ? 'Snapshot generated by anonymous user' : `snapshot generated by ${username}`;
-        const type = SnapshotType.MANUAL;
-        const author = loggedInUserID || null;
-        const parent = null;
-        const session_project = projectID;
-
-        dispatch(sendTrackingActionsByProjectId(projectID, author));
-
-        return dispatch(
-          createNewSnapshotWithoutStateModification({
-            title,
-            description,
-            type,
-            author,
-            parent,
-            session_project,
-            nglViewList
-          })
-        );
-      })
-      .catch(error => {
-        throw new Error(error);
-      })
-      .finally(() => {
-        dispatch(setIsLoadingSnapshotDialog(false));
-      });
+    try {
+      let projectID = await dispatch(createProjectWithoutStateModification(data));
+      const username = DJANGO_CONTEXT['username'];
+      const title = moment().format('-- YYYY-MM-DD -- HH:mm:ss');
+      const description =
+        loggedInUserID === undefined ? 'Snapshot generated by anonymous user' : `snapshot generated by ${username}`;
+      const type = SnapshotType.MANUAL;
+      const author = loggedInUserID || null;
+      const parent = null;
+      const session_project = projectID;
+
+      await dispatch(sendTrackingActionsByProjectId(projectID, author));
+
+      await dispatch(
+        createNewSnapshotWithoutStateModification({
+          title,
+          description,
+          type,
+          author,
+          parent,
+          session_project,
+          nglViewList
+        })
+      );
+
+      dispatch(setIsLoadingSnapshotDialog(false));
+    } catch (error) {
+      throw new Error(error);
+    }
   }
 };
diff --git a/js/components/tracking/timelineView.js b/js/components/tracking/timelineView.js
@@ -141,7 +141,7 @@ const TimelineView = memo(({ data, index }) => {
     dispatch(updateTrackingActions(data));
   };
 
-  const IMAGES = [
+  const images = [
     {
       src: data.image,
       thumbnail: data.image,
@@ -169,7 +169,7 @@ const TimelineView = memo(({ data, index }) => {
             {
               <Grid item xs={2}>
                 <Gallery
-                  images={IMAGES}
+                  images={images}
                   enableImageSelection={false}
                   backdropClosesModal={true}
                   showImageCount={false}

diff --git a/js/reducers/tracking/actions.js b/js/reducers/tracking/actions.js
@@ -84,6 +84,13 @@ export const setProjectActionList = function(project_actions_list) {
   };
 };
 
+export const setSnapshotImageActionList = function(snapshotActionImageList) {
+  return {
+    type: constants.SET_SNAPSOT_IMAGE_ACTIONS_LIST,
+    snapshotActionImageList: snapshotActionImageList
+  };
+};
+
 export const setIsActionsSaving = function(isActionSaving) {
   return {
     type: constants.SET_IS_ACTIONS_SAVING,

diff --git a/js/reducers/tracking/constants.js b/js/reducers/tracking/constants.js
@@ -16,7 +16,8 @@ export const constants = {
   SET_IS_ACTIONS_SAVING: prefix + 'SET_IS_ACTIONS_SAVING',
   SET_IS_ACTIONS_RESTORING: prefix + 'SET_IS_ACTIONS_RESTORING',
   RESET_TRACKING_STATE: prefix + 'RESET_TRACKING_STATE',
-  SET_TRACKING_IMAGE_SOURCE: prefix + 'SET_TRACKING_IMAGE_SOURCE'
+  SET_TRACKING_IMAGE_SOURCE: prefix + 'SET_TRACKING_IMAGE_SOURCE',
+  SET_SNAPSOT_IMAGE_ACTIONS_LIST: prefix + 'SET_SNAPSOT_IMAGE_ACTIONS_LIST'
 };
 
 export const actionType = {