Add client-side import and implement modal select component

Author: DragonXDev

apps/nextjs/src/app/dashboard/page.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { Metadata } from "next";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
@@ -8,17 +11,34 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { trpc } from "@/lib/utils/trpc";
 
 // import { allEvents } from "../matches/getEvents";
 import { allEvents } from "../matches/getEvents";
+import { addEvents } from "./actions";
 import Assignments from "./Assignments";
 import { CalendarDateRangePicker } from "./components/date-range-picker";
 import { MainNav } from "./components/main-nav";
@@ -28,19 +48,107 @@ import { Search } from "./components/search";
 import TeamSwitcher from "./components/team-switcher";
 import { UserNav } from "./components/user-nav";
 
-export const metadata: Metadata = {
-  title: "Dashboard",
-  description: "Example dashboard app built using the components.",
+// export const metadata: Metadata = {
+// title: "Dashboard",
+// description: "Example dashboard app built using the components.",
+// };
+
+const ModalSelectComponent = ({ events, selectedEvent, setSelectedEvent }) => {
+  const handleValueChange = (value) => {
+    setSelectedEvent(value);
+  };
+
+  return (
+    <div>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>{selectedEvent}</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Select an Option</DialogTitle>
+          </DialogHeader>
+          <Select onValueChange={handleValueChange}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Choose One" />
+            </SelectTrigger>
+            {/* <SelectTrigger className="w-[180px]">
+              <SelectValue>
+                {selectedEvent ? selectedEvent : "Choose one"}
+              </SelectValue>
+            </SelectTrigger> */}
+            <SelectContent>
+              {events.map((event) => (
+                <SelectItem
+                  key={event.name}
+                  value={event.key}
+                  onSelect={() => console.log(event)}
+                >
+                  {event.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+            <Button onClick={() => console.log("PLEASE: ", selectedEvent)}>
+              test
+            </Button>
+          </Select>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
 };
 
-export default function DashboardPage() {
+function DashboardPage() {
+  const [events, setEvents] = useState([]);
+  // const [keys, setKeys] = useState([]);
+  const [selectedEvent, setSelectedEvent] = useState("Choose one");
+
+  useEffect(() => {
+    handleSubmit();
+  }, []);
+
+  const { data, refetch } = trpc.tba.teamEvents.useQuery(
+    {
+      teamKey: "frc3256",
+      year: 2023,
+    },
+    { enabled: false },
+  );
+
+  const handleSubmit = async () => {
+    try {
+      refetch();
+      setEvents(data.map((event) => ({ name: event.name, key: event.key })));
+
+      // setKeys(data.map((event) => event.key));
+      console.log("I AM RIGH THERE: ", selectedEvent);
+      // addEvents({ events: { name: "test", key: "test" } });
+      for (let i = 0; i < events.length; i++) {
+        console.log("EVENTS: ", events[i]);
+        addEvents({ event: events[i] });
+      }
+    } catch (error) {
+      console.error("Error fetching events:", error);
+    }
+  };
   return (
     <div className="flex-1 space-y-4 p-8 pt-6">
       <div className="flex items-center justify-between space-y-2">
         <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
         <div className="flex items-center space-x-2">
-          <CalendarDateRangePicker />
-          <Button>Download</Button>
+          <ModalSelectComponent
+            events={events}
+            selectedEvent={selectedEvent}
+            setSelectedEvent={setSelectedEvent}
+          />
+          {/* <CalendarDateRangePicker /> */}
+          {/* <Button>Download</Button> */}
+          {/* <button type="button" onClick={handleSubmit}>
+            hello
+          </button> */}
+          <Button type="button" onClick={handleSubmit}>
+            Fetch Events
+          </Button>
           {/* <p>DATA: </p> */}
           {/* {allEvents("frc3256", 2024)} */}
           {/* <allEvents team="frc3256" y={2024} /> */}
@@ -60,7 +168,7 @@ export default function DashboardPage() {
           </TabsTrigger>
         </TabsList>
         <TabsContent value="assignments" className="h-[75vh] space-y-4">
-          <Assignments />
+          <Assignments selectedEvent={selectedEvent} />
         </TabsContent>
         {/* <TabsContent value="overview" className="space-y-4">
               <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
@@ -192,3 +300,5 @@ export default function DashboardPage() {
     </div>
   );
 }
+
+export default trpc.withTRPC(DashboardPage);

packages/api/src/router/tba.ts

@@ -6,10 +6,12 @@ import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
 
 export const tbaRouter = createTRPCRouter({
   teamEvents: publicProcedure
-    .input(z.object({ teamKey: z.string(), year: z.number() }))
+    .input(z.object({ teamKey: z.string() }))
+    .input(z.object({ year: z.number() }))
     .query(async ({ input }) => {
       const response = await axios.get(
         `https://www.thebluealliance.com/api/v3/team/${input.teamKey}/events/${input.year}`,
+        // `https://www.thebluealliance.com/api/v3/team/${input.teamKey}/events/`,
         {
           headers: {
             "X-TBA-Auth-Key":
@@ -19,13 +21,18 @@ export const tbaRouter = createTRPCRouter({
       );
 
       const extractedData = (
-        response.data as { event_code: string; key: string }[]
-      ).map((event: { event_code: string; key: string }) => ({
+        response.data as { event_code: string; key: string; name: string }[]
+      ).map((event: { event_code: string; name: string }) => ({
         event_code: event.event_code,
         key: event.key,
+        name: event.name,
       }));
 
-      return extractedData as { event_code: string; key: string }[];
+      return extractedData as {
+        event_code: string;
+        key: string;
+        name: string;
+      }[];
     }),
   eventMatches: publicProcedure
     .input(z.object({ teamKey: z.string() }))