From e336754226d8ae3cd6023ea6b64b50f40e6f317a Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Thu, 15 Feb 2024 15:51:04 +0300
Subject: [PATCH] refactoring-ratings

---
 public/locales/en/translation.json            |   2 +-
 public/locales/ru/translation.json            |   2 +-
 src/components/Article/Comment/Comment.tsx    |   2 +-
 .../Article/CommentRatingControl.tsx          | 118 ------------------
 src/components/Article/FullArticle.tsx        |  26 ++--
 ...outRatingControl.tsx => RatingControl.tsx} |  80 +++++++++---
 .../Feed/ArticleCard/ArticleCard.tsx          |   2 +-
 7 files changed, 83 insertions(+), 149 deletions(-)
 delete mode 100644 src/components/Article/CommentRatingControl.tsx
 rename src/components/Article/{ShoutRatingControl.tsx => RatingControl.tsx} (61%)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 79653771..bef10ff9 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -380,7 +380,7 @@
   "This email is already taken. If it's you": "This email is already taken. If it's you",
   "This functionality is currently not available, we would like to work on this issue. Use the download link.": "This functionality is currently not available, we would like to work on this issue. Use the download link.",
   "This month": "This month",
-  "This post has not been rated yet": "This post has not been rated yet",
+  "No one rated yet": "No one rated yet",
   "This way we&nbsp;ll realize that you&nbsp;re a real person and&nbsp;ll take your vote into account. And&nbsp;you&nbsp;ll see how others voted": "This way we&nbsp;ll realize that you&nbsp;re a real person and&nbsp;ll take your vote into account. And&nbsp;you&nbsp;ll see how others voted",
   "This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed": "This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed",
   "This week": "This week",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index afb004de..a871580d 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -402,7 +402,7 @@
   "This email is already taken. If it's you": "Такой email уже зарегистрирован. Если это вы",
   "This functionality is currently not available, we would like to work on this issue. Use the download link.": "В данный момент этот функционал не доступен, бы работаем над этой проблемой. Воспользуйтесь загрузкой по ссылке.",
   "This month": "За месяц",
-  "This post has not been rated yet": "Эту публикацию еще пока никто не оценил",
+  "No one rated yet": "Ещё никто не оценивал",
   "This way we&nbsp;ll realize that you&nbsp;re a real person and&nbsp;ll take your vote into account. And&nbsp;you&nbsp;ll see how others voted": "Так мы&nbsp;поймем, что вы&nbsp;реальный человек, и&nbsp;учтем ваш голос. А&nbsp;вы&nbsp;увидите, как проголосовали другие",
   "This way you&nbsp;ll be able to subscribe to&nbsp;authors, interesting topics and&nbsp;customize your feed": "Так вы&nbsp;сможете подписаться на&nbsp;авторов, интересные темы и&nbsp;настроить свою ленту",
   "This week": "За неделю",
diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx
index d6af579f..ebbfd98c 100644
--- a/src/components/Article/Comment/Comment.tsx
+++ b/src/components/Article/Comment/Comment.tsx
@@ -14,7 +14,7 @@ import { Userpic } from '../../Author/Userpic'
 import { Icon } from '../../_shared/Icon'
 import { ShowIfAuthenticated } from '../../_shared/ShowIfAuthenticated'
 import { CommentDate } from '../CommentDate'
-import { CommentRatingControl } from '../CommentRatingControl'
+import { RatingControl as CommentRatingControl } from '../RatingControl'
 
 import styles from './Comment.module.scss'
 
