✨ feat: Add user ratings for spam predictions

Author: LauraRandl

src/frontend-nextjs/app/api/post/[postId]/spam-prediction-user-rating/downvote/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+
+import { addSpamPredictionUserRatingDownvote } from '@/services/api/SpamPredictionVotesService';
+
+/**
+ * @swagger
+ * /ui/api/post/{postId}/spam-prediction-user-rating/downvote:
+ *   post:
+ *     description: Downvote the Spam Prediction.
+ */
+
+export type PostParams = {
+    postId: string;
+};
+
+export async function POST(req: Request, { params }: { params: Promise<PostParams> }): Promise<NextResponse> {
+    const { postId } = await params;
+    const res = await addSpamPredictionUserRatingDownvote(postId);
+
+    return NextResponse.json(res.data, { status: res.status });
+}

src/frontend-nextjs/app/api/post/[postId]/spam-prediction-user-rating/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+
+import { fetchSpamPredictionUserRating } from '@/services/api/SpamPredictionVotesService';
+import { PostParams } from '@/app/api/like/[postId]/route';
+
+/**
+ * @swagger
+ * /ui/api/post/{postId}/spam-prediction-user-rating:
+ *   get:
+ *     description: Get the spam prediction user ratings for a post by its ID.
+ */
+
+export async function GET(req: Request, { params }: { params: Promise<PostParams> }): Promise<NextResponse> {
+    const { postId } = await params;
+    const res = await fetchSpamPredictionUserRating(postId);
+
+    return NextResponse.json(res.data);
+}

src/frontend-nextjs/app/api/post/[postId]/spam-prediction-user-rating/upvote/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+
+import { addSpamPredictionUserRatingUpvote } from '@/services/api/SpamPredictionVotesService';
+
+/**
+ * @swagger
+ * /ui/api/post/{postId}/spam-prediction-user-rating/upvote:
+ *   post:
+ *     description: Handle spam prediction upvote action
+ */
+
+export type PostParams = {
+    postId: string;
+};
+
+export async function POST(req: Request, { params }: { params: Promise<PostParams> }): Promise<NextResponse> {
+    const { postId } = await params;
+    const res = await addSpamPredictionUserRatingUpvote(postId);
+
+    return NextResponse.json(res.data, { status: res.status });
+}

src/frontend-nextjs/components/Timeline/Post.tsx

