Merge pull request #51 from webgem-xyz/notifcations

✨  Added Notifications route
✨  Added Notification Component

❗️ Missing documentation and changes in CHANGELOG

src/components/app.js

@@ -5,6 +5,7 @@ import firebase from 'firebase/app';
 // Import Routes
 import Login from '../routes/login';
 import Home from '../components/home';
+import Notifications from '../routes/notifications';
 
 // Import Firebase Login
 import fireApp from '../base2';
@@ -88,6 +89,7 @@ export default class App extends Component {
             email={this.state.email}
             logout={this.logout}
           />
+          <Notifications path="/notification" />
         </Router>
       </div>
     );

src/components/notification/index.js

@@ -0,0 +1,20 @@
+import { Component } from 'preact';
+import { PropTypes } from 'preact-compat';
+
+import style from './style';
+
+export default class Notification extends Component {
+  render() {
+    const details = this.props.details;
+    return (
+      <div class={style.notificationWrapper}>
+        <p>{details.message}</p>
+        <p>{details.date}</p>
+      </div>
+    );
+  }
+}
+
+Notification.propTypes = {
+  details: PropTypes.object.isRequired,
+};

src/components/notification/style.scss

@@ -0,0 +1,16 @@
+.notificationWrapper {
+  align-items: center;
+  border: 1px solid var(--main-color);
+  display: flex;
+  justify-content: space-around;
+  margin: 5px 0;
+
+  p {
+    display: inline-block;
+    font-weight: 700;
+  }
+
+  p:nth-child(2) {
+    font-weight: 400;
+  }
+}

src/routes/notifications/index.js

@@ -0,0 +1,28 @@
+import { Component } from 'preact';
+import style from './style';
+
+import Notification from '../../components/notification/index';
+import Header from '../../components/header/';
+
+export default class Notifications extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      notifications: {
+        notification1: { message: 'You have 10 uploads this week!', date: '16-01-2018' },
+        notification2: { message: 'You have 20 uploads this week!', date: '16-01-2018' }
+      },
+    };
+  }
+  render() {
+    return (
+      <div class={style.notifications}>
+        <Header title="Notification"/>
+        {Object.keys(this.state.notifications).map(key => (
+          <Notification key={key} index={key} details={this.state.notifications[key]} />
+        ))}
+      </div>
+    );
+  }
+}

src/routes/notifications/style.scss

@@ -0,0 +1,4 @@
+.notifications {
+  display: block;
+  padding: 16px;
+}