Merge pull request #694 from ResearchHub/suspend_user_mod_dashboard

Adding Suspend User Button to Moderation Dashboard

Author: michaelcanova

app/moderators/audit/page.tsx

@@ -100,6 +100,7 @@ export default function AuditPage() {
           loadMore={loadMore}
           onDismiss={handleDismiss}
           onRemove={handleRemove}
+          onRefresh={refresh}
           view={getViewFromStatus(activeStatus)}
         />
       </div>

components/Moderators/AuditContent.tsx

@@ -16,6 +16,7 @@ interface AuditContentProps {
   loadMore: () => void;
   onDismiss: (flagIds: ID[]) => Promise<boolean>;
   onRemove: (flagIds: ID[]) => Promise<boolean>;
+  onRefresh?: () => void;
   header?: ReactNode;
   filters?: ReactNode;
   noEntriesElement?: ReactNode;
@@ -31,6 +32,7 @@ export const AuditContent: FC<AuditContentProps> = ({
   loadMore,
   onDismiss,
   onRemove,
+  onRefresh,
   header,
   filters,
   noEntriesElement,
@@ -56,6 +58,7 @@ export const AuditContent: FC<AuditContentProps> = ({
         <AuditItemCard
           entry={entry}
           onAction={(action) => handleAction(action, entry.id)}
+          onRefresh={onRefresh}
           view={view}
         />
       </div>

components/Moderators/AuditItemCard.tsx

@@ -9,6 +9,7 @@ import { AuditItemPaper } from './AuditItemPaper';
 interface AuditItemCardProps {
   entry: FlaggedContent;
   onAction: (action: 'dismiss' | 'remove') => void;
+  onRefresh?: () => void;
   view?: 'pending' | 'dismissed' | 'removed';
 }
 
@@ -34,17 +35,19 @@ const detectContentType = (entry: FlaggedContent): 'comment' | 'post' | 'paper'
   }
 };
 
-export const AuditItemCard: FC<AuditItemCardProps> = ({ entry, onAction, view }) => {
+export const AuditItemCard: FC<AuditItemCardProps> = ({ entry, onAction, onRefresh, view }) => {
   const contentType = detectContentType(entry);
 
   // Render the appropriate component based on content type
   switch (contentType) {
     case 'comment':
-      return <AuditItemComment entry={entry} onAction={onAction} view={view} />;
+      return (
+        <AuditItemComment entry={entry} onAction={onAction} onRefresh={onRefresh} view={view} />
+      );
     case 'post':
-      return <AuditItemPost entry={entry} onAction={onAction} view={view} />;
+      return <AuditItemPost entry={entry} onAction={onAction} onRefresh={onRefresh} view={view} />;
     case 'paper':
-      return <AuditItemPaper entry={entry} onAction={onAction} view={view} />;
+      return <AuditItemPaper entry={entry} onAction={onAction} onRefresh={onRefresh} view={view} />;
     default:
       return (
         <div className="bg-white border border-gray-200 rounded-lg p-4">

components/Moderators/AuditItemComment.tsx

@@ -12,6 +12,7 @@ import { ModerationActions } from './ModerationActions';
 interface AuditItemCommentProps {
   entry: FlaggedContent;
   onAction: (action: 'dismiss' | 'remove') => void;
+  onRefresh?: () => void;
   view?: 'pending' | 'dismissed' | 'removed';
 }
 
@@ -177,9 +178,11 @@ const transformAuditCommentToFeedEntry = (entry: FlaggedContent): FeedEntry => {
 export const AuditItemComment: FC<AuditItemCommentProps> = ({
   entry,
   onAction,
+  onRefresh,
   view = 'pending',
 }) => {
   const verdict = entry.verdict;
+  const userInfo = getAuditUserInfo(entry);
 
   // Transform audit entry to feed entry format
   const feedEntry = useMemo(() => transformAuditCommentToFeedEntry(entry), [entry]);
@@ -212,6 +215,9 @@ export const AuditItemComment: FC<AuditItemCommentProps> = ({
           onRemove={() => onAction('remove')}
           view={view}
           hasVerdict={!!verdict}
+          authorId={userInfo.authorId}
+          authorName={userInfo.name}
+          onRefresh={onRefresh}
         />
       </div>
     </div>

components/Moderators/AuditItemPaper.tsx

@@ -17,10 +17,16 @@ import { truncateText } from '@/utils/stringUtils';
 interface AuditItemPaperProps {
   readonly entry: FlaggedContent;
   readonly onAction: (action: 'dismiss' | 'remove') => void;
+  readonly onRefresh?: () => void;
   readonly view?: 'pending' | 'dismissed' | 'removed';
 }
 
-export const AuditItemPaper: FC<AuditItemPaperProps> = ({ entry, onAction, view = 'pending' }) => {
+export const AuditItemPaper: FC<AuditItemPaperProps> = ({
+  entry,
+  onAction,
+  onRefresh,
+  view = 'pending',
+}) => {
   const userInfo = getAuditUserInfo(entry);
   const verdict = entry.verdict;
   const contentUrl = getAuditContentUrl(entry);
@@ -138,6 +144,9 @@ export const AuditItemPaper: FC<AuditItemPaperProps> = ({ entry, onAction, view
         onRemove={() => onAction('remove')}
         view={view}
         hasVerdict={!!verdict}
+        authorId={userInfo.authorId}
+        authorName={userInfo.name}
+        onRefresh={onRefresh}
       />
     </div>
   );

components/Moderators/AuditItemPost.tsx

@@ -13,6 +13,7 @@ import { ModerationActions } from './ModerationActions';
 interface AuditItemPostProps {
   entry: FlaggedContent;
   onAction: (action: 'dismiss' | 'remove') => void;
+  onRefresh?: () => void;
   view?: 'pending' | 'dismissed' | 'removed';
 }
 
@@ -133,9 +134,15 @@ const transformAuditPostToFeedEntry = (
   return { feedEntry, relatedWork };
 };
 
-export const AuditItemPost: FC<AuditItemPostProps> = ({ entry, onAction, view = 'pending' }) => {
+export const AuditItemPost: FC<AuditItemPostProps> = ({
+  entry,
+  onAction,
+  onRefresh,
+  view = 'pending',
+}) => {
   const verdict = entry.verdict;
   const contentUrl = getAuditContentUrl(entry);
+  const userInfo = getAuditUserInfo(entry);
 
   // Transform audit entry to feed entry format
   const { feedEntry, relatedWork } = useMemo(() => transformAuditPostToFeedEntry(entry), [entry]);
@@ -171,6 +178,9 @@ export const AuditItemPost: FC<AuditItemPostProps> = ({ entry, onAction, view =
           onRemove={() => onAction('remove')}
           view={view}
           hasVerdict={!!verdict}
+          authorId={userInfo.authorId}
+          authorName={userInfo.name}
+          onRefresh={onRefresh}
         />
       </div>
     </div>

components/Moderators/ModerationActions.tsx

@@ -1,52 +1,99 @@
 'use client';
 
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { Button } from '@/components/ui/Button';
-import { CheckCircle, XCircle } from 'lucide-react';
+import { CheckCircle, XCircle, Ban } from 'lucide-react';
+import { ConfirmModal } from '@/components/modals/ConfirmModal';
+import { UserModerationService } from '@/services/user-moderation.service';
+import { cn } from '@/utils/styles';
+import { toast } from 'react-hot-toast';
 
 interface ModerationActionsProps {
   onDismiss: () => void;
   onRemove: () => void;
+  onRefresh?: () => void;
   view?: 'pending' | 'dismissed' | 'removed';
   hasVerdict?: boolean;
   className?: string;
+  authorId?: number | null;
+  authorName?: string;
 }
 
 export const ModerationActions: FC<ModerationActionsProps> = ({
   onDismiss,
   onRemove,
+  onRefresh,
   view = 'pending',
   hasVerdict = false,
-  className = '',
+  className,
+  authorId,
+  authorName,
 }) => {
-  // Only show action buttons for pending items without verdicts
-  const showActionButtons = view === 'pending' && !hasVerdict;
+  const [showSuspendConfirm, setShowSuspendConfirm] = useState(false);
 
-  if (!showActionButtons) {
+  if (view !== 'pending' || hasVerdict) {
     return null;
   }
 
+  const handleSuspendUser = async () => {
+    if (!authorId) return;
+    try {
+      await UserModerationService.suspendUser(String(authorId));
+      toast.success('User has been suspended');
+      onRefresh?.();
+    } catch (error) {
+      console.error('Failed to suspend user:', error);
+      toast.error('Failed to suspend user');
+    }
+  };
+
   return (
-    <div className={`flex items-center space-x-2 ${className}`}>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onDismiss}
-        className="text-green-600 hover:text-green-700 hover:bg-green-50"
-      >
-        <CheckCircle className="h-4 w-4 mr-1" />
-        Dismiss
-      </Button>
-
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onRemove}
-        className="text-red-600 hover:text-red-700 hover:bg-red-50"
-      >
-        <XCircle className="h-4 w-4 mr-1" />
-        Remove
-      </Button>
-    </div>
+    <>
+      <div className={cn('flex items-center space-x-2', className)}>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onDismiss}
+          className="text-green-600 hover:text-green-700 hover:bg-green-50"
+        >
+          <CheckCircle className="h-4 w-4 mr-1" />
+          Dismiss
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onRemove}
+          className="text-red-600 hover:text-red-700 hover:bg-red-50"
+        >
+          <XCircle className="h-4 w-4 mr-1" />
+          Remove
+        </Button>
+
+        {authorId && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowSuspendConfirm(true)}
+            className="text-red-600 hover:text-red-700 hover:bg-red-50"
+          >
+            <Ban className="h-4 w-4 mr-1" />
+            Remove + Suspend
+          </Button>
+        )}
+      </div>
+
+      {authorId && (
+        <ConfirmModal
+          isOpen={showSuspendConfirm}
+          onClose={() => setShowSuspendConfirm(false)}
+          onConfirm={handleSuspendUser}
+          title="Remove + Suspend"
+          message={`Are you sure you want to suspend ${authorName || 'this user'}? This will remove their content and prevent them from using the platform.`}
+          confirmText="Remove + Suspend"
+          confirmButtonClass="bg-red-600 hover:bg-red-700"
+        />
+      )}
+    </>
   );
 };