Skip to content

Commit

Permalink
fixing fetching invitation for specific organization
Browse files Browse the repository at this point in the history
  • Loading branch information
Ndevu12 committed Sep 28, 2024
1 parent 1b58a2a commit 6f1e595
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 47 deletions.
97 changes: 52 additions & 45 deletions src/pages/invitation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand Down Expand Up @@ -96,7 +96,7 @@ function Invitation() {
return null;
}
};

// Fetch invitation statistics
const {
loading: isLoading,
Expand All @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -376,7 +383,7 @@ function Invitation() {
</div>
</div>
</div>

{/* Conditionally render Cancel button */}
{row.original.Status === 'Pending' && (
<div className="mb-4">
Expand All @@ -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"
Expand All @@ -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">
Expand Down Expand Up @@ -454,7 +461,7 @@ function Invitation() {
),
},
];

const datum: any = [];
if (invitations && invitations.length > 0) {
invitations.forEach((invitation) => {
Expand Down Expand Up @@ -498,7 +505,7 @@ function Invitation() {
</>
);
}

const [DeleteInvitation] = useMutation(DELETE_INVITATION, {
variables: {
invitationId: deleteInvitation,
Expand All @@ -518,7 +525,7 @@ function Invitation() {
}, 500);
},
});

const handleOpenModal = () => setIsModalOpen(true);
const handleCloseModal = () => {
setIsModalOpen(false);
Expand Down Expand Up @@ -548,7 +555,7 @@ function Invitation() {
}, 500);
},
});

const [CancelInvitation] = useMutation(CANCEL_INVITATION, {
variables: {
id: cancelInvitation,
Expand Down
5 changes: 3 additions & 2 deletions src/queries/invitation.queries.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 6f1e595

Please sign in to comment.