From 621325b930478b62aa6e7395cf8239b1b5c8564a Mon Sep 17 00:00:00 2001 From: MarconLP <13001502+MarconLP@users.noreply.github.com> Date: Tue, 11 Apr 2023 21:49:14 +0200 Subject: [PATCH] show dynamic data on videos list page --- src/pages/videos.tsx | 92 ++++++++++++++++----------------- src/server/api/routers/video.ts | 11 ++-- 2 files changed, 54 insertions(+), 49 deletions(-) diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx index 3bc76d6..adecd3a 100644 --- a/src/pages/videos.tsx +++ b/src/pages/videos.tsx @@ -11,18 +11,12 @@ import VideoUploadModal from "~/components/VideoUploadModal"; const VideoList: NextPage = () => { const router = useRouter(); const { status } = useSession(); - const { data: videos } = api.video.getAll.useQuery(); - const getUploadUrl = api.video.getUploadUrl.useMutation(); + const { data: videos, isLoading } = api.video.getAll.useQuery(); if (status === "unauthenticated") { void router.push("/sign-in"); } - const onUpload = () => { - const data = getUploadUrl.mutate({ key: "something random" }); - console.log(data); - }; - return ( <> @@ -39,41 +33,47 @@ const VideoList: NextPage = () => {
- {[ - { - title: "Are pings bad?", - id: "4e98f4a", - timestamp: 1681211128621, - }, - { - title: - "do you really need a backend? because there is a much better alternative to it.", - id: "h4b98rt", - timestamp: 1681011128621, - }, - { - title: "how next works", - id: "1h7r9e", - timestamp: 1681211120621, - }, - { - title: "how next works", - id: "h27r9e", - timestamp: 1681210128621, - }, - { - title: "how next works", - id: "h73r9e", - timestamp: 1681211118621, - }, - { - title: "how next works", - id: "h7r49e", - timestamp: 1695211128621, - }, - ].map(({ title, id, timestamp }) => ( - - ))} + {videos && !isLoading ? ( + videos.map(({ title, id, createdAt }) => ( + + )) + ) : ( + <> +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+ + )}
@@ -84,11 +84,11 @@ const VideoList: NextPage = () => { interface VideoCardProps { title: string; id: string; - timestamp: number; + createdAt: Date; } -const VideoCard = ({ title, id, timestamp }: VideoCardProps) => { - const getTime = (timestamp: number): string => { +const VideoCard = ({ title, id, createdAt }: VideoCardProps) => { + const getTime = (timestamp: Date): string => { const delta = Math.round( (+new Date() - new Date(timestamp).getTime()) / 1000 ); @@ -161,7 +161,7 @@ const VideoCard = ({ title, id, timestamp }: VideoCardProps) => {
{title} - {getTime(timestamp)} + {getTime(createdAt)}
diff --git a/src/server/api/routers/video.ts b/src/server/api/routers/video.ts index bab85f9..5abdfe3 100644 --- a/src/server/api/routers/video.ts +++ b/src/server/api/routers/video.ts @@ -6,9 +6,14 @@ import { env } from "~/env.mjs"; import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; export const videoRouter = createTRPCRouter({ - getAll: protectedProcedure.query(({ ctx }) => { - console.log(ctx.session); - return ctx.prisma.video.findMany(); + getAll: protectedProcedure.query(async ({ ctx }) => { + const videos = await ctx.prisma.video.findMany({ + where: { + userId: ctx.session.user.id, + }, + }); + + return videos; }), get: protectedProcedure .input(z.object({ videoId: z.string() }))