pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 04:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Implement Phase 2 improvements

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-15 12:06:51 +00:00
parent 0434aa95ee
commit cdd6b0bbd5
6 changed files with 107 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/hooks/moderation/useModerationFilters.ts
View File

@@ -85,6 +85,9 @@ export interface ModerationFilters {
/** Reset sort to default */
resetSort: () => void;
/** Reset pagination to page 1 (callback) */
onFilterChange?: () => void;
}
/**
@@ -106,7 +109,9 @@ export interface ModerationFilters {
* </Select>
* ```
*/
export function useModerationFilters(config: ModerationFiltersConfig = {}): ModerationFilters {
export function useModerationFilters(
config: ModerationFiltersConfig & { onFilterChange?: () => void } = {}
): ModerationFilters {
const {
initialEntityFilter = 'all',
initialStatusFilter = 'pending',
@@ -115,6 +120,7 @@ export function useModerationFilters(config: ModerationFiltersConfig = {}): Mode
persist = true,
storageKey = 'moderationQueue_filters',
initialSortConfig = { field: 'created_at', direction: 'asc' },
onFilterChange,
} = config;
// Load persisted filters on mount
@@ -204,23 +210,26 @@ export function useModerationFilters(config: ModerationFiltersConfig = {}): Mode
}
}, [sortConfig, persist, storageKey]);
// Set entity filter with logging
// Set entity filter with logging and pagination reset
const setEntityFilter = useCallback((filter: EntityFilter) => {
logger.log('🔍 Entity filter changed:', filter);
setEntityFilterState(filter);
}, []);
onFilterChange?.();
}, [onFilterChange]);
// Set status filter with logging
// Set status filter with logging and pagination reset
const setStatusFilter = useCallback((filter: StatusFilter) => {
logger.log('🔍 Status filter changed:', filter);
setStatusFilterState(filter);
}, []);
onFilterChange?.();
}, [onFilterChange]);
// Set active tab with logging
// Set active tab with logging and pagination reset
const setActiveTab = useCallback((tab: QueueTab) => {
logger.log('🔍 Tab changed:', tab);
setActiveTabState(tab);
}, []);
onFilterChange?.();
}, [onFilterChange]);
// Sort callbacks
const setSortConfig = useCallback((config: SortConfig) => {
@@ -283,5 +292,6 @@ export function useModerationFilters(config: ModerationFiltersConfig = {}): Mode
sortBy,
toggleSortDirection,
resetSort,
onFilterChange,
};
}

71
src/hooks/useAdminGuard.ts Normal file
View File

@@ -0,0 +1,71 @@
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './useAuth';
import { useUserRole } from './useUserRole';
import { useRequireMFA } from './useRequireMFA';
export interface AdminGuardState {
/** Whether auth/role/MFA checks are still loading */
isLoading: boolean;
/** Whether user is authenticated and authorized */
isAuthorized: boolean;
/** Whether user needs to enroll in MFA */
needsMFA: boolean;
/** Current authenticated user */
user: any;
}
/**
* Consolidated admin guard hook for all admin pages
*
* Handles:
* - Authentication check (redirects to /auth)
* - Role authorization check (redirects to /)
* - MFA enrollment check
* - Loading states
*
* @param requireMFA - Whether to enforce MFA requirement (default: true)
* @returns AdminGuardState with loading, authorization, and MFA status
*
* @example
* ```tsx
* const { isLoading, isAuthorized, needsMFA } = useAdminGuard();
*
* if (isLoading) return <LoadingSkeleton />;
* if (!isAuthorized) return null;
* if (needsMFA) return <MFARequiredAlert />;
*
* return <AdminContent />;
* ```
*/
export function useAdminGuard(requireMFA: boolean = true): AdminGuardState {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
const { needsEnrollment, loading: mfaLoading } = useRequireMFA();
const navigate = useNavigate();
// Auto-redirect based on auth state
useEffect(() => {
if (!authLoading && !roleLoading) {
if (!user) {
navigate('/auth');
} else if (!isModerator()) {
navigate('/');
}
}
}, [user, authLoading, roleLoading, navigate, isModerator]);
const isLoading = authLoading || roleLoading || mfaLoading;
const isAuthorized = !!user && isModerator();
const needsMFA = requireMFA && needsEnrollment;
return {
isLoading,
isAuthorized,
needsMFA,
user,
};
}

35
src/pages/AdminModeration.tsx
View File

