From a97624aea4ae6debedc505ccb574c4dc78c93b27 Mon Sep 17 00:00:00 2001
From: Julian <mail@yaman.pro>
Date: Mon, 4 Jul 2022 13:57:31 +0200
Subject: [PATCH] perf(mainPage): :zap: Use database for counting votes

---
 components/ToolMain.tsx     | 50 ++++++++++++++++---------------------
 components/ToolTableRow.tsx | 47 +++++++++++++---------------------
 2 files changed, 39 insertions(+), 58 deletions(-)

diff --git a/components/ToolMain.tsx b/components/ToolMain.tsx
index b6990d6..6e04688 100644
--- a/components/ToolMain.tsx
+++ b/components/ToolMain.tsx
@@ -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 {
@@ -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">
diff --git a/components/ToolTableRow.tsx b/components/ToolTableRow.tsx
index 7edb523..aed70d3 100644
--- a/components/ToolTableRow.tsx
+++ b/components/ToolTableRow.tsx
@@ -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) {
 
@@ -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 {
@@ -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'>