diff --git a/.stylelintrc b/.stylelintrc index 302f9a739afb..67cc390d20fa 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -6,7 +6,6 @@ "function-no-unknown": null, "media-query-no-invalid": null, "declaration-property-value-no-unknown": null, - "at-rule-descriptor-no-unknown": null, "selector-type-no-unknown": [ true, { diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerOrSelfReviewViewImpl.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerOrSelfReviewViewImpl.tsx index 61585d940f9e..954f9da83f04 100644 --- a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerOrSelfReviewViewImpl.tsx +++ b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerOrSelfReviewViewImpl.tsx @@ -1,5 +1,6 @@ import { css, cx } from "@emotion/css" import { useQuery } from "@tanstack/react-query" +import { ExclamationMessage } from "@vectopus/atlas-icons-react" import React, { useContext, useMemo, useState } from "react" import { useTranslation } from "react-i18next" @@ -8,15 +9,18 @@ import ContentRenderer from "../../.." import { Block, fetchPeerOrSelfReviewDataByExerciseId, + postFlagAnswerInPeerReview, postPeerOrSelfReviewSubmission, } from "../../../../../services/backend" import ExerciseTaskIframe from "../ExerciseTaskIframe" import PeerOrSelfReviewQuestion from "./PeerOrSelfReviewQuestion" +import MarkAsSpamDialog from "./PeerRevireMarkingSpam/MarkAsSpamDialog" import { getPeerReviewBeginningScrollingId, PeerOrSelfReviewViewProps } from "." import { CourseMaterialPeerOrSelfReviewQuestionAnswer } from "@/shared-module/common/bindings" +import Button from "@/shared-module/common/components/Button" import ErrorBanner from "@/shared-module/common/components/ErrorBanner" import PeerReviewProgress from "@/shared-module/common/components/PeerReview/PeerReviewProgress" import Spinner from "@/shared-module/common/components/Spinner" @@ -37,6 +41,7 @@ const PeerOrSelfReviewViewImpl: React.FC>( new Map(), ) + const [isReportDialogOpen, setIsReportDialogOpen] = useState(false) const query = useQuery({ queryKey: [`exercise-${exerciseId}-peer-or-self-review`], @@ -126,6 +131,33 @@ const PeerOrSelfReviewViewImpl: React.FC { + if (!peerOrSelfReviewData || !peerOrSelfReviewData.answer_to_review) { + return + } + return await postFlagAnswerInPeerReview(exerciseId, { + submission_id: peerOrSelfReviewData.answer_to_review.exercise_slide_submission_id, + reason, + description, + flagged_user: null, + flagged_by: null, + }) + }, + { notify: true, method: "POST" }, + { + onSuccess: () => { + setIsReportDialogOpen(false) + setAnswers(new Map()) + query.refetch() + }, + }, + ) + + const handleReportSubmit = (reason: string, description: string) => { + reportMutation.mutate({ reason, description }) + } + if (query.isError) { return } @@ -266,7 +298,7 @@ const PeerOrSelfReviewViewImpl: React.FC @@ -299,13 +331,38 @@ const PeerOrSelfReviewViewImpl: React.FC ))} + + + + setIsReportDialogOpen(false)} + onSubmit={handleReportSubmit} + /> ) } diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerRevireMarkingSpam/MarkAsSpamDialog.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerRevireMarkingSpam/MarkAsSpamDialog.tsx new file mode 100644 index 000000000000..5e8872381719 --- /dev/null +++ b/services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/PeerOrSelfReviewView/PeerRevireMarkingSpam/MarkAsSpamDialog.tsx @@ -0,0 +1,94 @@ +import { css } from "@emotion/css" +import styled from "@emotion/styled" +import React, { useState } from "react" +import { useTranslation } from "react-i18next" + +import Button from "@/shared-module/common/components/Button" +import Dialog from "@/shared-module/common/components/Dialog" +import RadioButton from "@/shared-module/common/components/InputFields/RadioButton" + +const FieldContainer = styled.div` + margin-bottom: 1rem; +` + +const MarkAsSpamDialog: React.FC<{ + isOpen: boolean + onClose: () => void + onSubmit: (reason: string, description: string) => void +}> = ({ isOpen, onClose, onSubmit }) => { + const { t } = useTranslation() + const [selectedReason, setSelectedReason] = useState("") + const [description, setDescription] = useState("") + + const handleSubmit = () => { + if (selectedReason) { + onSubmit(selectedReason, description) + setSelectedReason("") + setDescription("") + onClose() + } + } + + return ( + +

{t("title-report-dialog")}

+ +
+ {t("select-reason")} + + setSelectedReason(e.target.value)} + > + + + setSelectedReason(e.target.value)} + > + + + setSelectedReason(e.target.value)} + > + +
+