src/app/lib/get.ts

@@ -1,9 +1,6 @@
 "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,41 +71,39 @@ 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">
-            Show/hide
+            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"
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="ml-auto">
+            Columns
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">

src/app/story/page.tsx

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