From 179ed3948f544f0b250feb44b5b4e94c40f75af4 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:17:51 +0100
Subject: [PATCH] feature: useFetchNotficationData hook + new approach

---
 .../SeasonalNotification.js                   | 34 -------
 src/common/SeasonalNotification/styles.less   | 99 -------------------
 src/routes/Board/Board.js                     | 39 +++++++-
 src/routes/Board/styles.less                  | 52 ++++++++++
 src/routes/Board/useFetchModalData.js         | 41 ++++++++
 5 files changed, 129 insertions(+), 136 deletions(-)
 delete mode 100644 src/common/SeasonalNotification/SeasonalNotification.js
 delete mode 100644 src/common/SeasonalNotification/styles.less
 create mode 100644 src/routes/Board/useFetchModalData.js

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
deleted file mode 100644
index 7adf96fbb..000000000
--- a/src/common/SeasonalNotification/SeasonalNotification.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const styles = require('./styles');
-const { default: Icon } = require('@stremio/stremio-icons/react');
-const PropTypes = require('prop-types');
-const Button = require('../Button');
-
-const SeasonalNotification = ({ imgUrl, altUrl }) => {
-
-    return (
-        <div className={styles['wrapper']}>
-            <img className={styles['notification-image']} src={imgUrl} alt={altUrl} />
-            <Icon className={styles['back-button']} name={'close'} />
-            <div className={styles['info-container']}>
-                <div className={styles['title-container']}>
-                    <div className={styles['title']}>Ho! Ho! Ho! Are you ready for a Silent Cinema Night?</div>
-                    <div className={styles['label']}>Get into the festive spirit with our Christmas movie collection – where holiday magic meets the screen!</div>
-                </div>
-                <Button className={styles['action-button']}>
-                    <div className={styles['label']}>Learn more</div>
-                </Button>
-            </div>
-        </div>
-    );
-};
-
-module.exports = SeasonalNotification;
-
-SeasonalNotification.propTypes = {
-    imgUrl: PropTypes.string.isRequired,
-    altUrl: PropTypes.string.isRequired,
-};
-
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/SeasonalNotification/styles.less
deleted file mode 100644
index f1729837a..000000000
--- a/src/common/SeasonalNotification/styles.less
+++ /dev/null
@@ -1,99 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-@import (reference) '~stremio/common/screen-sizes.less';
-
-.wrapper {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    padding: 2rem 1rem;
-    z-index: 99;
-    transform: translate(-50%, -50%);
-    background-color: var(--modal-background-color);
-    border-radius: var(--border-radius);
-    width: 40rem;
-    height: 40rem;
-    box-shadow: var(--outer-glow);
-    overflow: visible;
-
-    .notification-image {
-        width: 95%;
-        height: 95%;
-        margin: -10rem auto 0;
-    }
-
-    .back-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-        margin: 1rem;
-        width: 2rem;
-        height: 2rem;
-        cursor: pointer;
-        opacity: 0.5;
-        color: var(--primary-foreground-color);
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    .info-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 1rem 4rem;
-        margin-top: -7rem;
-
-        .title-container {
-            .title {
-                color: var(--primary-foreground-color);
-                font-size: 1.325rem;
-                text-align: center;
-                margin-bottom: 2rem;
-                padding: 0 4rem;
-            }
-
-            .label {
-                color: var(--primary-foreground-color);
-                font-size: 1rem;
-                text-align: center;
-                opacity: 0.5;
-                margin-bottom: 3rem;
-            }
-        }
-
-
-        .action-button {
-            background-color: var(--secondary-accent-color);
-            border: 2px solid var(--secondary-accent-color);
-            padding: 0.8rem 1.5rem;
-            border-radius: 2rem;
-
-            .label {
-                color: var(--primary-foreground-color);
-                font-size: 1rem;
-            }
-
-            &:hover {
-                background-color: transparent;
-            }
-        }
-    }
-
-    @media only screen and (max-width: @xsmall) {
-        width: 35rem;
-        height: 35rem;
-    }
-    @media only screen and (max-width: @xxsmall) {
-        width: 25rem;
-        height: 35rem;
-
-        .notification-image {
-            width: 25rem;
-            height: 25rem;
-            object-fit: cover;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 06859126b..b9f6df20e 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -4,11 +4,11 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, ModalDialog, Button, useBinaryState } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
-const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
+const useFetchModalData = require('./useFetchModalData');
 
 const THRESHOLD = 5;
 
@@ -19,6 +19,8 @@ const Board = () => {
     const [board, loadBoardRows] = useBoard();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
+    const { notificationModalData, isModalDataLoading } = useFetchModalData();
+    const [isNotificationModalOpen, , closeNotificationModal, ] = useBinaryState(true);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
@@ -39,7 +41,38 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
-            <SeasonalNotification imgUrl='https://i.postimg.cc/k5KFNyYH/Group-2395-2x.png' alt='Christmas' />
+            {
+                isNotificationModalOpen && notificationModalData && !isModalDataLoading ?
+                    <ModalDialog className={styles['notification-modal']} title={'Notification Modal'} onCloseRequest={closeNotificationModal}>
+                        {
+                            notificationModalData.imageUrl ?
+                                <img className={styles['notification-image']} style={{ width: '95%', height: '95%' }} src={notificationModalData.imageUrl} />
+                                :
+                                null
+                        }
+                        <div className={styles['info-container']}>
+                            <div className={styles['title-container']}>
+                                {
+                                    notificationModalData.title ?
+                                        <div className={styles['title']}>{notificationModalData.title}</div>
+                                        :
+                                        null
+                                }
+                                {
+                                    notificationModalData.message ?
+                                        <div className={styles['notification-label']}>{notificationModalData.message}</div>
+                                        :
+                                        null
+                                }
+                            </div>
+                            <Button className={styles['action-button']}>
+                                <div className={styles['label']}>Learn more</div>
+                            </Button>
+                        </div>
+                    </ModalDialog>
+                    :
+                    null
+            }
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index b949d8689..11f575a9b 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -17,6 +17,58 @@
     display: flex;
     flex-direction: column;
 
+    .notification-modal {
+        .notification-image {
+            width: 95%;
+            height: 95%;
+            margin: -10rem auto 0;
+        }
+    
+        .info-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem 4rem;
+            margin-top: -7rem;
+    
+            .title-container {
+                .title {
+                    color: var(--primary-foreground-color);
+                    font-size: 1.325rem;
+                    text-align: center;
+                    margin-bottom: 2rem;
+                    padding: 0 4rem;
+                }
+    
+                .label {
+                    color: var(--primary-foreground-color);
+                    font-size: 1rem;
+                    text-align: center;
+                    opacity: 0.5;
+                    margin-bottom: 3rem;
+                }
+            }
+    
+    
+            .action-button {
+                background-color: var(--secondary-accent-color);
+                border: 2px solid var(--secondary-accent-color);
+                padding: 0.8rem 1.5rem;
+                border-radius: 2rem;
+    
+                .label {
+                    color: var(--primary-foreground-color);
+                    font-size: 1rem;
+                }
+    
+                &:hover {
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+
     .board-content-container {
         flex: 1;
         align-self: stretch;
diff --git a/src/routes/Board/useFetchModalData.js b/src/routes/Board/useFetchModalData.js
new file mode 100644
index 000000000..b6f711fa1
--- /dev/null
+++ b/src/routes/Board/useFetchModalData.js
@@ -0,0 +1,41 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+
+const useFetchModalData = () => {
+    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 = useFetchModalData;