Remove React Query and modernize votes/blog setup

components/blog/ArticleList/ArticleList.tsx

@@ -8,7 +8,6 @@ export interface ArticleListProps {
     articles: Article[];
 }
 
-// TODO: Add new component for blog preview entry with meta data
 const ArticleList: FC<ArticleListProps> = ({ articles }) => {
     return articles ? (
         <ul className={styles.articleList}>

components/core/Comments/Comments.tsx

@@ -4,7 +4,6 @@ import styles from './Comments.module.css';
 
 const Comments: FC = () => {
     return (
-        /* TODO: Switch to theme="https://analysis-tools.dev/assets/styles/giscus.css" once it's deployed */
         <div className={styles.commentWrapper}>
             <Giscus
                 id="comments"

components/tools/listPage/ToolCard/ToolCard.tsx

@@ -44,11 +44,10 @@ const ToolCard: FC<ToolCardProps> = ({ tool }) => {
         }
     };
 
-    // FIXME: Get language tag from name to work as href, some languages have different names than their tag
     return (
         <Card className={styles.toolCardWrapper}>
             <div className={styles.votes} ref={votesRef}>
-                <VoteWidget toolId={tool.id} />
+                <VoteWidget toolId={tool.id} initialVotes={tool.votes} />
                 <Link className={styles.clickOut} href={`/tool/${tool.id}`}>
                     <div className={styles.clickOut} />
                 </Link>
@@ -140,11 +139,13 @@ const ToolCard: FC<ToolCardProps> = ({ tool }) => {
                             </span>
                         ))}
                     </li>
-                    <li>
-                        <span className={styles.metaInfo}>
-                            {tool.upvotePercentage}% upvoted
-                        </span>
-                    </li>
+                    {tool.upvotePercentage !== undefined && (
+                        <li>
+                            <span className={styles.metaInfo}>
+                                {tool.upvotePercentage}% upvoted
+                            </span>
+                        </li>
+                    )}
                 </ul>
             </div>
         </Card>

components/tools/toolPage/ToolInfoCard/ToolInfoCard.tsx

@@ -23,7 +23,8 @@ const ToolInfoCard: FC<ToolInfoCardProps> = ({ tool }) => {
             <div className={styles.votes}>
                 <VoteWidget
                     toolId={tool.id}
-                    upvotePercentage={tool.upvotePercentage}
+                    initialVotes={tool.votes}
+                    initialUpvotePercentage={tool.upvotePercentage}
                 />
             </div>
             <div className={styles.info}>

components/widgets/ToolsListWidget/ToolsListEntry/ToolsListEntry.tsx

@@ -13,7 +13,11 @@ export interface ToolsListEntryProps {
 const ToolsListEntry: FC<ToolsListEntryProps> = ({ tool }) => {
     return (
         <div className={styles.listEntryWrapper}>
-            <VoteWidget toolId={tool.id} type={'secondary'} />
+            <VoteWidget
+                toolId={tool.id}
+                type={'secondary'}
+                initialVotes={tool.votes}
+            />
             <Link
                 href={`/tool/${tool.id}`}
                 className={cn(styles.toolLink, 'no-underline')}>

components/widgets/VoteWidget/VoteWidget.tsx

@@ -1,51 +1,76 @@
 import { FC, useEffect, useState } from 'react';
-import { submitVote, votesFormatter } from 'utils/votes';
+import { fetchToolVotes, submitVote, votesFormatter } from 'utils/votes';
 import cn from 'classnames';
 import styles from './VoteWidget.module.css';
 import { LoadingDots } from '@components/elements';
-import { useToolVotesQuery } from './query';
-import classNames from 'classnames';
 
 export interface VoteWidgetProps {
     toolId: string;
     type?: 'primary' | 'secondary';
     upvotePercentage?: number;
+    initialVotes?: number;
+    initialUpvotePercentage?: number;
     className?: string;
 }
 
 const VoteWidget: FC<VoteWidgetProps> = ({
     toolId,
     type = 'primary',
     upvotePercentage,
+    initialVotes,
+    initialUpvotePercentage,
     className,
 }) => {
     const theme = type === 'primary' ? styles.primary : styles.secondary;
-    const [votes, setVotes] = useState(0);
+    const [votes, setVotes] = useState(initialVotes ?? 0);
     const [voteAction, setVoteAction] = useState('');
-
-    const { data, isLoading, isFetching, isRefetching, error } =
-        useToolVotesQuery(toolId);
-
-    const votesData = data?.data;
+    const [isFetching, setIsFetching] = useState(initialVotes === undefined);
+    const [hasError, setHasError] = useState(false);
+    const [resolvedUpvotePercentage, setResolvedUpvotePercentage] = useState(
+        initialUpvotePercentage ?? upvotePercentage,
+    );
 
     useEffect(() => {
+        let isMounted = true;
         const localVote = localStorage.getItem(`vote-${toolId}`);
-        if (votesData?.votes !== undefined) {
-            setVotes(votesData.votes);
-        }
         if (localVote) {
             setVoteAction(localVote);
         }
-    }, [votesData, toolId]);
 
-    if (isLoading || isFetching || isRefetching) {
+        const loadVotes = async () => {
+            setIsFetching(true);
+            setHasError(false);
+            const response = await fetchToolVotes(toolId);
+            if (!isMounted) {
+                return;
+            }
+            const data = response?.data;
+            if (!data) {
+                setHasError(true);
+            } else {
+                setVotes(data.votes);
+                setResolvedUpvotePercentage(
+                    data.upvotePercentage ?? upvotePercentage,
+                );
+            }
+            setIsFetching(false);
+        };
+
+        void loadVotes();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [toolId, upvotePercentage]);
+
+    if (isFetching && initialVotes === undefined) {
         return (
             <div className={cn(theme)}>
                 <LoadingDots />
             </div>
         );
     }
-    if (error) {
+    if (hasError && initialVotes === undefined) {
         return null;
     }
 
@@ -83,16 +108,16 @@ const VoteWidget: FC<VoteWidgetProps> = ({
                 />
                 <span className={styles.votes}>{votesFormatter(votes)}</span>
                 <button
-                    className={classNames(styles.voteBtn, styles.downvoteBtn, {
+                    className={cn(styles.voteBtn, styles.downvoteBtn, {
                         [styles.activeDownvote]: voteAction === 'downvote',
                     })}
                     aria-label={`Downvote ${toolId}`}
                     onClick={() => handleVote(-1, 'downvote')}
                 />
             </div>
-            {upvotePercentage !== undefined && (
+            {resolvedUpvotePercentage !== undefined && (
                 <div className={styles.upvotePercentage}>
-                    {upvotePercentage}% upvoted
+                    {resolvedUpvotePercentage}% upvoted
                 </div>
             )}
         </>