fix: rewrite Tabs component (#788)

* fix: rewrite Tabs component * feat: rewrite concept compare control component * feat: remove unused help folder * fix: rewrite Tabs Component * feat: rewrite classification level component with function * feat: be able to delete dataset and distribution * feat: add missing export * feat: remove wihRouter for multiple components
InseeFr · May 17, 2024 · 4481392 · 4481392
1 parent 31c0dd0
commit 4481392
Show file tree

Hide file tree

Showing 30 changed files with 235 additions and 1,486 deletions.
diff --git a/...plications/administration/dashboard/concepts/collections/creations-modifications/index.js b/...plications/administration/dashboard/concepts/collections/creations-modifications/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { Table, NumberResult } from '@inseefr/wilco';
 import DatePickerRmes from 'js/applications/shared/date-picker-rmes';
 import D from 'js/i18n';
@@ -9,19 +9,28 @@ import dayjs from 'dayjs';
 const CollectionsCreationsModifications = ({ collectionsData, type }) => {
 	const [dateFilter, setDateFilter] = useState();
 	const history = useHistory();
-	const onRowClick = (_event, collection) => history.push(`/collection/${collection.id}`)
+	const onRowClick = (_event, collection) =>
+		history.push(`/collection/${collection.id}`);
 
 	const variable = type === 'creations' ? 'created' : 'modified';
 	const typeByLang =
 		type === 'creations' ? D.creationsTitle : D.modificationsTitle;
 
-	const data = !dateFilter ? collectionsData : collectionsData.filter(concept => dayjs(concept[variable]).isAfter(dayjs(dateFilter).subtract(1, 'days'))).map(d => ({
-		...d,
-		isValidated:
-			d.isValidated === 'true'
-				? D.collectionStatusValid
-				: D.collectionStatusProvisional,
-	}));
+	const data = !dateFilter
+		? collectionsData
+		: collectionsData
+				.filter((concept) =>
+					dayjs(concept[variable]).isAfter(
+						dayjs(dateFilter).subtract(1, 'days')
+					)
+				)
+				.map((d) => ({
+					...d,
+					isValidated:
+						d.isValidated === 'true'
+							? D.collectionStatusValid
+							: D.collectionStatusProvisional,
+				}));
 	return (
 		<div>
 			<div className="row" style={{ marginTop: '2%' }}>
@@ -48,6 +57,6 @@ const CollectionsCreationsModifications = ({ collectionsData, type }) => {
 			/>
 		</div>
 	);
-}
+};
 
-export default withRouter(CollectionsCreationsModifications);
+export default CollectionsCreationsModifications;
diff --git a/app/src/js/applications/classifications/item/compare/controls.js b/app/src/js/applications/classifications/item/compare/controls.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { Button, ActionToolbar } from '@inseefr/wilco';
 import D from 'js/i18n';
 
-function Controls(props) {
-	const location = props.history.location.pathname;
+function Controls() {
+	const history = useHistory();
+	const location = history.location.pathname;
 	const nexLocation = location.replace('/compare', '');
 	return (
 		<ActionToolbar>
@@ -13,4 +14,4 @@ function Controls(props) {
 	);
 }
 
-export default withRouter(Controls);
+export default Controls;
diff --git a/app/src/js/applications/classifications/level/home.js b/app/src/js/applications/classifications/level/home.js
@@ -1,40 +1,32 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { PageTitle, PageSubtitle } from '@inseefr/wilco';
 import Controls from './controls';
 import General from './general';
 import Members from './members';
 import { CheckSecondLang } from 'bauhaus-utilities';
 
-class LevelVisualization extends Component {
-	render() {
-		const {
-			level: { general, members },
-			secondLang,
-		} = this.props;
-		const { classificationId } = general;
-		return (
-			<div className="container">
-				<PageTitle title={general.prefLabelLg1} />
-				{general.prefLabelLg2 && (
-					<PageSubtitle subTitle={general.prefLabelLg2} />
-				)}
-				<Controls id={classificationId} />
-				<CheckSecondLang />
-				<General
-					general={general}
+const LevelVisualization = ({ level: { general, members }, secondLang }) => {
+	const { classificationId } = general;
+	return (
+		<div className="container">
+			<PageTitle title={general.prefLabelLg1} />
+			{general.prefLabelLg2 && <PageSubtitle subTitle={general.prefLabelLg2} />}
+			<Controls id={classificationId} />
+			<CheckSecondLang />
+			<General
+				general={general}
+				classificationId={classificationId}
+				secondLang={secondLang}
+			/>
+			{members.length !== 0 && (
+				<Members
+					members={members}
 					classificationId={classificationId}
 					secondLang={secondLang}
 				/>
-				{members.length !== 0 && (
-					<Members
-						members={members}
-						classificationId={classificationId}
-						secondLang={secondLang}
-					/>
-				)}
-			</div>
-		);
-	}
-}
+			)}
+		</div>
+	);
+};
 
 export default LevelVisualization;
diff --git a/app/src/js/applications/concepts/compare/controls.js b/app/src/js/applications/concepts/compare/controls.js
@@ -1,17 +1,15 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { ReturnButton, ActionToolbar } from '@inseefr/wilco';
 
-class Controls extends Component {
-	render() {
-		const location = this.props.history.location.pathname;
-		const nextLocation = location.replace('/compare', '');
-		return (
-			<ActionToolbar>
-				<ReturnButton action={nextLocation} col={3} />
-			</ActionToolbar>
-		);
-	}
-}
+const Controls = () => {
+	const location = useLocation();
+	const nextLocation = location.pathname.replace('/compare', '');
+	return (
+		<ActionToolbar>
+			<ReturnButton action={nextLocation} col={3} />
+		</ActionToolbar>
+	);
+};
 
-export default withRouter(Controls);
+export default Controls;
diff --git a/app/src/js/applications/concepts/menu/index.js b/app/src/js/applications/concepts/menu/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
 import D from 'js/i18n';
 import { getLang, Menu } from '@inseefr/wilco';
+import { useLocation } from 'react-router-dom';
 const defaultAttrs = { 'aria-current': 'page' };
 
-export const MenuConcepts = ({ location }) => {
+export const MenuConcepts = () => {
+	const location = useLocation();
 	const activePath = location.pathname;
 	if (activePath === '/') return null;
 
@@ -46,7 +47,7 @@ export const MenuConcepts = ({ location }) => {
 		},
 	];
 
-	const currentPath = paths.find(path => {
+	const currentPath = paths.find((path) => {
 		return location.pathname.includes(path.pathKey);
 	});
 	if (currentPath) {
@@ -60,4 +61,4 @@ export const MenuConcepts = ({ location }) => {
 	return <Menu paths={paths} />;
 };
 
-export default withRouter(MenuConcepts);
+export default MenuConcepts;
diff --git a/app/src/js/applications/concepts/routes/index.js b/app/src/js/applications/concepts/routes/index.js
@@ -16,7 +16,6 @@ import CollectionCreationContainer from 'js/applications/collections/edition-cre
 import CollectionEditionContainer from 'js/applications/collections/edition-creation/edition-container';
 import CollectionsToValidateContainer from 'js/applications/collections/validation/home-container';
 import CollectionsToExportContainer from 'js/applications/collections/export/home-container';
-import Help from 'js/applications/help/home';
 import Administration from 'js/applications/administration/home';
 import ConceptsDashboard from 'js/applications/administration/dashboard/concepts/home-container';
 import D from 'js/i18n';
@@ -90,7 +89,6 @@ export default () => {
 					path="/collections/export"
 					component={CollectionsToExportContainer}
 				/>
-				<Route exact path="/concepts/help/:id" component={Help} />
 				<Route
 					exact
 					path="/concepts/administration"

diff --git a/app/src/js/applications/concepts/visualization/controls.js b/app/src/js/applications/concepts/visualization/controls.js
@@ -1,30 +1,25 @@
 import React, { useCallback, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import {
-	goBack,
-	Button,
-	ActionToolbar,
-	getContentDisposition,
-} from '@inseefr/wilco';
+import { Button, ActionToolbar, getContentDisposition } from '@inseefr/wilco';
 import check from 'js/utils/auth';
 import D from 'js/i18n';
 import { ConfirmationDelete } from 'bauhaus-utilities';
 import api from '../../../remote-api/concepts-api';
 import FileSaver from 'file-saver';
 import { useLoading } from './loading';
+import { useGoBack } from '../../../hooks/hooks';
 
-const ConceptVisualizationControls = (props) => {
+const ConceptVisualizationControls = ({
+	isValidated,
+	isValidOutOfDate,
+	conceptVersion,
+	id,
+	permission: { authType, roles, stamp },
+	creator: conceptCreator,
+	handleValidation,
+	handleDeletion,
+}) => {
 	const { setLoading } = useLoading();
-	const {
-		isValidated,
-		isValidOutOfDate,
-		conceptVersion,
-		id,
-		permission: { authType, roles, stamp },
-		creator: conceptCreator,
-		handleValidation,
-		handleDeletion,
-	} = props;
+	const goBack = useGoBack();
 
 	const [modalOpened, setModalOpened] = useState(false);
 	const handleNo = useCallback(() => {
@@ -43,7 +38,7 @@ const ConceptVisualizationControls = (props) => {
 
 	let btns;
 
-	const cancel = [goBack(props, `/concepts`), D.btnReturn];
+	const cancel = [() => goBack(`/concepts`), D.btnReturn];
 	const validate = adminOrCreator && [handleValidation, D.btnValid];
 	const update = [`/concept/${id}/modify`, D.btnUpdate];
 	const compare =
@@ -119,4 +114,4 @@ const ConceptVisualizationControls = (props) => {
 	);
 };
 
-export default withRouter(ConceptVisualizationControls);
+export default ConceptVisualizationControls;
diff --git a/app/src/js/applications/datasets/api/datasets-api.js b/app/src/js/applications/datasets/api/datasets-api.js
@@ -25,6 +25,7 @@ const api = {
 		},
 		(res) => res.text(),
 	],
+	deleteDataset: (id) => [`${id}`, (res) => res.text()],
 };
 
 export default API.buildApi('datasets', api);
diff --git a/app/src/js/applications/datasets/api/distributions-api.js b/app/src/js/applications/datasets/api/distributions-api.js
@@ -25,6 +25,7 @@ const api = {
 		},
 		(res) => res.text(),
 	],
+	deleteDistribution: (id) => [`${id}`, (res) => res.text()],
 };
 
 export default API.buildApi('distribution', api);
diff --git a/app/src/js/applications/datasets/datasets/view/menu.js b/app/src/js/applications/datasets/datasets/view/menu.js
@@ -10,7 +10,7 @@ import D from '../../../../i18n/build-dictionary';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-export const ViewMenu = ({ dataset, onPublish, ...props }) => {
+export const ViewMenu = ({ dataset, onPublish, onDelete, ...props }) => {
 	const permission = useSelector(Auth.getPermission);
 
 	const hasDatasetRightsBasedOnStamp =
@@ -28,7 +28,7 @@ export const ViewMenu = ({ dataset, onPublish, ...props }) => {
 			{(isAdmin ||
 				(hasDatasetRightsBasedOnStamp &&
 					dataset.validationState === 'Unpublished')) && (
-				<DeleteButton action={() => {}} />
+				<DeleteButton action={onDelete} />
 			)}
 			{(isAdmin || hasDatasetRightsBasedOnStamp) && (
 				<Button action={`/datasets/${dataset.id}/modify`} label={D.btnUpdate} />

diff --git a/app/src/js/applications/datasets/datasets/view/view.js b/app/src/js/applications/datasets/datasets/view/view.js
@@ -1,4 +1,4 @@
-import { Link, useParams } from 'react-router-dom';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import * as select from '../../../../reducers';
 import {
@@ -24,6 +24,7 @@ import { ViewMenu } from './menu';
 
 const Dataset = (props) => {
 	const { id } = useParams();
+	const history = useHistory();
 	const { data: structures } = useQuery({
 		queryKey: ['structures'],
 		queryFn: () => {
@@ -64,9 +65,23 @@ const Dataset = (props) => {
 		}
 	);
 
+	const { isLoading: isDeleting, mutate: remove } = useMutation(
+		() => {
+			return api.deleteDataset(id);
+		},
+		{
+			onSuccess: (id) => {
+				return Promise.all([
+					queryClient.invalidateQueries(['dataset', id]),
+					queryClient.invalidateQueries(['dataset']),
+				]).then(() => history.push('/datasets'));
+			},
+		}
+	);
+
 	useTitle(D.datasetsTitle, dataset?.labelLg1);
 
-	if (isLoading) return <Loading />;
+	if (isLoading || isDeleting) return <Loading />;
 	if (isPublishing) return <Loading text="publishing" />;
 
 	return (
@@ -77,7 +92,12 @@ const Dataset = (props) => {
 				secondLang={secondLang}
 			/>
 
-			<ViewMenu dataset={dataset} {...props} onPublish={publish} />
+			<ViewMenu
+				dataset={dataset}
+				{...props}
+				onPublish={publish}
+				onDelete={remove}
+			/>
 			<CheckSecondLang />
 
 			<Row>

diff --git a/app/src/js/applications/datasets/distributions/view/menu.js b/app/src/js/applications/datasets/distributions/view/menu.js
@@ -10,7 +10,13 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import D from '../../../../i18n/build-dictionary';
 
-export const ViewMenu = ({ distribution, dataset, onPublish, ...props }) => {
+export const ViewMenu = ({
+	distribution,
+	dataset,
+	onPublish,
+	onDelete,
+	...props
+}) => {
 	const permission = useSelector(Auth.getPermission);
 
 	const hasDatasetRightsBasedOnStamp =
@@ -28,7 +34,7 @@ export const ViewMenu = ({ distribution, dataset, onPublish, ...props }) => {
 			{(isAdmin ||
 				(hasDatasetRightsBasedOnStamp &&
 					dataset.validationState === 'Unpublished')) && (
-				<DeleteButton action={() => {}} />
+				<DeleteButton action={onDelete} />
 			)}
 			{(isAdmin || hasDatasetRightsBasedOnStamp) && (
 				<Button