Skip to content

Commit

Permalink
perf(mainPage): ⚡ Use database for counting votes
Browse files Browse the repository at this point in the history
  • Loading branch information
@julianYaman
julianYaman committed Jul 4, 2022
1 parent 164bdcb commit a97624a
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 58 deletions.
50 changes: 21 additions & 29 deletions components/ToolMain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,40 +21,32 @@ export default function ToolMain(props: any) {

const [vibrantColors, setVibrantColors] = useState<string[]>([]);
const [modals, setModal] = useState<boolean[]>([]);
const [toolVotes, setVotes] = useState(0)
const [toolVotes, setVotes] = useState(props.toolData?._count.votes)
const [isLoading, setIsLoading] = useState(true)
const [isVoted, setIsVoted] = useState(false);
const userInfo = props.userInfo

const { data: votes, error: voteCountError }: any = useSWR(`/api/getVotes/${props.toolData.id}`, fetcher)

useEffect(() => {
if(votes){
if(userInfo){
axios.get(`/api/tools/vote?id=${props.toolData.id}`).then(res => {
if(res.data.voted){
setIsVoted(true)
setVotes(votes.votes)
setIsLoading(false)
}else{
setIsVoted(false)
setVotes(votes.votes)
setIsLoading(false)
}
}).catch(err => {
console.log(err)
setVotes(votes.votes)
setIsLoading(false)
})
}else{
setVotes(votes.votes)
setIsLoading(false)
}
}
}, [votes, userInfo, props.toolData.id])
if(userInfo){
axios.get(`/api/tools/vote?id=${props.toolData.id}`).then(res => {
if(res.data.voted){
setIsVoted(true)
setIsLoading(false)
}else{
setIsVoted(false)
setIsLoading(false)
}
}).catch(err => {
console.log(err)
setIsLoading(false)
})
}else{
setIsLoading(false)
}
}, [userInfo, props.toolData.id])

async function handleVote (e:any) {
if(votes && userInfo && !isLoading && !voteCountError){
if(userInfo && !isLoading){
const oldVotes = toolVotes
if(isVoted){
try {
Expand Down Expand Up @@ -102,9 +94,9 @@ export default function ToolMain(props: any) {
<div className="flex-1">
<h1 className="text-5xl text-left font-4 lh-6 font-bold text-white mb-5">
{props.toolData.tool_name}
<Button size="xl" className="float-right" outline={!isVoted} gradientDuoTone="pinkToOrange" onClick={handleVote} data-votes={votes ? toolVotes : 0}>
<Button size="xl" className="float-right" outline={!isVoted} gradientDuoTone="pinkToOrange" onClick={handleVote} data-votes={toolVotes || 0}>
<FaArrowUp className="mr-1 h-4 w-4 pointer-events-none" />
<span className='pointer-events-none'>{voteCountError ? <FaRegTimesCircle /> : votes && !isLoading ? toolVotes : <Spinner size="sm" color='red' aria-label="Default status example" />}</span>
<span className='pointer-events-none'>{!(typeof props.toolData._count.votes === "number") ? <FaRegTimesCircle /> : !isLoading ? toolVotes : <Spinner size="sm" color='red' aria-label="Default status example" />}</span>
</Button>
</h1>
<div className="flex flex-wrap gap-2 pb-5">
Expand Down
47 changes: 18 additions & 29 deletions components/ToolTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import { Avatar, Badge, BadgeColor, Button, Spinner, Table, Tooltip } from 'flow
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { FaArrowUp, FaDiscord, FaGithub, FaLink, FaRegTimesCircle, FaStar, FaTwitter } from 'react-icons/fa';
import useSWR from 'swr';

const fetcher = (url:any) => axios.get(url).then(res => res.data)

export default function ToolTableRow(props: any) {

Expand All @@ -14,39 +11,31 @@ export default function ToolTableRow(props: any) {
const showSubmittedBy = props.showSubmittedBy;
const userInfo = props.userInfo

const [toolVotes, setVotes] = useState(0)
const [toolVotes, setVotes] = useState(row?._count.votes)
const [isLoading, setIsLoading] = useState(true)
const [isVoted, setIsVoted] = useState(false);

const { data: votes, error: voteCountError }: any = useSWR(`/api/getVotes/${row.id}`, fetcher)

useEffect(() => {
if(votes){
if(userInfo){
axios.get(`/api/tools/vote?id=${row.id}`).then(res => {
if(res.data.voted){
setIsVoted(true)
setVotes(votes.votes)
setIsLoading(false)
}else{
setIsVoted(false)
setVotes(votes.votes)
setIsLoading(false)
}
}).catch(err => {
console.log(err)
setVotes(votes.votes)
if(userInfo){
axios.get(`/api/tools/vote?id=${row.id}`).then(res => {
if(res.data.voted){
setIsVoted(true)
setIsLoading(false)
})
}else{
setVotes(votes.votes)
}else{
setIsVoted(false)
setIsLoading(false)
}
}).catch(err => {
console.log(err)
setIsLoading(false)
}
})
}else{
setIsLoading(false)
}
}, [votes, userInfo, row.id])
}, [userInfo, row.id])

async function handleVote (e:any) {
if(votes && userInfo && !isLoading && !voteCountError){
if(userInfo && !isLoading){
const oldVotes = toolVotes
if(isVoted){
try {
Expand Down Expand Up @@ -82,9 +71,9 @@ export default function ToolTableRow(props: any) {
<Table.Row>
<Table.Cell className='flex flex-wrap px-4 md:px-6'>
<div className='flex gap-2'>
<Button size="xs" outline={!isVoted} gradientDuoTone="pinkToOrange" onClick={handleVote} data-votes={votes ? toolVotes : 0}>
<Button size="xs" outline={!isVoted} gradientDuoTone="pinkToOrange" onClick={handleVote} data-votes={toolVotes || 0}>
<FaArrowUp className="mr-1 h-4 w-4 pointer-events-none" />
<span className='pointer-events-none'>{voteCountError ? <FaRegTimesCircle /> : votes && !isLoading ? toolVotes : <Spinner size="sm" color='red' aria-label="Default status example" />}</span>
<span className='pointer-events-none'>{!(typeof row?._count.votes === "number") ? <FaRegTimesCircle /> : !isLoading ? toolVotes : <Spinner size="sm" color='red' aria-label="Default status example" />}</span>
</Button>
<Link href={`/tool/${encodeURIComponent(row.id)}`}>
<a className='text-blue-600 hover:text-cyan-600'>
Expand Down

1 comment on commit a97624a

@vercel
Copy link

@vercel vercel bot commented on a97624a Jul 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

tooldb – ./

tooldb.vercel.app
tooldb.dev
tooldb-git-main-julianyaman.vercel.app
tooldb-julianyaman.vercel.app

Please sign in to comment.