diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index d87723a2..7d25a6bf 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -3,7 +3,7 @@ import './Full.scss' import { Icon } from '../_shared/Icon' import { AuthorCard } from '../Author/Card' import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js' -import type { Author, Reaction, Shout } from '../../graphql/types.gen' +import type { Author, Shout } from '../../graphql/types.gen' import { ReactionKind } from '../../graphql/types.gen' import MD from './MD' @@ -124,24 +124,40 @@ export const FullArticle = (props: ArticleProps) => { checkReaction(Object.values(reactionEntities), ReactionKind.Dislike, userSlug(), props.article.id) ) - const handleRatingChange = async (isUpvote: boolean) => { - const reactionKind = isUpvote ? ReactionKind.Like : ReactionKind.Dislike - const isReacted = (isUpvote && isUpvoted()) || (!isUpvote && isDownvoted()) + const deleteShoutReaction = async (reactionKind: ReactionKind) => { + const reactionToDelete = Object.values(reactionEntities).find( + (r) => + r.kind === reactionKind && + r.createdBy.slug === userSlug() && + r.shout.id === props.article.id && + !r.replyTo + ) + return deleteReaction(reactionToDelete.id) + } - if (isReacted) { - const reactionToDelete = Object.values(reactionEntities).find( - (r) => - r.kind === reactionKind && - r.createdBy.slug === userSlug() && - r.shout.id === props.article.id && - !r.replyTo - ) - await deleteReaction(reactionToDelete.id) + const handleRatingChange = async (isUpvote: boolean) => { + if (isUpvote) { + if (isUpvoted()) { + await deleteShoutReaction(ReactionKind.Like) + } else if (isDownvoted()) { + await deleteShoutReaction(ReactionKind.Dislike) + } else { + await createReaction({ + kind: ReactionKind.Like, + shout: props.article.id + }) + } } else { - await createReaction({ - kind: reactionKind, - shout: props.article.id - }) + if (isDownvoted()) { + await deleteShoutReaction(ReactionKind.Dislike) + } else if (isUpvoted()) { + await deleteShoutReaction(ReactionKind.Like) + } else { + await createReaction({ + kind: ReactionKind.Dislike, + shout: props.article.id + }) + } } loadShout(props.article.slug) diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index c2cc1b7b..d6522466 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -101,20 +101,36 @@ export const ArticleCard = (props: ArticleCardProps) => { checkReaction(Object.values(reactionEntities), ReactionKind.Dislike, userSlug(), id) ) - const handleRatingChange = async (isUpvote: boolean) => { - const reactionKind = isUpvote ? ReactionKind.Like : ReactionKind.Dislike - const isReacted = (isUpvote && isUpvoted()) || (!isUpvote && isDownvoted()) + const deleteShoutReaction = async (reactionKind: ReactionKind) => { + const reactionToDelete = Object.values(reactionEntities).find( + (r) => r.kind === reactionKind && r.createdBy.slug === userSlug() && r.shout.id === id && !r.replyTo + ) + return deleteReaction(reactionToDelete.id) + } - if (isReacted) { - const reactionToDelete = Object.values(reactionEntities).find( - (r) => r.kind === reactionKind && r.createdBy.slug === userSlug() && r.shout.id === id && !r.replyTo - ) - await deleteReaction(reactionToDelete.id) + const handleRatingChange = async (isUpvote: boolean) => { + if (isUpvote) { + if (isUpvoted()) { + await deleteShoutReaction(ReactionKind.Like) + } else if (isDownvoted()) { + await deleteShoutReaction(ReactionKind.Dislike) + } else { + await createReaction({ + kind: ReactionKind.Like, + shout: id + }) + } } else { - await createReaction({ - kind: reactionKind, - shout: id - }) + if (isDownvoted()) { + await deleteShoutReaction(ReactionKind.Dislike) + } else if (isUpvoted()) { + await deleteShoutReaction(ReactionKind.Like) + } else { + await createReaction({ + kind: ReactionKind.Dislike, + shout: id + }) + } } loadShout(slug) diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx index 10e7d688..30a7e84c 100644 --- a/src/components/_shared/PageLayout.tsx +++ b/src/components/_shared/PageLayout.tsx @@ -6,6 +6,7 @@ import { Show } from 'solid-js' import { clsx } from 'clsx' import '../../styles/app.scss' import styles from './PageLayout.module.scss' +import { Meta } from '@solidjs/meta' type PageLayoutProps = { headerTitle?: string @@ -23,6 +24,7 @@ export const PageLayout = (props: PageLayoutProps) => { return ( <> +
@@ -80,7 +80,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => { setReactionEntities(reaction.id, reaction) } - onCleanup(() => setReactionEntities({})) + onCleanup(() => setReactionEntities(reconcile({}))) const actions = { loadReactionsBy,