From 9344801e477e7548c2c35fff45c38f01a3fcc3f9 Mon Sep 17 00:00:00 2001
From: Emmanuel <demey.emmanuel@gmail.com>
Date: Thu, 16 Jan 2025 11:43:51 +0100
Subject: [PATCH] fix: review error for dataset and distirbution

---
 src/packages/modules-datasets/datasets.ts     | 90 ++++++++++++++++++-
 .../modules-datasets/datasets/edit/edit.jsx   |  9 +-
 .../modules-datasets/datasets/view/view.jsx   | 19 ++--
 .../modules-datasets/distributions/edit.jsx   | 34 +++----
 .../distributions/view/view.jsx               | 77 ----------------
 .../distributions/view/view.tsx               | 67 ++++++++++++++
 src/vite-env.d.ts                             |  1 -
 7 files changed, 186 insertions(+), 111 deletions(-)
 delete mode 100644 src/packages/modules-datasets/distributions/view/view.jsx
 create mode 100644 src/packages/modules-datasets/distributions/view/view.tsx

diff --git a/src/packages/modules-datasets/datasets.ts b/src/packages/modules-datasets/datasets.ts
index 27b106300..98ac61fee 100644
--- a/src/packages/modules-datasets/datasets.ts
+++ b/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 };
+};
diff --git a/src/packages/modules-datasets/datasets/edit/edit.jsx b/src/packages/modules-datasets/datasets/edit/edit.jsx
index bb683a89a..90caf01bd 100644
--- a/src/packages/modules-datasets/datasets/edit/edit.jsx
+++ b/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}>
diff --git a/src/packages/modules-datasets/datasets/view/view.jsx b/src/packages/modules-datasets/datasets/view/view.jsx
index 89bf9e05d..b65b4f929 100644
--- a/src/packages/modules-datasets/datasets/view/view.jsx
+++ b/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 />
 
diff --git a/src/packages/modules-datasets/distributions/edit.jsx b/src/packages/modules-datasets/distributions/edit.jsx
index 9c1a65639..7931383e5 100644
--- a/src/packages/modules-datasets/distributions/edit.jsx
+++ b/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">
diff --git a/src/packages/modules-datasets/distributions/view/view.jsx b/src/packages/modules-datasets/distributions/view/view.jsx
deleted file mode 100644
index b81c9108d..000000000
--- a/src/packages/modules-datasets/distributions/view/view.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { CheckSecondLang } from '@components/check-second-lang';
-import { Loading } from '@components/loading';
-import { PageTitleBlock } from '@components/page-title-block';
-
-import { DistributionApi } from '@sdk/index';
-
-import { useTitle } from '@utils/hooks/useTitle';
-
-import D from '../../../deprecated-locales/build-dictionary';
-import { useDataset, useDistribution } from '../../datasets';
-import { ViewMenu } from './menu';
-import { ViewMainBlock } from './view-main-block';
-
-export const Component = (props) => {
-	const { id } = useParams();
-	const navigate = useNavigate();
-
-	const { data: distribution, isLoading } = useDistribution(id);
-
-	const { data: dataset, isLoading: isLoadingDataSet } = useDataset(
-		distribution?.idDataset,
-	);
-
-	const queryClient = useQueryClient();
-
-	const { isPending: isPublishing, mutate: publish } = useMutation({
-		mutationFn: () => {
-			return DistributionApi.publish(id);
-		},
-
-		onSuccess: (id) => {
-			queryClient.invalidateQueries(['distributions', id]);
-		},
-	});
-
-	const { isPending: isDeleting, mutate: remove } = useMutation({
-		mutationFn: () => {
-			return DistributionApi.deleteDistribution(id);
-		},
-
-		onSuccess: (id) => {
-			return Promise.all([
-				queryClient.removeQueries(['distributions', id]),
-				queryClient.invalidateQueries(['distributions']),
-			]).then(() => navigate('/datasets/distributions'));
-		},
-	});
-
-	useTitle(D.distributionsTitle, distribution?.labelLg1);
-
-	if (isLoading || isLoadingDataSet || isDeleting) return <Loading />;
-	if (isPublishing) return <Loading text="publishing" />;
-
-	return (
-		<div className="container">
-			<PageTitleBlock
-				titleLg1={distribution.labelLg1}
-				titleLg2={distribution.labelLg1}
-			/>
-
-			<ViewMenu
-				distribution={distribution}
-				dataset={dataset}
-				onPublish={publish}
-				onDelete={remove}
-				{...props}
-			/>
-
-			<CheckSecondLang />
-
-			<ViewMainBlock distribution={distribution} />
-		</div>
-	);
-};
diff --git a/src/packages/modules-datasets/distributions/view/view.tsx b/src/packages/modules-datasets/distributions/view/view.tsx
new file mode 100644
index 000000000..c72f945e2
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index a81b338dc..cd4efbb8d 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -12,7 +12,6 @@ type ImportMetaEnv = {
   VITE_CONCEPTS_DOCUMENTATION: string
   VITE_OPERATIONS_DOCUMENTATION: string
   VITE_VALIDATION_OPERATION_SERIES_EXTRA_MANDATORY_FIELDS: string
-  VITE_DEV_TOOLS_ENABLED: string
   BASE_URL: string
   MODE: string
   DEV: boolean