feature: useFetchNotficationData hook + new approach

Stremio · Dec 14, 2023 · 179ed39 · 179ed39
1 parent 156a129
commit 179ed39
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 136 deletions.
diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/SeasonalNotification/styles.less
diff --git 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
@@ -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
@@ -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;