Merge pull request #304 from bettersg/feat/allow-checkers-to-pass

Feat/allow checkers to pass

checkers-app/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@firebase/storage": "^0.12.0",
     "@heroicons/react": "^2.0.18",
-    "@material-tailwind/react": "^2.1.4",
+    "@material-tailwind/react": "^2.1.9",
     "@tanstack/react-query": "^5.20.1",
     "@tanstack/react-query-devtools": "^5.20.1",
     "apexcharts": "^3.44.0",

checkers-app/src/components/common/ToolTip.tsx

@@ -0,0 +1,42 @@
+import { Tooltip, Typography } from "@material-tailwind/react";
+
+interface TooltipProps {
+  header: string;
+  text: string;
+}
+
+export function TooltipWithHelperIcon({ header, text }: TooltipProps) {
+  return (
+    <Tooltip
+      content={
+        <div className="w-80">
+          <Typography color="white" className="font-medium">
+            {header}
+          </Typography>
+          <Typography
+            variant="small"
+            color="white"
+            className="font-normal opacity-80"
+          >
+            {text}
+          </Typography>
+        </div>
+      }
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+        className="h-5 w-5 cursor-pointer text-blue-gray-500"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+        />
+      </svg>
+    </Tooltip>
+  );
+}

checkers-app/src/components/vote/VoteCategories.tsx

@@ -6,14 +6,15 @@ import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { HandThumbUpIcon } from "@heroicons/react/20/solid";
 import { NewspaperIcon } from "@heroicons/react/20/solid";
 import { FaceSmileIcon } from "@heroicons/react/20/solid";
-
+import { PaperAirplaneIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@material-tailwind/react";
 import { patchVote } from "../../services/api";
 import { useUser } from "../../providers/UserContext";
+import { TooltipWithHelperIcon } from "../common/ToolTip";
 
-import InfoOptions from "./Tier2";
+import InfoOptions from "./InfoOptions";
 
 interface PropType {
   messageId: string | null;
@@ -23,41 +24,62 @@ interface PropType {
 }
 
 const CATEGORIES = [
-  { name: "scam", icon: <XMarkIcon className="h-7 w-7" />, display: "Scam" },
+  {
+    name: "scam",
+    icon: <XMarkIcon className="h-7 w-7" />,
+    display: "Scam",
+    description: "Intended to obtain money/personal information via deception",
+  },
   {
     name: "illicit",
     icon: <ShieldExclamationIcon className="h-7 w-7" />,
     display: "Illicit",
+    description:
+      "Other potential illicit activity, e.g. moneylending/prostitution",
   },
   {
     name: "info",
     icon: <NewspaperIcon className="h-7 w-7" />,
     display: "News/Info/Opinion",
+    description:
+      "Messages intended to inform/convince/mislead a broad base of people",
   },
   {
     name: "satire",
     icon: <FaceSmileIcon className="h-7 w-7" />,
     display: "Satire",
+    description: "Content clearly satirical in nature",
   },
   {
     name: "spam",
     icon: <FaceFrownIcon className="h-7 w-7" />,
     display: "Spam",
+    description: "Unsolicited spam, such as marketing messages",
+  },
+  {
+    name: "legitimate",
+    icon: <HandThumbUpIcon className="h-7 w-7" />,
+    display: "Legitimate",
+    description:
+      "Legitimate source but can't be assessed, e.g. transactional messages",
   },
   {
     name: "irrelevant",
     icon: <CheckCircleIcon className="h-7 w-7" />,
     display: "Trivial",
+    description: "Trivial/banal messages with nothing to assess",
   },
   {
     name: "unsure",
     icon: <QuestionMarkCircleIcon className="h-7 w-7" />,
     display: "Unsure",
+    description: "Insufficient information to decide",
   },
   {
-    name: "legitimate",
-    icon: <HandThumbUpIcon className="h-7 w-7" />,
-    display: "Legitimate",
+    name: "pass",
+    icon: <PaperAirplaneIcon className="h-7 w-7" />,
+    display: "Pass",
+    description: "Skip this message if you're really unable to assess it",
   },
 ];
 
@@ -89,7 +111,12 @@ export default function VoteCategories(Prop: PropType) {
   const handleSubmitVote = (category: string, truthScore: number | null) => {
     if (messageId && voteRequestId) {
       //call api to update vote
-      patchVote(messageId, voteRequestId, category, category === "info" ? truthScore : null)
+      patchVote(
+        messageId,
+        voteRequestId,
+        category,
+        category === "info" ? truthScore : null
+      )
         .then(() => {
           incrementSessionVotedCount();
           navigate("/votes");
@@ -106,13 +133,18 @@ export default function VoteCategories(Prop: PropType) {
         <>
           <Button
             className={`flex flex-row items-center justify-start gap-2 max-w-md space-x-3 text-sm
-            ${category === cat.name ? "bg-primary-color3" : "bg-primary-color"
-              }`}
+            ${
+              category === cat.name ? "bg-primary-color3" : "bg-primary-color"
+            }`}
             key={index}
             onClick={() => handleVote(cat.name)}
           >
             {cat.icon}
             {cat.display}
+            <TooltipWithHelperIcon
+              header={cat.display}
+              text={cat.description}
+            />
           </Button>
           {/* Conditionally render InfoOptions right after the "info" button if it has been selected */}
           {category === "info" && cat.name === "info" && (

checkers-app/src/components/vote/index.tsx

@@ -60,7 +60,9 @@ export default function VotePage() {
           caption={vote.caption}
         />
         <Alert variant="ghost">Sender: {vote.sender}</Alert>
-        {vote.category === null || !vote.isAssessed ? (
+        {vote.category === null ||
+        vote.category === "pass" ||
+        !vote.isAssessed ? (
           <>
             <Typography
               variant="h4"

functions/src/definitions/api/handlers/getChecker.ts

@@ -51,7 +51,7 @@ const getCheckerHandler = async (req: Request, res: Response) => {
 
     //filter client side for category != null, since firestore doesn't support inequality on 2 fields
     const last30DaysData = last30DaysSnap.docs.filter(
-      (doc) => doc.get("category") !== null
+      (doc) => doc.get("category") !== null && doc.get("category") !== "pass"
     )
 
     const totalVoted = last30DaysData.length

functions/src/definitions/api/handlers/patchVoteRequest.ts

@@ -49,7 +49,7 @@ const patchVoteRequestHandler = async (req: Request, res: Response) => {
       "legitimate",
       "irrelevant",
       "unsure",
-      "error",
+      "pass",
     ].includes(category)
   ) {
     return res.status(400).send(`${category} is not a valid category`)