From 51ce2e3d448af21695797e24d354fa6779c16617 Mon Sep 17 00:00:00 2001
From: MADE WIRA DHANAR SANTIKA <made.wira61@ui.ac.id>
Date: Sat, 5 Oct 2019 23:23:44 +0700
Subject: [PATCH 1/5] [RED] add frontend test for notification page
---
assets/js/__test__/NotificationPage-test.jsx | 49 ++++++++++++++++++++
1 file changed, 49 insertions(+)
create mode 100644 assets/js/__test__/NotificationPage-test.jsx
diff --git a/assets/js/__test__/NotificationPage-test.jsx b/assets/js/__test__/NotificationPage-test.jsx
new file mode 100644
index 00000000..c64b8f6a
--- /dev/null
+++ b/assets/js/__test__/NotificationPage-test.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import Notification from '../NotificationPage';
+
+describe('NotificationPage', () => {
+ const studentSession = {
+ url: 'http://localhost:8000/api/users/9/',
+ username: 'muhammad.reza42',
+ email: 'muhammad.reza42@ui.ac.id',
+ is_staff: false,
+ company: null,
+ supervisor: null,
+ student: {
+ id: 3,
+ user: {
+ url: 'http://localhost:8000/api/users/9/',
+ username: 'muhammad.reza42',
+ email: 'muhammad.reza42@ui.ac.id',
+ is_staff: false,
+ },
+ name: 'Muhammad R.',
+ created: '2017-03-28T13:33:46.147241Z',
+ updated: '2017-03-28T13:33:46.148248Z',
+ npm: 1406543593,
+ resume: null,
+ phone_number: null,
+ birth_place: null,
+ birth_date: null,
+ major: null,
+ batch: null,
+ show_resume: false,
+ bookmarked_vacancies: [
+ 3,
+ 2,
+ ],
+ applied_vacancies: [
+ 3,
+ 1,
+ ],
+ },
+ };
+
+ it('renders for notification without problem', () => {
+ const notification = ReactTestUtils.renderIntoDocument(
+ <Notification user={{ data: studentSession }}/>);
+ expect(notification).to.exist;
+ });
+});
+
--
GitLab
From 4741eb2f172a353fe0cb9b22cb896762421a167e Mon Sep 17 00:00:00 2001
From: MADE WIRA DHANAR SANTIKA <made.wira61@ui.ac.id>
Date: Sun, 6 Oct 2019 12:57:01 +0700
Subject: [PATCH 2/5] [GREEN] adding notifications page
---
assets/css/custom.css | 5 +++++
assets/js/NotificationPage.jsx | 36 ++++++++++++++++++++++++++++++++
assets/js/components/TopMenu.jsx | 1 +
assets/js/index.jsx | 2 ++
4 files changed, 44 insertions(+)
create mode 100644 assets/js/NotificationPage.jsx
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 9b7cf50a..f4fe0e4f 100755
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -287,6 +287,11 @@ card .formRegis{
margin-right:7%;
}
+.ui.segment.notifikasi {
+ margin-left: 7%;
+ margin-right: 7%;
+}
+
.ui.segment.kop {
line-height: 5px;
}
\ No newline at end of file
diff --git a/assets/js/NotificationPage.jsx b/assets/js/NotificationPage.jsx
new file mode 100644
index 00000000..c153cb54
--- /dev/null
+++ b/assets/js/NotificationPage.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid } from 'semantic-ui-react';
+import Server from './lib/Server';
+import Storage from './lib/Storage';
+import ModalAlert from './components/ModalAlert';
+import Dumper from './lib/Dumper';
+import Pagination from './components/Pagination';
+
+export default class Notification extends React.Component {
+
+ static propTypes = {
+ user: React.PropTypes.object.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+
+ };
+
+ generateNotifications() {
+ return (
+ <Segment className="notifikasi" >
+ <p>Under Construction!</p>
+ </Segment>
+ );
+ }
+
+ render() {
+ const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
+ return (
+ <div>
+ {this.generateNotifications()}
+ </div>
+ );
+ }
+}
diff --git a/assets/js/components/TopMenu.jsx b/assets/js/components/TopMenu.jsx
index e2229ecc..c7788dca 100644
--- a/assets/js/components/TopMenu.jsx
+++ b/assets/js/components/TopMenu.jsx
@@ -83,6 +83,7 @@ export default class TopMenu extends React.Component {
<Menu.Item as={Link} to="/profil-perusahaan" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
{ this.props.user.data.is_staff &&
<Menu.Item as={Link} to="/lowongan" name="Lowongan" active={activeItem === 'Lowongan'} onClick={this.handleItemClick} /> }
+ <Menu.Item as={Link} to="/notifikasi" name="Notifikasi" active={activeItem === 'Notifikasi'} onClick={this.handleItemClick} />
<Menu.Item style={{ padding: '10px 0' }}>
<Popup
trigger={<Image src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar />}
diff --git a/assets/js/index.jsx b/assets/js/index.jsx
index 5d205006..f613f8d9 100644
--- a/assets/js/index.jsx
+++ b/assets/js/index.jsx
@@ -14,6 +14,7 @@ import TranscriptPage from './TranscriptPage';
import AdminVacancyPage from './AdminVacancyPage';
import CompanyPage from './CompanyPage';
import SupervisorPage from './SupervisorPage';
+import Notification from './NotificationPage';
export default class App extends React.Component {
@@ -115,6 +116,7 @@ export default class App extends React.Component {
<Route path="/perusahaan/:id" component={facultyMember(CompanyProfile)} />
<Route path="/perusahaan" component={staff(CompanyPage)} />
<Route path="/rekap" component={supervisor(SupervisorPage)} />
+ <Route path="/notifikasi" component={all(Notification)} />
</Route>
<Route path="/home" onEnter={this.handleHome} />
<Route path="/admin-vacancy" component={VacancyPage} />
--
GitLab
From aac7397d7b2ed00daac962b15eec430ed3189d2a Mon Sep 17 00:00:00 2001
From: MADE WIRA DHANAR SANTIKA <made.wira61@ui.ac.id>
Date: Sun, 6 Oct 2019 14:38:11 +0700
Subject: [PATCH 3/5] [REFACTOR] renamed Notification to NotificationPage so I
can create a component
---
assets/js/NotificationPage.jsx | 2 +-
assets/js/__test__/NotificationPage-test.jsx | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/assets/js/NotificationPage.jsx b/assets/js/NotificationPage.jsx
index c153cb54..6a3248d5 100644
--- a/assets/js/NotificationPage.jsx
+++ b/assets/js/NotificationPage.jsx
@@ -6,7 +6,7 @@ import ModalAlert from './components/ModalAlert';
import Dumper from './lib/Dumper';
import Pagination from './components/Pagination';
-export default class Notification extends React.Component {
+export default class NotificationPage extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
diff --git a/assets/js/__test__/NotificationPage-test.jsx b/assets/js/__test__/NotificationPage-test.jsx
index c64b8f6a..a7fe2165 100644
--- a/assets/js/__test__/NotificationPage-test.jsx
+++ b/assets/js/__test__/NotificationPage-test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
-import Notification from '../NotificationPage';
+import NotificationPage from '../NotificationPage';
describe('NotificationPage', () => {
const studentSession = {
@@ -42,7 +42,7 @@ describe('NotificationPage', () => {
it('renders for notification without problem', () => {
const notification = ReactTestUtils.renderIntoDocument(
- <Notification user={{ data: studentSession }}/>);
+ <NotificationPage user={{ data: studentSession }}/>);
expect(notification).to.exist;
});
});
--
GitLab
From 896a319b77c651c1f17c9b155052b6a572073e11 Mon Sep 17 00:00:00 2001
From: MADE WIRA DHANAR SANTIKA <made.wira61@ui.ac.id>
Date: Sun, 6 Oct 2019 15:18:47 +0700
Subject: [PATCH 4/5] [RED] implementing Notification component
---
assets/js/NotificationPage.jsx | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/assets/js/NotificationPage.jsx b/assets/js/NotificationPage.jsx
index 6a3248d5..59254246 100644
--- a/assets/js/NotificationPage.jsx
+++ b/assets/js/NotificationPage.jsx
@@ -1,10 +1,6 @@
import React from 'react';
-import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid } from 'semantic-ui-react';
-import Server from './lib/Server';
-import Storage from './lib/Storage';
-import ModalAlert from './components/ModalAlert';
-import Dumper from './lib/Dumper';
-import Pagination from './components/Pagination';
+import { Segment } from 'semantic-ui-react';
+import Notification from './components/Notification';
export default class NotificationPage extends React.Component {
@@ -20,13 +16,17 @@ export default class NotificationPage extends React.Component {
generateNotifications() {
return (
<Segment className="notifikasi" >
- <p>Under Construction!</p>
+ <Notification
+ text="Hehe"
+ />
+ <Notification
+ text="The Notification should be like this"
+ />
</Segment>
);
}
render() {
- const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
return (
<div>
{this.generateNotifications()}
--
GitLab
From ef417274212997c79171c29ed1ddb34d998e5514 Mon Sep 17 00:00:00 2001
From: MADE WIRA DHANAR SANTIKA <made.wira61@ui.ac.id>
Date: Sun, 6 Oct 2019 15:20:23 +0700
Subject: [PATCH 5/5] [GREEN] implements Notification component
---
assets/js/components/Notification.jsx | 39 +++++++++++++++++++++++++++
1 file changed, 39 insertions(+)
create mode 100644 assets/js/components/Notification.jsx
diff --git a/assets/js/components/Notification.jsx b/assets/js/components/Notification.jsx
new file mode 100644
index 00000000..46ec93ec
--- /dev/null
+++ b/assets/js/components/Notification.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Segment, Image, Button, Grid } from 'semantic-ui-react';
+
+const defaultThumbnail = 'https://semantic-ui.com/images/wireframe/square-image.png';
+
+export default class Notification extends React.Component {
+
+ static propTypes = {
+ thumbnail: React.PropTypes.string,
+ text: React.PropTypes.string.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+ };
+
+ render() {
+ return(
+ <Segment>
+ <Grid columns={3}>
+ <Grid.Row>
+ <Grid.Column floated="left" width={2}>
+ <Image
+ src={this.props.thumbnail ? this.props.thumbnail : defaultThumbnail}
+ size="tiny"
+ />
+ </Grid.Column>
+ <Grid.Column width={12}>
+ <p>{this.props.text}</p>
+ </Grid.Column>
+ <Grid.Column floated="right" width={2}>
+ <Button primary>Dismiss</Button>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Segment>
+ );
+ }
+}
\ No newline at end of file
--
GitLab