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,11 +124,7 @@ export const FullArticle = (props: ArticleProps) => {
     checkReaction(Object.values(reactionEntities), ReactionKind.Dislike, userSlug(), props.article.id)
   )
 
-  const handleRatingChange = async (isUpvote: boolean) => {
+  const deleteShoutReaction = async (reactionKind: ReactionKind) => {
-    const reactionKind = isUpvote ? ReactionKind.Like : ReactionKind.Dislike
-    const isReacted = (isUpvote && isUpvoted()) || (!isUpvote && isDownvoted())
-
-    if (isReacted) {
     const reactionToDelete = Object.values(reactionEntities).find(
       (r) =>
         r.kind === reactionKind &&
@@ -136,13 +132,33 @@ export const FullArticle = (props: ArticleProps) => {
         r.shout.id === props.article.id &&
         !r.replyTo
     )
-      await deleteReaction(reactionToDelete.id)
+    return 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,
+          kind: ReactionKind.Like,
           shout: props.article.id
         })
       }
+    } else {
+      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)
     updateReactions()

src/components/Feed/Card.tsx

@@ -101,21 +101,37 @@ export const ArticleCard = (props: ArticleCardProps) => {
     checkReaction(Object.values(reactionEntities), ReactionKind.Dislike, userSlug(), id)
   )
 
-  const handleRatingChange = async (isUpvote: boolean) => {
+  const deleteShoutReaction = async (reactionKind: ReactionKind) => {
-    const reactionKind = isUpvote ? ReactionKind.Like : ReactionKind.Dislike
-    const isReacted = (isUpvote && isUpvoted()) || (!isUpvote && isDownvoted())
-
-    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)
+    return 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,
+          kind: ReactionKind.Like,
           shout: id
         })
       }
+    } else {
+      if (isDownvoted()) {
+        await deleteShoutReaction(ReactionKind.Dislike)
+      } else if (isUpvoted()) {
+        await deleteShoutReaction(ReactionKind.Like)
+      } else {
+        await createReaction({
+          kind: ReactionKind.Dislike,
+          shout: id
+        })
+      }
+    }
 
     loadShout(slug)
     updateReactions()

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,