add report post

Author: HugeFrog24

frontend/app/components/BlogPostComments.tsx

@@ -144,7 +144,7 @@ export default function BlogPostComments({ postId, comments = [], reportReasons
     if (!selectedReason || !reportingCommentId) return;
 
     const formData = new FormData();
-    formData.append('_action', 'report');
+    formData.append('_action', 'reportComment');
     formData.append('commentId', reportingCommentId.toString());
     formData.append('reason', selectedReason);
     formData.append('description', reportDescription.trim());

frontend/app/components/BlogPostDetail.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
-import { useNavigate, Link } from "react-router";
+import { useNavigate, Link, useFetcher, useActionData } from "react-router";
 import {
     Favorite as FavoriteIcon,
     Edit as EditIcon,
     Share as ShareIcon,
-    Delete as DeleteIcon
+    Delete as DeleteIcon,
+    Flag as FlagIcon
 } from '@mui/icons-material';
 import ReactMarkdown from "react-markdown";
 import {
@@ -14,7 +15,17 @@ import {
     Chip,
     IconButton,
     Container,
-    Paper
+    Paper,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    Select,
+    MenuItem,
+    FormControl,
+    InputLabel,
+    TextField,
+    Button,
+    Tooltip
 } from '@mui/material';
 
 import UserContext, { type UserContextType } from "../contexts/UserContext";
@@ -40,17 +51,29 @@ export interface BlogPost {
     description?: string;
 }
 
+interface ReportReason {
+    id: number;
+    name: string;
+}
+
 interface BlogPostDetailProps {
     post: BlogPost;
     comments?: any[];
-    reportReasons?: any[];
+    reportReasons?: ReportReason[];
 }
 
 export default function BlogPostDetail({ post, comments = [], reportReasons = [] }: BlogPostDetailProps) {
     const navigate = useNavigate();
+    const fetcher = useFetcher();
+    const actionData = useActionData() as { success?: boolean; error?: string; report?: any } | undefined;
     const { user, isAuthenticated } = React.useContext<UserContextType>(UserContext);
     const [likesCount, setLikesCount] = React.useState(post.likes_count);
     const [isLiked, setIsLiked] = React.useState(post.is_liked);
+    
+    // Report dialog state
+    const [reportDialogOpen, setReportDialogOpen] = React.useState(false);
+    const [selectedReason, setSelectedReason] = React.useState('');
+    const [reportDescription, setReportDescription] = React.useState('');
 
     const handleShare = async () => {
         const url = window.location.href;
@@ -110,6 +133,39 @@ export default function BlogPostDetail({ post, comments = [], reportReasons = []
         }
     };
 
+    const handleOpenReportDialog = () => {
+        setReportDialogOpen(true);
+    };
+
+    const handleCloseReportDialog = () => {
+        setReportDialogOpen(false);
+        setSelectedReason('');
+        setReportDescription('');
+    };
+
+    const handleSubmitReport = () => {
+        if (!selectedReason) return;
+
+        const formData = new FormData();
+        formData.append('_action', 'reportPost');
+        formData.append('reason', selectedReason);
+        formData.append('description', reportDescription.trim());
+
+        fetcher.submit(formData, { method: 'post' });
+        handleCloseReportDialog();
+    };
+
+    // Handle action responses
+    React.useEffect(() => {
+        if (actionData?.error) {
+            console.error('🔍 DEBUG: Action error:', actionData.error);
+            // You can add toast notification here
+        } else if (actionData?.success && actionData?.report) {
+            console.log('🔍 DEBUG: Post reported successfully:', actionData);
+            // You can add success toast notification here
+        }
+    }, [actionData]);
+
     return (
         <Container maxWidth="md">
             <Paper elevation={0} sx={{ p: 3, my: 3 }}>
@@ -237,18 +293,37 @@ export default function BlogPostDetail({ post, comments = [], reportReasons = []
                         >
                             <ShareIcon />
                         </IconButton>
+                        
+                        {/* Report button - always show when authenticated */}
+                        {isAuthenticated && (
+                            <Tooltip title={user?.id === post.author?.id ? "You can't report your own post" : "Report post"}>
+                                <span>
+                                    <IconButton
+                                        onClick={user?.id === post.author?.id ? undefined : handleOpenReportDialog}
+                                        disabled={user?.id === post.author?.id}
+                                        aria-label="Report post"
+                                        sx={user?.id === post.author?.id ? {
+                                            color: 'action.disabled',
+                                            cursor: 'not-allowed'
+                                        } : { color: 'warning.main' }}
+                                    >
+                                        <FlagIcon />
+                                    </IconButton>
+                                </span>
+                            </Tooltip>
+                        )}
                     </Box>
 
                     {isAuthenticated && user?.id === post.author?.id && (
                         <Box sx={{ display: 'flex', gap: 1 }}>
-                            <IconButton 
+                            <IconButton
                                 onClick={handleEdit}
                                 color="primary"
                                 aria-label="Edit post"
                             >
                                 <EditIcon />
                             </IconButton>
-                            <IconButton 
+                            <IconButton
                                 onClick={handleDelete}
                                 color="error"
                                 aria-label="Delete post"
@@ -260,11 +335,53 @@ export default function BlogPostDetail({ post, comments = [], reportReasons = []
                 </Box>
             </Paper>
 
-            <BlogPostComments 
-                postId={post.id} 
-                comments={comments} 
-                reportReasons={reportReasons} 
+            <BlogPostComments
+                postId={post.id}
+                comments={comments}
+                reportReasons={reportReasons}
             />
+
+            {/* Report Dialog */}
+            <Dialog open={reportDialogOpen} onClose={handleCloseReportDialog}>
+                <DialogTitle>Report Post</DialogTitle>
+                <DialogContent>
+                    <FormControl fullWidth sx={{ mt: 2 }}>
+                        <InputLabel>Reason</InputLabel>
+                        <Select
+                            value={selectedReason}
+                            onChange={(e) => setSelectedReason(e.target.value)}
+                            label="Reason"
+                        >
+                            {reportReasons.map((reason) => (
+                                <MenuItem key={reason.id} value={reason.id}>
+                                    {reason.name}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                    <TextField
+                        fullWidth
+                        multiline
+                        rows={3}
+                        label="Additional Details (Optional)"
+                        value={reportDescription}
+                        onChange={(e) => setReportDescription(e.target.value)}
+                        sx={{ mt: 2 }}
+                    />
+                    <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
+                        <Button onClick={handleCloseReportDialog} sx={{ mr: 1 }}>
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={handleSubmitReport}
+                            disabled={!selectedReason}
+                        >
+                            Submit Report
+                        </Button>
+                    </Box>
+                </DialogContent>
+            </Dialog>
         </Container>
     );
 }

frontend/app/routes/_app.blog.posts.$postId.$slug.tsx

@@ -10,7 +10,8 @@ import {
   createComment,
   updateComment,
   deleteComment,
-  reportComment
+  reportComment,
+  reportPost
 } from "../utils/server-fetch";
 import type { LoaderData } from "../routes/_app";
 
@@ -128,7 +129,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
         return { success: true, deleted: commentId };
       }
 
-      case 'report': {
+      case 'reportComment': {
         const commentId = formData.get('commentId') as string;
         const reason = formData.get('reason') as string;
         const description = formData.get('description') as string;
@@ -145,6 +146,22 @@ export async function action({ request, params }: ActionFunctionArgs) {
         return { success: true, report };
       }
 
+      case 'reportPost': {
+        const reason = formData.get('reason') as string;
+        const description = formData.get('description') as string;
+        
+        if (!reason) {
+          return { error: 'Reason is required' };
+        }
+
+        console.log('🔍 DEBUG: Reporting post:', postId, 'Reason:', reason);
+        
+        const report = await reportPost(postId, reason, description || '', request);
+        
+        console.log('🔍 DEBUG: Post reported successfully:', report);
+        return { success: true, report };
+      }
+      
       default:
         console.log('🔍 DEBUG: Unknown action type:', actionType);
         return { error: 'Unknown action type' };

frontend/app/utils/server-fetch.ts

@@ -110,6 +110,22 @@ export async function reportComment(commentId: string, reason: string, descripti
   });
 }
 
+export async function reportPost(postId: string, reason: string, description: string, request: Request) {
+  return fetchFromApi('/moderation/reports/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Cookie: request.headers.get('Cookie') || '',
+      'X-CSRFToken': extractCSRFToken(request),
+    },
+    body: JSON.stringify({
+      post_id: postId,
+      reason,
+      description: description || '',
+    }),
+  });
+}
+
 // Helper function to extract CSRF token from request
 function extractCSRFToken(request: Request): string {
   // Try header first