admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

show dynamic data on videos list page

Browse source
This commit is contained in:
MarconLP 2023-04-11 21:49:14 +02:00
parent 5091bce7fb
commit 621325b930
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
2 changed files with 54 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/pages/videos.tsx
View file

@ -11,18 +11,12 @@ import VideoUploadModal from "~/components/VideoUploadModal";
const VideoList: NextPage = () => { const VideoList: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { status } = useSession(); const { status } = useSession();
const { data: videos } = api.video.getAll.useQuery(); const { data: videos, isLoading } = api.video.getAll.useQuery();
const getUploadUrl = api.video.getUploadUrl.useMutation();
if (status === "unauthenticated") { if (status === "unauthenticated") {
void router.push("/sign-in"); void router.push("/sign-in");
} }
const onUpload = () => {
const data = getUploadUrl.mutate({ key: "something random" });
console.log(data);
};
return ( return (
<> <>
<Head> <Head>
@ -39,41 +33,47 @@ const VideoList: NextPage = () => {
</div> </div>
<div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14"> <div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14">
<div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16"> <div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16">
{[ {videos && !isLoading ? (
{ videos.map(({ title, id, createdAt }) => (
title: "Are pings bad?", <VideoCard
id: "4e98f4a", title={title}
timestamp: 1681211128621, id={id}
}, createdAt={createdAt}
{ key={id}
title: />
"do you really need a backend? because there is a much better alternative to it.", ))
id: "h4b98rt", ) : (
timestamp: 1681011128621, <>
}, <div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
{ <figure className="relative aspect-video w-full bg-slate-200"></figure>
title: "how next works", <div className="m-4 flex flex-col">
id: "1h7r9e", <span className="h-4 rounded bg-slate-200"></span>
timestamp: 1681211120621, <span className="mt-2 h-4 rounded bg-slate-200"></span>
}, </div>
{ </div>
title: "how next works", <div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
id: "h27r9e", <figure className="relative aspect-video w-full bg-slate-200"></figure>
timestamp: 1681210128621, <div className="m-4 flex flex-col">
}, <span className="h-4 rounded bg-slate-200"></span>
{ <span className="mt-2 h-4 rounded bg-slate-200"></span>
title: "how next works", </div>
id: "h73r9e", </div>
timestamp: 1681211118621, <div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
}, <figure className="relative aspect-video w-full bg-slate-200"></figure>
{ <div className="m-4 flex flex-col">
title: "how next works", <span className="h-4 rounded bg-slate-200"></span>
id: "h7r49e", <span className="mt-2 h-4 rounded bg-slate-200"></span>
timestamp: 1695211128621, </div>
}, </div>
].map(({ title, id, timestamp }) => ( <div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
<VideoCard title={title} id={id} timestamp={timestamp} key={id} /> <figure className="relative aspect-video w-full bg-slate-200"></figure>
))} <div className="m-4 flex flex-col">
<span className="h-4 rounded bg-slate-200"></span>
<span className="mt-2 h-4 rounded bg-slate-200"></span>
</div>
</div>
</>
)}
</div> </div>
</div> </div>
</main> </main>
@ -84,11 +84,11 @@ const VideoList: NextPage = () => {
interface VideoCardProps { interface VideoCardProps {
title: string; title: string;
id: string; id: string;
timestamp: number; createdAt: Date;
} }
const VideoCard = ({ title, id, timestamp }: VideoCardProps) => { const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
const getTime = (timestamp: number): string => { const getTime = (timestamp: Date): string => {
const delta = Math.round( const delta = Math.round(
(+new Date() - new Date(timestamp).getTime()) / 1000 (+new Date() - new Date(timestamp).getTime()) / 1000
); );
@ -161,7 +161,7 @@ const VideoCard = ({ title, id, timestamp }: VideoCardProps) => {
</figure> </figure>
<div className="m-4 flex flex-col"> <div className="m-4 flex flex-col">
<span className="line-clamp-2 font-bold text-[0f0f0f]">{title}</span> <span className="line-clamp-2 font-bold text-[0f0f0f]">{title}</span>
<span className="text-[#606060]">{getTime(timestamp)}</span> <span className="mt-2 text-[#606060]">{getTime(createdAt)}</span>
</div> </div>
</div> </div>
</Link> </Link>

11
src/server/api/routers/video.ts
View file

@ -6,9 +6,14 @@ import { env } from "~/env.mjs";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
export const videoRouter = createTRPCRouter({ export const videoRouter = createTRPCRouter({
getAll: protectedProcedure.query(({ ctx }) => { getAll: protectedProcedure.query(async ({ ctx }) => {
console.log(ctx.session); const videos = await ctx.prisma.video.findMany({
return ctx.prisma.video.findMany(); where: {
userId: ctx.session.user.id,
},
});
return videos;
}), }),
get: protectedProcedure get: protectedProcedure
.input(z.object({ videoId: z.string() })) .input(z.object({ videoId: z.string() }))