feat(improvement): add pagination to endpoints and pages + sync navbar when data changes
This commit is contained in:
@@ -15,12 +15,15 @@ import {
|
||||
import { searchUserByExactMobile, type SearchedUser } from '../api/users';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { InfiniteScroll } from '../components/infiniteScroll';
|
||||
|
||||
const toEnglishDigits = (str: string) => {
|
||||
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
|
||||
.replace(/[٠-٩]/g, (d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d).toString());
|
||||
};
|
||||
|
||||
const LIMIT = 10;
|
||||
|
||||
export default function EditWorkspace() {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
@@ -52,6 +55,11 @@ export default function EditWorkspace() {
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [newMemberRole, setNewMemberRole] = useState<'owner' | 'admin' | 'member' | 'guest'>('member');
|
||||
|
||||
// Pagination States
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [isLoadingMembers, setIsLoadingMembers] = useState(false);
|
||||
|
||||
// Modal State
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
|
||||
@@ -71,8 +79,12 @@ export default function EditWorkspace() {
|
||||
setMyRole(workspaceData.my_role || 'member');
|
||||
setWorkspaceOwnerId(workspaceData.owner || '');
|
||||
|
||||
const membersData = await fetchWorkspaceMemberships(id!);
|
||||
setMembers(membersData);
|
||||
const membersData = await fetchWorkspaceMemberships({ workspace: id!, limit: LIMIT, offset: 0 });
|
||||
const results = membersData.results || (Array.isArray(membersData) ? membersData : []);
|
||||
|
||||
setMembers(results);
|
||||
setOffset(LIMIT);
|
||||
setHasMore(!!membersData.next);
|
||||
} catch (error) {
|
||||
toast.error(t.workspace?.toast?.errorLoad || "Failed to load workspace data.");
|
||||
navigate('/workspaces');
|
||||
@@ -81,6 +93,23 @@ export default function EditWorkspace() {
|
||||
}
|
||||
};
|
||||
|
||||
const loadMoreMembers = async () => {
|
||||
if (isLoadingMembers || !hasMore || !id) return;
|
||||
try {
|
||||
setIsLoadingMembers(true);
|
||||
const membersData = await fetchWorkspaceMemberships({ workspace: id, limit: LIMIT, offset });
|
||||
const results = membersData.results || [];
|
||||
|
||||
setMembers((prev) => [...prev, ...results]);
|
||||
setOffset((prev) => prev + LIMIT);
|
||||
setHasMore(!!membersData.next);
|
||||
} catch (error) {
|
||||
console.error("Failed to load more members", error);
|
||||
} finally {
|
||||
setIsLoadingMembers(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
|
||||
const cleanQuery = toEnglishDigits(searchQuery.trim());
|
||||
@@ -116,8 +145,14 @@ export default function EditWorkspace() {
|
||||
if (!name.trim() || !id) return;
|
||||
try {
|
||||
setIsSaving(true);
|
||||
|
||||
await updateWorkspace(id, { name, description });
|
||||
|
||||
toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
|
||||
window.dispatchEvent(new CustomEvent('workspace_edited', {
|
||||
detail: { id, name, description }
|
||||
}));
|
||||
|
||||
navigate('/workspaces');
|
||||
} catch (error) {
|
||||
toast.error(t.workspace?.toast?.errorUpdate || "Failed to update workspace.");
|
||||
@@ -134,7 +169,7 @@ export default function EditWorkspace() {
|
||||
user: searchResult.id,
|
||||
role: newMemberRole
|
||||
});
|
||||
setMembers([...members, newMembership]);
|
||||
setMembers([newMembership, ...members]);
|
||||
toast.success(t.workspace?.toast?.successAdd || "Member added successfully.");
|
||||
setSearchQuery('');
|
||||
setSearchResult(null);
|
||||
@@ -297,64 +332,72 @@ export default function EditWorkspace() {
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{members.map((m) => {
|
||||
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
|
||||
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
|
||||
<InfiniteScroll
|
||||
onLoadMore={loadMoreMembers}
|
||||
hasMore={hasMore}
|
||||
isLoading={isLoadingMembers}
|
||||
className="space-y-3"
|
||||
loader={<div className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">{t.workspace?.loading || "Loading more members..."}</div>}
|
||||
>
|
||||
{members.map((m) => {
|
||||
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
|
||||
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
|
||||
|
||||
return (
|
||||
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{m.user?.profile_picture ? (
|
||||
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
|
||||
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
|
||||
return (
|
||||
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{m.user?.profile_picture ? (
|
||||
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
|
||||
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||
{canChangeThisUserRole ? (
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) => handleChangeRole(m.id, e.target.value)}
|
||||
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
|
||||
{m.role === 'owner' && <Shield className="w-3 h-3" />}
|
||||
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openDeleteModal(m.id)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||
{canChangeThisUserRole ? (
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) => handleChangeRole(m.id, e.target.value)}
|
||||
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
|
||||
{m.role === 'owner' && <Shield className="w-3 h-3" />}
|
||||
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openDeleteModal(m.id)}
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{members.length === 0 && (
|
||||
);
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
{members.length === 0 && !isLoadingMembers && (
|
||||
<p className="text-sm text-center text-slate-500 py-4">
|
||||
{t.workspace?.noMembers || "No members found."}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user