From 660d7ccbbbb15435b1802eadc605615f62396120 Mon Sep 17 00:00:00 2001
From: BudzioT <Budzio.zsm1@gmail.com>
Date: Thu, 26 Dec 2024 01:59:06 +0100
Subject: [PATCH] Added multi flagging

---
 src/app/harbor/battles/battles.tsx    | 62 ++++++++++++++-------------
 src/app/harbor/battles/fraud-utils.ts |  6 +--
 src/components/ui/multi-select.tsx    | 41 +++++++++++-------
 3 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/src/app/harbor/battles/battles.tsx b/src/app/harbor/battles/battles.tsx
index 33da9921..5c0ac3c3 100644
--- a/src/app/harbor/battles/battles.tsx
+++ b/src/app/harbor/battles/battles.tsx
@@ -26,6 +26,7 @@ import Modal from '@/components/ui/modal'
 import { sendFraudReport } from './fraud-utils'
 import { Button } from '@/components/ui/button'
 import { Howl } from 'howler'
+import { MultiSelect } from '@/components/ui/multi-select'
 interface Matchup {
   project1: Ships
   project2: Ships
@@ -47,7 +48,7 @@ export default function Matchups({ session }: { session: HsSession }) {
   const [blessed, setBlessed] = useState(false)
 
   const [fraudProject, setFraudProject] = useState<Ship>()
-  const [fraudType, setFraudType] = useState<string>()
+  const [fraudTypes, setFraudTypes] = useState<string[] | null>()
   const [fraudReason, setFraudReason] = useState<string>()
   const debounceTimeoutRef = useRef<number | null>(null)
 
@@ -390,11 +391,11 @@ export default function Matchups({ session }: { session: HsSession }) {
       window.clearTimeout(debounceTimeoutRef.current)
     }
 
-    if (!fraudProject || !fraudReason || !fraudType) return
+    if (!fraudProject || !fraudReason || !fraudTypes) return
 
     debounceTimeoutRef.current = window.setTimeout(async () => {
       try {
-        await sendFraudReport(fraudProject, fraudType, fraudReason)
+        await sendFraudReport(fraudProject, fraudTypes, fraudReason)
       } catch (error) {
         console.error('Failed to flag project:', error)
       }
@@ -407,8 +408,8 @@ export default function Matchups({ session }: { session: HsSession }) {
 
     setFraudProject(undefined)
     setFraudReason('')
-    setFraudType('')
-  }, [fraudProject, fraudType, fraudReason])
+    setFraudTypes(null)
+  }, [fraudProject, fraudTypes, fraudReason])
 
   if (isReadmeView) {
     return (
@@ -508,47 +509,50 @@ export default function Matchups({ session }: { session: HsSession }) {
                 <h3 className="text-2xl font-bold">
                   Why are you flagging {fraudProject?.title}?
                 </h3>
-                <select
-                  value={fraudType}
-                  onChange={(e) => setFraudType(e.target.value)}
-                  className="w-full my-4 p-1 text-black"
-                >
-                  <option value="">Select the reason for flagging</option>
-                  <option value="Incomplete README">Incomplete README</option>
-                  <option value="No screenshot">No screenshot</option>
-                  <option value="No demo link">No demo link</option>
-                  <option value="Suspected fraud">Suspected fraud</option>
-                  <option value="Wrong repo">
-                    Repo not found / not open source
-                  </option>
-                </select>
+
+                <MultiSelect
+                  options={[
+                    { label: 'Incomplete README', value: 'Incomplete README' },
+                    { label: 'No screenshot', value: 'No screenshot' },
+                    { label: 'No demo link', value: 'No demo link' },
+                    { label: 'Suspected fraud', value: 'Suspected fraud' },
+                    {
+                      label: 'Repo not found / not open source',
+                      value: 'Wrong repo',
+                    },
+                  ]}
+                  onValueChange={(val) => setFraudTypes(val)}
+                  hideSelectAll={true}
+                  className="my-4"
+                />
 
                 <AnimatePresence>
-                  {fraudType === 'Incomplete README' ||
-                  fraudType === 'No demo link' ||
-                  fraudType === 'No screenshot' ||
-                  fraudType === 'Wrong repo' ? (
+                  {fraudTypes?.includes('Suspected fraud') ? (
                     <motion.div
                       initial={{ height: 0, opacity: 0 }}
                       animate={{ height: 'fit-content', opacity: 1 }}
                       exit={{ height: 0, opacity: 0 }}
                     >
                       <p className="mb-3">
-                        The creator of this project will be notified. Thanks for
-                        making High Seas better! :)
+                        The creator of this project will not know you reported
+                        them for potential fraud.{' '}
+                        <b>Only the High Seas team will see this.</b>
                       </p>
                     </motion.div>
                   ) : null}
 
-                  {fraudType === 'Suspected fraud' ? (
+                  {fraudTypes?.includes('Incomplete README') ||
+                  fraudTypes?.includes('No demo link') ||
+                  fraudTypes?.includes('No screenshot') ||
+                  fraudTypes?.includes('Wrong repo') ? (
                     <motion.div
                       initial={{ height: 0, opacity: 0 }}
                       animate={{ height: 'fit-content', opacity: 1 }}
                       exit={{ height: 0, opacity: 0 }}
                     >
                       <p className="mb-3">
-                        The creator of this project will not know you reported
-                        them. <b>Only the High Seas team will see this.</b>
+                        The creator of this project will be notified about
+                        incorrect links. Thanks for making High Seas better! :)
                       </p>
                     </motion.div>
                   ) : null}
@@ -564,7 +568,7 @@ export default function Matchups({ session }: { session: HsSession }) {
 
                 <Button
                   variant={'destructive'}
-                  disabled={!fraudType || !fraudReason}
+                  disabled={!fraudTypes || !fraudReason}
                   onClick={handleFraudReport}
                   className="w-full bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded"
                 >
diff --git a/src/app/harbor/battles/fraud-utils.ts b/src/app/harbor/battles/fraud-utils.ts
index 81f86cc6..d2b26050 100644
--- a/src/app/harbor/battles/fraud-utils.ts
+++ b/src/app/harbor/battles/fraud-utils.ts
@@ -5,7 +5,7 @@ import { Ship } from '@/app/utils/data'
 
 export async function sendFraudReport(
   project: Ship,
-  type: string,
+  types: string[],
   reason: string,
 ) {
   const session = await getSession()
@@ -24,7 +24,7 @@ export async function sendFraudReport(
             fields: {
               project: [project.id],
               reporter: [session?.personId],
-              reason: type,
+              reason: types,
               details: reason,
             },
           },
@@ -35,5 +35,5 @@ export async function sendFraudReport(
     .then((data) => data.json())
     .then(console.log)
 
-  console.log(project, type, reason)
+  console.log(project, types, reason)
 }
diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
index 7f91a547..c1f4989f 100644
--- a/src/components/ui/multi-select.tsx
+++ b/src/components/ui/multi-select.tsx
@@ -102,6 +102,12 @@ interface MultiSelectProps
    */
   asChild?: boolean
 
+  /**
+   * Flag to exclude the "Selected All" option from the choice.
+   * Optional, defaults to false.
+   */
+  hideSelectAll?: boolean
+
   /**
    * Additional class names to apply custom styles to the multi-select component.
    * Optional, can be used to add custom styles.
@@ -123,6 +129,7 @@ export const MultiSelect = React.forwardRef<
       maxCount = 3,
       modalPopover = false,
       asChild = false,
+      hideSelectAll = false,
       className,
       ...props
     },
@@ -275,23 +282,25 @@ export const MultiSelect = React.forwardRef<
             <CommandList>
               <CommandEmpty>No results found.</CommandEmpty>
               <CommandGroup>
-                <CommandItem
-                  key="all"
-                  onSelect={toggleAll}
-                  className="cursor-pointer"
-                >
-                  <div
-                    className={cn(
-                      'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                      selectedValues.length === options.length
-                        ? 'bg-primary text-primary-foreground'
-                        : 'opacity-50 [&_svg]:invisible',
-                    )}
+                <div hidden={hideSelectAll}>
+                  <CommandItem
+                    key="all"
+                    onSelect={toggleAll}
+                    className="cursor-pointer"
                   >
-                    <CheckIcon className="h-4 w-4" />
-                  </div>
-                  <span>(Select All)</span>
-                </CommandItem>
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        selectedValues.length === options.length
+                          ? 'bg-primary text-primary-foreground'
+                          : 'opacity-50 [&_svg]:invisible',
+                      )}
+                    >
+                      <CheckIcon className="h-4 w-4" />
+                    </div>
+                    <span>(Select All)</span>
+                  </CommandItem>
+                </div>
                 {options.map((option) => {
                   const isSelected = selectedValues.includes(option.value)
                   return (