From 1d1da571f27f5c87f528604742641ee439c4081a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1na=20Kohanov=C3=A1?= Date: Wed, 16 Dec 2020 07:30:41 +0100 Subject: [PATCH] #469 Make ideas/actions pretty and recognisable --- .../projects/projectDetailDrawer/index.js | 110 +++++++++++++----- .../projects/redux/dispatchActions.js | 7 +- .../snapshot/redux/dispatchActions.js | 64 +++++----- js/components/tracking/timelineView.js | 4 +- js/reducers/tracking/actions.js | 7 ++ js/reducers/tracking/constants.js | 3 +- js/reducers/tracking/dispatchActions.js | 50 +++++--- js/reducers/tracking/trackingReducers.js | 6 + 8 files changed, 166 insertions(+), 85 deletions(-) diff --git a/js/components/projects/projectDetailDrawer/index.js b/js/components/projects/projectDetailDrawer/index.js index 7408b9bbd..6a07bb64d 100644 --- 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: ( <> - {/* setOpen(true)} />*/} - {/**/} - {/* */} - {/**/} - {/*
*/} - - {`${moment(created).format('LLL')}, ${email}: `} - {description} - - { - dispatch( - setSharedSnapshot({ title, description, url: `${base_url}${URLS.projects}${currentProjectID}/${hash}` }) - ); - }} - > - - + + { + + {/* setOpen(true)} />*/} + {/**/} + {/* */} + {/**/} + {/*
*/} + + {`${moment(created).format('LLL')}, ${email}: `} + {description} + + + } + { + { + dispatch( + setSharedSnapshot({ + title, + description, + url: `${base_url}${URLS.projects}${currentProjectID}/${hash}` + }) + ); + }} + > + + + } + { + + + + } + ), 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 ( <> @@ -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 index bb1eb5133..34ed6b19d 100644 --- 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 index aa6360f65..cc1641922 100644 --- 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 index 533bdcef4..18036eed2 100644 --- 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 }) => { { async (d currentActions.push(Object.assign({ ...trackAction })); } - await dispatch(saveSnapshotAction(snapshot, project)); + await dispatch(saveSnapshotAction(snapshot, project, currentActions)); + await dispatch(saveTrackingActions(currentActions, snapshotID)); dispatch(setCurrentActionsList(currentActions)); - dispatch(saveTrackingActions(currentActions, snapshotID)); } }; -const saveSnapshotAction = (snapshot, project) => async (dispatch, getState) => { +const saveSnapshotAction = (snapshot, project, currentActions) => async (dispatch, getState) => { const state = getState(); const trackingImageSource = state.trackingReducers.trackingImageSource; @@ -265,10 +271,11 @@ const saveSnapshotAction = (snapshot, project) => async (dispatch, getState) => image: trackingImageSource }; sendActions.push(snapshotAction); + currentActions.push(snapshotAction); await dispatch(sendTrackingActions(sendActions, project)); }; -export const saveTrackingActions = (currentActions, snapshotID) => (dispatch, getState) => { +export const saveTrackingActions = (currentActions, snapshotID) => async (dispatch, getState) => { const state = getState(); const project = state.projectReducers.currentProject; const projectID = project && project.projectID; @@ -470,6 +477,7 @@ export const restoreAfterTargetActions = (stages, projectId) => async (dispatch, await dispatch(loadAllDatasets(orderedActionList, targetId, majorView.stage)); await dispatch(restoreRepresentationActions(orderedActionList, stages)); await dispatch(restoreProject(projectId)); + dispatch(restoreSnapshotImageActions(projectId)); dispatch(restoreNglStateAction(orderedActionList, stages)); dispatch(setIsActionsRestoring(false, true)); } @@ -643,6 +651,18 @@ const restoreRepresentationActions = (moleculesAction, stages) => (dispatch, get } }; +const restoreSnapshotImageActions = projectID => async (dispatch, getState) => { + let actionList = await dispatch(getTrackingActions(projectID)); + + let snapshotActions = actionList.filter(action => action.type === actionType.SNAPSHOT); + if (snapshotActions) { + let actions = snapshotActions.map(s => { + return { id: s.object_id, image: s.image, title: s.object_name }; + }); + dispatch(setSnapshotImageActionList(actions)); + } +}; + const restoreProject = projectId => (dispatch, getState) => { if (projectId !== undefined) { return api({ url: `${base_url}/api/session-projects/${projectId}/` }).then(response => { @@ -1513,17 +1533,18 @@ const getTrackingActions = projectID => (dispatch, getState) => { } }; -const checkActionsProject = projectID => (dispatch, getState) => { +const checkActionsProject = projectID => async (dispatch, getState) => { const state = getState(); const currentProject = state.projectReducers.currentProject; const currentProjectID = currentProject && currentProject.projectID; - Promise.resolve(dispatch(getTrackingActions(projectID))).then(() => { - dispatch(copyActionsToProject(currentProject, true, currentProjectID && currentProjectID != null ? true : false)); - }); + await dispatch(getTrackingActions(projectID)); + await dispatch( + copyActionsToProject(currentProject, true, currentProjectID && currentProjectID != null ? true : false) + ); }; -const copyActionsToProject = (toProject, setActionList = true, clearSendList = true) => (dispatch, getState) => { +const copyActionsToProject = (toProject, setActionList = true, clearSendList = true) => async (dispatch, getState) => { const state = getState(); const actionList = state.trackingReducers.project_actions_list; @@ -1537,20 +1558,19 @@ const copyActionsToProject = (toProject, setActionList = true, clearSendList = t if (setActionList === true) { dispatch(setActionsList(newActionsList)); } - dispatch(sendTrackingActions(newActionsList, toProject, clearSendList)); + await dispatch(sendTrackingActions(newActionsList, toProject, clearSendList)); } }; -export const sendTrackingActionsByProjectId = (projectID, authorID) => (dispatch, getState) => { +export const sendTrackingActionsByProjectId = (projectID, authorID) => async (dispatch, getState) => { const state = getState(); const currentProject = state.projectReducers.currentProject; const currentProjectID = currentProject && currentProject.projectID; const project = { projectID, authorID }; - Promise.resolve(dispatch(getTrackingActions(currentProjectID))).then(() => { - dispatch(copyActionsToProject(project, false, currentProjectID && currentProjectID != null ? true : false)); - }); + await dispatch(getTrackingActions(currentProjectID)); + await dispatch(copyActionsToProject(project, false, currentProjectID && currentProjectID != null ? true : false)); }; export const sendInitTrackingActionByProjectId = target_on => (dispatch, getState) => { diff --git a/js/reducers/tracking/trackingReducers.js b/js/reducers/tracking/trackingReducers.js index 2eb50d148..1724a8e91 100644 --- a/js/reducers/tracking/trackingReducers.js +++ b/js/reducers/tracking/trackingReducers.js @@ -13,6 +13,7 @@ export const INITIAL_STATE = { isActionSaving: false, send_actions_list: [], project_actions_list: [], + snapshotActionImageList: [], isActionRestoring: false, isActionRestored: false, trackingImageSource: '' @@ -80,6 +81,11 @@ export function trackingReducers(state = INITIAL_STATE, action = {}) { project_actions_list: action.project_actions_list }); + case constants.SET_SNAPSOT_IMAGE_ACTIONS_LIST: + return Object.assign({}, state, { + snapshotActionImageList: action.snapshotActionImageList + }); + case constants.SET_IS_ACTIONS_SAVING: return Object.assign({}, state, { isActionSaving: action.isActionSaving