@@ -73,7 +73,7 @@ export function Post(props: PostProps) {
                 </CardBody>
                 <CardFooter className='gap-3 justify-between px-3'>
                     <div className='flex items-center'>
-                        <PostSpamPrediction isSpamPredictedLabel={props.isSpamPredictedLabel} />
+                        <PostSpamPrediction isSpamPredictedLabel={props.isSpamPredictedLabel} postId={props.postId}/>
                     </div>
 
                     {isLoggedIn && (

src/frontend-nextjs/components/Timeline/PostSpamPrediction.tsx

@@ -1,33 +1,37 @@
+'use client';
+
 import React from 'react';
 import {Alert} from "@heroui/react";
 
+import {SpamPredictionUserRating} from "@/components/Timeline/SpamPredictionUserRating";
+import {useCheckLogin} from "@/hooks/queries/useCheckLogin";
+import {ErrorBoundary} from "react-error-boundary";
+import {ErrorCard} from "@/components/ErrorCard";
+
 export interface PostSpamPredictionProps {
     isSpamPredictedLabel?: boolean | null;
+    postId: string;
 }
 
-
-
 export function PostSpamPrediction(props: Readonly<PostSpamPredictionProps>) {
-    console.log("PostSpamPrediction props:", props);
+    const { isLoggedIn } = useCheckLogin();
     if (props.isSpamPredictedLabel == null) return null;
 
+    const color = props.isSpamPredictedLabel ? 'danger' : 'primary';
 
-    if (props.isSpamPredictedLabel) {
-        const color='danger'
-        return (
-            <div key={color} className='w-full flex items-center my-3'>
-                <div>
-                    <Alert color={color} title={'Potential Spam Detected'} />
-                </div>
-            </div>
-        );
-    }
-
-    const color = 'primary'
     return (
         <div key={color} className='w-full flex items-center my-3'>
-            <div>
-                <Alert color={color} title={'No Spam Detected'} />
+            <div className="w-full">
+                <Alert color={color}>
+                    <div className="flex w-full items-center justify-between gap-3">
+                        <div className="font-semibold">{props.isSpamPredictedLabel? "Potential Spam Detected" : "No Spam Detected"}</div>
+                        {isLoggedIn && (
+                            <ErrorBoundary fallbackRender={(props) => <ErrorCard message={props.error.message} />}>
+                                <SpamPredictionUserRating isSpamPredictedLabel={props.isSpamPredictedLabel} postId={props.postId} />
+                            </ErrorBoundary>
+                        )}
+                    </div>
+                </Alert>
             </div>
         </div>
     );

src/frontend-nextjs/components/Timeline/SpamPredictionUserRating.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import {BsHandThumbsDown, BsHandThumbsDownFill, BsHandThumbsUp, BsHandThumbsUpFill} from 'react-icons/bs';
+import { Button, Spinner } from '@heroui/react';
+import {useSpamPredictionUserRating} from "@/hooks/queries/useSpamPredictionUserRating";
+import {useRateSpamPrediction} from "@/hooks/mutations/useRateSpamPrediction";
+
+export interface SpamPredictionUserRatingProps {
+    isSpamPredictedLabel?: boolean | null;
+    postId: string;
+}
+
+export function SpamPredictionUserRating(props: Readonly<SpamPredictionUserRatingProps>) {
+
+    const { data: spamPredictionUserRatingData, isLoading} = useSpamPredictionUserRating(props.postId);
+    const { handleSpamPredictionUpvote, handleSpamPredictionDownvote } = useRateSpamPrediction(props.postId);
+
+    if (isLoading) {
+        return <Spinner />;
+    }
+
+    return (
+        <div>
+            <Button className=' text-default-600 bg-transparent' name='upvoteSpamRating' onPress={() => handleSpamPredictionUpvote()}>
+                <p>{spamPredictionUserRatingData?.spamPredictionUserUpvotes}</p>
+                {spamPredictionUserRatingData?.isUpvotedByUser ? <BsHandThumbsUpFill /> : <BsHandThumbsUp />}
+            </Button>
+            <Button className=' text-default-600 bg-transparent' name='downvoteSpamRating' onPress={() => handleSpamPredictionDownvote()}>
+                <p>{spamPredictionUserRatingData?.spamPredictionUserDownvotes}</p>
+                {spamPredictionUserRatingData?.isDownvotedByUser ? <BsHandThumbsDownFill /> : <BsHandThumbsDown />}
+            </Button>
+        </div>
+    )
+
+}

src/frontend-nextjs/enums/queryKeys.ts

@@ -17,4 +17,5 @@ export enum QUERY_KEYS {
     ad_manager = 'ad-manager',
     ad_list = 'ad-list',
     deployment_health = 'deployment-health',
+    spam_prediction_user_rating = 'spam-prediction-user-rating',
 }

src/frontend-nextjs/hooks/mutations/useRateSpamPrediction.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import {handleSpamPredictionDownvote, handleSpamPredictionUpvote} from '@/services/SpamPredictionVotingService';
+import { QUERY_KEYS } from '@/enums/queryKeys';
+
+export function useRateSpamPrediction(postId: string) {
+    const queryClient = useQueryClient();
+
+    const handleUpvoteMutation = useMutation({
+        mutationFn: () => handleSpamPredictionUpvote(postId),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.spam_prediction_user_rating, postId] });
+        },
+    });
+
+    const handleDownvoteMutation = useMutation({
+        mutationFn: () => handleSpamPredictionDownvote(postId),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.spam_prediction_user_rating, postId] });
+        },
+    });
+
+    return {
+        handleSpamPredictionUpvote: handleUpvoteMutation.mutate,
+        handleSpamPredictionDownvote: handleDownvoteMutation.mutate
+    };
+}

src/frontend-nextjs/hooks/queries/useSpamPredictionUserRating.ts

@@ -0,0 +1,31 @@
+import path from 'path';
+
+import {useQuery} from '@tanstack/react-query';
+
+import {QUERY_KEYS} from '@/enums/queryKeys';
+import {BASE_PATH} from '@/constants';
+
+type SpamPredictionUserRating = {
+    spamPredictionUserUpvotes: number;
+    spamPredictionUserDownvotes: boolean;
+    isUpvotedByUser?: boolean;
+    isDownvotedByUser?: boolean;
+};
+
+async function fetchSpamPredictionUserRatings(postId: string): Promise<SpamPredictionUserRating> {
+    const res = await fetch(path.join(BASE_PATH, `/api/post/${postId}/spam-prediction-user-rating/`));
+
+    if (!res.ok) {
+        throw new Error('Failed to fetch spam prediction user ratings');
+    }
+
+    return await res.json();
+}
+
+export function useSpamPredictionUserRating(postId: string) {
+    return useQuery({
+        queryKey: [QUERY_KEYS.spam_prediction_user_rating, postId],
+        queryFn: () => fetchSpamPredictionUserRatings(postId),
+        throwOnError: true,
+    });
+}

src/frontend-nextjs/services/SpamPredictionVotingService.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+import { BASE_PATH } from '@/constants';
+
+export async function handleSpamPredictionDownvote(postId: string): Promise<Response> {
+    return await fetch(path.join(BASE_PATH, `/api/post/${postId}/spam-prediction-user-rating/downvote/`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+    });
+}
+
+export async function handleSpamPredictionUpvote(postId: string): Promise<Response> {
+    return await fetch(path.join(BASE_PATH, `/api/post/${postId}/spam-prediction-user-rating/upvote/`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+    });
+}