feat: connect the combobox to the api (sortof)

src/components/SitesCombobox.tsx

@@ -17,38 +17,13 @@ import {
   PopoverTrigger
 } from "@/components/ui/popover"
 import { ChevronDownIcon } from "@heroicons/react/24/solid"
-
+import useSWR from "swr"
-type Status = {
+import { getAvailableSites } from "@/utils"
-  value: string
-  label: string
-}
-
-const statuses: Status[] = [
-  {
-    value: "backlog",
-    label: "Backlog"
-  },
-  {
-    value: "todo",
-    label: "Todo"
-  },
-  {
-    value: "in progress",
-    label: "In Progress"
-  },
-  {
-    value: "done",
-    label: "Done"
-  },
-  {
-    value: "canceled",
-    label: "Canceled"
-  }
-]
 
 export function SitesCombobox() {
+  const {data: statuses} = useSWR('/api/statuses', getAvailableSites)
   const [open, setOpen] = React.useState(false)
-  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+  const [selectedStatus, setSelectedStatus] = React.useState<SelectOptions | null>(
     null
   )
 
@@ -67,7 +42,7 @@ export function SitesCombobox() {
             <CommandList>
               <CommandEmpty>No results found.</CommandEmpty>
               <CommandGroup>
-                {statuses.map((status) => (
+                {statuses?.map((status) => (
                   <CommandItem
                     className="text-white"
                     key={status.value}

src/types.d.ts

@@ -1,7 +1,12 @@
 type SearchResult = {
-    id: number
+  id: number
-    timestamp: Date
+  timestamp: Date
-    title: string
+  title: string
-    description: string
+  description: string
-    slug: string
+  slug: string
-  }
+}
+
+type SelectOptions = {
+  value: string
+  label: string
+}

src/utils.ts

@@ -44,3 +44,30 @@ export async function getResults({
   ]
 }
 
+export async function getAvailableSites() {
+  const statuses: SelectOptions[] = [
+    {
+      value: "backlog",
+      label: "Backlog"
+    },
+    {
+      value: "todo",
+      label: "Todo"
+    },
+    {
+      value: "in progress",
+      label: "In Progress"
+    },
+    {
+      value: "done",
+      label: "Done"
+    },
+    {
+      value: "canceled",
+      label: "Canceled"
+    }
+  ]
+  
+  
+  return statuses;
+}