fixing fetching invitation for specific organization

Author: Ndevu12

src/pages/invitation.tsx

@@ -60,12 +60,12 @@ function Invitation() {
     const newState = !removeInviteeModel;
     setRemoveInviteeModel(newState);
   };
-
+  
   const cancelInviteeMod = () => {
     const newState = !cancelInviteeModel;
     setCancelInviteeModel(newState);
   };
-
+  
   const [selectedRow, setSelectedRow] = useState<string | null>(null);
   const [removeInviteeModel, setRemoveInviteeModel] = useState(false);
   const [deleteInvitation, setDeleteInvitation] = useState('');
@@ -96,7 +96,7 @@ function Invitation() {
         return null;
     }
   };
-
+  
   // Fetch invitation statistics
   const {
     loading: isLoading,
@@ -105,42 +105,41 @@ function Invitation() {
   } = useQuery(GET_INVITATIONS_STATISTICS_QUERY, {
     variables: {
       orgToken: organizationToken,
-      daysRange:
-        filterRange !== 'Custom range' ? parseRange(filterRange) : null,
+      daysRange: filterRange !== 'Custom range' ? parseRange(filterRange) : null,
       startDate: filterRange === 'Custom range' ? customRange.startDate : null,
       endDate: filterRange === 'Custom range' ? customRange.endDate : null,
     },
     skip: !organizationToken,
     fetchPolicy: 'network-only',
     onError: (error) => toast.error('Error fetching data'),
   });
-
+  
   // Fetch all invitations
   const {
     data,
     loading: queryLoading,
     error: queryError,
     refetch,
   } = useQuery(GET_ALL_INVITATIONS, {
-    variables:{
+    variables: {
       orgToken: organizationToken,
     },
     fetchPolicy: 'network-only',
   });
-
+  
   useEffect(() => {
     if (invitationStats) {
       setSelectedStatus(invitationStats); // Set the fetched status as the default value
     }
   }, [invitationStats]);
-
+  
   // Set email and role when modal opens
   useEffect(() => {
     if (data && data.getAllInvitations) {
       const invitation = data.getAllInvitations.invitations.find(
         (inv: Invitationn) => inv.id === selectedInvitationId,
       );
-
+  
       if (invitation && invitation.invitees.length > 0) {
         setEmail(invitation.invitees[0].email);
         setRole(invitation.invitees[0].role);
@@ -171,60 +170,65 @@ function Invitation() {
       setInvitationStats(queryData.getInvitationStatistics);
     }
   }, [queryData, refreshData, isLoading]);
-
+  
   // Handle the range change
   const handleRangeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setFilterRange(e.target.value);
   };
-
+  
   // Handle custom date range
   const handleCustomRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setCustomRange((prev) => ({ ...prev, [name]: value }));
   };
-
+  
   if (!organizationToken) {
     return <p>Organization token not found. Please log in.</p>;
   }
-
+  
   const updateInviteeMod = () => {
     const newState = !updateInviteeModel;
     setUpdateInviteeModel(newState);
   };
-
+  
   const [
     fetchInvitations,
     { data: searchData, loading: searchLoading, error: searchError },
   ] = useLazyQuery(GET_INVITATIONS, {
     variables: {
-       query: searchQuery,
-       orgToken: organizationToken,
-       },
+      query: searchQuery,
+      orgToken: organizationToken,
+    },
     fetchPolicy: 'network-only',
   });
-
+  
   const [
     filterInvitations,
     { data: filterData, loading: filterLoad, error: filterError },
   ] = useLazyQuery(GET_ROLES_AND_STATUSES, {
-    variables:filterVariables,
     fetchPolicy: 'network-only',
   });
-
+  
   useEffect(() => {
     if (filterVariables.role || filterVariables.status) {
-      filterInvitations();
+      filterInvitations({
+        variables: {
+          role: filterVariables.role || null,
+          status: typeof filterVariables.status === 'string' ? filterVariables.status : null,
+          orgToken: organizationToken,
+        },
+      });
     }
-  }, [filterVariables, filterInvitations]);
-
+  }, [filterVariables, filterInvitations, organizationToken]);
+  
   // Consolidated effect to handle query and search data
   useEffect(() => {
     if (queryLoading || searchLoading || filterLoad) {
       setLoading(true);
     } else {
       setLoading(false);
     }
-
+  
     if (queryError) {
       setError(queryError.message);
     } else if (searchError) {
@@ -254,57 +258,60 @@ function Invitation() {
     filterLoad,
     filterError,
   ]);
-
+  
   const handleSearch = () => {
     if (!searchQuery.trim()) {
       setError('Search query cannot be empty');
       return;
     }
-
+  
     setInvitations([]);
     setError(null);
     setLoading(false);
-
+  
     fetchInvitations({ variables: { query: searchQuery } });
   };
-
+  
   const handleFilter = () => {
     if (!selectedRole && !selectedStatus) {
       toast.info('Please select role or status.');
       return;
     }
-
+  
     setInvitations([]);
     setError(null);
     setLoading(false);
-
-    setFilterVariables({ role: selectedRole, status: selectedStatus });
+  
+    setFilterVariables({
+      role: selectedRole,
+      status: typeof selectedStatus === 'string' ? selectedStatus : '',
+    });
   };
-
+  
   const toggleOptions = (row: string) => {
     setSelectedRow(selectedRow === row ? null : row);
   };
-
+  
   const disabledSearch = !searchQuery.trim();
-
+  
   interface EmailInputProps {
     email: string;
     setEmail: (email: string) => void;
   }
-
+  
   const validateEmail = (email: string): boolean => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Simple email validation regex
     const isValidEmail = emailRegex.test(email);
     setIsValid(isValidEmail); // Update validation state
     return isValidEmail;
   };
-
+  
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newEmail = e.target.value;
     setEmail(newEmail);
     validateEmail(newEmail); // Validate on change
   };
