From 5fcdbf05ed1121d0142a65154adb40c42de18e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CVuyani?= <vuyani.shabangu@gmail.com>
Date: Tue, 30 Jul 2024 13:18:19 +0200
Subject: [PATCH] feat: studies

studies update
---
 components/AddStudy/index.tsx     | 16 ++++++++++------
 components/StudiesTable/index.tsx | 24 ++++++++++++++++--------
 global/utils/constants.ts         |  2 +-
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/components/AddStudy/index.tsx b/components/AddStudy/index.tsx
index 0737ca3..bd8cc26 100644
--- a/components/AddStudy/index.tsx
+++ b/components/AddStudy/index.tsx
@@ -9,9 +9,13 @@ import { authorizedApiRequest } from '@/global/utils/api';
 
 const { TextArea } = Input;
 
-const AddStudy: FC = () => {
+type Props = {
+	refetchStudies: Function;
+};
+
+const AddStudy: FC<Props> = ({ refetchStudies }) => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
-	const [study, setStudy] = useState('');
+	const [name, setName] = useState('');
 	const [description, setDescription] = useState('');
 	const [loading, setLoading] = useState<boolean>(false);
 
@@ -33,15 +37,15 @@ const AddStudy: FC = () => {
 			return;
 		}
 		authorizedApiRequest(HttpMethods.POST, API_ROUTES_PATHS.STUDIES, {
-			study: study,
+			name: name,
 			project_id: projectId,
 			description: description,
 		})
 			.then((data) => {
-				console.log(data);
 				setLoading(false);
 				toast(ToastType.SUCCESS, 'Study was successfully created');
 				handleCancel();
+				refetchStudies();
 			})
 			.catch((error) => {
 				console.log(error);
@@ -80,8 +84,8 @@ const AddStudy: FC = () => {
 							rules={[{ required: true, message: 'Study ID is required' }]}
 						>
 							<Input
-								value={study}
-								onChange={(e) => setStudy(e.target.value)}
+								value={name}
+								onChange={(e) => setName(e.target.value)}
 								placeholder="Study ID"
 							/>
 						</Form.Item>
diff --git a/components/StudiesTable/index.tsx b/components/StudiesTable/index.tsx
index 35a2859..d346600 100644
--- a/components/StudiesTable/index.tsx
+++ b/components/StudiesTable/index.tsx
@@ -17,7 +17,8 @@ type Props = {
 
 interface Study {
 	key: string;
-	description: string;
+	id: string;
+	description?: string;
 	numberOfSamples: number;
 }
 
@@ -25,6 +26,7 @@ function convertToTableData(responseData: []): Study[] {
 	return responseData.map((element: any) => {
 		return {
 			key: element.id,
+			id: element?.study,
 			description: element?.description,
 			numberOfSamples: element?.number_of_samples,
 		};
@@ -39,34 +41,40 @@ const Studies: FC<Props> = ({ isGroupMember }) => {
 	const projectId = router['project-id'];
 
 	useEffect(() => {
+		getStudies();
+	}, []);
+
+	const getStudies = () => {
 		if (projectId) {
 			authorizedApiRequest(HttpMethods.GET, `${API_ROUTES_PATHS.PROJECTS}/${projectId}/studies`)
 				.then((data) => {
 					setLoading(false);
 					setStudies(convertToTableData(data));
-					console.log(data);
 				})
 				.catch((error) => {
 					setLoading(false);
 					console.log(error);
 				});
 		}
-	}, []);
+	};
 
-	const truncateDescription = (value: string): string => {
-		return value.length > 50 ? value.split('').slice(0, 50).join('').concat('...') : value;
+	const truncateDescription = (value?: string): string => {
+		if (!value) {
+			return '';
+		}
+		return value?.length > 50 ? value?.split('').slice(0, 50).join('').concat('...') : value;
 	};
 
 	const columns: ColumnsType<Study> = [
 		{
 			title: 'Study ID',
-			dataIndex: 'key',
+			dataIndex: 'id',
 			key: 'study ID',
 		},
 		{
 			title: 'Description',
 			key: 'description',
-			render: (_, record) => <Text>{truncateDescription(record.description)}</Text>,
+			render: (_, record) => <Text>{truncateDescription(record?.description)}</Text>,
 		},
 		{
 			title: 'No. of samples',
@@ -95,7 +103,7 @@ const Studies: FC<Props> = ({ isGroupMember }) => {
 					title={() => (
 						<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
 							<Title level={5}>Studies</Title>
-							{isGroupMember && <AddStudy />}
+							{isGroupMember && <AddStudy refetchStudies={getStudies} />}
 						</div>
 					)}
 				/>
diff --git a/global/utils/constants.ts b/global/utils/constants.ts
index a57b280..23b2d99 100644
--- a/global/utils/constants.ts
+++ b/global/utils/constants.ts
@@ -37,7 +37,7 @@ export enum INTERNAL_PATHS {
 	LOGIN = '/login',
 	POLICIES = '/policies',
 	RELEASES = '/releases',
-	SUBMISSION = '/submission/holderSubmission',
+	SUBMISSION = '/submission/submission',
 	STUDIES = '/studies',
 	TEAM = '/team',
 	USER = '/user',