From 9594efbb0ed1059beecb6afdb9ba6b6064b8e64d Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 15:06:06 +0100
Subject: [PATCH] refactor: created a separate component

---
 .../SeasonalNotification.js                   | 52 ++++++++++
 src/common/SeasonalNotification/styles.less   | 96 +++++++++++++++++++
 .../useFetchNotificationData.js               |  0
 src/routes/Board/Board.js                     | 44 +--------
 src/routes/Board/styles.less                  | 52 ----------
 5 files changed, 151 insertions(+), 93 deletions(-)
 create mode 100644 src/common/SeasonalNotification/SeasonalNotification.js
 create mode 100644 src/common/SeasonalNotification/styles.less
 rename src/{routes/Board => common/SeasonalNotification}/useFetchNotificationData.js (100%)

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
new file mode 100644
index 000000000..1c5b7ab07
--- /dev/null
+++ b/src/common/SeasonalNotification/SeasonalNotification.js
@@ -0,0 +1,52 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const styles = require('./styles');
+const { Button, ModalDialog } = require('../../common');
+const useBinaryState = require('stremio/common/useBinaryState');
+const useFetchNotificationData = require('./useFetchNotificationData');
+
+const SeasonalNotification = () => {
+    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
+    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
+
+    return (
+        notificationModalData !== null && !isModalDataLoading && isNotificationModalOpen ?
+            <ModalDialog className={styles['notification-modal']} onCloseRequest={closeNotificationModal}>
+                {
+                    notificationModalData.imageUrl ?
+                        <img className={styles['notification-image']} 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>
+                    {
+                        notificationModalData.addon.manifestUrl ?
+                            <Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
+                                <div className={styles['button-label']}>Learn more</div>
+                            </Button>
+                            :
+                            null
+                    }
+                </div>
+            </ModalDialog>
+            :
+            null
+    );
+};
+
+module.exports = SeasonalNotification;
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/SeasonalNotification/styles.less
new file mode 100644
index 000000000..9acd55e3f
--- /dev/null
+++ b/src/common/SeasonalNotification/styles.less
@@ -0,0 +1,96 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/ModalDialog/styles.less') {
+    modal-dialog-content: modal-dialog-content;
+    modal-dialog-container: modal-dialog-container;
+}
+
+.notification-modal {
+    .modal-dialog-container {
+        overflow: visible;
+        max-width: 45rem;
+
+        .modal-dialog-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow: visible;
+    
+            .notification-image {
+                width: 100%;
+                height: 100%;
+                margin-top: -10rem;
+            }
+        
+            .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 6rem;
+                    }
+        
+                    .notification-label {
+                        color: var(--primary-foreground-color);
+                        font-size: 1rem;
+                        text-align: center;
+                        opacity: 0.5;
+                        margin-bottom: 3rem;
+                    }
+                }
+        
+        
+                .action-button {
+                    background-color: var(--primary-foreground-color);
+                    border: 2px solid var(--primary-foreground-color);
+                    padding: 0.8rem 1.5rem;
+                    border-radius: 2rem;
+        
+                    .button-label {
+                        color: var(--primary-accent-color);
+                        font-size: 1rem;
+                    }
+        
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: @minimum) {
+        .modal-dialog-container {
+            .modal-dialog-content {
+                .notification-image {
+                    height: 125%;
+                    width: 125%;
+                }
+
+                .info-container {
+                    .title-container {
+                        .title {
+                            padding: 0rem;
+                            font-size: 1rem;
+                        }
+
+                        .notification-label {
+                            font-size: 0.875rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Board/useFetchNotificationData.js b/src/common/SeasonalNotification/useFetchNotificationData.js
similarity index 100%
rename from src/routes/Board/useFetchNotificationData.js
rename to src/common/SeasonalNotification/useFetchNotificationData.js
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index d8c152181..b57091a3f 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, ModalDialog, Button, useBinaryState } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
-const useFetchNotificationData = require('./useFetchNotificationData');
+const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
 
 const THRESHOLD = 5;
 
@@ -19,8 +19,6 @@ const Board = () => {
     const [board, loadBoardRows] = useBoard();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
-    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
-    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
@@ -41,43 +39,7 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
-            {
-                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>
-                            {
-                                notificationModalData.addon.manifestUrl ?
-                                    <Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
-                                        <div className={styles['label']}>Learn more</div>
-                                    </Button>
-                                    :
-                                    null
-                            }
-                        </div>
-                    </ModalDialog>
-                    :
-                    null
-            }
+            <SeasonalNotification />
             <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 11f575a9b..b949d8689 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -17,58 +17,6 @@
     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;