Add bounty allocation filter (#593)

Author: nikgraf

apps/events/src/routes/bounties.lazy.tsx

@@ -1,30 +1,47 @@
 import { useEntities } from '@graphprotocol/hypergraph-react';
 import { createLazyFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
 import { Bounty } from '@/schema';
 
 export const Route = createLazyFileRoute('/bounties')({
   component: RouteComponent,
 });
 
-const PERSON_ENTITY_ID = '7728d2458ae842d3a90a37e0bb8ee676';
+type AllocationFilter = 'all' | 'allocated' | 'unallocated';
 
 function RouteComponent() {
+  const [allocationFilter, setAllocationFilter] = useState<AllocationFilter>('all');
+  const filter = allocationFilter === 'all' ? undefined : { allocated: { exists: allocationFilter === 'allocated' } };
+
   const {
     data: bounties,
     isLoading,
     isError,
   } = useEntities(Bounty, {
     mode: 'public',
     spaces: 'all',
-    filter: {
-      interestedIn: { entityId: PERSON_ENTITY_ID },
+    filter,
+    include: {
+      allocated: {},
     },
   });
 
   return (
     <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
       <h1 className="text-2xl font-bold">Bounties</h1>
-      <p className="text-sm text-gray-500">Bounties where person {PERSON_ENTITY_ID} expressed interest</p>
+      <p className="text-sm text-gray-500">Filter bounties by allocation status</p>
+      <label className="text-sm text-gray-700 flex flex-col gap-1">
+        Allocation status
+        <select
+          className="border rounded px-2 py-1 bg-white"
+          value={allocationFilter}
+          onChange={(event) => setAllocationFilter(event.target.value as AllocationFilter)}
+        >
+          <option value="all">All</option>
+          <option value="allocated">Allocated (at least one person)</option>
+          <option value="unallocated">Unallocated (no one)</option>
+        </select>
+      </label>
 
       {isLoading && <div>Loading...</div>}
       {isError && <div>Error loading bounties</div>}
@@ -35,8 +52,11 @@ function RouteComponent() {
         {bounties.map((bounty) => (
           <li key={bounty.id} className="border rounded p-4">
             <h2 className="font-semibold">{bounty.name}</h2>
-            {bounty.description && <p className="text-sm text-gray-600">{bounty.description}</p>}
+            {bounty.description && <p className="text-sm text-gray-600">{bounty.description.substring(0, 100)}...</p>}
             <p className="text-xs text-gray-400 mt-1">{bounty.id}</p>
+            <p className="text-xs text-gray-400 mt-1">
+              Allocated to: {bounty.allocated.map((allocated) => allocated.name).join(', ')}
+            </p>
           </li>
         ))}
       </ul>

apps/events/src/schema.ts

@@ -372,18 +372,22 @@ export const PersonBacklink = Entity.Schema(
   },
 );
 
+export const ALLOCATED_PROPERTY_ID = Id('cfeb642223c54df4b3f9375a489d9e22');
+
 export const Bounty = Entity.Schema(
   {
     name: Type.String,
     description: Type.optional(Type.String),
     interestedIn: Type.Backlink(PersonBacklink),
+    allocated: Type.Relation(PersonBacklink),
   },
   {
     types: [Id('808af0bad5884e3391f09dd4b25e18be')],
     properties: {
       name: Id(SystemIds.NAME_PROPERTY),
       description: Id(SystemIds.DESCRIPTION_PROPERTY),
       interestedIn: Id('ff7e1b4444a2419187324e6c222afe07'),
+      allocated: ALLOCATED_PROPERTY_ID,
     },
   },
 );