From cbbaf039db5fb96ca2a7ea33a18f34e9b785d67a Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Fri, 16 Feb 2024 12:38:15 +0545
Subject: [PATCH] feat (frontend): approve organization api integration (#1215)

* fix managProject: UI fix

* feat manageOrganization: redirect to approveOrganization on org click on To Be Verified tab org list

* fix rejectOrganization: service for rejectOrganization add

* feat organizationApproval: state management to show approving/rejecting status, redirect to manage-org after approval success
---
 src/frontend/src/api/OrganisationService.ts   | 44 +++++++++++-
 .../ApproveOrganization/OrganizationForm.tsx  | 67 +++++++++++++++++--
 .../src/store/slices/organisationSlice.ts     | 14 ++++
 src/frontend/src/views/ManageProject.tsx      |  2 +-
 src/frontend/src/views/Organisation.tsx       | 19 ++++--
 5 files changed, 130 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/api/OrganisationService.ts b/src/frontend/src/api/OrganisationService.ts
index 5453826222..ed4683d630 100644
--- a/src/frontend/src/api/OrganisationService.ts
+++ b/src/frontend/src/api/OrganisationService.ts
@@ -158,11 +158,12 @@ export const PatchOrganizationDataService: Function = (url: string, payload: any
   };
 };
 
-export const ApproveOrganizationService: Function = (url: string, organizationId: string) => {
+export const ApproveOrganizationService: Function = (url: string) => {
   return async (dispatch) => {
-    const approveOrganization = async (url) => {
+    const approveOrganization = async (url: string) => {
       try {
-        await axios.post(url, organizationId);
+        dispatch(OrganisationAction.SetOrganizationApproving(true));
+        await axios.post(url);
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
@@ -171,7 +172,11 @@ export const ApproveOrganizationService: Function = (url: string, organizationId
             duration: 2000,
           }),
         );
+        dispatch(OrganisationAction.SetOrganizationApproving(false));
+        dispatch(OrganisationAction.SetOrganisationFormData({}));
+        dispatch(OrganisationAction.SetOrganizationApprovalStatus(true));
       } catch (error) {
+        dispatch(OrganisationAction.SetOrganizationApproving(false));
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
@@ -185,3 +190,36 @@ export const ApproveOrganizationService: Function = (url: string, organizationId
     await approveOrganization(url);
   };
 };
+
+export const RejectOrganizationService: Function = (url: string) => {
+  return async (dispatch) => {
+    const rejectOrganization = async (url: string) => {
+      try {
+        dispatch(OrganisationAction.SetOrganizationRejecting(true));
+        await axios.delete(url);
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Organization rejected successfully.',
+            variant: 'success',
+            duration: 2000,
+          }),
+        );
+        dispatch(OrganisationAction.SetOrganizationRejecting(false));
+        dispatch(OrganisationAction.SetOrganisationFormData({}));
+        dispatch(OrganisationAction.SetOrganizationApprovalStatus(true));
+      } catch (error) {
+        dispatch(OrganisationAction.SetOrganizationRejecting(false));
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Failed to reject organization.',
+            variant: 'error',
+            duration: 2000,
+          }),
+        );
+      }
+    };
+    await rejectOrganization(url);
+  };
+};
diff --git a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
index 22d226431d..ecca4a8432 100644
--- a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
+++ b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
@@ -1,17 +1,32 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import InputTextField from '@/components/common/InputTextField';
 import TextArea from '@/components/common/TextArea';
 import Button from '@/components/common/Button';
-import { ApproveOrganizationService, GetIndividualOrganizationService } from '@/api/OrganisationService';
+import {
+  ApproveOrganizationService,
+  GetIndividualOrganizationService,
+  RejectOrganizationService,
+} from '@/api/OrganisationService';
 import CoreModules from '@/shared/CoreModules';
