r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 14:25:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactored views component

Browse Source
This commit is contained in:
r-freeman 2023-04-10 23:58:18 +01:00
parent d5c320c88a
commit 126b66ac09
1 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/ui/Views.tsx
View File

@ -1,7 +1,8 @@
import {ElementType, useEffect, useState} from 'react'
import {ElementType, useEffect} from 'react'
import fetcher from '@/lib/fetcher'
import {numberFormat} from '@/lib/numberFormat'
import {supabase} from '@/lib/supabase'
import useSWR, {useSWRConfig} from 'swr'
type ViewsProps = {
as?: ElementType
@ -10,44 +11,35 @@ type ViewsProps = {
shouldUpdateViews?: boolean
}
const NEXT_PUBLIC_SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
export function Views({as: Component = 'span', slug, className, shouldUpdateViews = false}: ViewsProps) {
const [views, setViews] = useState(0)
const {data} = useSWR(`/api/views/${slug}`, fetcher) as { data: { views: number } }
const {mutate} = useSWRConfig()
useEffect(() => {
// subscribe to view updates at the row level
const sub = supabase
.channel('any')
.on('postgres_changes', {
event: 'UPDATE',
schema: 'public',
table: 'analytics',
filter: `slug=eq.${slug}`
}, payload => {
setViews(payload.new.views)
})
.subscribe()
if (shouldUpdateViews) {
// subscribe to analytics table and react to updates at row level
const sub = supabase
.channel('any')
.on('postgres_changes', {
event: 'UPDATE',
schema: 'public',
table: 'analytics',
filter: `slug=eq.${slug}`
}, () => {
mutate(`/api/views/${slug}`)
})
.subscribe();
return () => {
sub.unsubscribe()
return () => {
sub.unsubscribe()
}
}
}, [])
useEffect(() => {
const getViews = async () => {
const {views} = await fetcher(`${NEXT_PUBLIC_SITE_URL}/api/views/${slug}`)
setViews(views)
};
getViews()
}, [])
useEffect(() => {
if (shouldUpdateViews) {
const registerView = async () => {
const {views} = await fetcher(`${NEXT_PUBLIC_SITE_URL}/api/views/${slug}`,
await fetcher(`/api/views/${slug}`,
{
method: 'POST'
}
@ -60,7 +52,7 @@ export function Views({as: Component = 'span', slug, className, shouldUpdateView
return (
<Component className={className}>
{` · ${views > 0 ? numberFormat(views) : '—'} views`}
{` · ${data?.views > 0 ? numberFormat(data.views) : '—'} views`}
</Component>
)
}