refactor(EventModal): use events from ctx

src/common/EventModal/EventModal.js

@@ -2,41 +2,55 @@
 
 const React = require('react');
 const styles = require('./styles');
-const { Button, ModalDialog } = require('..');
-const useBinaryState = require('stremio/common/useBinaryState');
-const useFetchNotificationData = require('./useFetchNotificationData');
+const Button = require('stremio/common/Button');
+const ModalDialog = require('stremio/common/ModalDialog');
+const useEvents = require('./useEvents');
 
 const EventModal = () => {
-    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
-    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
+    const { events, pullEvents, dismissEvent } = useEvents();
+
+    const modal = React.useMemo(() => {
+        return events?.modal?.type === 'Ready' ?
+            events.modal.content
+            :
+            null;
+    }, [events]);
+
+    const onCloseRequest = React.useCallback(() => {
+        modal?.id && dismissEvent(modal.id);
+    }, [modal]);
+
+    React.useEffect(() => {
+        pullEvents();
+    }, []);
 
     return (
-        notificationModalData !== null && !isModalDataLoading && isNotificationModalOpen ?
-            <ModalDialog className={styles['notification-modal']} onCloseRequest={closeNotificationModal}>
+        modal !== null ?
+            <ModalDialog className={styles['notification-modal']} onCloseRequest={onCloseRequest}>
                 {
-                    notificationModalData.imageUrl ?
-                        <img className={styles['notification-image']} src={notificationModalData.imageUrl} />
+                    modal.imageUrl ?
+                        <img className={styles['notification-image']} src={modal.imageUrl} />
                         :
                         null
                 }
                 <div className={styles['info-container']}>
                     <div className={styles['title-container']}>
                         {
-                            notificationModalData.title ?
-                                <div className={styles['title']}>{notificationModalData.title}</div>
+                            modal.title ?
+                                <div className={styles['title']}>{modal.title}</div>
                                 :
                                 null
                         }
                         {
-                            notificationModalData.message ?
-                                <div className={styles['notification-label']}>{notificationModalData.message}</div>
+                            modal.message ?
+                                <div className={styles['notification-label']}>{modal.message}</div>
                                 :
                                 null
                         }
                     </div>
                     {
-                        notificationModalData.addon.manifestUrl ?
-                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(notificationModalData.addon.manifestUrl)}`} onClick={closeNotificationModal}>
+                        modal.addon.manifestUrl ?
+                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onCloseRequest}>
                                 <div className={styles['button-label']}>Learn more</div>
                             </Button>
                             :

src/common/EventModal/useEvents.js

@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const useModelState = require('stremio/common/useModelState');
+const { useServices } = require('stremio/services');
+
+const map = (ctx) => ({
+    ...ctx.events,
+});
+
+const useEvents = () => {
+    const { core } = useServices();
+
+    const pullEvents = () => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'GetEvents',
+            },
+        });
+    };
+
+    const dismissEvent = (id) => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'DismissEvent',
+                args: id,
+            },
+        });
+    };
+
+    const events = useModelState({ model: 'ctx', map });
+    return { events, pullEvents, dismissEvent };
+};
+
+module.exports = useEvents;

src/common/EventModal/useFetchNotificationData.js

@@ -1,41 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-
-const useFetchNotificationData = () => {
-    const [notificationModalData, setNotificationModalData] = React.useState(null);
-    const [isLoading, setIsLoading] = React.useState(false);
-
-    React.useEffect(() => {
-        const fetchData = async () => {
-            setIsLoading(true);
-            try {
-                const response = await fetch('https://api.strem.io/api/getModal', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ date: new Date() })
-                });
-
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-
-                const jsonData = await response.json();
-                const data = jsonData.result;
-                setNotificationModalData(data);
-            } catch (err) {
-                throw new Error(err.message);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        fetchData();
-    }, []);
-
-    return { notificationModalData, isLoading };
-};
-
-module.exports = useFetchNotificationData;