diff --git a/src/components/Article/CommentRatingControl.tsx b/src/components/Article/CommentRatingControl.tsx
deleted file mode 100644
index 5ce60d08..00000000
--- a/src/components/Article/CommentRatingControl.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { clsx } from 'clsx'
-import { createMemo } from 'solid-js'
-
-import { useLocalize } from '../../context/localize'
-import { useReactions } from '../../context/reactions'
-import { useSession } from '../../context/session'
-import { useSnackbar } from '../../context/snackbar'
-import { Reaction, ReactionKind } from '../../graphql/schema/core.gen'
-import { loadShout } from '../../stores/zine/articles'
-import { Popup } from '../_shared/Popup'
-import { VotersList } from '../_shared/VotersList'
-
-import styles from './CommentRatingControl.module.scss'
-
-type Props = {
-  comment: Reaction
-}
-
-export const CommentRatingControl = (props: Props) => {
-  const { t } = useLocalize()
-  const { author } = useSession()
-  const { showSnackbar } = useSnackbar()
-  const { reactionEntities, createReaction, deleteReaction, loadReactionsBy } = useReactions()
-
-  const checkReaction = (reactionKind: ReactionKind) =>
-    Object.values(reactionEntities).some(
-      (r) =>
-        r.kind === reactionKind &&
-        r.created_by.slug === author()?.slug &&
-        r.shout.id === props.comment.shout.id &&
-        r.reply_to === props.comment.id,
-    )
-  const isUpvoted = createMemo(() => checkReaction(ReactionKind.Like))
-  const isDownvoted = createMemo(() => checkReaction(ReactionKind.Dislike))
-  const canVote = createMemo(() => author()?.slug !== props.comment.created_by.slug)
-
-  const commentRatingReactions = createMemo(() =>
-    Object.values(reactionEntities).filter(
-      (r) =>
-        [ReactionKind.Like, ReactionKind.Dislike].includes(r.kind) &&
-        r.shout.id === props.comment.shout.id &&
-        r.reply_to === props.comment.id,
-    ),
-  )
-
-  const deleteCommentReaction = async (reactionKind: ReactionKind) => {
-    const reactionToDelete = Object.values(reactionEntities).find(
-      (r) =>
-        r.kind === reactionKind &&
-        r.created_by.slug === author()?.slug &&
-        r.shout.id === props.comment.shout.id &&
-        r.reply_to === props.comment.id,
-    )
-    return deleteReaction(reactionToDelete.id)
-  }
-
-  const handleRatingChange = async (isUpvote: boolean) => {
-    try {
-      if (isUpvoted()) {
-        await deleteCommentReaction(ReactionKind.Like)
-      } else if (isDownvoted()) {
-        await deleteCommentReaction(ReactionKind.Dislike)
-      } else {
-        await createReaction({
-          kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike,
-          shout: props.comment.shout.id,
-          reply_to: props.comment.id,
-        })
-      }
-    } catch {
-      showSnackbar({ type: 'error', body: t('Error') })
-    }
-
-    await loadShout(props.comment.shout.slug)
-    await loadReactionsBy({
-      by: { shout: props.comment.shout.slug },
-    })
-  }
-
-  return (
-    <div class={styles.commentRating}>
-      <button
-        role="button"
-        disabled={!(canVote() && author())}
-        onClick={() => handleRatingChange(true)}
-        class={clsx(styles.commentRatingControl, styles.commentRatingControlUp, {
-          [styles.voted]: isUpvoted(),
-        })}
-      />
-      <Popup
-        trigger={
-          <div
-            class={clsx(styles.commentRatingValue, {
-              [styles.commentRatingPositive]: props.comment.stat.rating > 0,
-              [styles.commentRatingNegative]: props.comment.stat.rating < 0,
-            })}
-          >
-            {props.comment.stat.rating || 0}
-          </div>
-        }
-        variant="tiny"
-      >
-        <VotersList
-          reactions={commentRatingReactions()}
-          fallbackMessage={t('This comment has not yet been rated')}
-        />
-      </Popup>
-      <button
-        role="button"
-        disabled={!(canVote() && author())}
-        onClick={() => handleRatingChange(false)}
-        class={clsx(styles.commentRatingControl, styles.commentRatingControlDown, {
-          [styles.voted]: isDownvoted(),
-        })}
-      />
-    </div>
-  )
-}
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 9119274c..f978f498 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -35,8 +35,8 @@ import { VideoPlayer } from '../_shared/VideoPlayer'
 import { AudioHeader } from './AudioHeader'
 import { AudioPlayer } from './AudioPlayer'
 import { CommentsTree } from './CommentsTree'
