website refactor
This commit is contained in:
@@ -1,58 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { AdminDashboardTemplate } from '@/templates/AdminDashboardTemplate';
|
||||
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
|
||||
import { AdminDashboardPageQuery } from '@/lib/page-queries/AdminDashboardPageQuery';
|
||||
|
||||
export function AdminDashboardClient() {
|
||||
const [viewData, setViewData] = useState<AdminDashboardViewData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const query = new AdminDashboardPageQuery();
|
||||
const result = await query.execute();
|
||||
|
||||
if (result.status === 'ok') {
|
||||
// Page Query already returns View Data via builder
|
||||
setViewData(result.dto);
|
||||
} else if (result.status === 'notFound') {
|
||||
// Handle not found - could show a message or redirect
|
||||
console.error('Access denied - You must be logged in as an Owner or Admin');
|
||||
} else {
|
||||
// Handle error - could show a toast or error message
|
||||
console.error('Failed to load dashboard stats');
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to load stats';
|
||||
console.error(message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
if (!viewData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 space-y-3">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-blue"></div>
|
||||
<div className="text-gray-400">Loading dashboard...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminDashboardTemplate
|
||||
viewData={viewData}
|
||||
onRefresh={loadStats}
|
||||
isLoading={loading}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
|
||||
import { AdminUsersViewData } from '@/templates/AdminUsersViewData';
|
||||
import { AdminUsersPresenter } from '@/lib/presenters/AdminUsersPresenter';
|
||||
import { AdminUsersPageQuery } from '@/lib/page-queries/AdminUsersPageQuery';
|
||||
import { updateUserStatus, deleteUser } from './actions';
|
||||
|
||||
export function AdminUsersClient() {
|
||||
const [viewData, setViewData] = useState<AdminUsersViewData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const [roleFilter, setRoleFilter] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [deletingUser, setDeletingUser] = useState<string | null>(null);
|
||||
|
||||
const loadUsers = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const query = new AdminUsersPageQuery();
|
||||
const result = await query.execute({
|
||||
search: search || undefined,
|
||||
role: roleFilter || undefined,
|
||||
status: statusFilter || undefined,
|
||||
page: 1,
|
||||
limit: 50,
|
||||
});
|
||||
|
||||
if (result.status === 'ok') {
|
||||
const data = AdminUsersPresenter.present(result.dto);
|
||||
setViewData(data);
|
||||
} else if (result.status === 'notFound') {
|
||||
setError('Access denied - You must be logged in as an Owner or Admin');
|
||||
} else {
|
||||
setError('Failed to load users');
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to load users';
|
||||
setError(message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [search, roleFilter, statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
loadUsers();
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [loadUsers]);
|
||||
|
||||
const handleUpdateStatus = async (userId: string, newStatus: string) => {
|
||||
try {
|
||||
await updateUserStatus(userId, newStatus);
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update status');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (userId: string) => {
|
||||
if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setDeletingUser(userId);
|
||||
await deleteUser(userId);
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete user');
|
||||
} finally {
|
||||
setDeletingUser(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setSearch('');
|
||||
setRoleFilter('');
|
||||
setStatusFilter('');
|
||||
};
|
||||
|
||||
if (!viewData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 space-y-3">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-blue"></div>
|
||||
<div className="text-gray-400">Loading users...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminUsersTemplate
|
||||
viewData={viewData}
|
||||
onRefresh={loadUsers}
|
||||
onSearch={setSearch}
|
||||
onFilterRole={setRoleFilter}
|
||||
onFilterStatus={setStatusFilter}
|
||||
onClearFilters={handleClearFilters}
|
||||
onUpdateStatus={handleUpdateStatus}
|
||||
onDeleteUser={handleDeleteUser}
|
||||
search={search}
|
||||
roleFilter={roleFilter}
|
||||
statusFilter={statusFilter}
|
||||
loading={loading}
|
||||
error={error}
|
||||
deletingUser={deletingUser}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -15,31 +15,29 @@ import { revalidatePath } from 'next/cache';
|
||||
/**
|
||||
* Update user status
|
||||
*/
|
||||
export async function updateUserStatus(userId: string, status: string): Promise<void> {
|
||||
try {
|
||||
const mutation = new UpdateUserStatusMutation();
|
||||
await mutation.execute({ userId, status });
|
||||
|
||||
// Revalidate the users page
|
||||
revalidatePath('/admin/users');
|
||||
} catch (error) {
|
||||
console.error('updateUserStatus failed:', error);
|
||||
export async function updateUserStatus(userId: string, status: string) {
|
||||
const mutation = new UpdateUserStatusMutation();
|
||||
const result = await mutation.execute({ userId, status });
|
||||
|
||||
if (result.isErr()) {
|
||||
console.error('updateUserStatus failed:', result.getError());
|
||||
throw new Error('Failed to update user status');
|
||||
}
|
||||
|
||||
revalidatePath('/admin/users');
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete user
|
||||
*/
|
||||
export async function deleteUser(userId: string): Promise<void> {
|
||||
try {
|
||||
const mutation = new DeleteUserMutation();
|
||||
await mutation.execute({ userId });
|
||||
|
||||
// Revalidate the users page
|
||||
revalidatePath('/admin/users');
|
||||
} catch (error) {
|
||||
console.error('deleteUser failed:', error);
|
||||
export async function deleteUser(userId: string) {
|
||||
const mutation = new DeleteUserMutation();
|
||||
const result = await mutation.execute({ userId });
|
||||
|
||||
if (result.isErr()) {
|
||||
console.error('deleteUser failed:', result.getError());
|
||||
throw new Error('Failed to delete user');
|
||||
}
|
||||
|
||||
revalidatePath('/admin/users');
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { headers } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { createRouteGuard } from '@/lib/auth/createRouteGuard';
|
||||
|
||||
interface AdminLayoutProps {
|
||||
@@ -16,11 +17,14 @@ export default async function AdminLayout({ children }: AdminLayoutProps) {
|
||||
const pathname = headerStore.get('x-pathname') || '/';
|
||||
|
||||
const guard = createRouteGuard();
|
||||
await guard.enforce({ pathname });
|
||||
const result = await guard.enforce({ pathname });
|
||||
if (result.type === 'redirect') {
|
||||
redirect(result.to);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,32 @@
|
||||
import { AdminDashboardClient } from './AdminDashboardClient';
|
||||
import { AdminDashboardPageQuery } from '@/lib/page-queries/AdminDashboardPageQuery';
|
||||
import { AdminDashboardTemplate } from '@/templates/AdminDashboardTemplate';
|
||||
|
||||
export default function AdminPage() {
|
||||
return <AdminDashboardClient />;
|
||||
export default async function AdminPage() {
|
||||
const result = await AdminDashboardPageQuery.execute();
|
||||
|
||||
if (result.isErr()) {
|
||||
const error = result.getError();
|
||||
if (error === 'notFound') {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
|
||||
Access denied - You must be logged in as an Owner or Admin
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
|
||||
Failed to load dashboard: {error}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const viewData = result.unwrap();
|
||||
|
||||
// For now, use empty callbacks. In a real app, these would be Server Actions
|
||||
// that trigger revalidation or navigation
|
||||
return <AdminDashboardTemplate adminDashboardViewData={viewData} onRefresh={() => {}} isLoading={false} />;
|
||||
}
|
||||
109
apps/website/app/admin/users/AdminUsersWrapper.tsx
Normal file
109
apps/website/app/admin/users/AdminUsersWrapper.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
|
||||
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
|
||||
import { updateUserStatus, deleteUser } from '../actions';
|
||||
|
||||
interface AdminUsersWrapperProps {
|
||||
initialViewData: AdminUsersViewData;
|
||||
}
|
||||
|
||||
export function AdminUsersWrapper({ initialViewData }: AdminUsersWrapperProps) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// UI state (not business logic)
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [deletingUser, setDeletingUser] = useState<string | null>(null);
|
||||
|
||||
// Current filter values from URL
|
||||
const search = searchParams.get('search') || '';
|
||||
const roleFilter = searchParams.get('role') || '';
|
||||
const statusFilter = searchParams.get('status') || '';
|
||||
|
||||
// Callbacks that update URL (triggers RSC re-render)
|
||||
const handleSearch = useCallback((newSearch: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (newSearch) params.set('search', newSearch);
|
||||
else params.delete('search');
|
||||
params.delete('page'); // Reset to page 1
|
||||
router.push(`/admin/users?${params.toString()}`);
|
||||
}, [router, searchParams]);
|
||||
|
||||
const handleFilterRole = useCallback((role: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (role) params.set('role', role);
|
||||
else params.delete('role');
|
||||
params.delete('page');
|
||||
router.push(`/admin/users?${params.toString()}`);
|
||||
}, [router, searchParams]);
|
||||
|
||||
const handleFilterStatus = useCallback((status: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (status) params.set('status', status);
|
||||
else params.delete('status');
|
||||
params.delete('page');
|
||||
router.push(`/admin/users?${params.toString()}`);
|
||||
}, [router, searchParams]);
|
||||
|
||||
const handleClearFilters = useCallback(() => {
|
||||
router.push('/admin/users');
|
||||
}, [router]);
|
||||
|
||||
const handleRefresh = useCallback(() => {
|
||||
router.refresh();
|
||||
}, [router]);
|
||||
|
||||
// Mutation callbacks (call Server Actions)
|
||||
const handleUpdateStatus = useCallback(async (userId: string, newStatus: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await updateUserStatus(userId, newStatus);
|
||||
// Revalidate data
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update status');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const handleDeleteUser = useCallback(async (userId: string) => {
|
||||
if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setDeletingUser(userId);
|
||||
await deleteUser(userId);
|
||||
// Revalidate data
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete user');
|
||||
} finally {
|
||||
setDeletingUser(null);
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<AdminUsersTemplate
|
||||
adminUsersViewData={initialViewData}
|
||||
onRefresh={handleRefresh}
|
||||
onSearch={handleSearch}
|
||||
onFilterRole={handleFilterRole}
|
||||
onFilterStatus={handleFilterStatus}
|
||||
onClearFilters={handleClearFilters}
|
||||
onUpdateStatus={handleUpdateStatus}
|
||||
onDeleteUser={handleDeleteUser}
|
||||
search={search}
|
||||
roleFilter={roleFilter}
|
||||
statusFilter={statusFilter}
|
||||
loading={loading}
|
||||
error={error}
|
||||
deletingUser={deletingUser}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,51 @@
|
||||
import { AdminUsersClient } from '../AdminUsersClient';
|
||||
import { AdminUsersPageQuery } from '@/lib/page-queries/AdminUsersPageQuery';
|
||||
import { AdminUsersWrapper } from './AdminUsersWrapper';
|
||||
|
||||
export default function AdminUsers() {
|
||||
return <AdminUsersClient />;
|
||||
interface AdminUsersPageProps {
|
||||
searchParams?: {
|
||||
search?: string;
|
||||
role?: string;
|
||||
status?: string;
|
||||
page?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default async function AdminUsersPage({ searchParams }: AdminUsersPageProps) {
|
||||
// Parse query parameters
|
||||
const query = {
|
||||
search: searchParams?.search,
|
||||
role: searchParams?.role,
|
||||
status: searchParams?.status,
|
||||
page: searchParams?.page ? parseInt(searchParams.page, 10) : 1,
|
||||
limit: 50,
|
||||
};
|
||||
|
||||
// Execute PageQuery using static method
|
||||
const result = await AdminUsersPageQuery.execute(query);
|
||||
|
||||
// Handle errors
|
||||
if (result.isErr()) {
|
||||
const error = result.getError();
|
||||
if (error === 'notFound') {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
|
||||
Access denied - You must be logged in as an Owner or Admin
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="bg-racing-red/10 border border-racing-red text-racing-red px-4 py-3 rounded-lg">
|
||||
Failed to load users: {error}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const viewData = result.unwrap();
|
||||
|
||||
// Pass to client wrapper for UI interactions
|
||||
return <AdminUsersWrapper initialViewData={viewData} />;
|
||||
}
|
||||
Reference in New Issue
Block a user