+import { OrganisationAction } from '@/store/slices/organisationSlice';
 
 const OrganizationForm = () => {
   const dispatch = useDispatch();
   const params = useParams();
+  const navigate = useNavigate();
   const organizationId = params.id;
   const organisationFormData: any = CoreModules.useAppSelector((state) => state.organisation.organisationFormData);
+  const organizationApproving: any = CoreModules.useAppSelector(
+    (state) => state.organisation.organizationApprovalStatus.organizationApproving,
+  );
+  const organizationRejecting: any = CoreModules.useAppSelector(
+    (state) => state.organisation.organizationApprovalStatus.organizationRejecting,
+  );
+  const organizationApprovalSuccess: any = CoreModules.useAppSelector(
+    (state) => state.organisation.organizationApprovalStatus.isSuccess,
+  );
 
   useEffect(() => {
     if (organizationId) {
@@ -20,11 +35,27 @@ const OrganizationForm = () => {
   }, [organizationId]);
 
   const approveOrganization = () => {
-    dispatch(
-      ApproveOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/approve`, { org_id: organizationId }),
-    );
+    if (organizationId) {
+      dispatch(
+        ApproveOrganizationService(
+          `${import.meta.env.VITE_API_URL}/organisation/approve/?org_id=${parseInt(organizationId)}`,
+        ),
+      );
+    }
+  };
+
+  const rejectOrganization = () => {
+    dispatch(RejectOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/${organizationId}`));
   };
 
+  // redirect to manage-organization page after approve/reject success
+  useEffect(() => {
+    if (organizationApprovalSuccess) {
+      dispatch(OrganisationAction.SetOrganizationApprovalStatus(false));
+      navigate('/organisation');
+    }
+  }, [organizationApprovalSuccess]);
+
   return (
     <div className="fmtm-max-w-[50rem] fmtm-bg-white fmtm-py-5 lg:fmtm-py-10 fmtm-px-5 lg:fmtm-px-9 fmtm-mx-auto">
       <div className="fmtm-flex fmtm-justify-center">
@@ -40,6 +71,7 @@ const OrganizationForm = () => {
           value={organisationFormData?.name}
           onChange={() => {}}
           fieldType="text"
+          disabled
         />
         <InputTextField
           id="email"
@@ -48,6 +80,7 @@ const OrganizationForm = () => {
           value={organisationFormData?.email}
           onChange={() => {}}
           fieldType="text"
+          disabled
         />
         <InputTextField
           id="url"
@@ -56,6 +89,7 @@ const OrganizationForm = () => {
           value={organisationFormData?.url}
           onChange={() => {}}
           fieldType="text"
+          disabled
         />
         <TextArea
           id="description"
@@ -64,6 +98,7 @@ const OrganizationForm = () => {
           rows={3}
           value={organisationFormData?.description}
           onChange={() => {}}
+          disabled
         />
         <InputTextField
           id="odk_central_url"
@@ -72,6 +107,7 @@ const OrganizationForm = () => {
           value={organisationFormData?.odk_central_url}
           onChange={() => {}}
           fieldType="text"
+          disabled
         />
         <InputTextField
           id="url"
@@ -80,6 +116,7 @@ const OrganizationForm = () => {
           value={organisationFormData?.organization_type}
           onChange={() => {}}
           fieldType="text"
+          disabled
         />
         <div>
           <p className="fmtm-text-[1rem] fmtm-font-semibold fmtm-mb-2">Logo</p>
@@ -97,8 +134,24 @@ const OrganizationForm = () => {
         </div>
       </div>
       <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
-        <Button btnText="Reject" btnType="other" className="fmtm-font-bold" onClick={() => {}} />
-        <Button btnText="Verify" btnType="primary" className="fmtm-font-bold" onClick={approveOrganization} />
+        <Button
+          btnText="Reject"
+          btnType="other"
+          className="fmtm-font-bold"
+          onClick={rejectOrganization}
+          isLoading={organizationRejecting}
+          loadingText="Rejecting..."
+          disabled={organizationApproving}
+        />
+        <Button
+          btnText="Verify"
+          btnType="primary"
+          className="fmtm-font-bold"
+          onClick={approveOrganization}
+          isLoading={organizationApproving}
+          loadingText="Verifying..."
+          disabled={organizationRejecting}
+        />
       </div>
     </div>
   );
diff --git a/src/frontend/src/store/slices/organisationSlice.ts b/src/frontend/src/store/slices/organisationSlice.ts
index bd1caaa287..d755196abd 100644
--- a/src/frontend/src/store/slices/organisationSlice.ts
+++ b/src/frontend/src/store/slices/organisationSlice.ts
@@ -15,6 +15,11 @@ const OrganisationSlice = CoreModules.createSlice({
       participated_in: [],
     },
     consentApproval: false,
+    organizationApprovalStatus: {
+      isSuccess: false,
+      organizationApproving: false,
+      organizationRejecting: false,
+    },
   },
   reducers: {
     GetOrganisationsData(state, action) {
@@ -41,6 +46,15 @@ const OrganisationSlice = CoreModules.createSlice({
     SetIndividualOrganization(state, action) {
       state.organisationFormData = action.payload;
     },
+    SetOrganizationApproving(state, action) {
+      state.organizationApprovalStatus.organizationApproving = action.payload;
+    },
+    SetOrganizationRejecting(state, action) {
+      state.organizationApprovalStatus.organizationRejecting = action.payload;
+    },
+    SetOrganizationApprovalStatus(state, action) {
+      state.organizationApprovalStatus.isSuccess = action.payload;
+    },
   },
 });
 
diff --git a/src/frontend/src/views/ManageProject.tsx b/src/frontend/src/views/ManageProject.tsx
index adb7abc0df..9de80a03fb 100644
--- a/src/frontend/src/views/ManageProject.tsx
+++ b/src/frontend/src/views/ManageProject.tsx
@@ -25,7 +25,7 @@ const ManageProject = () => {
   }, [decodedProjectId]);
 
   return (
-    <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row fmtm-bg-[#F5F5F5] fmtm-p-5 fmtm-gap-8 lg:fmtm-min-h-full">
+    <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row fmtm-bg-[#F5F5F5] fmtm-p-5 fmtm-gap-8 fmtm-flex-1">
       <div className="sm:fmtm-w-[15%] sm:fmtm-min-w-[7.3rem] fmtm-flex sm:fmtm-flex-col fmtm-items-center sm:fmtm-items-start fmtm-gap-4 sm:fmtm-gap-0 ">
         <div
           onClick={() => navigate(`/newproject_details/${params?.id}`)}
diff --git a/src/frontend/src/views/Organisation.tsx b/src/frontend/src/views/Organisation.tsx
index 0bc391cbbd..d0eadd7cba 100644
--- a/src/frontend/src/views/Organisation.tsx
+++ b/src/frontend/src/views/Organisation.tsx
@@ -5,6 +5,7 @@ import { OrganisationDataService } from '@/api/OrganisationService';
 import { user_roles } from '@/types/enums';
 import CustomizedImage from '@/utilities/CustomizedImage';
 import { GetOrganisationDataModel } from '@/models/organisation/organisationModel';
+import { useNavigate } from 'react-router-dom';
 
 const Organisation = () => {
   const cardStyle = {
@@ -17,11 +18,11 @@ const Organisation = () => {
     borderRadius: '0px',
   };
 
-  const url = 'https://fmtm.naxa.com.np/d907cf67fe587072a592.png';
+  const navigate = useNavigate();
 
   const [searchKeyword, setSearchKeyword] = useState<string>('');
   const [activeTab, setActiveTab] = useState<0 | 1>(0);
-  const [verifiedTab, setVerifiedTab] = useState<boolean>(false);
+  const [verifiedTab, setVerifiedTab] = useState<boolean>(true);
   const token = CoreModules.useAppSelector((state) => state.login.loginToken);
 
   const handleSearchChange = (event) => {
@@ -38,8 +39,16 @@ const Organisation = () => {
   );
 
   useEffect(() => {
-    dispatch(OrganisationDataService(`${import.meta.env.VITE_API_URL}/organisation/`));
-  }, []);
+    if (verifiedTab) {
+      dispatch(OrganisationDataService(`${import.meta.env.VITE_API_URL}/organisation/`));
+    } else {
+      dispatch(OrganisationDataService(`${import.meta.env.VITE_API_URL}/organisation/unapproved/`));
+    }
+  }, [verifiedTab]);
+
+  const approveOrganization = (id: number) => {
+    navigate(`/approve-organization/${id}`);
+  };
 
   return (
     <CoreModules.Box
@@ -177,7 +186,7 @@ const Organisation = () => {
       </div>
       <CoreModules.Box className="fmtm-grid fmtm-grid-cols-1 md:fmtm-grid-cols-2 lg:fmtm-grid-cols-3 fmtm-gap-5">
         {filteredCardData?.map((data, index) => (
-          <CoreModules.Card key={index} sx={cardStyle}>
+          <CoreModules.Card key={index} sx={cardStyle} onClick={() => !verifiedTab && approveOrganization(data.id)}>
             {data.logo ? (
               <div className="fmtm-min-w-[60px] md:fmtm-min-w-[80px] lg:fmtm-min-w-[120px]">
                 <CoreModules.CardMedia component="img" src={data.logo} sx={{ width: ['60px', '80px', '120px'] }} />