Commit 96f207aa authored by Axel Bocciarelli's avatar Axel Bocciarelli

Fix showing selected datasets in table

parent ff58583b
Pipeline #33830 passed with stage
in 3 minutes and 7 seconds
import {
ADD_DATASET_BY_ID,
REMOVE_DATASET_BY_ID,
} from '../constants/actionTypes';
import { SELECT_DATASETS, DESELECT_DATASETS } from '../constants/actionTypes';
export function addDatasetById(datasetIds) {
return function (dispatch) {
dispatch({
type: ADD_DATASET_BY_ID,
payload: datasetIds,
});
export function selectDatasets(ids) {
return {
type: SELECT_DATASETS,
payload: ids,
};
}
export function removeDatasetById(datasetIds) {
return function (dispatch) {
dispatch({
type: REMOVE_DATASET_BY_ID,
payload: datasetIds,
});
export function deselectDatasets(ids) {
return {
type: DESELECT_DATASETS,
payload: ids,
};
}
This diff is collapsed.
import React from 'react';
import moment from 'moment';
import { Glyphicon } from 'react-bootstrap';
import { stringifyBytesSize, getDatasetParameterByName } from '../../helpers';
import { VOLUME, FILE_COUNT } from '../../constants/parameterTypes';
import DatasetDownloadButton from './DatasetDownloadButton';
export function dateFormatter(date) {
if (!date) {
return '';
}
const parsedDate = moment(date);
return (
<>
<Glyphicon glyph="time" style={{ marginRight: 5, top: 2 }} />
{parsedDate.format(moment.HTML5_FMT.TIME)}
<span style={{ marginLeft: 5, color: '#777', fontSize: 11 }}>
{parsedDate.format('D MMM YYYY')}
</span>
</>
);
}
export function volumeFormatter(dataset) {
return stringifyBytesSize(getDatasetParameterByName(dataset, VOLUME));
}
export function fileCountFormatter(dataset) {
return getDatasetParameterByName(dataset, FILE_COUNT);
}
export function techniqueFormatter(dataset) {
const definition = getDatasetParameterByName(dataset, 'definition');
return definition || '';
}
export function downloadFormatter(dataset, sessionId) {
const dataArchived = getDatasetParameterByName(dataset, '__dataArchived');
if (dataArchived === 'False') {
return 'N/A';
}
return <DatasetDownloadButton sessionId={sessionId} id={dataset.id} />;
}
......@@ -15,7 +15,7 @@ function Menu() {
const user = useSelector((state) => state.user);
const { sessionId, fullName, isSSO, isAnonymous } = user;
const selection = useSelector((state) => state.selection);
const selectedDatasets = useSelector((state) => state.selectedDatasets);
const breadcrumbsList = useSelector((state) => state.breadcrumbsList);
const dispatch = useDispatch();
......@@ -72,7 +72,7 @@ function Menu() {
<NavItem eventKey="my">My Data</NavItem>
</LinkContainer>
{UI.menu.isMySelectionVisible && selection.datasetIds.length > 0 && (
{UI.menu.isMySelectionVisible && selectedDatasets.length > 0 && (
<LinkContainer to="/selection">
<NavItem eventKey="selection">
My Selection
......@@ -80,7 +80,7 @@ function Menu() {
className="badge"
style={{ marginLeft: 10, padding: '2px 7px' }}
>
{selection.datasetIds.length}
{selectedDatasets.length}
</span>
</NavItem>
</LinkContainer>
......
......@@ -31,8 +31,8 @@ export const FETCH_DATASETS_BY_DOI_PENDING = 'FETCH_DATASETS_BY_DOI_PENDING';
export const SET_LOGBOOK_CONTEXT = 'SET_LOGBOOK_CONTEXT';
/** selection */
export const ADD_DATASET_BY_ID = 'ADD_DATASET_BY_ID';
export const REMOVE_DATASET_BY_ID = 'REMOVE_DATASET_BY_ID';
export const SELECT_DATASETS = 'SELECT_DATASETS';
export const DESELECT_DATASETS = 'DESELECT_DATASETS';
/** breadcrumbs */
export const SET_BREADCRUMBS = 'SET_BREADCRUMBS';
......
......@@ -7,7 +7,6 @@ import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import DatasetTable from '../components/Dataset/DatasetTable';
import Loader from '../components/Loader';
import { fetchDatasetsByDOI } from '../actions/datasets';
import { removeDatasetById, addDatasetById } from '../actions/selection';
function DOIPage() {
const { prefix, suffix } = useParams();
......@@ -15,7 +14,6 @@ function DOIPage() {
const sessionId = useSelector((state) => state.user.sessionId);
const datasets = useSelector((state) => state.datasets);
const selection = useSelector((state) => state.selection);
const dispatch = useDispatch();
useEffect(() => {
......@@ -36,18 +34,7 @@ function DOIPage() {
{datasets.fetching ? (
<Loader message="Loading datasets..." spacedOut />
) : (
<DatasetTable
selection={selection}
removeDatasetById={(...params) =>
dispatch(removeDatasetById(...params))
}
addDatasetById={(...params) =>
dispatch(addDatasetById(...params))
}
sessionId={sessionId}
datasets={datasets.data}
expanded={[]}
/>
<DatasetTable datasets={datasets.data} />
)}
</Col>
</Row>
......
......@@ -6,7 +6,6 @@ import { setBreadCrumbs } from '../actions/breadcrumbs';
import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import Loader from '../components/Loader';
import DatasetTable from '../components/Dataset/DatasetTable';
import { removeDatasetById, addDatasetById } from '../actions/selection';
import PageNotFound from './PageNotFound';
import { fetchDatasetsByInvestigationId } from '../actions/datasets';
import { useResource } from 'rest-hooks';
......@@ -17,9 +16,9 @@ function DatasetsPage() {
const investigation = useResource(InvestigationResource.detailShape(), {
id: investigationId,
});
const sessionId = useSelector((state) => state.user.sessionId);
const datasets = useSelector((state) => state.datasets);
const selection = useSelector((state) => state.selection);
const dispatch = useDispatch();
useEffect(() => {
......@@ -52,18 +51,7 @@ function DatasetsPage() {
{datasets.fetching ? (
<Loader message="Loading datasets..." spacedOut />
) : (
<DatasetTable
selection={selection}
removeDatasetById={(...params) =>
dispatch(removeDatasetById(...params))
}
addDatasetById={(...params) =>
dispatch(addDatasetById(...params))
}
sessionId={sessionId}
expanded={expanded}
datasets={datasets.data}
/>
<DatasetTable datasets={datasets.data} expanded={expanded} />
)}
</Col>
</Row>
......
......@@ -13,7 +13,7 @@ import { setBreadCrumbs } from '../../actions/breadcrumbs';
function MintSelectionPage() {
const sessionId = useSelector((state) => state.user.sessionId);
const datasetIds = useSelector((state) => state.selection.datasetIds);
const selectedDatasets = useSelector((state) => state.selectedDatasets);
const dispatch = useDispatch();
const [state, setState] = useState({
......@@ -33,7 +33,9 @@ function MintSelectionPage() {
);
async function fetchDatasetsAndUsers() {
const datasets = await axios.get(getDatasetsById(sessionId, datasetIds));
const datasets = await axios.get(
getDatasetsById(sessionId, selectedDatasets)
);
const investigationIds = datasets.data.map((d) => d.investigation.id);
const users = await axios.get(
......@@ -47,11 +49,11 @@ function MintSelectionPage() {
});
}
if (datasetIds.length > 0) {
if (selectedDatasets.length > 0) {
setState({ datasets: [], users: [], isFetching: true });
fetchDatasetsAndUsers();
}
}, [datasetIds, dispatch, sessionId]);
}, [selectedDatasets, dispatch, sessionId]);
return (
<div className="app__inner">
......
......@@ -9,7 +9,6 @@ import {
} from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../../actions/breadcrumbs';
import { addDatasetById, removeDatasetById } from '../../actions/selection';
import { getDatasetsById } from '../../api/icat-plus/catalogue';
import DatasetTable from '../../components/Dataset/DatasetTable';
import Loader from '../../components/Loader';
......@@ -17,25 +16,25 @@ import { LinkContainer } from 'react-router-bootstrap';
function SelectionPage() {
const sessionId = useSelector((state) => state.user.sessionId);
const datasetIds = useSelector((state) => state.selection.datasetIds);
const selectedDatasets = useSelector((state) => state.selectedDatasets);
const dispatch = useDispatch();
const [initialDatsetIds] = useState(datasetIds);
const [initialSelectedDatasets] = useState(selectedDatasets); // so datasets don't disappear from table when deselected
const [state, setState] = useState({ datasets: [], isFetching: false });
useEffect(() => {
dispatch(setBreadCrumbs([{ name: 'My Selection' }]));
if (initialDatsetIds.length > 0) {
if (initialSelectedDatasets.length > 0) {
setState({ datasets: [], isFetching: true });
axios
.get(getDatasetsById(sessionId, initialDatsetIds))
.get(getDatasetsById(sessionId, initialSelectedDatasets))
.then(({ data }) => {
setState({ datasets: data, isFetching: false });
});
}
}, [initialDatsetIds, dispatch, sessionId]);
}, [initialSelectedDatasets, dispatch, sessionId]);
const { datasets, isFetching: fetching } = state;
const tooltip = (text) => <Tooltip id="tooltip">{text}</Tooltip>;
......@@ -51,7 +50,7 @@ function SelectionPage() {
<Button
bsSize="small"
bsStyle="primary"
disabled={datasetIds.length === 0}
disabled={selectedDatasets.length === 0}
>
<Glyphicon glyph="plus" /> Mint a DOI
</Button>
......@@ -76,15 +75,7 @@ function SelectionPage() {
{fetching ? (
<Loader message="Loading datasets..." spacedOut />
) : (
<DatasetTable
sessionId={sessionId}
selectedDatasetIds={datasetIds}
datasets={datasets}
removeDatasetById={(datasetId) =>
dispatch(removeDatasetById(datasetId))
}
addDatasetById={(datasetId) => dispatch(addDatasetById(datasetId))}
/>
<DatasetTable datasets={datasets} />
)}
</div>
);
......
......@@ -5,13 +5,13 @@ import datasets from './datasets';
import instrumentscientists from './instrumentscientists';
import logbook from './logbook';
import user from './login';
import selection from './selection';
import selectedDatasets from './selection';
export default combineReducers({
user,
datasets,
logbook,
selection,
selectedDatasets,
breadcrumbsList,
datacollections,
instrumentscientists,
......
import {
ADD_DATASET_BY_ID,
REMOVE_DATASET_BY_ID,
} from '../constants/actionTypes';
import { SELECT_DATASETS, DESELECT_DATASETS } from '../constants/actionTypes';
const INITIAL_STATE = {
datasetIds: [],
};
const INITIAL_STATE = [];
function selection(state = INITIAL_STATE, action) {
const { payload: datasetIds } = action;
function selectedDatasets(state = INITIAL_STATE, action) {
const { payload: ids } = action;
switch (action.type) {
case ADD_DATASET_BY_ID: {
return { datasetIds: [...state.datasetIds, ...datasetIds] };
case SELECT_DATASETS: {
return [...state, ...ids];
}
case REMOVE_DATASET_BY_ID: {
const set = new Set(state.datasetIds);
datasetIds.forEach((id) => set.delete(id));
return { datasetIds: [...set] };
case DESELECT_DATASETS: {
const set = new Set(state);
ids.forEach((id) => set.delete(id));
return [...set];
}
default:
return state;
}
}
export default selection;
export default selectedDatasets;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment