fergalmoran/opengifame
1
0
Fork 0
mirror of https://github.com/fergalmoran/opengifame.git synced 2025-12-22 09:38:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Basic vote mechanism implemented

Browse Source
This commit is contained in:
Fergal Moran
2024-09-21 00:49:13 +01:00
parent 8b1e9191ee
commit b788c96e05
3 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/pages/landing-page.tsx
View File

@@ -1,15 +1,14 @@
import React from "react"; import React from "react";
import { TrendingPosts } from "@/components/trending-posts";
import { api, HydrateClient } from "@/trpc/server";
const LandingPage: React.FC = async () => {
void api.post.getTrending.prefetch();
const LandingPage: React.FC = () => {
return ( return (
<div> <HydrateClient>
<div className="m-6 h-full"> <TrendingPosts />
<h1 className="text-xl font-extrabold sm:text-[5rem]"> </HydrateClient>
Contains
<span className="text-[hsl(280,100%,70%)]"> Gifs</span>
</h1>
</div>
</div>
); );
}; };

14
src/components/pages/post/post-actions.tsx
View File

@@ -19,16 +19,22 @@ const PostActions: React.FC<PostActionsProps> = ({ post }) => {
await vote.mutateAsync({ slug: post.slug, up: true }); await vote.mutateAsync({ slug: post.slug, up: true });
voteCount.refetch(); voteCount.refetch();
}} }}
icon={<Icons.up className="h-8 w-8" />} icon={<Icons.up className="h-6 w-6" />}
/> />
<div>{voteCount.data ? voteCount.data.toString() : "Loading..."}</div> <div>
{voteCount.data ? (
voteCount.data.toString()
) : (
<Icons.spinner className="animate-spin" />
)}
</div>
<ActionButton <ActionButton
title="Downvote" title="Downvote"
action={async () => { action={async () => {
await vote.mutateAsync({ slug: post.slug, up: false }); await vote.mutateAsync({ slug: post.slug, up: false });
voteCount.refetch(); voteCount.refetch();
}} }}
icon={<Icons.down className="h-8 w-8" />} icon={<Icons.down className="h-6 w-6" />}
/> />
<ActionButton <ActionButton
title="Favourite" title="Favourite"
@@ -36,7 +42,7 @@ const PostActions: React.FC<PostActionsProps> = ({ post }) => {
await vote.mutateAsync({ slug: post.slug, up: false }); await vote.mutateAsync({ slug: post.slug, up: false });
voteCount.refetch(); voteCount.refetch();
}} }}
icon={<Icons.heart className="h-8 w-8" />} icon={<Icons.heart className="h-6 w-6" />}
/> />
</div> </div>
); );

2
src/server/api/routers/post.ts
View File

@@ -18,7 +18,7 @@ export const postRouter = createTRPCRouter({
.execute(sql`SELECT SUM(CASE WHEN up = TRUE THEN 1 ELSE -1 END) .execute(sql`SELECT SUM(CASE WHEN up = TRUE THEN 1 ELSE -1 END)
FROM public.votes v FROM public.votes v
WHERE v.post_id = (SELECT id FROM posts WHERE slug = ${input.slug})`); WHERE v.post_id = (SELECT id FROM posts WHERE slug = ${input.slug})`);
return count[0]?.sum ?? 0; return count[0]?.sum ?? '0';
}), }),
getBySlug: publicProcedure getBySlug: publicProcedure
.input(z.object({ slug: z.string() })) .input(z.object({ slug: z.string() }))