Merge pull request #442 from bounswe/feat/430-report-system-frontend

Feat/430 report system frontend

Author: ykaydogdu

apps/jobboard-frontend/src/components/report/ReportModal.tsx

@@ -0,0 +1,186 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { toast } from 'react-toastify';
+import { Loader2 } from 'lucide-react';
+
+export const ReportReason = {
+  FAKE: 'FAKE',
+  SPAM: 'SPAM',
+  OFFENSIVE: 'OFFENSIVE',
+  OTHER: 'OTHER',
+} as const;
+
+export type ReportReasonType = typeof ReportReason[keyof typeof ReportReason];
+
+export interface ReportModalProps {
+  open: boolean;
+  onClose: () => void;
+
+  // Context info
+  title: string;
+  subtitle?: string;
+  contextSnippet?: string;
+  reportType?: string;
+  reportedName?: string;
+
+  // Textarea configuration
+  messageLabel?: string;
+  messagePlaceholder?: string;
+  initialMessage?: string;
+
+  // Submission logic provided by caller
+  onSubmit: (message: string, reason: ReportReasonType) => Promise<void> | void;
+
+  // Optional loading indicator for lightweight open -> hydrate flow
+  isLoading?: boolean;
+}
+
+export function ReportModal({
+  open,
+  onClose,
+  title,
+  subtitle,
+  contextSnippet,
+  reportType,
+  reportedName,
+  messageLabel = 'Explain why you are reporting this',
+  messagePlaceholder = 'Please provide details...',
+  initialMessage = '',
+  onSubmit,
+  isLoading = false,
+}: ReportModalProps) {
+  const [message, setMessage] = useState(initialMessage);
+  const [reason, setReason] = useState<ReportReasonType>(ReportReason.OTHER);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (open) {
+      setMessage(initialMessage);
+      setReason(ReportReason.OTHER);
+      setError(null);
+      setIsSubmitting(false);
+    }
+  }, [open, initialMessage]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!message.trim()) {
+      setError('Please enter a message explaining the report.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await onSubmit(message, reason);
+      toast.success('Thank you, your report has been submitted.');
+      onClose();
+      setMessage('');
+      setReason(ReportReason.OTHER);
+    } catch (err) {
+      console.error('Report submission failed:', err);
+      setError('Failed to submit report. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [message, reason, onSubmit, onClose]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {subtitle && <DialogDescription>{subtitle}</DialogDescription>}
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 py-2">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-6 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin mr-2" />
+              <span>Loading…</span>
+            </div>
+          ) : (
+            <>
+              {(reportType || reportedName) && (
+                <div className="flex flex-col gap-1 text-sm">
+                  {reportType && (
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-muted-foreground">Type:</span>
+                      <span className="px-2 py-0.5 bg-secondary rounded-md text-secondary-foreground text-xs font-medium uppercase">
+                        {reportType}
+                      </span>
+                    </div>
+                  )}
+                  {reportedName && (
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-muted-foreground">Author:</span>
+                      <span className="font-medium">{reportedName}</span>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {contextSnippet && (
+                <div className="bg-muted/50 rounded-md p-3 text-sm italic text-muted-foreground border">
+                  "{contextSnippet.length > 200 ? contextSnippet.slice(0, 200) + '...' : contextSnippet}"
+                </div>
+              )}
+
+              <div className="grid gap-2">
+                <Label htmlFor="report-reason">Reason</Label>
+                <select
+                  id="report-reason"
+                  value={reason}
+                  onChange={(e) => setReason(e.target.value as ReportReasonType)}
+                  className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  <option value={ReportReason.FAKE}>Fake</option>
+                  <option value={ReportReason.SPAM}>Spam</option>
+                  <option value={ReportReason.OFFENSIVE}>Offensive</option>
+                  <option value={ReportReason.OTHER}>Other</option>
+                </select>
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="report-message">{messageLabel}</Label>
+                <Textarea
+                  id="report-message"
+                  placeholder={messagePlaceholder}
+                  value={message}
+                  onChange={(e) => {
+                    setMessage(e.target.value);
+                    if (error) setError(null);
+                  }}
+                  className={error ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  rows={4}
+                />
+                {error && <p className="text-sm text-red-500">{error}</p>}
+              </div>
+            </>
+          )}
+        </div>
+
+        <DialogFooter className="sm:justify-end">
+          <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting || isLoading || !message.trim()}>
+            {isSubmitting ? 'Submitting...' : 'Submit Report'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/jobboard-frontend/src/components/report/__tests__/ReportModal.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ReportModal } from '../ReportModal';
+import userEvent from '@testing-library/user-event';
+
+// Mock react-toastify
+vi.mock('react-toastify', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe('ReportModal', () => {
+  const defaultProps = {
+    open: true,
+    onClose: vi.fn(),
+    title: 'Report Item',
+    onSubmit: vi.fn(),
+  };
+
+  it('renders correctly with required props', () => {
+    render(<ReportModal {...defaultProps} />);
+    expect(screen.getByText('Report Item')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /submit report/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  it('renders subtitle and context snippet when provided', () => {
+    render(
+      <ReportModal
+        {...defaultProps}
+        subtitle="Test Subtitle"
+        contextSnippet="This is a snippet"
+      />
+    );
+    expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+    expect(screen.getByText(/"This is a snippet"/)).toBeInTheDocument();
+  });
+
+  it('renders reportType and reportedName when provided', () => {
+    render(
+      <ReportModal
+        {...defaultProps}
+        reportType="Review"
+        reportedName="John Doe"
+      />
+    );
+    expect(screen.getByText('Review')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+  });
+
+  it('validates empty message on submit', async () => {
+    render(<ReportModal {...defaultProps} />);
+    const submitButton = screen.getByRole('button', { name: /submit report/i });
+    
+    // Initial state: button is disabled because message is empty (if we implemented that)
+    // The component implementation disables the button if !message.trim()
+    expect(submitButton).toBeDisabled();
+
+    // If we want to test the error message, we might need to enable it first or check logic
+    // But since it's disabled, we can't click it to trigger validation error unless we type spaces
+    // Let's try typing spaces
+    /*
+    const textarea = screen.getByRole('textbox');
+    await userEvent.type(textarea, '   ');
+    expect(submitButton).toBeDisabled(); // Should still be disabled
+    */
+  });
+
+  it('calls onSubmit with message when valid', async () => {
+    const onSubmit = vi.fn();
+    render(<ReportModal {...defaultProps} onSubmit={onSubmit} />);
+    
+    const textarea = screen.getByRole('textbox');
+    await userEvent.type(textarea, 'This is a report reason');
+    
+    const submitButton = screen.getByRole('button', { name: /submit report/i });
+    expect(submitButton).toBeEnabled();
+    
+    await userEvent.click(submitButton);
+    
+    expect(onSubmit).toHaveBeenCalledWith('This is a report reason', 'OTHER');
+  });
+
+  it('calls onSubmit with selected reason', async () => {
+    const onSubmit = vi.fn();
+    render(<ReportModal {...defaultProps} onSubmit={onSubmit} />);
+    
+    const textarea = screen.getByRole('textbox');
+    await userEvent.type(textarea, 'Spam content');
+
+    const select = screen.getByLabelText('Reason');
+    await userEvent.selectOptions(select, 'SPAM');
+    
+    const submitButton = screen.getByRole('button', { name: /submit report/i });
+    await userEvent.click(submitButton);
+    
+    expect(onSubmit).toHaveBeenCalledWith('Spam content', 'SPAM');
+  });
+
+  it('handles submission error', async () => {
+    const onSubmit = vi.fn().mockRejectedValue(new Error('Failed'));
+    render(<ReportModal {...defaultProps} onSubmit={onSubmit} />);
+    
+    const textarea = screen.getByRole('textbox');
+    await userEvent.type(textarea, 'Reason');
+    
+    const submitButton = screen.getByRole('button', { name: /submit report/i });
+    await userEvent.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Failed to submit report. Please try again.')).toBeInTheDocument();
+    });
+  });
+
+  it('closes modal on cancel', async () => {
+    const onClose = vi.fn();
+    render(<ReportModal {...defaultProps} onClose={onClose} />);
+    
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await userEvent.click(cancelButton);
+    
+    expect(onClose).toHaveBeenCalled();
+  });
+});