Merge pull request #331 from KPMP/develop

Release v2.8.3

src/App.js

@@ -17,7 +17,7 @@ import NavFooter from "./components/Nav/NavFooter";
 import ErrorBoundaryContainer from "./components/Error/ErrorBoundaryContainer";
 import { applyRouteClass } from './helpers/routeClassUtil';
 import detectIEAndNotify from './helpers/detectBrowser';
-import SessionTimeoutModalContainer from './components/SessionTimeout/SessionTimeoutModalContainer';
+//import SessionTimeoutModalContainer from './components/SessionTimeout/SessionTimeoutModalContainer';
 import DowntimeNotice from './components/DowntimeNotice/DowntimeNotice';
 
 const cacheStore = window.sessionStorage.getItem("redux-store");

src/actions/Packages/packageActions.js

@@ -6,40 +6,43 @@ import { getDTDByVersion } from '../dtdActions';
 
 const api = Api.getInstance();
 
-export const getPackages = () => {
-	return (dispatch) => {
-		api.get('/api/v1/packages')
+export const getPackagesStateless = () => {
+		return api.get('/api/v1/packages')
 			.then(res => {
-				dispatch(setPackages(res.data));
-				let versions = [];
-				res.data.forEach(function(packageItem) {
-					if (!versions.includes(packageItem.packageInfo.version)) {
-						versions.push(packageItem.packageInfo.version);
-					}
-				});
-				versions.forEach(function(version) {
-					dispatch(getDTDByVersion(version));
-				});
+				return res.data
 			})
 			.catch(err => {
-				dispatch(sendMessageToBackend(err));
+				console.log(err)
 			});
-	};
 };
 
-export const setPackages = (packages) => {
-	return {
-		type: actionNames.SET_PACKAGES,
-		payload: packages
-	}
-}
+export const setDtds = (packages) => {
+	return (dispatch) => {
+		let versions = [];
+		packages.forEach(function(packageItem) {
+		if (!versions.includes(packageItem.packageInfo.version)) {
+			versions.push(packageItem.packageInfo.version);
+		}
+		});
+		versions.forEach(function(version) {
+			dispatch(getDTDByVersion(version));
+		});
+	};
+};
 
 export const setIsUploading = (isUploading) => {
 	return {
 		type: actionNames.SET_IS_UPLOADING,
 		payload: isUploading
 	}
-}
+};
+
+export const setRefreshPackages = (refreshPackages) => {
+	return {
+		type: actionNames.SET_REFRESH_PACKAGES,
+		payload: refreshPackages
+	}
+};
 
 export const finishPackage = (packageId) => {
 	return (dispatch) => {

src/actions/actionNames.js

@@ -12,6 +12,7 @@ const actionNames = {
 	SET_STATE_DISPLAY_MAP: 'SET_STATE_DISPLAY_MAP',
 	SET_TIS_NAMES: 'SET_TIS_NAMES',
 	SET_USERS: 'SET_USERS',
+	SET_REFRESH_PACKAGES: 'SET_REFRESH_PACKAGES',
 	SET_USER_INFORMATION: 'SET_USER_INFORMATION',
 	SET_SHOW_LARGE_FILE_MODAL: 'SET_SHOW_LARGE_FILE_MODAL',
 	CLEAR_SHOW_LARGE_FILE_MODAL: 'CLEAR_SHOW_LARGE_FILE_MODAL',

src/actions/stateActions.js

@@ -1,6 +1,6 @@
 import Api from '../helpers/Api';
-import { getPackages } from './Packages/packageActions';
 import { sendMessageToBackend } from './Error/errorActions';
+import { setRefreshPackages } from "./Packages/packageActions";
 import actionNames from './actionNames';	
 
 const api = Api.getInstance();
@@ -11,9 +11,8 @@ export const getStateEvents = (callback) => {
 			.then((data) => {
 				// timeout: true will be sent by server if the server times out before the client
 				if(!data.data.hasOwnProperty('timeout')) {
-                    dispatch(getPackages());
+                    dispatch(setRefreshPackages(true));
                 }
-
 				callback.networkRetries = 0;
 				callback();
 			})

src/components/Packages/PackageList.js

@@ -2,58 +2,80 @@ import React, { Component } from 'react';
 import PackagePanelContainer from './PackagePanelContainer';
 import {Row} from 'reactstrap';
 import PropTypes from 'prop-types';
+import { applyFilters } from "./packagePanelReducer";
+import { getPackagesStateless } from '../../actions/Packages/packageActions'
 
 class PackageList extends Component {
 
     constructor(props) {
         super(props);
-
+        this.state = {
+            packages: [],
+            unfilteredPackages: []
+        };
         this.pollIfMounted = this.pollIfMounted.bind(this);
     }
 
-    componentDidMount() {
+    async componentDidMount() {
         if(!this.isRemoteDataLoaded()) {
-            this.props.loadRemoteData();
+            await this.getPackages()
         }
-
         this._isMounted = true;
         this.pollIfMounted();
     }
 
+    async getPackages() {
+        let packages = await getPackagesStateless();
+        this.props.setDtds(packages);
+        this.setState({ packages: packages, unfilteredPackages: packages });
+    }
+
     componentWillUnmount() {
         this._isMounted = false;
     }
 
+    async componentDidUpdate(prevProps, prevState, snapShot) {
+        if (this.props !== prevProps) {
+            if (this.props.filtering !== prevProps.filtering) {
+                this.setState({packages: applyFilters(this.props.filtering.filters, this.state.unfilteredPackages, this.props.filtering.packageTypes)});
+            }
+            if (this.props.refreshPackages) {
+                await this.getPackages();
+                this.props.setRefreshPackages(false)
+            }
+        }
+    }
+
     pollIfMounted() {
         if(this._isMounted) {
             this.props.poll(this.pollIfMounted);
         }
     }
 
     isRemoteDataLoaded() {
-        return Object.keys(this.props.packages.unfiltered).length !== 0
-            && this.props.packages.unfiltered.constructor === Array;
+        return Object.keys(this.state.unfilteredPackages).length !== 0
+            && this.state.unfilteredPackages === Array;
     }
 
-    hasFilteredResults() {
-        return Object.keys(this.props.packages.filtered).length !== 0
-            && this.props.packages.filtered.constructor === Array;
+    hasNoFilteredResults() {
+        return Object.keys(this.state.unfilteredPackages).length !== 0
+            && this.state.packages.constructor === Array && Object.keys(this.state.packages).length === 0;
     }
 
     render() {
         let message = null,
             panels = [];
 
-        if (!this.isRemoteDataLoaded()) {
+        if (this.state.unfilteredPackages.length === 0) {
             message = "Loading packages...";
         }
 
-        else if (!this.hasFilteredResults()) {
+        else if (this.hasNoFilteredResults()) {
             message = "No packages returned for the selected criteria.";
         }
 
         else {
-            panels = this.props.packages.filtered.map((uploadPackage, index) => {
+            panels = this.state.packages.map((uploadPackage, index) => {
                 return <PackagePanelContainer key={index} index={index} uploadPackage={uploadPackage}/>;
             });
         }
@@ -74,8 +96,12 @@ class PackageList extends Component {
 }
 
 PackageList.propTypes = {
-    packages: PropTypes.object,
-    loadRemoteData: PropTypes.func.isRequired
-}
+    filtering: PropTypes.object,
+    setDtds: PropTypes.func,
+    poll: PropTypes.func,
+    setRefresh: PropTypes.func,
+    formDTD: PropTypes.object,
+    packageTypeIcons: PropTypes.array
+};
 
 export default PackageList;

src/components/Packages/PackageListContainer.js

@@ -1,23 +1,28 @@
 import { connect } from 'react-redux';
 import PackageList from './PackageList';
-import { getPackages } from '../../actions/Packages/packageActions';
+import { setDtds, setRefreshPackages } from '../../actions/Packages/packageActions';
 import { getStateEvents } from '../../actions/stateActions';
 
 const mapStateToProps = (state, props) =>
 ({
-	packages: state.filtering,
+	refreshPackages: state.refreshPackages,
+	filtering: state.filtering,
 	formDTD: state.formDTD,
 	packageTypeIcons: state.packageTypeIcons
 });
 
 const mapDispatchToProps = (dispatch, props) =>
 ({
-	loadRemoteData() {
-		dispatch(getPackages());
+	setDtds(packages) {
+		dispatch(setDtds(packages));
 	},
 
 	poll(callback) {
 		dispatch(getStateEvents(callback));
+	},
+
+	setRefreshPackages(refreshPackages) {
+		dispatch(setRefreshPackages(refreshPackages));
 	}
 });
 

src/components/Packages/packagePanelReducer.js

@@ -28,50 +28,48 @@ export const showLargeFileModal = (state = "", action) => {
 	}
 };
 
-export const packages = (state = {}, action) => {
+export const refreshPackages = (state = false, action) => {
+
+	let newState = {...state};
+	switch(action.type) {
+		case actionNames.SET_REFRESH_PACKAGES:
+			newState = action.payload;
+			return newState;
+		default:
+			return state;
+	}
+
+};
+
+export const filtering = (state = {}, action) => {
 	let newState = {}; 
-	let filteredPackageList = state.unfiltered;
 	let filters = state.filters;
 	let users = state.userList;
 	let packageTypes = state.packageTypes;
 
 	switch(action.type) {
+
 		case actionNames.SET_USERS:
-			newState.filtered = state.filtered;
-			newState.unfiltered = state.unfiltered;
 			newState.filters = state.filters;
 			newState.userList = action.payload;
 			newState.tisNames = state.tisNames;
 			newState.packageTypes = state.packageTypes;
 			return newState;
 
 		case actionNames.SET_PACKAGE_TYPES:
-			newState.filtered = state.filtered;
-			newState.unfiltered = state.unfiltered;
 			newState.filters = state.filters;
 			newState.userList = users;
 			newState.tisNames = state.tisNames;
 			newState.packageTypes = action.payload;
 			return newState;
 
 		case actionNames.SET_TIS_NAMES:
-			newState.filtered = state.filtered;
-			newState.unfiltered = state.unfiltered;
 			newState.filters = state.filters;
 			newState.userList = users;
 			newState.packageTypes = packageTypes;
 			newState.tisNames = action.payload;
 			return newState;
 
-		case actionNames.SET_PACKAGES:
-			newState.filtered = action.payload;
-			newState.unfiltered = action.payload;
-			newState.filters = [];
-			newState.userList = users;
-			newState.packageTypes = state.packageTypes;
-			newState.tisNames = state.tisNames;
-			return newState;
-
 		case actionNames.REMOVE_FILTER:
 			if (filters.length > 0) {
 				filters.map((filter, index) => {
@@ -81,10 +79,7 @@ export const packages = (state = {}, action) => {
 					return filters;
 				});
 			}
-
-			filteredPackageList = applyFilters(filters, filteredPackageList, packageTypes);
-			newState.unfiltered = state.unfiltered;
-			newState.filtered = filteredPackageList;
+
 			newState.filters = filters;
 			newState.userList = users;
 			newState.packageTypes = state.packageTypes;
@@ -106,10 +101,7 @@ export const packages = (state = {}, action) => {
 			if (!filterAdded) {
 				filters.push(action.payload);
 			}
-
-			filteredPackageList = applyFilters(filters, filteredPackageList, packageTypes);
-			newState.unfiltered = state.unfiltered;
-			newState.filtered = filteredPackageList;
+
 			newState.filters = filters;
 			newState.userList = users;
 			newState.packageTypes = state.packageTypes;
@@ -120,7 +112,7 @@ export const packages = (state = {}, action) => {
 	}
 };
 
-const applyFilters = (filters, filteredPackageList, predefinedPackageTypes) => {
+export const applyFilters = (filters, filteredPackageList, predefinedPackageTypes) => {
 
 	let packageTypesLower = predefinedPackageTypes.map(packageType => {
 		return packageType.toLowerCase();