From 1c9d90bca4cc6aae3453a0686f653227f4dbbc3e Mon Sep 17 00:00:00 2001
From: Owen Schwartz <owen@txv.io>
Date: Sat, 19 Oct 2024 21:50:00 -0400
Subject: [PATCH] Fix small issues

---
 .../[resourceId]/components/ClientLayout.tsx  |   2 +-
 .../components/CreateResource.tsx             |   4 +-
 .../[resourceId]/components/GeneralForm.tsx   | 120 +++++++++++++++---
 src/components/SiteSearch.tsx                 |   0
 4 files changed, 106 insertions(+), 20 deletions(-)
 create mode 100644 src/components/SiteSearch.tsx

diff --git a/src/app/[orgId]/resources/[resourceId]/components/ClientLayout.tsx b/src/app/[orgId]/resources/[resourceId]/components/ClientLayout.tsx
index a34333b5..831743e1 100644
--- a/src/app/[orgId]/resources/[resourceId]/components/ClientLayout.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/components/ClientLayout.tsx
@@ -5,7 +5,7 @@ import { useResourceContext } from "@app/hooks/useResourceContext";
 
 const sidebarNavItems = [
     {
-        title: "Create",
+        title: "General",
         href: "/{orgId}/resources/{resourceId}",
     },
     {
diff --git a/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx b/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
index 1066a93b..4e59f416 100644
--- a/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx
@@ -182,7 +182,7 @@ export function CreateResourceForm() {
                                                 variant="outline"
                                                 role="combobox"
                                                 className={cn(
-                                                    "w-[200px] justify-between",
+                                                    "w-[350px] justify-between",
                                                     !field.value && "text-muted-foreground"
                                                 )}
                                             >
@@ -195,7 +195,7 @@ export function CreateResourceForm() {
                                             </Button>
                                         </FormControl>
                                     </PopoverTrigger>
-                                    <PopoverContent className="w-[200px] p-0">
+                                    <PopoverContent className="w-[350px] p-0">
                                         <Command>
                                             <CommandInput placeholder="Search site..." />
                                             <CommandList>
diff --git a/src/app/[orgId]/resources/[resourceId]/components/GeneralForm.tsx b/src/app/[orgId]/resources/[resourceId]/components/GeneralForm.tsx
index 46c271ad..c53e7b5e 100644
--- a/src/app/[orgId]/resources/[resourceId]/components/GeneralForm.tsx
+++ b/src/app/[orgId]/resources/[resourceId]/components/GeneralForm.tsx
@@ -18,6 +18,8 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
+import { CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons"
+
 import { Input } from "@/components/ui/input"
 import {
     Select,
@@ -27,45 +29,66 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command"
+
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
 import { useResourceContext } from "@app/hooks/useResourceContext"
+import { ListSitesResponse } from "@server/routers/site"
+import { useEffect, useState } from "react"
+import { AxiosResponse } from "axios"
+import api from "@app/api"
+import { useParams } from "next/navigation";
 
 const GeneralFormSchema = z.object({
-    name: z.string()
-    //   email: z
-    //     .string({
-    //       required_error: "Please select an email to display.",
-    //     })
-    //     .email(),
-    //   bio: z.string().max(160).min(4),
-    //   urls: z
-    //     .array(
-    //       z.object({
-    //         value: z.string().url({ message: "Please enter a valid URL." }),
-    //       })
-    //     )
-    //     .optional(),
+    name: z.string(),
+    siteId: z.number()
 })
 
 type GeneralFormValues = z.infer<typeof GeneralFormSchema>
 
-export function GeneralForm() {
+export function GeneralForm() {    
+    const params = useParams();
+    const orgId = params.orgId;
     const { resource, updateResource } = useResourceContext();
+    const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
 
     const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
-            name: resource?.name
+            name: resource?.name,
+            siteId: resource?.siteId
         },
         mode: "onChange",
     })
 
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const fetchSites = async () => {
+                const res = await api.get<AxiosResponse<ListSitesResponse>>(`/org/${orgId}/sites/`);
+                setSites(res.data.data.sites);
+            };
+            fetchSites();
+        }
+    }, []);
+
     //   const { fields, append } = useFieldArray({
     //     name: "urls",
     //     control: form.control,
     //   })
 
     async function onSubmit(data: GeneralFormValues) {
-        await updateResource({ name: data.name });
+        await updateResource({ name: data.name, siteId: data.siteId });
     }
 
     return (
@@ -87,6 +110,69 @@ export function GeneralForm() {
                         </FormItem>
                     )}
                 />
+                <FormField
+                        control={form.control}
+                        name="siteId"
+                        render={({ field }) => (
+                            <FormItem className="flex flex-col">
+                                <FormLabel>Site</FormLabel>
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <FormControl>
+                                            <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                className={cn(
+                                                    "w-[350px] justify-between",
+                                                    !field.value && "text-muted-foreground"
+                                                )}
+                                            >
+                                                {field.value
+                                                    ? sites.find(
+                                                        (site) => site.siteId === field.value
+                                                    )?.name
+                                                    : "Select site"}
+                                                <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                            </Button>
+                                        </FormControl>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[350px] p-0">
+                                        <Command>
+                                            <CommandInput placeholder="Search site..." />
+                                            <CommandList>
+                                                <CommandEmpty>No site found.</CommandEmpty>
+                                                <CommandGroup>
+                                                    {sites.map((site) => (
+                                                        <CommandItem
+                                                            value={site.name}
+                                                            key={site.siteId}
+                                                            onSelect={() => {
+                                                                form.setValue("siteId", site.siteId)
+                                                            }}
+                                                        >
+                                                            <CheckIcon
+                                                                className={cn(
+                                                                    "mr-2 h-4 w-4",
+                                                                    site.siteId === field.value
+                                                                        ? "opacity-100"
+                                                                        : "opacity-0"
+                                                                )}
+                                                            />
+                                                            {site.name}
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </CommandList>
+                                        </Command>
+                                    </PopoverContent>
+                                </Popover>
+                                <FormDescription>
+                                    This is the site that will be used in the dashboard.
+                                </FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
                 {/* <FormField
           control={form.control}
           name="email"
diff --git a/src/components/SiteSearch.tsx b/src/components/SiteSearch.tsx
new file mode 100644
index 00000000..e69de29b