From 13a9407caa5ad1d3ae7ce4011fe69d6d7a51da8c Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 19 Jun 2024 11:33:27 +0200 Subject: [PATCH 1/5] include genres in getStory api call --- src/app/lib/get.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/lib/get.ts b/src/app/lib/get.ts index 797b286..1d9fb8c 100644 --- a/src/app/lib/get.ts +++ b/src/app/lib/get.ts @@ -1,7 +1,14 @@ "use server" import prisma from "./db" export async function getStories() { - return prisma.story.findMany() + return prisma.story.findMany( + { + include: { + genres: true + } + } + + ) } export async function getPubs() { return prisma.pub.findMany() From b5b8d8ad094b760591666dc17f43777d9ea2c9ea Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 19 Jun 2024 11:33:53 +0200 Subject: [PATCH 2/5] add fetched data to story table --- src/app/story/page.tsx | 112 +---------------------------------------- 1 file changed, 2 insertions(+), 110 deletions(-) diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx index 5cf263a..7cb6a16 100644 --- a/src/app/story/page.tsx +++ b/src/app/story/page.tsx @@ -1,116 +1,8 @@ import { Story } from "@prisma/client"; import { DataTable } from "./data-table"; import { columns } from "./columns"; -const stories: Story[] = [ - { - id: 0, - word_count: 500, - title: "Space Vampire", - deleted: 0, - }, - { - id: 1, - word_count: 500, - title: "Ghost Astronaut", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Elf", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Space Orcs", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Space Orcs", - deleted: 0, - }, - { - id: 0, - word_count: 500, - title: "Space Vampire", - deleted: 0, - }, - { - id: 1, - word_count: 500, - title: "Ghost Astronaut", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Elf", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Space Orcs", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Space Orcs", - deleted: 0, - }, - { - id: 0, - word_count: 500, - title: "Space Vampire", - deleted: 0, - }, - { - id: 1, - word_count: 500, - title: "Ghost Astronaut", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Elf", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Space Orcs", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Space Orcs", - deleted: 0, - }, - { - id: 0, - word_count: 500, - title: "Space Vampire", - deleted: 0, - }, - { - id: 1, - word_count: 500, - title: "Ghost Astronaut", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Elf", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Space Orcs", - deleted: 0, - }, { - id: 1, - word_count: 500, - title: "Spooky Space Orcs And Gandalf Too", - deleted: 0, - }, -] +import { getStories } from "app/lib/get"; +const stories: Story[] = await getStories() export default async function Page() { return (
From 9583d0da16ab4e289c5ac4cb4e01bca82429340e Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 19 Jun 2024 11:34:45 +0200 Subject: [PATCH 3/5] add definablei, reusable filtering --- src/app/story/columns.tsx | 30 +++++++++++++++++++++++++++--- src/app/story/data-table.tsx | 32 +++++++++++++++++++++++++++++--- 2 files changed, 56 insertions(+), 6 deletions(-) diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx index 9c9704c..713fcbd 100644 --- a/src/app/story/columns.tsx +++ b/src/app/story/columns.tsx @@ -1,9 +1,9 @@ "use client" import { ColumnDef } from "@tanstack/react-table" -import { Story } from "@prisma/client" +import { Genre, Story } from "@prisma/client" import { ArrowUpDown, MoreHorizontal } from "lucide-react" import { Button } from "@/components/ui/button" -export const columns: ColumnDef[] = [ +export const columns: ColumnDef }>[] = [ // { // accessorKey: "id", // header: "Id", @@ -22,10 +22,34 @@ export const columns: ColumnDef[] = [ ) }, + }, { accessorKey: "word_count", - header: "Word Count", + header: ({ column }) => { + return ( + + ) + }, + enableColumnFilter: false + }, + { + accessorFn: row => { + let unpacked = "" + for (let i = 0; i < row.genres.length; i++) { + unpacked = unpacked + " " + row.genres[i].name + } + return unpacked + }, + header: "Genres" + + }, // { // accessorKey: "deleted", diff --git a/src/app/story/data-table.tsx b/src/app/story/data-table.tsx index f02984e..9c454e7 100644 --- a/src/app/story/data-table.tsx +++ b/src/app/story/data-table.tsx @@ -5,6 +5,8 @@ import { DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, + DropdownMenuRadioItem, + DropdownMenuRadioGroup } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { useState } from "react" @@ -39,6 +41,7 @@ export function DataTable({ columns, data, }: DataTableProps) { + console.log(data) //STATE const [sorting, setSorting] = useState([]) const [columnFilters, setColumnFilters] = useState( @@ -64,13 +67,36 @@ export function DataTable({ }, }) + const [filterBy, setFilterBy] = useState(table.getAllColumns()[0]) + console.log(filterBy.id) return (<>
+ + + + + + + {table + .getAllColumns() + .filter((column) => column.getCanFilter()) + .map((column) => { + return ( + + {column.id} + + ) + })} + + + - table.getColumn("email")?.setFilterValue(event.target.value) + table.getColumn(filterBy.id)?.setFilterValue(event.target.value) } className="max-w-sm" /> From 285cef524cb12027f29870fe24adaea1670b5fd2 Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 19 Jun 2024 11:53:35 +0200 Subject: [PATCH 4/5] split getStory function it's a waste to be fetching genres unless we're going to use them --- src/app/lib/get.ts | 3 +++ src/app/story/page.tsx | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/lib/get.ts b/src/app/lib/get.ts index 1d9fb8c..85acb76 100644 --- a/src/app/lib/get.ts +++ b/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: { diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx index 7cb6a16..93c0a71 100644 --- a/src/app/story/page.tsx +++ b/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"; -const stories: Story[] = await getStories() +import { getStoriesWithGenres } from "app/lib/get"; +import { Genre } from "@prisma/client"; +const stories: Array }> = await getStoriesWithGenres() export default async function Page() { return (
From 6839c1c36921c1621e43d342f9adb7110a6f077d Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 19 Jun 2024 11:54:07 +0200 Subject: [PATCH 5/5] tweaks --- src/app/story/data-table.tsx | 62 +++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/src/app/story/data-table.tsx b/src/app/story/data-table.tsx index 9c454e7..8248775 100644 --- a/src/app/story/data-table.tsx +++ b/src/app/story/data-table.tsx @@ -71,39 +71,41 @@ export function DataTable({ console.log(filterBy.id) return (<>
+
+ + + + + + + {table + .getAllColumns() + .filter((column) => column.getCanFilter()) + .map((column) => { + return ( + + {column.id} + + ) + })} + + + + + table.getColumn(filterBy.id)?.setFilterValue(event.target.value) + } + className="max-w-sm" + /> +
- - - - {table - .getAllColumns() - .filter((column) => column.getCanFilter()) - .map((column) => { - return ( - - {column.id} - - ) - })} - - - - - table.getColumn(filterBy.id)?.setFilterValue(event.target.value) - } - className="max-w-sm" - /> - - -