+import { RatingControl as ShoutRatingControl } from './RatingControl'
 import { SharePopup, getShareUrl } from './SharePopup'
-import { ShoutRatingControl } from './ShoutRatingControl'
 
 import stylesHeader from '../Nav/Header/Header.module.scss'
 import styles from './Article.module.scss'
@@ -313,17 +313,27 @@ export const FullArticle = (props: Props) => {
     ),
   )
   const [ratings, setRatings] = createSignal<Reaction[]>([])
-  onMount(async () => {
-    install('G-LQ4B87H8C2')
-    const rrr = await loadReactionsBy({ by: { shout: props.article.slug } })
-    setRatings((_) => rrr.filter((r) => ['LIKE', 'DISLIKE'].includes(r.kind)))
-    setIsReactionsLoaded(true)
-    document.title = props.article.title
-    window?.addEventListener('resize', updateIframeSizes)
 
+  onMount(async () => {
+    document.title = props.article?.title
+    install('G-LQ4B87H8C2')
+    window?.addEventListener('resize', updateIframeSizes)
     onCleanup(() => window.removeEventListener('resize', updateIframeSizes))
   })
 
+  createEffect(
+    on(
+      () => props.article,
+      async (shout: Shout) => {
+        setIsReactionsLoaded(false)
+        const rrr = await loadReactionsBy({ by: { shout: shout?.slug } })
+        setRatings((_) => rrr.filter((r) => ['LIKE', 'DISLIKE'].includes(r.kind)))
+        setIsReactionsLoaded(true)
+      },
+      { defer: true },
+    ),
+  )
+
   const cover = props.article.cover ?? 'production/image/logo_image.png'
   const ogImage = getOpenGraphImageUrl(cover, {
     title: props.article.title,
diff --git a/src/components/Article/ShoutRatingControl.tsx b/src/components/Article/RatingControl.tsx
similarity index 61%
rename from src/components/Article/ShoutRatingControl.tsx
rename to src/components/Article/RatingControl.tsx
index 409c65d6..aaa8a023 100644
--- a/src/components/Article/ShoutRatingControl.tsx
+++ b/src/components/Article/RatingControl.tsx
@@ -1,24 +1,27 @@
 import { clsx } from 'clsx'
-import { Show, Suspense, createEffect, createMemo, createSignal, mergeProps, on } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal, mergeProps, on } from 'solid-js'
 
 import { useLocalize } from '../../context/localize'
 import { useReactions } from '../../context/reactions'
 import { useSession } from '../../context/session'
-import { Author, Reaction, ReactionKind, Shout } from '../../graphql/schema/core.gen'
+import { Reaction, ReactionKind, Shout } from '../../graphql/schema/core.gen'
 import { loadShout } from '../../stores/zine/articles'
 import { byCreated } from '../../utils/sortby'
 import { Icon } from '../_shared/Icon'
 import { Popup } from '../_shared/Popup'
 import { VotersList } from '../_shared/VotersList'
-import styles from './ShoutRatingControl.module.scss'
 
-interface ShoutRatingControlProps {
-  shout: Shout
+import stylesComment from './CommentRatingControl.module.scss'
+import stylesShout from './ShoutRatingControl.module.scss'
+
+interface RatingControlProps {
+  shout?: Shout
+  comment?: Reaction
   ratings?: Reaction[]
   class?: string
 }
 
-export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
+export const RatingControl = (props: RatingControlProps) => {
   const { t } = useLocalize()
   const { author, requireAuthentication } = useSession()
   const { createReaction, deleteReaction, loadReactionsBy } = useReactions()
@@ -85,27 +88,66 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
   }
   const isNotDisliked = createMemo(() => !myRate() || myRate()?.kind === ReactionKind.Dislike)
   const isNotLiked = createMemo(() => !myRate() || myRate()?.kind === ReactionKind.Like)
+
+  const getTrigger = () => {
+    return props.comment ? (
+      <div
+        class={clsx(stylesComment.commentRatingValue, {
+          [stylesComment.commentRatingPositive]: props.comment.stat.rating > 0,
+          [stylesComment.commentRatingNegative]: props.comment.stat.rating < 0,
+        })}
+      >
+        {props.comment.stat.rating || 0}
+      </div>
+    ) : (
+      <span class={stylesShout.ratingValue}>{total()}</span>
+    )
+  }
   return (
-    <div class={clsx(styles.rating, props.class)}>
-      <button onClick={() => handleRatingChange(ReactionKind.Dislike)} disabled={isLoading()}>
-        <Icon
-          name={isNotDisliked() ? 'rating-control-less' : 'rating-control-checked'}
-          class={isLoading() ? 'rotating' : ''}
-        />
+    <div class={clsx(props.comment ? stylesComment.commentRating : stylesShout.rating, props.class)}>
+      <button
+        onClick={() => handleRatingChange(ReactionKind.Dislike)}
+        disabled={isLoading()}
+        class={
+          props.comment
+            ? clsx(stylesComment.commentRatingControl, stylesComment.commentRatingControlUp, {
+                [stylesComment.voted]: myRate()?.kind === 'LIKE',
+              })
+            : ''
+        }
+      >
+        <Show when={!props.comment}>
+          <Icon
+            name={isNotDisliked() ? 'rating-control-less' : 'rating-control-checked'}
+            class={isLoading() ? 'rotating' : ''}
+          />
+        </Show>
       </button>
 
-      <Popup trigger={<span class={styles.ratingValue}>{total()}</span>} variant="tiny">
+      <Popup trigger={getTrigger()} variant="tiny">
         <VotersList
           reactions={ratings()}
-          fallbackMessage={isLoading() ? t('Loading') : t('This post has not been rated yet')}
+          fallbackMessage={isLoading() ? t('Loading') : t('No one rated yet')}
         />
       </Popup>
 
-      <button onClick={() => handleRatingChange(ReactionKind.Like)} disabled={isLoading()}>
-        <Icon
-          name={isNotLiked() ? 'rating-control-more' : 'rating-control-checked'}
-          class={isLoading() ? 'rotating' : ''}
-        />
+      <button
+        onClick={() => handleRatingChange(ReactionKind.Like)}
+        disabled={isLoading()}
+        class={
+          props.comment
+            ? clsx(stylesComment.commentRatingControl, stylesComment.commentRatingControlDown, {
+                [stylesComment.voted]: myRate()?.kind === 'DISLIKE',
+              })
+            : ''
+        }
+      >
+        <Show when={!props.comment}>
+          <Icon
+            name={isNotLiked() ? 'rating-control-more' : 'rating-control-checked'}
+            class={isLoading() ? 'rotating' : ''}
+          />
+        </Show>
       </button>
     </div>
   )
diff --git a/src/components/Feed/ArticleCard/ArticleCard.tsx b/src/components/Feed/ArticleCard/ArticleCard.tsx
index 31743db2..1743cbb4 100644
--- a/src/components/Feed/ArticleCard/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard/ArticleCard.tsx
@@ -10,8 +10,8 @@ import { router, useRouter } from '../../../stores/router'
 import { capitalize } from '../../../utils/capitalize'
 import { getDescription } from '../../../utils/meta'
 import { CoverImage } from '../../Article/CoverImage'
+import { RatingControl as ShoutRatingControl } from '../../Article/RatingControl'
 import { SharePopup, getShareUrl } from '../../Article/SharePopup'
-import { ShoutRatingControl } from '../../Article/ShoutRatingControl'
 import { AuthorLink } from '../../Author/AuthorLink'
 import { Icon } from '../../_shared/Icon'
 import { Image } from '../../_shared/Image'