From 9ae8decc303dd889cd5c2a426b195dbf3be3a559 Mon Sep 17 00:00:00 2001 From: jackyef Date: Tue, 19 Oct 2021 16:18:07 +0700 Subject: [PATCH] feat: Testing out supabase --- package.json | 1 + src/components/Blog/Post/Post.tsx | 33 +++++++++- src/utils/supabase.ts | 6 ++ types/supabase.ts | 16 +++++ yarn.lock | 101 ++++++++++++++++++++++++++++++ 5 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 src/utils/supabase.ts create mode 100644 types/supabase.ts diff --git a/package.json b/package.json index a8011217..0924c5a0 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@mdx-js/react": "^1.6.18", "@next/bundle-analyzer": "^9.5.3", "@prefresh/next": "^1.3.0", + "@supabase/supabase-js": "^1.21.0", "@tailwindcss/jit": "^0.1.1", "autotrack": "^2.4.1", "cross-env": "^7.0.3", diff --git a/src/components/Blog/Post/Post.tsx b/src/components/Blog/Post/Post.tsx index b8643d2d..d60e8d90 100644 --- a/src/components/Blog/Post/Post.tsx +++ b/src/components/Blog/Post/Post.tsx @@ -1,4 +1,4 @@ -import { useLayoutEffect } from 'react'; +import { useEffect, useLayoutEffect, useState } from 'react'; import { spring } from 'react-flip-toolkit'; import tinytime from 'tinytime'; import { useRouter } from 'next/router'; @@ -11,8 +11,10 @@ import { HorizontalDivider } from '@/components/Divider'; import { LazyWebmentionWidget } from '@/components/Webmention/LazyWebmentionWidget'; import { IOWrapper } from '@/components/IntersectionObserver/Wrapper'; import { useShouldAnimateNavigation } from '@/contexts/navigation'; +import { supabase } from '@/utils/supabase'; import { PostHeader } from './PostHeader'; +import { PostLikesCount, PostUserLikes } from '../../../../types/supabase'; const mdxComponents = { pre: ({ className, ...props }: any) => ( @@ -40,6 +42,7 @@ interface Props { export default function Post({ meta, children, posts }: Props) { const router = useRouter(); const postIndex = posts.findIndex((post) => post.link === router.pathname); + const post = posts[postIndex] const previous = posts[postIndex + 1]; const next = posts[postIndex - 1]; const fullUrl = `${publicUrl}${router.pathname}`; @@ -67,6 +70,30 @@ export default function Post({ meta, children, posts }: Props) { } }, [shouldAnimateNavigation]); + const [likesCount, setLikesCount] = useState(0) + + useEffect(() => { + (async () => { + const { data } = await supabase.from('post_likes_count').select('likes_count').eq('post_slug', post.link) + + console.log({ data }) + })() + }, []) + + const addLikesCount = async () => { + console.log(await supabase.from('post_likes_count').upsert({ + likes_count: 1, + post_slug: post.link + })) + console.log(await supabase.from('post_user_likes').upsert({ + id: 'testing-id', + likes_count: 1, + post_slug: post.link + })) + + setLikesCount(prev => prev + 1) + } + return (
: null } +
+
Likes: {likesCount}
+ +