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, rating }, ref) => {
+const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, ratingInfo }, ref) => {
     const { t } = useTranslation();
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
@@ -234,9 +234,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         null
                 }
                 {
-                    !compact && rating !== null ?
+                    !compact && ratingInfo !== null ?
                         <Ratings
-                            rating={rating}
+                            ratingInfo={ratingInfo}
                             className={styles['ratings']}
                         />
                         :
@@ -298,7 +298,7 @@ MetaPreview.propTypes = {
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
     toggleInLibrary: PropTypes.func,
-    rating: PropTypes.object,
+    ratingInfo: PropTypes.object,
 };
 
 module.exports = MetaPreview;

src/components/MetaPreview/Ratings/Ratings.tsx

@@ -8,13 +8,13 @@ import classNames from 'classnames';
 
 type Props = {
     metaId?: string;
-    rating?: Rating;
+    ratingInfo?: Loadable<RatingInfo>;
     className?: string;
 };
 
-const Ratings = ({ rating, className }: Props) => {
-    const { onLiked, onLoved, liked, loved } = useRating(rating);
-    const disabled = useMemo(() => rating?.type !== 'Ready', [rating]);
+const Ratings = ({ ratingInfo, className }: Props) => {
+    const { onLiked, onLoved, liked, loved } = useRating(ratingInfo);
+    const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]);
 
     return (
         <div className={classNames(styles['ratings-container'], className)}>

src/components/MetaPreview/Ratings/useRating.ts

@@ -3,10 +3,10 @@
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
-const useRating = (rating?: Rating) => {
+const useRating = (ratingInfo?: Loadable<RatingInfo>) => {
     const { core } = useServices();
 
-    const setRating = useCallback((status: 'liked' | 'loved' | null) => {
+    const setRating = useCallback((status: RatingStatus) => {
         core.transport.dispatch({
             action: 'MetaDetails',
             args: {
@@ -16,21 +16,26 @@ const useRating = (rating?: Rating) => {
         });
     }, []);
 
+    const status = useMemo(() => {
+        const content = ratingInfo?.type === 'Ready' ? ratingInfo.content as RatingInfo : null;
+        return content?.status;
+    }, [ratingInfo]);
+
     const liked = useMemo(() => {
-        return rating?.content === 'liked';
-    }, [rating]);
+        return status === 'liked';
+    }, [status]);
 
     const loved = useMemo(() => {
-        return rating?.content === 'loved';
-    }, [rating]);
+        return status === 'loved';
+    }, [status]);
 
     const onLiked = useCallback(() => {
-        setRating(rating?.content === 'liked' ? null : 'liked');
-    }, [rating]);
+        setRating(status === 'liked' ? null : 'liked');
+    }, [status]);
 
     const onLoved = useCallback(() => {
-        setRating(rating?.content === 'loved' ? null : 'loved');
-    }, [rating]);
+        setRating(status === 'loved' ? null : 'loved');
+    }, [status]);
 
     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}
-                                            rating={metaDetails.rating}
+                                            ratingInfo={metaDetails.ratingInfo}
                                         />
                                     </React.Fragment>
                 }

src/types/models/MetaDetails.d.ts

@@ -24,6 +24,5 @@ type MetaDetails = {
         content: Loadable<Stream[]>
     }[],
     title: string | null,
-    like: Loadable<string | null> | null,
-    sentLike: Loadable<string | null> | null
+    ratingInfo: Loadable<RatingInfo> | null,
 };

src/types/types.d.ts

@@ -69,7 +69,9 @@ type AudioTrack = {
     origin: string,
 };
 
-type Rating = {
-    content: 'liked' | 'loved' | null,
-    type: 'Ready' | 'Loading' | 'Error',
+type RatingStatus = 'liked' | 'loved' | null;
+
+type RatingInfo = {
+    metaId: string,
+    status: RatingStatus,
 };