#14 enable to open project

m2ms · Mar 19, 2020 · 6769ca4 · 6769ca4
1 parent 828a1e6
commit 6769ca4
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 62 deletions.
diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js
@@ -15,7 +15,7 @@ import { resetCurrentCompoundsSettings } from '../preview/compounds/redux/action
 import { resetProjectsReducer } from '../projects/redux/actions';
 
 const Landing = memo(
-  ({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings, resetProjectsReducer, history }) => {
+  ({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings, resetProjectsReducer }) => {
     const { setSnackBarTitle } = useContext(HeaderContext);
     const [loginText, setLoginText] = useState("You're logged in as " + DJANGO_CONTEXT['username']);
 
@@ -54,7 +54,7 @@ const Landing = memo(
         </Grid>
         <Grid item xs={8}>
           {/*<SessionList />*/}
-          <Projects history={history} />
+          <Projects />
         </Grid>
       </Grid>
     );

diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js
@@ -63,7 +63,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const Preview = memo(({ isStateLoaded, headerHeight, match }) => {
+const Preview = memo(({ isStateLoaded, headerHeight }) => {
   const classes = useStyles();
   const theme = useTheme();
 
@@ -153,7 +153,7 @@ const Preview = memo(({ isStateLoaded, headerHeight, match }) => {
       </Grid>
       <ModalStateSave />
       <ProjectDetailDrawer showHistory={showHistory} setShowHistory={setShowHistory} />
-      <NewSnapshotModal match={match} />
+      <NewSnapshotModal />
     </>
   );
 });

diff --git a/js/components/preview/withLoadingProtein.js b/js/components/preview/withLoadingProtein.js
@@ -5,18 +5,20 @@ import React, { memo, useContext, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { NglContext } from '../nglView/nglProvider';
 import { shouldLoadProtein } from './redux/dispatchActions';
+import { useRouteMatch } from 'react-router-dom';
 
 // is responsible for loading molecules list
 export const withLoadingProtein = WrappedComponent => {
-  const ProteinLoader = memo(({ isStateLoaded, shouldLoadProtein, match, ...rest }) => {
+  const ProteinLoader = memo(({ isStateLoaded, shouldLoadProtein, ...rest }) => {
     const { nglViewList } = useContext(NglContext);
+    let match = useRouteMatch();
     const projectId = match && match.params && match.params.projectId;
 
     useEffect(() => {
       shouldLoadProtein(nglViewList, isStateLoaded, projectId);
     }, [isStateLoaded, nglViewList, projectId, shouldLoadProtein]);
 
-    return <WrappedComponent isStateLoaded={isStateLoaded} {...rest} match={match} />;
+    return <WrappedComponent isStateLoaded={isStateLoaded} {...rest} />;
   });
 
   function mapStateToProps(state) {

diff --git a/js/components/projects/index.js b/js/components/projects/index.js
@@ -35,7 +35,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export const Projects = memo(({ history }) => {
+export const Projects = memo(({}) => {
   const classes = useStyles();
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
@@ -146,7 +146,7 @@ export const Projects = memo(({ history }) => {
           </TableFooter>
         </Table>
       </Panel>
-      <ProjectModal history={history} />
+      <ProjectModal />
     </>
   );
 });
diff --git a/js/components/projects/projectModal/index.js b/js/components/projects/projectModal/index.js
@@ -15,6 +15,7 @@ import {
 } from '@material-ui/core';
 import { Title, Description, Label, Link } from '@material-ui/icons';
 import { Autocomplete } from '@material-ui/lab';
+import { useHistory } from 'react-router-dom';
 import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
 import { InputFieldAvatar } from './inputFieldAvatar';
 import { ProjectCreationType } from '../redux/constants';
@@ -42,9 +43,10 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export const ProjectModal = memo(({ history }) => {
+export const ProjectModal = memo(({}) => {
   const classes = useStyles();
   const [state, setState] = useState();
+  let history = useHistory();
 
   const dispatch = useDispatch();
   const isProjectModalOpen = useSelector(state => state.projectReducers.isProjectModalOpen);
@@ -99,12 +101,12 @@ export const ProjectModal = memo(({ history }) => {
             .then(response => {
               const projectID = response.data.id;
               const title = response.data.title;
-              const author = response.data.author;
+              const authorID = response.data.author;
               const description = response.data.description;
-              const targetId = response.data.target;
+              const targetID = response.data.target;
               const tags = response.data.tags;
 
-              dispatch(setCurrentProject({ projectID, author, title, description, targetId, tags }));
+              dispatch(setCurrentProject({ projectID, authorID, title, description, targetID, tags }));
               // create project_target relationShip on BE
               history.push(`${URLS.projects}${projectID}`);
             })

diff --git a/js/components/projects/redux/actions.js b/js/components/projects/redux/actions.js
@@ -1,8 +1,8 @@
 import { constants } from './constants';
 
-export const setCurrentProject = ({ projectID, author, title, description, targetId, tags, type }) => ({
+export const setCurrentProject = ({ projectID, authorID, title, description, targetID, tags, type }) => ({
   type: constants.SET_CURRENT_PROJECT,
-  payload: { projectID, author, title, description, targetId, tags, type }
+  payload: { projectID, authorID, title, description, targetID, tags, type }
 });
 export const setCurrentProjectProperty = (key, value) => ({
   type: constants.SET_CURRENT_PROJECT_PROPERTY,

diff --git a/js/components/projects/redux/reducer.js b/js/components/projects/redux/reducer.js
@@ -2,11 +2,11 @@ import { constants } from './constants';
 
 export const INITIAL_STATE = {
   currentProject: {
-    projectID: null, // TODO change to null
-    author: null,
+    projectID: null,
+    authorID: null,
     title: null,
     description: null,
-    targetId: null, //TODO change to null,
+    targetID: null,
     tags: [],
     type: null
   },

diff --git a/js/components/routes/Routes.js b/js/components/routes/Routes.js
@@ -50,7 +50,7 @@ const Routes = memo(() => {
             exact
             path={`${URLS.projects}:projectId`}
             render={routeProps => (
-              <Preview headerHeight={headerHeight} isStateLoaded={snapshot !== null} {...routeProps} />
+              <Preview isStateLoaded={snapshot !== null} headerHeight={headerHeight} {...routeProps} />
             )}
           />
           <Route exact path={URLS.management} component={Management} />

diff --git a/js/components/snapshot/modals/newSnapshotModal.js b/js/components/snapshot/modals/newSnapshotModal.js
@@ -4,12 +4,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setOpenSnapshotSavingDialog } from '../redux/actions';
 import { Typography } from '@material-ui/core';
 import { AddProjectDetail } from '../../projects/addProjectDetail';
+import { useRouteMatch } from 'react-router-dom';
 
-export const NewSnapshotModal = memo(({ match }) => {
+export const NewSnapshotModal = memo(({}) => {
   const dispatch = useDispatch();
   const openSavingDialog = useSelector(state => state.snapshotReducers.openSavingDialog);
   const dialogCurrentStep = useSelector(state => state.snapshotReducers.dialogCurrentStep);
   const currectProject = useSelector(state => state.projectReducers.currentProject);
+  let match = useRouteMatch();
 
   const projectId = (match && match.params && match.params.projectId) || (currectProject && currectProject.projectID);
 

diff --git a/js/components/snapshot/withSnapshotManagement.js b/js/components/snapshot/withSnapshotManagement.js
@@ -8,15 +8,16 @@ import { NglContext } from '../nglView/nglProvider';
 import { HeaderContext } from '../header/headerContext';
 import { setTargetAndReloadSession, reloadScene } from './redux/dispatchActions';
 import { setOpenSnapshotSavingDialog } from './redux/actions';
+import { useRouteMatch } from 'react-router-dom';
 
 /**
  * Created by ricgillams on 13/06/2018.
  */
 
 export const withSnapshotManagement = WrappedComponent => {
-  return memo(({ match, ...rest }) => {
+  return memo(({ ...rest }) => {
     const [state, setState] = useState();
-
+    let match = useRouteMatch();
     const { pathname } = window.location;
     const { nglViewList } = useContext(NglContext);
     const { setHeaderNavbarTitle, setHeaderButtons, setSnackBarTitle, setSnackBarColor } = useContext(HeaderContext);
@@ -90,6 +91,6 @@ export const withSnapshotManagement = WrappedComponent => {
       projectId
     ]);
 
-    return <WrappedComponent {...rest} match={match} />;
+    return <WrappedComponent {...rest} />;
   });
 };
diff --git a/js/components/target/redux/dispatchActions.js b/js/components/target/redux/dispatchActions.js
@@ -10,6 +10,8 @@ import {
 import { setOldUrl } from './actions';
 import { api } from '../../../utils/api';
 import { resetSelectionState } from '../../../reducers/selection/actions';
+import { base_url } from '../../routes/constants';
+import { setCurrentProject } from '../../projects/redux/actions';
 
 export const loadTargetList = onCancel => (dispatch, getState) => {
   const oldUrl = getState().targetReducers.oldUrl;
@@ -24,7 +26,7 @@ export const loadTargetList = onCancel => (dispatch, getState) => {
   });
 };
 
-export const updateTarget = ({ notCheckTarget, target, setIsLoading, targetIdList, targetId }) => dispatch => {
+export const updateTarget = ({ notCheckTarget, target, setIsLoading, targetIdList, projectId }) => dispatch => {
   if (!notCheckTarget) {
     // Get from the REST API
     let targetUnrecognisedFlag = true;
@@ -37,29 +39,43 @@ export const updateTarget = ({ notCheckTarget, target, setIsLoading, targetIdLis
         });
       }
       dispatch(setTargetUnrecognised(targetUnrecognisedFlag));
-    } else if (targetId !== undefined) {
-      if (targetIdList && targetIdList.length > 0) {
-        targetIdList.forEach(item => {
-          if (targetId === item.id) {
-            targetUnrecognisedFlag = false;
-          }
-        });
-      }
+    } else if (projectId !== undefined) {
+      targetUnrecognisedFlag = false;
       dispatch(setTargetUnrecognised(targetUnrecognisedFlag));
     }
+    // for Targets
     if (targetUnrecognisedFlag === false) {
       setIsLoading(true);
-      let url = '';
+      let url = undefined;
       if (target) {
-        url = `${window.location.protocol}//${window.location.host}/api/targets/?title=${target}`;
-      } else if (targetId) {
-        url = `${window.location.protocol}//${window.location.host}/api/targets/?id=${targetId}`;
+        url = `${base_url}/api/targets/?title=${target}`;
+        return api({ url })
+          .then(response => {
+            return dispatch(setTargetOn(response.data['results'][0].id));
+          })
+          .finally(() => setIsLoading(false));
+      }
+      // for Projects
+      else if (projectId !== undefined) {
+        setIsLoading(true);
+        return api({ url: `${base_url}/api/session-projects/${projectId}/` })
+          .then(response => {
+            return Promise.all([
+              dispatch(setTargetOn(response.data.target.id)),
+              dispatch(
+                setCurrentProject({
+                  projectID: response.data.id,
+                  authorID: response.data.author.id,
+                  title: response.data.title,
+                  description: response.data.description,
+                  targetID: response.data.target.id,
+                  tags: JSON.parse(response.data.tags)
+                })
+              )
+            ]);
+          })
+          .finally(() => setIsLoading(false));
       }
-      return api({ url })
-        .then(response => {
-          return dispatch(setTargetOn(response.data['results'][0].id));
-        })
-        .finally(() => setIsLoading(false));
     }
   }
   return Promise.resolve();

diff --git a/js/components/target/withUpdatingTarget.js b/js/components/target/withUpdatingTarget.js
@@ -3,24 +3,26 @@ import { connect } from 'react-redux';
 import { HeaderContext } from '../header/headerContext';
 import HandleUnrecognisedTarget from './handleUnrecognisedTarget';
 import { updateTarget, setTargetUUIDs, resetTargetAndSelection } from './redux/dispatchActions';
+import { useRouteMatch } from 'react-router-dom';
 
 export const withUpdatingTarget = WrappedContainer => {
   const UpdateTarget = memo(
     ({
-      match,
       target_on,
       resetSelection,
       notCheckTarget,
       updateTarget,
       setTargetUUIDs,
       resetTargetAndSelection,
       targetIdList,
-      targetId,
       ...rest
     }) => {
+      let match = useRouteMatch();
+
       const target = match && match.params && match.params.target;
-      const uuid = targetId !== null ? targetId : match && match.params && match.params.uuid;
+      const uuid = match && match.params && match.params.uuid;
       const snapshotUuid = match && match.params && match.params.snapshotUuid;
+      const projectId = match && match.params && match.params.projectId;
 
       const { isLoading, setIsLoading } = useContext(HeaderContext);
       const [state, setState] = useState();
@@ -34,28 +36,27 @@ export const withUpdatingTarget = WrappedContainer => {
       }, [setTargetUUIDs, snapshotUuid, uuid]);
 
       useEffect(() => {
-        updateTarget({ notCheckTarget, target, targetId, setIsLoading, targetIdList }).catch(error => {
+        updateTarget({ notCheckTarget, target, setIsLoading, targetIdList, projectId }).catch(error => {
           setState(() => {
             throw error;
           });
         });
-      }, [notCheckTarget, setIsLoading, target, updateTarget, targetIdList, targetId]);
+      }, [notCheckTarget, setIsLoading, target, updateTarget, targetIdList, projectId]);
 
       if (isLoading === true) {
         return null;
       } else if (target_on === undefined) {
         return <HandleUnrecognisedTarget />;
       } else {
-        return <WrappedContainer {...rest} match={match} />;
+        return <WrappedContainer {...rest} />;
       }
     }
   );
 
   function mapStateToProps(state) {
     return {
       target_on: state.apiReducers.target_on,
-      targetIdList: state.apiReducers.target_id_list,
-      targetId: state.projectReducers.currentProject.targetId
+      targetIdList: state.apiReducers.target_id_list
     };
   }
   const mapDispatchToProps = {

diff --git a/js/reducers/api/apiReducers.js b/js/reducers/api/apiReducers.js
@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
   latestSession: undefined,
   latestSnapshot: undefined,
   targetUnrecognised: undefined,
-  uuid: savingStateConst.UNSET,
+  uuid: savingStateConst.UNSET, // used only for reloading from scene
   sessionId: undefined,
   sessionIdList: [],
   sessionTitle: undefined,