From 481264cb876bfa803e772de20fcba752e3d1a728 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 9 Oct 2019 16:21:26 +0300
Subject: [PATCH] NotificationsList implemented

---
 .../NotificationsList/NotificationsList.js    | 52 +++++++++++++++++++
 .../NotificationsList/index.js                |  3 ++
 .../NotificationsList/styles.less             | 10 ++++
 3 files changed, 65 insertions(+)
 create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
 create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/index.js
 create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/styles.less

diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
new file mode 100644
index 000000000..7b2c933f0
--- /dev/null
+++ b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
@@ -0,0 +1,52 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Notification = require('./Notification');
+const useMetaItems = require('./useMetaItems');
+const styles = require('./styles');
+
+const NotificationsList = ({ className, metaItems }) => {
+    const notifications = useMetaItems(metaItems);
+    return (
+        <div className={classnames(className, styles['notifications-list-scroll-container'])}>
+            {
+                notifications.length > 0 ?
+                    notifications.map((notification) => (
+                        notification.videos.length === 1 ?
+                            <Notification
+                                {...notification}
+                                key={notification.id}
+                                posterThumbnail={true}
+                                poster={notification.videos[0].poster}
+                                season={notification.videos[0].season}
+                                episode={notification.videos[0].episode}
+                                released={notification.videos[0].released}
+                                className={styles['notification']}
+                            />
+                            :
+                            <Notification
+                                {...notification}
+                                key={notification.id}
+                                posterThumbnail={false}
+                                name={notification.videos.length + ' new videos for ' + notification.name}
+                                released={notification.videos[notification.videos.length - 1].released}
+                                className={styles['notification']}
+                            />
+                    ))
+                    :
+                    <React.Fragment>
+                        <div className={styles['no-notifications-label']}>
+                            No new notifications.
+                        </div>
+                    </React.Fragment>
+            }
+        </div>
+    );
+}
+
+NotificationsList.propTypes = {
+    className: PropTypes.string,
+    metaItems: PropTypes.object
+};
+
+module.exports = NotificationsList;
diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/index.js b/src/common/NavBar/NotificationsMenu/NotificationsList/index.js
new file mode 100644
index 000000000..730a78fdc
--- /dev/null
+++ b/src/common/NavBar/NotificationsMenu/NotificationsList/index.js
@@ -0,0 +1,3 @@
+const NotificationsList = require('./NotificationsList');
+
+module.exports = NotificationsList;
diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less
new file mode 100644
index 000000000..60446b07a
--- /dev/null
+++ b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less
@@ -0,0 +1,10 @@
+.notifications-list-scroll-container {
+    flex: 1;
+    align-self: stretch;
+    height: 30rem;
+    overflow-y: auto;
+
+    .notification {
+        width: var(--item-size);
+    }
+}
\ No newline at end of file