From 5de4e280386a76f4f517e598ad4c72652355aa59 Mon Sep 17 00:00:00 2001 From: Tibor Postek Date: Wed, 18 Mar 2020 16:13:20 +0100 Subject: [PATCH] #14 load projects into table --- js/components/projects/index.js | 96 ++++++------------- js/components/projects/redux/actions.js | 5 + js/components/projects/redux/constants.js | 3 +- .../projects/redux/dispatchActions.js | 10 +- js/components/projects/redux/reducer.js | 6 +- package.json | 2 +- 6 files changed, 50 insertions(+), 72 deletions(-) diff --git a/js/components/projects/index.js b/js/components/projects/index.js index 4ba5c20b1..2dd520fcd 100644 --- a/js/components/projects/index.js +++ b/js/components/projects/index.js @@ -1,4 +1,4 @@ -import React, { memo } from 'react'; +import React, { memo, useEffect } from 'react'; import { Panel } from '../common/Surfaces/Panel'; import { Table, @@ -19,8 +19,10 @@ import { Link } from 'react-router-dom'; import { URLS } from '../routes/constants'; import moment from 'moment'; import { setProjectModalOpen } from './redux/actions'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { ProjectModal } from './projectModal'; +import { loadListOfProjects } from './redux/dispatchActions'; +import { projectReducers } from './redux/reducer'; const useStyles = makeStyles(theme => ({ table: { @@ -40,6 +42,23 @@ export const Projects = memo(({ history }) => { const [rowsPerPage, setRowsPerPage] = React.useState(10); const dispatch = useDispatch(); + const listOfProjects = useSelector(state => state.projectReducers.listOfProjects).map(project => { + return { + id: project.id, + name: project.title, + tags: JSON.parse(project.tags), + target: project.target.title, + createdAt: project.init_date, + author: project.author.email + }; + }); + + useEffect(() => { + dispatch(loadListOfProjects()).catch(error => { + throw new Error(error); + }); + }, [dispatch]); + const handleChangePage = (event, newPage) => { setPage(newPage); }; @@ -49,64 +68,6 @@ export const Projects = memo(({ history }) => { setPage(0); }; - function createData(name, target, lastModification, author, id, tags) { - return { name, target, lastModification, author, id, tags }; - } - - const rows = [ - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 1, [ - 'red', - 'green', - 'blue' - ]), - createData('Cheapest molecules', 'EPB41L3A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 2, [ - 'red', - 'green', - 'blue' - ]), - createData('Apoximation of electon', 'EPB41L3A', moment().format('LLL'), 'james.smith@diamond.co.uk', 3, [ - 'red', - 'green', - 'blue' - ]), - createData('My fake project', 'EPB41L3A', moment().format('LLL'), 'jane.jackson@gmail.com', 4, []), - createData('Unique science', 'EPB41L3A', moment().format('LLL'), 'jane.jackson@gmail.com', 5, []), - createData('Cheapest molecules', 'EPB41L3A', moment().format('LLL'), 'jane.jackson@gmail.com', 7, []), - createData('Apoximation of electon', 'EPB41L3A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 8, []), - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 6, []), - createData('Unique science', 'EPB41L3A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 10, []), - createData('My fake project', 'EPB41L3A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 9, []), - createData('Best coumpounds ever', 'EPB41L3A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 11, []), - createData('Apoximation of electon', 'EPB41L3A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 18, []), - createData('Cheapest molecules', 'EPB41L3A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 12, []), - createData('My fake project', 'EPB41L3A', moment().format('LLL'), 'jane.jackson@gmail.com', 14, []), - createData('Unique science', 'EPB41L3A', moment().format('LLL'), 'jane.jackson@gmail.com', 15, []), - createData('Apoximation of electon', 'EPB41L3A', moment().format('LLL'), 'james.smith@diamond.co.uk', 13, []), - createData('Cheapest molecules', 'EPB41L3A', moment().format('LLL'), 'jane.jackson@gmail.com', 17, []), - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 16, []), - createData('Unique science', 'EPB41L3A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 20, []), - createData('My fake project', 'EPB41L3A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 19, []), - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 21, []), - createData('Apoximation of electon', 'EPB41L3A', moment().format('LLL'), 'james.smith@diamond.co.uk', 23, []), - createData('Cheapest molecules', 'EPB41L3A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 22, []), - createData('Unique science', 'CAMK1DA', moment().format('LLL'), 'jane.jackson@gmail.com', 25, []), - createData('My fake project', 'XX02KALRNA', moment().format('LLL'), 'jane.jackson@gmail.com', 24, []), - createData('Cheapest molecules', 'ATAD', moment().format('LLL'), 'jane.jackson@gmail.com', 27, []), - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 26, []), - createData('Apoximation of electon', 'NUDT4A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 28, []), - createData('Unique science', 'CAMK1DA', moment().format('LLL'), 'tibor.postek@m2ms.sk', 30, []), - createData('My fake project', 'XX02KALRNA', moment().format('LLL'), 'tibor.postek@m2ms.sk', 29, []), - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 36, []), - createData('Cheapest molecules', 'ATAD', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 32, []), - createData('Apoximation of electon', 'NUDT4A', moment().format('LLL'), 'james.smith@diamond.co.uk', 33, []), - createData('My fake project', 'XX02KALRNA', moment().format('LLL'), 'jane.jackson@gmail.com', 34, []), - createData('Unique science', 'CAMK1DA', moment().format('LLL'), 'jane.jackson@gmail.com', 35, []), - createData('Cheapest molecules', 'ATAD', moment().format('LLL'), 'jane.jackson@gmail.com', 37, []), - createData('Best coumpounds ever', 'NUDT5A', moment().format('LLL'), 'tibor.postek@m2ms.sk', 31, []), - createData('Apoximation of electon', 'NUDT4A', moment().format('LLL'), 'pavol.brunclik@m2ms.sk', 38, []), - createData('Unique science', 'CAMK1DA', moment().format('LLL'), 'tibor.postek@m2ms.sk', 40, []), - createData('My fake project', 'XX02KALRNA', moment().format('LLL'), 'tibor.postek@m2ms.sk', 39, []) - ]; return ( <> { Target Tags Author - Last modification + Created at Actions - {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(project => ( + {listOfProjects.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(project => ( {project.name} @@ -153,12 +114,13 @@ export const Projects = memo(({ history }) => { {project.target} - {project.tags.map((tag, index) => ( - - ))} + {project.tags && + project.tags.map((tag, index) => ( + + ))} {project.author} - {project.lastModification} + {project.createdAt} @@ -171,7 +133,7 @@ export const Projects = memo(({ history }) => { ({ }); export const resetProjectsReducer = () => ({ type: constants.RESET_PROJECTS_REDUCER }); + +export const setListOfProjects = projects => ({ + type: constants.SET_LIST_OF_PROJECTS, + payload: projects +}); diff --git a/js/components/projects/redux/constants.js b/js/components/projects/redux/constants.js index 4c3576915..67d97a795 100644 --- a/js/components/projects/redux/constants.js +++ b/js/components/projects/redux/constants.js @@ -8,7 +8,8 @@ export const constants = { SET_PROJECT_MODAL_IS_LOADING: prefix + 'SET_PROJECT_MODAL_IS_LOADING', SET_SNAPSHOT: prefix + 'SET_SNAPSHOT', - RESET_PROJECTS_REDUCER: prefix + 'RESET_PROJECTS_REDUCER' + RESET_PROJECTS_REDUCER: prefix + 'RESET_PROJECTS_REDUCER', + SET_LIST_OF_PROJECTS: prefix + 'SET_LIST_OF_PROJECTS' }; export const ProjectCreationType = { diff --git a/js/components/projects/redux/dispatchActions.js b/js/components/projects/redux/dispatchActions.js index cc0ad06f0..c0e5e9f62 100644 --- a/js/components/projects/redux/dispatchActions.js +++ b/js/components/projects/redux/dispatchActions.js @@ -1,4 +1,4 @@ -import { setProjectSnapshot } from './actions'; +import { setListOfProjects, setProjectSnapshot } from './actions'; import { api } from '../../../utils/api'; import { base_url } from '../../routes/constants'; import { reloadNglViewFromSnapshot } from '../../../reducers/ngl/dispatchActions'; @@ -9,10 +9,16 @@ export const saveCurrentSnapshot = (snapshot, snapshotDetail) => (dispatch, getS export const storeSnapshotToProject = (snapshot, snapshotDetail, projectId) => (dispatch, getState) => { // TODO store snapshot to BE - return api({ url: `${base_url}/api/project/${projectId}`, data: { snapshot, snapshotDetail } }); + return api({ url: `${base_url}/api/session-projects/${projectId}`, data: { snapshot, snapshotDetail } }); }; export const loadProjectFromSnapshot = (stage, stageId, snapshotData) => (dispatch, getState) => { dispatch(reloadNglViewFromSnapshot(stage, stageId, snapshotData)); dispatch(setProjectSnapshot(snapshotData.snapshot, snapshotData.snapshotDetail)); }; + +export const loadListOfProjects = () => (dispatch, getState) => { + return api({ url: `${base_url}/api/session-projects/` }).then(response => + dispatch(setListOfProjects((response && response.data && response.data.results) || [])) + ); +}; diff --git a/js/components/projects/redux/reducer.js b/js/components/projects/redux/reducer.js index 6fdb76dff..fafc2ceff 100644 --- a/js/components/projects/redux/reducer.js +++ b/js/components/projects/redux/reducer.js @@ -20,7 +20,8 @@ export const INITIAL_STATE = { created: null }, isProjectModalOpen: false, - isProjectModalLoading: false + isProjectModalLoading: false, + listOfProjects: [] }; export const projectReducers = (state = INITIAL_STATE, action = {}) => { @@ -52,6 +53,9 @@ export const projectReducers = (state = INITIAL_STATE, action = {}) => { snapshotDetail: action.payload.snapshotDetail }); + case constants.SET_LIST_OF_PROJECTS: + return Object.assign({}, state, { listOfProjects: action.payload }); + case constants.RESET_PROJECTS_REDUCER: return Object.assign({}, INITIAL_STATE); diff --git a/package.json b/package.json index b45e0bc75..c66593e02 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fragalysis-frontend", - "version": "0.3.0", + "version": "0.3.1", "description": "Frontend for fragalysis", "main": "webpack.config.js", "scripts": {