fix: review error for dataset and distirbution

src/packages/modules-datasets/datasets.ts

@@ -1,8 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 import { DatasetsApi, DistributionApi } from '@sdk/index';
 
-import { PartialDistribution } from '../model/Dataset';
+import { useGoBack } from '@utils/hooks/useGoBack';
+
+import { Distribution, PartialDistribution } from '../model/Dataset';
 
 export const useDatasets = () => {
 	return useQuery({
@@ -40,3 +43,86 @@ export const useDataset = (id: string) => {
 		queryFn: () => DatasetsApi.getById(id),
 	});
 };
+
+export const useDatasetPublisher = (id: string) => {
+	const queryClient = useQueryClient();
+
+	const {
+		isPending: isPublishing,
+		mutate: publish,
+		error: validationServerSideError,
+	} = useMutation({
+		mutationFn: () => {
+			return DistributionApi.publish(id);
+		},
+
+		onSuccess: (id) => {
+			queryClient.invalidateQueries({
+				queryKey: ['distributions', id],
+			});
+		},
+	});
+
+	return { isPublishing, publish, validationServerSideError };
+};
+
+export const useDatasetDeleter = (id: string) => {
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+
+	const {
+		isPending: isDeleting,
+		mutate: remove,
+		error: deleteServerSideError,
+	} = useMutation({
+		mutationFn: () => {
+			return DistributionApi.deleteDistribution(id);
+		},
+
+		onSuccess: (id) => {
+			return Promise.all([
+				queryClient.removeQueries({ queryKey: ['distributions', id] }),
+				queryClient.invalidateQueries({ queryKey: ['distributions'] }),
+			]).then(() => navigate('/datasets/distributions'));
+		},
+	});
+
+	return { isDeleting, remove, deleteServerSideError };
+};
+
+export const useCreateOrUpdateDistribution = (
+	isEditing: boolean,
+	distribution: Distribution,
+) => {
+	const queryClient = useQueryClient();
+	const goBack = useGoBack();
+
+	const {
+		isPending: isSaving,
+		mutate: save,
+		error: serverSideError,
+	} = useMutation({
+		mutationFn: () => {
+			const promise = isEditing
+				? DistributionApi.putDistribution
+				: DistributionApi.postDistribution;
+			return promise(distribution).catch((e: unknown) => {
+				throw e;
+			});
+		},
+		onSuccess: (id) => {
+			if (isEditing) {
+				queryClient.invalidateQueries({
+					queryKey: ['distributions', id],
+				});
+			}
+			queryClient.invalidateQueries({
+				queryKey: ['distributions'],
+			});
+
+			goBack(`/datasets/distributions/${id}`, !isEditing);
+		},
+	});
+
+	return { isSaving, save, serverSideError };
+};

src/packages/modules-datasets/datasets/edit/edit.jsx

@@ -7,7 +7,7 @@ import {
 	CancelButton,
 	SaveButton,
 } from '@components/buttons/buttons-with-icons';
-import { GlobalClientSideErrorBloc } from '@components/errors-bloc';
+import { ErrorBloc, GlobalClientSideErrorBloc } from '@components/errors-bloc';
 import { Loading, Saving } from '@components/loading';
 import { PageTitleBlock } from '@components/page-title-block';
 
@@ -67,7 +67,11 @@ export const Component = () => {
 
 	const queryClient = useQueryClient();
 
-	const { isPending: isSaving, mutate: save } = useMutation({
+	const {
+		isPending: isSaving,
+		mutate: save,
+		error: serverSideError,
+	} = useMutation({
 		mutationFn: () => {
 			const formattedDataset = { themes: [], ...editingDataset };
 			if (isEditing) {
@@ -222,6 +226,7 @@ export const Component = () => {
 					D={D}
 				/>
 			)}
+			{serverSideError && <ErrorBloc error={[serverSideError]} D={D} />}
 
 			<form>
 				<LayoutWithLateralMenu layoutConfiguration={layoutConfiguration}>

src/packages/modules-datasets/datasets/view/view.jsx

@@ -29,7 +29,6 @@ import { StatisticalInformations } from './StatisticalInformations';
 import { ViewMenu } from './menu';
 
 const Dataset = (props) => {
-	const [serverSideError, setServerSideError] = useState();
 	const { id } = useParams();
 	const navigate = useNavigate();
 	const [archivageUnits, setArchivageUnits] = useState([]);
@@ -43,7 +42,11 @@ const Dataset = (props) => {
 	const [secondLang] = useSecondLang();
 	const queryClient = useQueryClient();
 
-	const { isPending: isPublishing, mutate: publish } = useMutation({
+	const {
+		isPending: isPublishing,
+		mutate: publish,
+		error: publishServerSideError,
+	} = useMutation({
 		mutationFn: () => {
 			return DatasetsApi.publish(id);
 		},
@@ -53,13 +56,14 @@ const Dataset = (props) => {
 		},
 	});
 
-	const { isPending: isDeleting, mutate: remove } = useMutation({
+	const {
+		isPending: isDeleting,
+		mutate: remove,
+		error: serverSideError,
+	} = useMutation({
 		mutationFn: () => {
 			return DatasetsApi.deleteDataset(id);
 		},
-		onError: (error) => {
-			setServerSideError(error);
-		},
 		onSuccess: (id) => {
 			return Promise.all([
 				queryClient.removeQueries(['datasets', id]),
@@ -87,6 +91,9 @@ const Dataset = (props) => {
 			{serverSideError && (
 				<ErrorBloc error={[serverSideError]} D={DatasetDictionary} />
 			)}
+			{publishServerSideError && (
+				<ErrorBloc error={[publishServerSideError]} D={DatasetDictionary} />
+			)}
 
 			<CheckSecondLang />
 

src/packages/modules-datasets/distributions/edit.jsx

@@ -1,4 +1,3 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { default as ReactSelect } from 'react-select';
@@ -10,6 +9,7 @@ import {
 } from '@components/buttons/buttons-with-icons';
 import {
 	ClientSideError,
+	ErrorBloc,
 	GlobalClientSideErrorBloc,
 } from '@components/errors-bloc';
 import { TextInput, UrlInput } from '@components/form/input';
@@ -19,14 +19,16 @@ import { Loading, Saving } from '@components/loading';
 import { PageTitleBlock } from '@components/page-title-block';
 import { MDEditor } from '@components/rich-editor/react-md-editor';
 
-import { DistributionApi } from '@sdk/index';
-
 import { useGoBack } from '@utils/hooks/useGoBack';
 import { useTitle } from '@utils/hooks/useTitle';
 
 import { D1, D2 } from '../../deprecated-locales';
 import D from '../../deprecated-locales/build-dictionary';
-import { useDatasetsForDistributions, useDistribution } from '../datasets';
+import {
+	useCreateOrUpdateDistribution,
+	useDatasetsForDistributions,
+	useDistribution,
+} from '../datasets';
 import { ByteSizeInput } from './edit/byte-size-input';
 import { validate } from './validation';
 
@@ -55,25 +57,10 @@ export const Component = () => {
 			label: dataset.label,
 		})) ?? [];
 
-	const queryClient = useQueryClient();
-
-	const { isPending: isSaving, mutate: save } = useMutation({
-		mutationFn: () => {
-			if (isEditing) {
-				return DistributionApi.putDistribution(editingDistribution);
-			}
-			return DistributionApi.postDistribution(editingDistribution);
-		},
-
-		onSuccess: (id) => {
-			if (isEditing) {
-				queryClient.invalidateQueries(['distributions', id]);
-			}
-			queryClient.invalidateQueries(['distributions']);
-
-			goBack(`/datasets/distributions/${id}`, !isEditing);
-		},
-	});
+	const { isSaving, save, serverSideError } = useCreateOrUpdateDistribution(
+		isEditing,
+		editingDistribution,
+	);
 
 	useTitle(D.distributionsTitle, editingDistribution?.labelLg1);
 
@@ -117,6 +104,7 @@ export const Component = () => {
 					D={D}
 				/>
 			)}
+			{serverSideError && <ErrorBloc error={serverSideError} D={D} />}
 			<form>
 				<Row>
 					<div className="col-md-12 form-group">

src/packages/modules-datasets/distributions/view/view.tsx

@@ -0,0 +1,67 @@
+import { useParams } from 'react-router-dom';
+
+import { CheckSecondLang } from '@components/check-second-lang';
+import { ErrorBloc } from '@components/errors-bloc';
+import { Deleting, Loading, Publishing } from '@components/loading';
+import { PageTitleBlock } from '@components/page-title-block';
+
+import { useTitle } from '@utils/hooks/useTitle';
+
+import D from '../../../deprecated-locales/build-dictionary';
+import {
+	useDataset,
+	useDatasetDeleter,
+	useDatasetPublisher,
+	useDistribution,
+} from '../../datasets';
+import { ViewMenu } from './menu';
+import { ViewMainBlock } from './view-main-block';
+
+export const Component = (props) => {
+	const { id } = useParams<{ id: string }>();
+
+	const { data: distribution, isLoading } = useDistribution(id!);
+
+	const { data: dataset, isLoading: isLoadingDataSet } = useDataset(
+		distribution?.idDataset,
+	);
+
+	const { isPublishing, publish, validationServerSideError } =
+		useDatasetPublisher(id!);
+
+	const { isDeleting, remove, deleteServerSideError } = useDatasetDeleter(id!);
+
+	useTitle(D.distributionsTitle, distribution?.labelLg1);
+
+	if (isLoading || isLoadingDataSet) return <Loading />;
+	if (isDeleting) return <Deleting />;
+	if (isPublishing) return <Publishing />;
+
+	return (
+		<div className="container">
+			<PageTitleBlock
+				titleLg1={distribution.labelLg1}
+				titleLg2={distribution.labelLg1}
+			/>
+
+			<ViewMenu
+				distribution={distribution}
+				dataset={dataset}
+				onPublish={publish}
+				onDelete={remove}
+				{...props}
+			/>
+
+			{validationServerSideError && (
+				<ErrorBloc error={validationServerSideError} D={D} />
+			)}
+			{deleteServerSideError && (
+				<ErrorBloc error={deleteServerSideError} D={D} />
+			)}
+
+			<CheckSecondLang />
+
+			<ViewMainBlock distribution={distribution} />
+		</div>
+	);
+};