Disable filter button when no role or status selected and update only…

… invitations with a pending status

src/pages/invitation.tsx

@@ -83,6 +83,7 @@ function Invitation() {
     role: '',
     status: '',
   });
+  const[filterDisabled,setFilterDisabled]=useState<boolean>(true)
   const modalRef = useRef<any>(null);
 
   const organizationToken = localStorage.getItem('orgToken');
@@ -133,7 +134,7 @@ function Invitation() {
 
   useEffect(() => {
     if (invitationStats) {
-      setSelectedStatus(invitationStats); // Set the fetched status as the default value
+      setSelectedStatus(''); // Set the fetched status as the default value
     }
   }, [invitationStats]);
 
@@ -219,7 +220,7 @@ function Invitation() {
       filterInvitations({
           variables: {
           role: filterVariables.role || null,
-          status: typeof filterVariables.status === 'string' ? filterVariables.status : null,
+          status:filterVariables.status || null,
           orgToken: organizationToken,
         },
     });
@@ -277,6 +278,27 @@ function Invitation() {
     fetchInvitations({ variables: { query: searchQuery } });
   };
 
+
+  useEffect(() => {
+    if (selectedRole || selectedStatus) {
+      setFilterDisabled(false);
+    } else {
+      setFilterDisabled(true);
+    }
+  }, [selectedRole, selectedStatus]);
+
+const handleRoleChange=(e:React.ChangeEvent<HTMLSelectElement>)=>{
+  const role=e.target.value
+  setSelectedRole(role)
+
+}
+
+const handleStatusChange=(e:React.ChangeEvent<HTMLSelectElement>)=>{
+  const status=e.target.value
+    setSelectedStatus(status)
+
+}
+
   const handleFilter = () => {
     if (!selectedRole && !selectedStatus) {
       toast.info('Please select role or status.');
@@ -291,6 +313,7 @@ function Invitation() {
       role: selectedRole,
       status: typeof selectedStatus === 'string' ? selectedStatus : '',
     });
+
   };
 
   const toggleOptions = (row: string) => {
@@ -364,7 +387,8 @@ function Invitation() {
               className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg">
               <>
                   <div className="mb-4"></div>
-                  <div className="mb-4">
+
+                  { row.original.Status === 'Pending' &&<div className="mb-4">
                     <div
                       className="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
                       onClick={() => {
@@ -388,6 +412,7 @@ function Invitation() {
                       </div>
                     </div>
                   </div>
+                    }
 
                   {/* Conditionally render Cancel button */}
                   {row.original.Status === 'Pending' && (
@@ -803,7 +828,7 @@ function Invitation() {
             type="button"
             disabled={disabledSearch}
             onClick={handleSearch}
-            className="bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center  md:w-[10%] p-0 sm:p-5 xm:p-5"
+            className={`bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center  md:w-[10%] p-0 sm:p-5 xm:p-5 ${disabledSearch?'cursor-not-allowed opacity-50':'cursor-pointer'}`}
           >
             Search
           </button>
@@ -821,7 +846,7 @@ function Invitation() {
             <select
               className="w-full max-w-xs px-2 py-1 text-gray-700 bg-transparent border border-gray-300 rounded outline-none md:w-auto dark:text-white dark:text:text-white"
               value={selectedRole}
-              onChange={(e) => setSelectedRole(e.target.value)}
+              onChange={handleRoleChange}
             >
               <option value="">-</option>
               <option value="trainee">trainee</option>
@@ -839,7 +864,7 @@ function Invitation() {
             <select
               className="w-full max-w-xs px-2 py-1 text-gray-700 bg-transparent border border-gray-300 rounded outline-none md:w-auto dark:text-white"
               value={selectedStatus}
-              onChange={(e) => setSelectedStatus(e.target.value)}
+              onChange={ handleStatusChange}
             >
               <option value="">-</option>
               <option value="pending">pending</option>
@@ -849,13 +874,15 @@ function Invitation() {
             </select>
           </span>
           <button
-            type="button"
-            // disabled={disabled}
-            onClick={handleFilter}
-            className="w-full max-w-xs md:w-auto bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center px-4 py-2"
-          >
-            Filter
-          </button>
+  type="button"
+  disabled={filterDisabled}
+  onClick={handleFilter}
+  className={`w-full max-w-xs md:w-auto bg-[#9e85f5] text-white text-lg md:text-xl rounded-md h-10 flex items-center justify-center px-4 py-2 
+    ${filterDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+>
+  Filter
+</button>
+
         </div>
         {/* Table view */}
         {content}