like dislike logic update

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)

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)

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 (
     <>
+      <Meta name="viewport" content="width=device-width, initial-scale=1" />
       <Header
         title={props.headerTitle}
         articleBody={props.articleBody}

src/context/reactions.tsx

@@ -3,7 +3,7 @@ import { createContext, onCleanup, useContext } from 'solid-js'
 import type { Reaction, ReactionBy, ReactionInput } from '../graphql/types.gen'
 import { ReactionKind } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
-import { createStore } from 'solid-js/store'
+import { createStore, reconcile } from 'solid-js/store'
 
 type ReactionsContextType = {
   reactionEntities: Record<number, Reaction>
@@ -80,7 +80,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     setReactionEntities(reaction.id, reaction)
   }
 
-  onCleanup(() => setReactionEntities({}))
+  onCleanup(() => setReactionEntities(reconcile({})))
 
   const actions = {
     loadReactionsBy,