@@ -1,8 +1,5 @@
import { useRef, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useUserRole } from '@/hooks/useUserRole';
import { useAuth } from '@/hooks/useAuth';
import { useRequireMFA } from '@/hooks/useRequireMFA';
import { useRef, useCallback } from 'react';
import { useAdminGuard } from '@/hooks/useAdminGuard';
import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
@@ -11,10 +8,7 @@ import { useAdminSettings } from '@/hooks/useAdminSettings';
import { useModerationStats } from '@/hooks/useModerationStats';
export default function AdminModeration() {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
const { needsEnrollment, loading: mfaLoading } = useRequireMFA();
const navigate = useNavigate();
const { isLoading, isAuthorized, needsMFA, user } = useAdminGuard();
const moderationQueueRef = useRef<ModerationQueueRef>(null);
const {
@@ -26,7 +20,7 @@ export default function AdminModeration() {
const pollInterval = getAdminPanelPollInterval();
const { lastUpdated } = useModerationStats({
enabled: !!user && !authLoading && !roleLoading && isModerator(),
enabled: isAuthorized,
pollingEnabled: refreshMode === 'auto',
pollingInterval: pollInterval,
});
@@ -35,21 +29,7 @@ export default function AdminModeration() {
moderationQueueRef.current?.refresh();
}, []);
useEffect(() => {
if (!authLoading && !roleLoading) {
if (!user) {
navigate('/auth');
return;
}
if (!isModerator()) {
navigate('/');
return;
}
}
}, [user, authLoading, roleLoading, navigate, isModerator]);
if (authLoading || roleLoading || mfaLoading) {
if (isLoading) {
return (
<AdminLayout
onRefresh={handleRefresh}
@@ -71,12 +51,11 @@ export default function AdminModeration() {
);
}
if (!user || !isModerator()) {
if (!isAuthorized) {
return null;
}
// MFA enforcement
if (needsEnrollment) {
if (needsMFA) {
return (
<AdminLayout>
<MFARequiredAlert />

12
src/pages/AdminReports.tsx
View File

@@ -1,8 +1,5 @@
import { useRef, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useUserRole } from '@/hooks/useUserRole';
import { useAuth } from '@/hooks/useAuth';
import { useRequireMFA } from '@/hooks/useRequireMFA';
import { useRef, useCallback } from 'react';
import { useAdminGuard } from '@/hooks/useAdminGuard';
import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
@@ -72,12 +69,11 @@ export default function AdminReports() {
);
}
if (!user || !isModerator()) {
if (!isAuthorized) {
return null;
}
// MFA enforcement
if (needsEnrollment) {
if (needsMFA) {
return (
<AdminLayout>
<MFARequiredAlert />

22
src/pages/AdminSystemLog.tsx
View File

@@ -50,25 +50,9 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
}
export default function AdminSystemLog() {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
const navigate = useNavigate();
const { isLoading, isAuthorized } = useAdminGuard(false); // No MFA required for viewing logs
useEffect(() => {
if (!authLoading && !roleLoading) {
if (!user) {
navigate('/auth');
return;
}
if (!isModerator()) {
navigate('/');
return;
}
}
}, [user, authLoading, roleLoading, navigate, isModerator]);
if (authLoading || roleLoading) {
if (isLoading) {
return (
<AdminLayout>
<div className="space-y-6">
@@ -97,7 +81,7 @@ export default function AdminSystemLog() {
);
}
if (!user || !isModerator()) {
if (!isAuthorized) {
return null;
}

32
src/pages/AdminUsers.tsx
View File

@@ -1,8 +1,4 @@
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useUserRole } from '@/hooks/useUserRole';
import { useAuth } from '@/hooks/useAuth';
import { useRequireMFA } from '@/hooks/useRequireMFA';
import { useAdminGuard } from '@/hooks/useAdminGuard';
import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { UserManagement } from '@/components/admin/UserManagement';
@@ -10,26 +6,9 @@ import { Skeleton } from '@/components/ui/skeleton';
import { Card, CardContent } from '@/components/ui/card';
export default function AdminUsers() {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
const { needsEnrollment, loading: mfaLoading } = useRequireMFA();
const navigate = useNavigate();
const { isLoading, isAuthorized, needsMFA } = useAdminGuard();
useEffect(() => {
if (!authLoading && !roleLoading) {
if (!user) {
navigate('/auth');
return;
}
if (!isModerator()) {
navigate('/');
return;
}
}
}, [user, authLoading, roleLoading, navigate, isModerator]);
if (authLoading || roleLoading || mfaLoading) {
if (isLoading) {
return (
<AdminLayout>
<div className="space-y-6">
@@ -59,12 +38,11 @@ export default function AdminUsers() {
);
}
if (!user || !isModerator()) {
if (!isAuthorized) {
return null;
}
// MFA enforcement
if (needsEnrollment) {
if (needsMFA) {
return (
<AdminLayout>
<MFARequiredAlert />