resolved build error; graphql codegen

.github/workflows/nextjs.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [22.x]
+        node-version: [22.4]
 
     defaults:
       run:

frontend/app/form-tutor/page.tsx

@@ -5,8 +5,8 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import EventTable from "@/app/form-tutor/ui/table/table";
 import { Header } from "@/components/header";
-import { ADD_TUTOR } from "@/lib/queries";
-import { client } from "@/lib/graphClient";
+import {client} from "@/lib/graphClient";
+import {AddTutorMutationVariables} from "@/lib/gql/generated/graphql";
 
 const inputDivStyling = "w-full my-3 ";
 const tableDivStyling = "my-10 w-full h-full";
@@ -16,19 +16,19 @@ export default function Page() {
   async function onSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     const formData = new FormData(event.currentTarget);
-    const firstName = formData.get("fn");
-    const lastName = formData.get("sn");
-    const email = formData.get("email");
-    const eventsAvailable = "No clue";
+    const firstName = formData.get("fn")?.toString() || '';
+    const lastName = formData.get("sn")?.toString() || '';
+    const email = formData.get("email")?.toString() || '';
+    const eventsAvailable = [1, 2];
     const variables = {
       firstName,
       lastName,
       email,
       eventsAvailable,
     };
 
-
-    client.request(ADD_TUTOR, variables);
+    // TODO: implement
+    // client.request()
   }
 
   return (

frontend/app/form-tutor/ui/table/columns.tsx

@@ -0,0 +1,48 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { TutorFormEventsQuery } from "@/lib/gql/generated/graphql";
+
+export const columns: ColumnDef<TutorFormEventsQuery['events'][0]>[] = [
+  {
+    accessorKey: "isSelected",
+    header: "",
+    cell: ({ row }) => (
+      <div className="w-full flex flex-row justify-center">
+        <Checkbox
+          className={"mx-auto"}
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Ich kann diese Vorlesung halten"
+        />
+      </div>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: () => <div className="text-left">Veranstaltung</div>,
+  },
+  {
+    accessorKey: "from",
+    header: () => <div className="text-left">Datum</div>,
+    cell: ({ row }) => {
+      const date = new Date(row.getValue('from'));
+      return date.toLocaleDateString();
+    }
+  },
+  {
+    accessorKey: "from",
+    header: () => <div className="text-left">Von</div>,
+    cell: ({ row }) => {
+      const time = new Date(row.getValue('from'));
+      return time.toLocaleTimeString();
+    }
+  },
+  {
+    accessorKey: "to",
+    header: () => <div className="text-left">Bis</div>,
+    cell: ({ row }) => {
+      const time = new Date(row.getValue('to'));
+      return time.toLocaleTimeString();
+    }
+  },
+];

frontend/app/form-tutor/ui/table/data-table.tsx

@@ -1,82 +1,78 @@
 "use client"
 
 import {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from "@tanstack/react-table"
 
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from "@/components/ui/table"
 
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[]
-    data: TData[]
+interface DataTableProps<TData> {
+  columns: ColumnDef<TData>[]
+  data: TData[]
 }
 
-const scrollable = "w-full h-30 overflow-scroll"
-
-export function DataTable<TData, TValue>({
-    columns,
+export function DataTable<TData>({
+  columns,
+  data,
+}: DataTableProps<TData>) {
+  const table = useReactTable({
     data,
-}: Readonly<DataTableProps<TData, TValue>>) {
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-    });
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
 
-    return (
-        <div className="rounded-md border-2">
-            <Table>
-                <TableHeader>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => {
-                                return (
-                                    <TableHead key={header.id}>
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                    </TableHead>
-                                )
-                            })}
-                        </TableRow>
-                    ))}
-                </TableHeader>
-                <TableBody>
-                    {table.getRowModel().rows?.length ? (
-                        table.getRowModel().rows.map((row) => (
-                            <TableRow
-                                key={row.id}
-                                data-state={row.getIsSelected() && "selected"}
-                            >
-                                {row.getVisibleCells().map((cell) => (
-                                    <TableCell key={cell.id}>
-                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                    </TableCell>
-                                ))}
-                            </TableRow>
-                        ))
-                    ) : (
-                        <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                                No results.
-                            </TableCell>
-                        </TableRow>
-                    )}
-                </TableBody>
-            </Table>
-        </div>
-    )
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
 }

frontend/app/form-tutor/ui/table/table.tsx

@@ -1,28 +1,19 @@
-import { columns } from "../../../../lib/columns"
-import { DataTable } from "./data-table"
-import { client } from "@/lib/graphClient"
-import { GET_EVENTS } from "@/lib/queries"
-import { Veranstaltungen, Vorlesung } from "@/lib/definitions"
-
-async function getData(): Promise<Vorlesung[]> {
-    const jsonData : Veranstaltungen = await client.request(GET_EVENTS);
-
-    const vorlesungen: Vorlesung[] = jsonData.events.map(event => ({
-        id: event.ID,
-        title: event.title,
-        date: new Date(event.from).toLocaleDateString(),
-        time: new Date(event.from).toLocaleTimeString() + " - " + new Date(event.to).toLocaleTimeString()
-    }));
-
-    return vorlesungen;
-}
+import { columns } from "./columns";
+import { DataTable } from "./data-table";
+import { client } from "@/lib/graphClient";
+import {
+  TutorFormEventsQuery,
+  TutorFormEventsDocument,
+} from "@/lib/gql/generated/graphql";
 
 export default async function EventTable() {
-    const data = await getData()
+  const data = await client.request<TutorFormEventsQuery>(
+    TutorFormEventsDocument
+  );
 
-    return (
-        <div className="w-fill mx-auto">
-            <DataTable columns={columns} data={data}/>
-        </div>
-    )
+  return (
+    <div className="w-fill mx-auto">
+      <DataTable columns={columns} data={data.events} />
+    </div>
+  );
 }

frontend/codegen.ts

@@ -0,0 +1,15 @@
+
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: "../server/graph/schema.graphqls",
+  documents: "lib/**/*.graphql",
+  generates: {
+    "lib/gql/generated/": {
+      preset: "client",
+    }
+  }
+};
+
+export default config;