From 21ad21c82ea7658378cd5b858c6e6f99f87ebbed Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Jun 2025 16:08:30 +0200
Subject: [PATCH] refactor: rating logic

---
 src/components/MetaPreview/MetaPreview.js     |  6 ++---
 .../MetaPreview/Ratings/Ratings.tsx           | 13 ++++-------
 .../MetaPreview/Ratings/useRating.ts          | 23 ++++++++-----------
 src/routes/MetaDetails/MetaDetails.js         |  2 +-
 src/types/types.d.ts                          |  5 ++++
 5 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 91c0707df..2c5dc0516 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -25,7 +25,7 @@ const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.metadetails.regexp
 ];
 
-const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, like }, ref) => {
+const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, rating }, ref) => {
     const { t } = useTranslation();
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
@@ -236,7 +236,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 {
                     !compact ?
                         <Ratings
-                            like={like}
+                            rating={rating}
                             className={styles['ratings']}
                         />
                         :
@@ -298,7 +298,7 @@ MetaPreview.propTypes = {
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
     toggleInLibrary: PropTypes.func,
-    like: PropTypes.object,
+    rating: PropTypes.object,
 };
 
 module.exports = MetaPreview;
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
index 5ede48dd9..9012735af 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -6,20 +6,15 @@ import styles from './Ratings.less';
 import Icon from '@stremio/stremio-icons/react';
 import classNames from 'classnames';
 
-type Like = {
-    content: 'liked' | 'loved';
-    type: 'Ready' | 'Loading' | 'Error';
-};
-
 type Props = {
     metaId?: string;
-    like?: Like;
+    rating?: Rating;
     className?: string;
 };
 
-const Ratings = ({ like, className }: Props) => {
-    const { onLiked, onLoved, liked, loved } = useRating(like);
-    const disabled = useMemo(() => like?.type !== 'Ready', [like]);
+const Ratings = ({ rating, className }: Props) => {
+    const { onLiked, onLoved, liked, loved } = useRating(rating);
+    const disabled = useMemo(() => rating?.type !== 'Ready', [rating]);
 
     return (
         <div className={classNames(styles['ratings-container'], className)}>
diff --git a/src/components/MetaPreview/Ratings/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
index 8d7b09cf5..7df8bc925 100644
--- a/src/components/MetaPreview/Ratings/useRating.ts
+++ b/src/components/MetaPreview/Ratings/useRating.ts
@@ -3,12 +3,7 @@
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
-type Like = {
-    content: 'liked' | 'loved' | null;
-    type: 'Ready' | 'Loading' | 'Error';
-};
-
-const useRating = (like?: Like) => {
+const useRating = (rating?: Rating) => {
     const { core } = useServices();
 
     const setRating = useCallback((status: 'liked' | 'loved' | null) => {
@@ -22,20 +17,20 @@ const useRating = (like?: Like) => {
     }, []);
 
     const liked = useMemo(() => {
-        return like?.content === 'liked';
-    }, [like]);
+        return rating?.content === 'liked';
+    }, [rating]);
 
     const loved = useMemo(() => {
-        return like?.content === 'loved';
-    }, [like]);
+        return rating?.content === 'loved';
+    }, [rating]);
 
     const onLiked = useCallback(() => {
-        setRating(like?.content === 'liked' ? null : 'liked');
-    }, [like]);
+        setRating(rating?.content === 'liked' ? null : 'liked');
+    }, [rating]);
 
     const onLoved = useCallback(() => {
-        setRating(like?.content === 'loved' ? null : 'loved');
-    }, [like]);
+        setRating(rating?.content === 'loved' ? null : 'loved');
+    }, [rating]);
 
     return {
         onLiked,
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index dbc81505e..1b84eacdb 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -167,7 +167,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                             inLibrary={metaDetails.metaItem.content.content.inLibrary}
                                             toggleInLibrary={metaDetails.metaItem.content.content.inLibrary ? removeFromLibrary : addToLibrary}
                                             metaId={metaDetails.metaItem.content.content.id}
-                                            like={metaDetails.like}
+                                            rating={metaDetails.rating}
                                         />
                                     </React.Fragment>
                 }
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index 8f6d55730..ba921e306 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -68,3 +68,8 @@ type AudioTrack = {
     lang: string,
     origin: string,
 };
+
+type Rating = {
+    content: 'liked' | 'loved' | null,
+    type: 'Ready' | 'Loading' | 'Error',
+};