Merge pull request #433 from bettersg/feat/new-voting-system

changed voting categories

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

@@ -8,18 +8,20 @@ export default function MyVotes() {
   const location = useLocation();
 
   useEffect(() => {
-    console.log(location)
     if (location.state) {
       if (location.state.status) {
-        setActiveTab(location.state.status)
+        setActiveTab(location.state.status);
       }
     }
-  }, [location, activeTab])
-  
+  }, [location, activeTab]);
+
   return (
     <div>
       <div>
-        <MessagesDisplay status = {location.state ? location.state.status : "pending"} scrollPosition = {location.state ? location.state.scrollPosition : 0} />
+        <MessagesDisplay
+          status={location.state ? location.state.status : "pending"}
+          scrollPosition={location.state ? location.state.scrollPosition : 0}
+        />
         {/* <MessagesDisplayTest /> */}
       </div>
     </div>

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

@@ -15,12 +15,25 @@ import { useUser } from "../../providers/UserContext";
 import { TooltipWithHelperIcon } from "../common/ToolTip";
 
 import InfoOptions from "./InfoOptions";
+import NVCOptions from "./NvcOptions";
 
 interface PropType {
   messageId: string | null;
   voteRequestId: string | null;
   currentCategory: string | null;
   currentTruthScore: number | null;
+  currentTags: string[] | null;
+}
+
+function getSelectedCategory(primaryCategory: string | null, tags: string[]) {
+  switch (primaryCategory) {
+    case "irrelevant": //INCORRECT USAGE
+      return tags.includes("incorrect") ? "incorrect" : "nvc";
+    case "legitimate":
+      return "nvc";
+    default:
+      return primaryCategory;
+  }
 }
 
 const CATEGORIES = [
@@ -42,7 +55,7 @@ const CATEGORIES = [
     icon: <NewspaperIcon className="h-7 w-7" />,
     display: "News/Info/Opinion",
     description:
-      "Messages intended to inform/convince/mislead a broad base of people",
+      "Content intended to inform/convince/mislead a broad base of people",
   },
   {
     name: "satire",
@@ -53,27 +66,28 @@ const CATEGORIES = [
   {
     name: "spam",
     icon: <FaceFrownIcon className="h-7 w-7" />,
-    display: "Spam",
-    description: "Unsolicited spam, such as marketing messages",
+    display: "Marketing/Spam",
+    description:
+      "Content intended to (i) promote or publicise a non-malicious product, service or event or (ii) convince recipient to spread non-malicious messages to others",
   },
   {
-    name: "legitimate",
+    name: "nvc",
     icon: <HandThumbUpIcon className="h-7 w-7" />,
-    display: "Legitimate",
+    display: "No Verifiable Content",
     description:
-      "Legitimate source but can't be assessed, e.g. transactional messages",
+      "Content that isn't capable of being checked using publicly-available information due to its nature",
   },
   {
-    name: "irrelevant",
+    name: "incorrect",
     icon: <CheckCircleIcon className="h-7 w-7" />,
-    display: "Trivial",
-    description: "Trivial/banal messages with nothing to assess",
+    display: "Incorrect Usage",
+    description: "User trying to chat or send in queries",
   },
   {
     name: "unsure",
     icon: <QuestionMarkCircleIcon className="h-7 w-7" />,
     display: "Unsure",
-    description: "Insufficient information to decide",
+    description: "Insufficient information to assess",
   },
   {
     name: "pass",
@@ -89,33 +103,73 @@ export default function VoteCategories(Prop: PropType) {
 
   const currentCategory = Prop.currentCategory;
   const currentTruthScore = Prop.currentTruthScore;
+  const currentTags = Prop.currentTags ?? [];
   const messageId = Prop.messageId;
   const voteRequestId = Prop.voteRequestId;
-  const [category, setCategory] = useState<string | null>(currentCategory);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(
+    getSelectedCategory(currentCategory, currentTags)
+  );
+  const [voteCategory, setVoteCategory] = useState<string | null>(
+    currentCategory
+  );
   //take global values from user context
   const [truthScore, setTruthScore] = useState<number | null>(
     currentTruthScore
   );
+  const [tags, setTags] = useState<string[] | null>(currentTags);
 
   const handleTruthScoreChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     setTruthScore(Number(event.target.value));
   };
 
-  const handleVote = (categoryName: string) => {
-    setCategory(categoryName);
+  const handleL2VoteChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    handleVoteCategoryChange(event.target.value);
+  };
+
+  const handleVoteCategoryChange = (category: string) => {
+    switch (category) {
+      case "incorrect":
+        setVoteCategory("irrelevant");
+        setTags(["incorrect"]);
+        break;
+      default:
+        setVoteCategory(category);
+        setTags([]);
+        break;
+    }
+  };
+
+  const handleSelection = (categoryName: string) => {
+    setSelectedCategory(categoryName);
+
+    switch (categoryName) {
+      case "nvc":
+        break;
+      case "incorrect":
+        handleVoteCategoryChange("incorrect");
+        break;
+      default:
+        handleVoteCategoryChange(categoryName);
+        break;
+    }
   };
 
   //function to update vote request in firebase
-  const handleSubmitVote = (category: string, truthScore: number | null) => {
+  const handleSubmitVote = (
+    category: string,
+    truthScore: number | null,
+    tags: string[] | null
+  ) => {
     if (messageId && voteRequestId) {
       //call api to update vote
       patchVote(
         messageId,
         voteRequestId,
         category,
-        category === "info" ? truthScore : null
+        category === "info" ? truthScore : null,
+        tags
       )
         .then(() => {
           incrementSessionVotedCount();
@@ -134,10 +188,12 @@ 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"
+              selectedCategory === cat.name
+                ? "bg-primary-color3"
+                : "bg-primary-color"
             }`}
             key={index}
-            onClick={() => handleVote(cat.name)}
+            onClick={() => handleSelection(cat.name)}
           >
             {cat.icon}
             {cat.display}
@@ -147,20 +203,28 @@ export default function VoteCategories(Prop: PropType) {
             />
           </Button>
           {/* Conditionally render InfoOptions right after the "info" button if it has been selected */}
-          {category === "info" && cat.name === "info" && (
+          {selectedCategory === "info" && cat.name === "info" && (
             <InfoOptions
               selectedTruthScore={truthScore}
               handleTruthScoreChange={handleTruthScoreChange}
             />
           )}
+          {selectedCategory === "nvc" && cat.name === "nvc" && (
+            <NVCOptions
+              selectedCategory={
+                (tags ?? []).includes("incorrect") ? null : voteCategory
+              }
+              onChange={handleL2VoteChange}
+            />
+          )}
         </>
       ))}
 
-      {category ? (
+      {voteCategory ? (
         <div className="place-self-center grid grid-flow-row gap-y-4 w-full">
           <Button
             className="bg-highlight-color w-fit place-self-center"
-            onClick={() => handleSubmitVote(category, truthScore)}
+            onClick={() => handleSubmitVote(voteCategory, truthScore, tags)}
           >
             Done!
           </Button>

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

@@ -1,16 +1,18 @@
 import { Typography } from "@material-tailwind/react";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
-import { FaceFrownIcon } from "@heroicons/react/24/solid";
-import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { MegaphoneIcon } from "@heroicons/react/24/solid";
 import { HandThumbUpIcon } from "@heroicons/react/20/solid";
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
+import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/solid";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { NewspaperIcon } from "@heroicons/react/20/solid";
 import { FaceSmileIcon } from "@heroicons/react/20/solid";
 
 interface PropType {
   category: string | null;
   truthScore: number | null;
+  tags: string[];
 }
 
 export default function VoteResult(Prop: PropType) {
@@ -33,15 +35,21 @@ export default function VoteResult(Prop: PropType) {
         catIcon = <NewspaperIcon className="h-7 w-7" />;
         break;
       case "spam":
-        catName = "Spam";
-        catIcon = <FaceFrownIcon className="h-7 w-7" />;
+        catName = "Marketing/Spam";
+        catIcon = <MegaphoneIcon className="h-7 w-7" />;
         break;
       case "irrelevant":
-        catName = "Trivial";
-        catIcon = <CheckCircleIcon className="h-7 w-7" />;
+        if (Prop.tags?.includes("incorrect")) {
+          //INCORRECT USAGE
+          catName = "Incorrect Usage";
+          catIcon = <ChatBubbleOvalLeftEllipsisIcon className="h-7 w-7" />;
+        } else {
+          catName = "NVC-Can't Tell";
+          catIcon = <NoSymbolIcon className="h-7 w-7" />;
+        }
         break;
       case "legitimate":
-        catName = "Legitimate";
+        catName = "NVC-Credible";
         catIcon = <HandThumbUpIcon className="h-7 w-7" />;
         break;
       case "satire":

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

@@ -35,6 +35,9 @@ export default function VotingChart(Props: VotingChartProps) {
           5: assessedInfo.infoCount["5"],
         };
 
+  const irrelevantCount = assessedInfo.irrelevantCount;
+  const incorrectCount = assessedInfo.tagCounts.incorrect ?? 0; //INCORRECT USAGE
+
   const data = [
     {
       name: "Scam",
@@ -50,16 +53,17 @@ export default function VotingChart(Props: VotingChartProps) {
       count: assessedInfo.satireCount,
     },
     {
-      name: "Spam",
+      name: "Marketing/Spam",
       count: assessedInfo.spamCount,
     },
     {
-      name: "Trivial",
-      count: assessedInfo.irrelevantCount,
+      name: "No Verifiable Content",
+      credible: assessedInfo.legitimateCount,
+      notsure: irrelevantCount - incorrectCount,
     },
     {
-      name: "Legit",
-      count: assessedInfo.legitimateCount,
+      name: "Incorrect Usage",
+      count: incorrectCount,
     },
     {
       name: "Unsure",
@@ -90,6 +94,8 @@ export default function VotingChart(Props: VotingChartProps) {
         <Bar dataKey="3" stackId="a" fill="#B4A76C" />
         <Bar dataKey="4" stackId="a" fill="#8B6914" />
         <Bar dataKey="5" stackId="a" fill="#806517" />
+        <Bar dataKey="credible" stackId="a" fill="#82ca9d" />
+        <Bar dataKey="notsure" stackId="a" fill="#808080" />
       </BarChart>
     </ResponsiveContainer>
   );

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

@@ -73,6 +73,7 @@ export default function VotePage() {
               voteRequestId={voteRequestId ?? null}
               currentCategory={vote.category}
               currentTruthScore={vote.truthScore}
+              currentTags={vote.tags}
             />
           </>
         ) : (
@@ -88,6 +89,7 @@ export default function VotePage() {
                 <VoteResult
                   category={vote.category}
                   truthScore={vote.truthScore}
+                  tags={vote.tags}
                 />
               </div>
               <div className="flex flex-1 flex-col justify-center">
@@ -100,6 +102,7 @@ export default function VotePage() {
                 <VoteResult
                   category={vote.finalStats?.primaryCategory ?? null}
                   truthScore={vote.finalStats?.truthScore ?? null}
+                  tags={vote.finalStats?.tags ?? []}
                 />
               </div>
             </div>