From b2bfcee2f82b5b879a7267236faebf405d66998b Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 12 Dec 2019 18:34:25 +0200
Subject: [PATCH] useInLibrary hook linked with the core

---
 src/common/useInLibrary.js            | 64 +++++++++++++++++++++++----
 src/routes/MetaDetails/MetaDetails.js | 15 ++++++-
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/common/useInLibrary.js b/src/common/useInLibrary.js
index 2f595ed15..f9de835c0 100644
--- a/src/common/useInLibrary.js
+++ b/src/common/useInLibrary.js
@@ -1,12 +1,60 @@
-const useBinaryState = require('stremio/common/useBinaryState');
+const React = require('react');
+const { useServices } = require('stremio/services');
+const useModelState = require('stremio/common/useModelState');
 
-const useInLibrary = (id) => {
-    const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useBinaryState(false);
-    if (typeof id === 'string') {
-        return [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary];
-    } else {
-        return [false, null, null, null];
-    }
+const useInLibrary = (metaItem) => {
+    const { core } = useServices();
+    const initLibraryItemsState = React.useCallback(() => {
+        return core.getState('library_items');
+    }, []);
+    const libraryItems = useModelState({
+        model: 'library_items',
+        init: initLibraryItemsState
+    });
+    const addToLibrary = React.useCallback((metaItem) => {
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'AddToLibrary',
+                args: {
+                    meta_item: metaItem,
+                    now: new Date()
+                }
+            }
+        });
+    }, []);
+    const removeFromLibrary = React.useCallback((id) => {
+        core.dispatch({
+            action: 'UserOp',
+            args: {
+                userOp: 'RemoveFromLibrary',
+                args: {
+                    id,
+                    now: new Date()
+                }
+            }
+        });
+    }, []);
+    const inLibrary = React.useMemo(() => {
+        return typeof metaItem === 'object' && metaItem !== null ?
+            libraryItems.ids.includes(metaItem.id)
+            :
+            false;
+    }, [metaItem, libraryItems]);
+    const toggleInLibrary = React.useMemo(() => {
+        if (typeof metaItem !== 'object' || metaItem === null) {
+            return null;
+        }
+
+        return () => {
+            if (inLibrary) {
+                removeFromLibrary(metaItem.id);
+            } else {
+                addToLibrary(metaItem);
+            }
+        };
+    }, [metaItem, inLibrary]);
+    return [inLibrary, toggleInLibrary];
 };
 
 module.exports = useInLibrary;
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index a19227a6c..a800ea1a7 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -11,7 +11,20 @@ const MetaDetails = ({ urlParams }) => {
     const [metaResourceRef, metaResources, selectedMetaResource] = useSelectableResource(metaDetails.selected.meta_resource_ref, metaDetails.meta_resources);
     const streamsResourceRef = metaDetails.selected.streams_resource_ref;
     const streamsResources = metaDetails.streams_resources;
-    const [inLibrary, , , toggleInLibrary] = useInLibrary(metaResourceRef !== null ? metaResourceRef.id : null);
+    const metaItem = React.useMemo(() => {
+        return selectedMetaResource !== null ?
+            selectedMetaResource.content.content
+            :
+            metaResourceRef !== null ?
+                {
+                    id: metaResourceRef.id,
+                    type: metaResourceRef.type_name,
+                    name: ''
+                }
+                :
+                null;
+    }, [metaResourceRef, selectedMetaResource]);
+    const [inLibrary, toggleInLibrary] = useInLibrary(metaItem);
     return (
         <div className={styles['metadetails-container']}>
             <NavBar