1606880996 117

assets/js/NotificationPage.jsx

@@ -5,23 +5,29 @@ import Notification from './components/Notification';
 
 export default class NotificationPage extends React.Component {
   static propTypes = {
-    user: PropTypes.object.isRequired,
+    user: PropTypes.object,
   };
 
   constructor(props) {
     super(props);
   }
 
-  generateNotifications() {
+  render() {
     return (
-      <Segment className="notifikasi">
-        <Notification text="Hehe" />
-        <Notification text="The Notification should be like this" />
-      </Segment>
+      <div className="notificationPage">
+        <Segment className="notifikasi">
+          <Notification 
+            title="Your Application Has Been Rejected" 
+            text="Tutuplapak has rejected your applications" 
+            timestamp="2019-10-10T13:00:00"
+          />
+          <Notification 
+            title="Lorem Ipsum" 
+            text="Dolor Sit Amet" 
+            timestamp="1970-01-01T06:00:00"
+          />
+        </Segment>
+      </div>
     );
   }
-
-  render() {
-    return <div>{this.generateNotifications()}</div>;
-  }
 }

assets/js/__test__/NotificationPage-test.jsx

@@ -40,7 +40,7 @@ describe('NotificationPage', () => {
         },
     };
 
-    it('renders for notification without problem', () => {
+    it('renders for notification page without problem', () => {
         const notification = ReactTestUtils.renderIntoDocument(
             <NotificationPage user={{ data: studentSession }}/>);
         expect(notification).to.exist;

assets/js/__test__/components/Notification-test.jsx

+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import Notification from '../../components/Notification';
+
+describe('Notification', () => {
+
+    it('renders for notification without problem', () => {
+        const notification = ReactTestUtils.renderIntoDocument(
+            <Notification title="This is a title" text="This is a notification info" timestamp="2019-11-11T00:00:00" />);
+        expect(notification).to.exist;
+    });
+
+    it('renders for notification gives the correct elapsed time', () => {
+        const notification = ReactTestUtils.renderIntoDocument(
+            <Notification title="This is a title" text="This is a notification info" timestamp="2019-11-11T00:00:00" />);
+        expect(notification.getElapsedTime("2019-11-15T00:00:00")).to.equal("4 days ago");
+    });
+});
+

assets/js/components/Notification.jsx

@@ -8,13 +8,30 @@ const defaultThumbnail =
 export default class Notification extends React.Component {
   static propTypes = {
     thumbnail: PropTypes.string,
+    title: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
+    timestamp: PropTypes.string.isRequired,
   };
 
   constructor(props) {
     super(props);
   }
 
+  getElapsedTime(dateNow) {
+    var oldtime = new Date(this.props.timestamp);
+    var newtime = new Date(dateNow);
+    var elapsed = Math.floor((newtime - oldtime)/1000);
+    var divider = [60, 60, 24, 30, 12]
+    var timeUnit = ["seconds", "minutes", "hours", "days", "months", "years"];
+    var i = 0;
+    while(i < divider.length) {
+      if(Math.floor(elapsed/divider[i]) === 0) { break; }
+      elapsed = Math.floor(elapsed/divider[i]);
+      i++;
+    }
+    return (elapsed + " " + timeUnit[i] + " ago");
+  }
+
   render() {
     return (
       <Segment>
@@ -29,10 +46,12 @@ export default class Notification extends React.Component {
               />
             </Grid.Column>
             <Grid.Column width={12}>
+              <h4>{this.props.title}</h4>
               <p>{this.props.text}</p>
             </Grid.Column>
             <Grid.Column floated="right" width={2}>
               <Button primary>Dismiss</Button>
+              <p>{this.getElapsedTime(new Date())}</p>
             </Grid.Column>
           </Grid.Row>
         </Grid>

assets/js/index.jsx

@@ -14,7 +14,7 @@ import TranscriptPage from './TranscriptPage';
 import AdminVacancyPage from './AdminVacancyPage';
 import CompanyPage from './CompanyPage';
 import SupervisorPage from './SupervisorPage';
-import Notification from './NotificationPage';
+import NotificationPage from './NotificationPage';
 import FeedbackPage from './FeedbackPage';
 import EditProfile from './EditProfile';
 
@@ -147,6 +147,7 @@ export default class App extends React.Component {
             component={student(EditProfile)}
             own
           />
+          <Route path="/notifikasi" component={all(NotificationPage)} />
         </Route>
         <Route path="/home" onEnter={this.handleHome} />
         <Route path="/admin-vacancy" component={VacancyPage} />