-
+  
   // Defining invitation table
   let content;
   const capitalizeStrings = (str: string): string => {
@@ -376,7 +383,7 @@ function Invitation() {
                       </div>
                     </div>
                   </div>
-
+  
                   {/* Conditionally render Cancel button */}
                   {row.original.Status === 'Pending' && (
                     <div className="mb-4">
@@ -402,7 +409,7 @@ function Invitation() {
                       </div>
                     </div>
                   )}
-
+  
                   <div className="mb-4">
                     <div
                       className="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
@@ -426,7 +433,7 @@ function Invitation() {
                       </div>
                     </div>
                   </div>
-
+  
                   {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">
@@ -454,7 +461,7 @@ function Invitation() {
       ),
     },
   ];
-
+  
   const datum: any = [];
   if (invitations && invitations.length > 0) {
     invitations.forEach((invitation) => {
@@ -498,7 +505,7 @@ function Invitation() {
       </>
     );
   }
-
+  
   const [DeleteInvitation] = useMutation(DELETE_INVITATION, {
     variables: {
       invitationId: deleteInvitation,
@@ -518,7 +525,7 @@ function Invitation() {
       }, 500);
     },
   });
-
+  
   const handleOpenModal = () => setIsModalOpen(true);
   const handleCloseModal = () => {
     setIsModalOpen(false);
@@ -548,7 +555,7 @@ function Invitation() {
       }, 500);
     },
   });
-
+  
   const [CancelInvitation] = useMutation(CANCEL_INVITATION, {
     variables: {
       id: cancelInvitation,

src/queries/invitation.queries.tsx

@@ -33,9 +33,10 @@ export const GET_INVITATIONS = gql`
 `;
 
 export const GET_ROLES_AND_STATUSES = gql`
-  query filterInvitations($limit: Int, $offset: Int, $role: String, $status: String) {
-    filterInvitations(limit: $limit, offset: $offset, role: $role, status: $status) {
+  query filterInvitations($limit: Int, $offset: Int, $role: String, $status: String, $orgToken: String!) {
+    filterInvitations(limit: $limit, offset: $offset, role: $role, status: $status, orgToken: $orgToken) {
       invitations {
+      orgToken
         invitees {
           email
           role