fix-coordinators-table

Author: Calebgisa72

src/Mutations/User.tsx

@@ -6,6 +6,17 @@ export const DROP_TTL_USER = gql`
   }
 `;
 
+export const DROP_COORDINATOR = gql`
+  mutation DropCordinator($id: String!, $reason: String!) {
+    dropCordinator(id: $id, reason: $reason)
+  }
+`;
+export const UNDROP_COORDINATOR = gql`
+  mutation UndropCordinator($id: String!) {
+    undropCordinator(id: $id)
+  }
+`;
+
 export const UNDROP_TTL_USER = gql`
   mutation UnDropTTLUser($email: String!) {
     undropTTLUser(email: $email)

src/components/DataTable.tsx

@@ -91,7 +91,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
         >
           <thead>
             {headerGroups.map((headerGroup) => (
-              <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
+              <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column) => (
                   <th
                     className={`thead ${column.isSorted ? 'sort-asc' : ''}`}

src/components/DropOrUndropUser.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from './Buttons';
+
+interface DropOrUndropUserProps {
+  subject: string;
+  title: string;
+  drop?: boolean;
+  loading: boolean;
+  setRemovalReason?: React.Dispatch<React.SetStateAction<string>>;
+  onSubmit: (data: React.MouseEvent<HTMLButtonElement>) => void;
+  onClose: () => void;
+}
+
+function DropOrUndropUser({
+  subject,
+  title,
+  drop,
+  loading,
+  setRemovalReason,
+  onSubmit,
+  onClose,
+}: DropOrUndropUserProps) {
+  const { t } = useTranslation();
+  const [reason, setReason] = useState('');
+
+  const handleConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (onSubmit) onSubmit(e);
+  };
+
+  return (
+    <div className="h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center  px-4">
+      <div className="w-full p-4 pb-8 bg-white rounded-lg dark:bg-dark-bg sm:w-3/4 xl:w-4/12">
+        <div className="flex flex-wrap items-center justify-center w-full card-title ">
+          <h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
+            {t(subject)}
+          </h3>
+          <hr className="w-full my-3 border-b bg-primary" />
+        </div>
+        <div className="card-body w-full">
+          <form className="px-8 py-3 w-full">
+            <div className="flex flex-wrap items-center justify-center w-full card-title ">
+              <h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
+                {t(title)}
+              </h3>
+            </div>
+            {/* Reason input field */}
+            {drop && (
+              <div className="mt-4">
+                <input
+                  type="text"
+                  className="mt-1 p-2 block w-full border rounded-md shadow-sm focus:ring focus:ring-opacity-50 focus:ring-primary dark:bg-dark-bg dark:border-gray-600 dark:text-white"
+                  placeholder={t('Enter reason')}
+                  value={reason}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setReason(e.target.value)
+                  }
+                  id="removalReason"
+                />
+                <p
+                  id="errorMessage"
+                  className="text-red-500 text-xs mt-1 hidden"
+                >
+                  Reason is required!
+                </p>
+              </div>
+            )}
+
+            <div className="flex justify-between w-full pt-3">
+              <Button
+                data-testid="removeModel2"
+                variant="info"
+                size="sm"
+                style="w-[8rem] h-[2.3rem] text-sm p-0 mx-0 flex justify-center items-center"
+                onClick={() => {
+                  if (drop) {
+                    setReason('');
+                    document
+                      .getElementById('errorMessage')!
+                      .classList.add('hidden');
+                  }
+                  onClose();
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                style="w-[8rem] h-[2.3rem] text-sm p-0 mx-0 flex justify-center items-center"
+                onClick={() => {
+                  if (!reason.trim() && drop) {
+                    document
+                      .getElementById('errorMessage')!
+                      .classList.remove('hidden');
+                  } else {
+                    if (drop && setRemovalReason) {
+                      setRemovalReason(reason);
+                    }
+                    handleConfirm(
+                      new MouseEvent(
+                        'click',
+                      ) as unknown as React.MouseEvent<HTMLButtonElement>,
+                    );
+                  }
+                }}
+                loading={loading}
+              >
+                {loading ? t('Loading') : t('Proceed')}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DropOrUndropUser;