tweaks

it's a waste to be fetching genres unless we're going to use them

src/app/lib/get.ts

@@ -1,6 +1,9 @@
 "use server"
 import prisma from "./db"
 export async function getStories() {
+	return prisma.story.findMany()
+}
+export async function getStoriesWithGenres() {
 	return prisma.story.findMany(
 		{
 			include: {

src/app/story/data-table.tsx

@@ -71,39 +71,41 @@ export function DataTable<TData, TValue>({
   console.log(filterBy.id)
   return (<>
     <div className="flex items-center py-4">
+      <div className="">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Filter by
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanFilter())
+                .map((column) => {
+                  return (
+                    <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
+                      {column.id}
+                    </DropdownMenuRadioItem>
+                  )
+                })}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          placeholder={`${filterBy.id}`}
+          value={(table.getColumn(filterBy.id)?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="ml-auto">
-            Filter by
+            Show/hide
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanFilter())
-              .map((column) => {
-                return (
-                  <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
-                    {column.id}
-                  </DropdownMenuRadioItem>
-                )
-              })}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <Input
-        placeholder={`${filterBy.id}`}
-        value={(table.getColumn(filterBy.id)?.getFilterValue() as string) ?? ""}
-        onChange={(event) =>
-          table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
-        }
-        className="max-w-sm"
-      />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="ml-auto">
-            Columns
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">

src/app/story/page.tsx

@@ -1,8 +1,9 @@
 import { Story } from "@prisma/client";
 import { DataTable } from "./data-table";
 import { columns } from "./columns";
-import { getStories } from "app/lib/get";
+import { getStoriesWithGenres } from "app/lib/get";
-const stories: Story[] = await getStories()
+import { Genre } from "@prisma/client";
+const stories: Array<Story & { genres: Array<Genre> }> = await getStoriesWithGenres()
 export default async function Page() {
   return (
     <div className="container mx-auto py-10">