refactor: rating logic

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;

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 Ratings = ({ rating, className }: Props) => {
-    const { onLiked, onLoved, liked, loved } = useRating(like);
+    const { onLiked, onLoved, liked, loved } = useRating(rating);
-    const disabled = useMemo(() => like?.type !== 'Ready', [like]);
+    const disabled = useMemo(() => rating?.type !== 'Ready', [rating]);
 
     return (
         <div className={classNames(styles['ratings-container'], className)}>

src/components/MetaPreview/Ratings/useRating.ts

@@ -3,12 +3,7 @@
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
-type Like = {
+const useRating = (rating?: Rating) => {
-    content: 'liked' | 'loved' | null;
-    type: 'Ready' | 'Loading' | 'Error';
-};
-
-const useRating = (like?: Like) => {
     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';
+        return rating?.content === 'liked';
-    }, [like]);
+    }, [rating]);
 
     const loved = useMemo(() => {
-        return like?.content === 'loved';
+        return rating?.content === 'loved';
-    }, [like]);
+    }, [rating]);
 
     const onLiked = useCallback(() => {
-        setRating(like?.content === 'liked' ? null : 'liked');
+        setRating(rating?.content === 'liked' ? null : 'liked');
-    }, [like]);
+    }, [rating]);
 
     const onLoved = useCallback(() => {
-        setRating(like?.content === 'loved' ? null : 'loved');
+        setRating(rating?.content === 'loved' ? null : 'loved');
-    }, [like]);
+    }, [rating]);
 
     return {
         onLiked,

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>
                 }

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',
+};