admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

improvement: loading state added to buttons who interact with backend.

Browse Source
This commit is contained in:
Admin
2026-07-17 10:58:04 +03:30
parent 68fc9d5d6d
commit d2ad1fd7b6
23 changed files with 240 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/ui/organizations/OrganizationConnectionsMobileList.tsx
View File

@@ -135,7 +135,7 @@ export function OrganizationConnectionsMobileList({
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
disabled={pendingConnectionRowId !== null}
onClick={() => onRespond(row.id, 'ACCEPT')}
aria-label={labels.acceptRequest}
title={labels.acceptRequest}
@@ -145,7 +145,7 @@ export function OrganizationConnectionsMobileList({
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
disabled={pendingConnectionRowId !== null}
onClick={() => onRespond(row.id, 'REJECT')}
aria-label={labels.declineRequest}
title={labels.declineRequest}
@@ -158,7 +158,7 @@ export function OrganizationConnectionsMobileList({
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
disabled={deleteConnectionRowId !== null}
onClick={() => onDeleteConnection(row.id)}
aria-label={labels.removeConnection}
title={labels.removeConnection}
@@ -195,7 +195,7 @@ export function OrganizationConnectionsMobileList({
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== result.id}
disabled={pendingConnectionRowId !== null}
onClick={() => onSendConnectionRequest(result.id)}
aria-label={labels.sendRequest}
title={labels.sendRequest}

116
frontend/src/components/ui/organizations/OrganizationsPage.tsx
View File

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { useLocale, useTranslations } from 'next-intl';
import { useToast } from '@/lib/hooks/useToast';
import { useAsyncActionById } from '@/lib/hooks/useAsyncAction';
import { Check, Trash2, UserPlus, X } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { notifyPendingConnectionsChanged } from '@/lib/hooks/usePendingConnectionsCount';
@@ -81,8 +82,8 @@ export function OrganizationsPage() {
const [mode, setMode] = useState<TableMode>('existing');
const [searching, setSearching] = useState(false);
const [searchResults, setSearchResults] = useState<CounterpartSearchResultDto[]>([]);
const [pendingConnectionRowId, setPendingConnectionRowId] = useState<string | null>(null);
const [deleteConnectionRowId, setDeleteConnectionRowId] = useState<string | null>(null);
const connectionBusy = useAsyncActionById();
const deleteBusy = useAsyncActionById();
const [items, setItems] = useState<CounterpartItemDto[]>([]);
const [manualOrganizationName, setManualOrganizationName] = useState('');
@@ -171,20 +172,19 @@ export function OrganizationsPage() {
}, [query, formatApiMessage, showError, setToastError]);
async function submitConnectionRequest(targetOrganizationId: string) {
setPendingConnectionRowId(targetOrganizationId);
toast.setError('');
try {
await organizationApi.createConnectionRequest(targetOrganizationId);
toast.showSuccess(t('successConnectionSent', { counterpart }));
setSearchResults([]);
setQuery('');
setMode('existing');
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
} finally {
setPendingConnectionRowId(null);
}
await connectionBusy.run(targetOrganizationId, async () => {
toast.setError('');
try {
await organizationApi.createConnectionRequest(targetOrganizationId);
toast.showSuccess(t('successConnectionSent', { counterpart }));
setSearchResults([]);
setQuery('');
setMode('existing');
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
}
});
}
async function sendInvite() {
@@ -272,34 +272,32 @@ export function OrganizationsPage() {
}
async function respondToPendingConnection(connectionId: string, action: 'ACCEPT' | 'REJECT') {
setPendingConnectionRowId(connectionId);
toast.setError('');
try {
await organizationApi.respondToConnectionRequest(connectionId, action);
toast.showSuccess(
action === 'ACCEPT' ? t('successAccepted') : t('successDeclined'),
);
notifyPendingConnectionsChanged();
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
} finally {
setPendingConnectionRowId(null);
}
await connectionBusy.run(connectionId, async () => {
toast.setError('');
try {
await organizationApi.respondToConnectionRequest(connectionId, action);
toast.showSuccess(
action === 'ACCEPT' ? t('successAccepted') : t('successDeclined'),
);
notifyPendingConnectionsChanged();
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
}
});
}
async function deleteConnection(connectionId: string) {
setDeleteConnectionRowId(connectionId);
toast.setError('');
try {
await organizationApi.deleteConnection(connectionId);
toast.showSuccess(t('successRemoved'));
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
} finally {
setDeleteConnectionRowId(null);
}
await deleteBusy.run(connectionId, async () => {
toast.setError('');
try {
await organizationApi.deleteConnection(connectionId);
toast.showSuccess(t('successRemoved'));
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
}
});
}
function clearSearchView() {
@@ -320,7 +318,7 @@ export function OrganizationsPage() {
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{tabLabel}</h1>
<p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
</div>
<Button type="button" size="sm" className="w-full sm:w-auto shrink-0" onClick={() => void openInvitationHistory()}>
<Button type="button" size="sm" className="w-full sm:w-auto shrink-0" onClick={() => openInvitationHistory()}>
{t('invitationHistory')}
</Button>
</div>
@@ -349,8 +347,8 @@ export function OrganizationsPage() {
searchResults={searchResults}
currentOrganizationId={currentOrganization.id}
counterpart={counterpart}
pendingConnectionRowId={pendingConnectionRowId}
deleteConnectionRowId={deleteConnectionRowId}
pendingConnectionRowId={connectionBusy.pendingId}
deleteConnectionRowId={deleteBusy.pendingId}
copiedId={copiedId}
copyingInvitationId={copyingInvitationId}
showInviteForm={showInviteForm}
@@ -360,14 +358,14 @@ export function OrganizationsPage() {
formatConnectionStatusLabel={formatConnectionStatusLabel}
formatTableDate={formatTableDate}
getInvitationTarget={(row) => invitationTargetFromConnectionRow(row, currentOrganization.id)}
onCopyInvitation={(row) => void handleCopyInvitationFromRow(row)}
onRespond={(rowId, action) => void respondToPendingConnection(rowId, action)}
onDeleteConnection={(rowId) => void deleteConnection(rowId)}
onSendConnectionRequest={(orgId) => void submitConnectionRequest(orgId)}
onCopyInvitation={(row) => handleCopyInvitationFromRow(row)}
onRespond={(rowId, action) => respondToPendingConnection(rowId, action)}
onDeleteConnection={(rowId) => deleteConnection(rowId)}
onSendConnectionRequest={(orgId) => submitConnectionRequest(orgId)}
onToggleInviteForm={() => setShowInviteForm((v) => !v)}
onManualOrganizationNameChange={setManualOrganizationName}
onManualOwnerEmailChange={setManualOwnerEmail}
onSendInvite={() => void sendInvite()}
onSendInvite={() => sendInvite()}
labels={{
loading: tCommon('loadingEllipsis'),
emptyConnections: t('emptyConnections'),
@@ -462,8 +460,8 @@ export function OrganizationsPage() {
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
onClick={() => void respondToPendingConnection(row.id, 'ACCEPT')}
disabled={connectionBusy.pendingId !== null}
onClick={() => respondToPendingConnection(row.id, 'ACCEPT')}
aria-label={t('acceptRequest')}
title={t('acceptRequest')}
>
@@ -472,8 +470,8 @@ export function OrganizationsPage() {
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
onClick={() => void respondToPendingConnection(row.id, 'REJECT')}
disabled={connectionBusy.pendingId !== null}
onClick={() => respondToPendingConnection(row.id, 'REJECT')}
aria-label={t('declineRequest')}
title={t('declineRequest')}
>
@@ -486,8 +484,8 @@ export function OrganizationsPage() {
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
onClick={() => void deleteConnection(row.id)}
disabled={deleteBusy.pendingId !== null}
onClick={() => deleteConnection(row.id)}
aria-label={t('removeConnection')}
title={t('removeConnection')}
>
@@ -514,10 +512,8 @@ export function OrganizationsPage() {
<button
type="button"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={
pendingConnectionRowId !== null && pendingConnectionRowId !== r.id
}
onClick={() => void submitConnectionRequest(r.id)}
disabled={connectionBusy.pendingId !== null}
onClick={() => submitConnectionRequest(r.id)}
aria-label={t('sendRequest')}
title={t('sendRequest')}
>
@@ -556,7 +552,7 @@ export function OrganizationsPage() {
type="button"
isLoading={inviteLoading}
disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
onClick={() => void sendInvite()}
onClick={() => sendInvite()}
className="w-full"
>
{t('sendInvitation')}