From c04c25334d472b3ed677a8d29e7f7005d8548c27 Mon Sep 17 00:00:00 2001
From: "M. Reza Qorib" <rezaqorib96@gmail.com>
Date: Tue, 28 Mar 2017 00:59:06 +0700
Subject: [PATCH] [#140654507] #13 add VacancyList component
---
.../__test__/components/VacancyList-test.jsx | 4 +-
assets/js/components/Lowongan.jsx | 60 ++++++++-----------
assets/js/components/VacancyList.jsx | 25 ++++++++
3 files changed, 51 insertions(+), 38 deletions(-)
create mode 100644 assets/js/components/VacancyList.jsx
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 5484871f..709bcb25 100644
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -4,7 +4,7 @@ import ReactTestUtils from 'react-addons-test-utils';
import VacancyList from '../../components/VacancyList';
import ModalPendaftaran from '../../components/ModalPendaftaran';
-describe('LoginForm', () => {
+describe('VacancyList', () => {
it('created without problem', () => {
const vacancyList = new VacancyList();
expect(vacancyList).to.be.an.instanceof(VacancyList);
@@ -15,7 +15,7 @@ describe('LoginForm', () => {
<VacancyList header="header" content="content" buttonTitle="submit" />);
expect(vacancyList).to.exist;
- React.Children.forEach(this.props.children, (child) => {
+ React.Children.forEach(vacancyList.props.children, (child) => {
expect(child).to.be.an.instanceof(ModalPendaftaran);
});
});
diff --git a/assets/js/components/Lowongan.jsx b/assets/js/components/Lowongan.jsx
index caab73a1..900df337 100644
--- a/assets/js/components/Lowongan.jsx
+++ b/assets/js/components/Lowongan.jsx
@@ -1,44 +1,32 @@
import React from 'react';
-import { Button, Image as ImageComponent, Item } from 'semantic-ui-react'
+import { Button, Image as ImageComponent, Item } from 'semantic-ui-react';
import ModalPendaftaran from './ModalPendaftaran';
-//const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
+// const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
-export default class Lowongan extends React.Component{
- static propTypes = {
- header: React.PropTypes.oneOfType([
- React.PropTypes.node,
- React.PropTypes.string,
- ]).isRequired,
- content: React.PropTypes.oneOfType([
- React.PropTypes.node,
- React.PropTypes.string,
- ]).isRequired,
- image: React.PropTypes.oneOfType([
- React.PropTypes.node,
- React.PropTypes.string,
- ]).isRequired,
- paragraph: React.PropTypes.string.isRequired
+export default class Lowongan extends React.Component {
+ static propTypes = {
+ data: React.PropTypes.object.isRequired,
};
- render(){
- return(
+ render() {
+ return (
- <Item.Group relaxed>
- <Item>
- {this.props.image}
- <Item.Content verticalAlign="middle">
- <Item.Header>{this.props.header}</Item.Header>
- <Item.Description>{this.props.content}</Item.Description>
- <Item.Extra>
- <div className="daftar">
- <ModalPendaftaran content={this.props.paragraph} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
- </div>
- </Item.Extra>
- </Item.Content>
- </Item>
- </Item.Group>
- );
- }
-}
\ No newline at end of file
+ <Item.Group relaxed>
+ <Item>
+ {this.props.image}
+ <Item.Content verticalAlign="middle">
+ <Item.Header>{this.props.header}</Item.Header>
+ <Item.Description>{this.props.content}</Item.Description>
+ <Item.Extra>
+ <div className="daftar">
+ <ModalPendaftaran content={{ tes: 'dor' }} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
+ </div>
+ </Item.Extra>
+ </Item.Content>
+ </Item>
+ </Item.Group>
+ );
+ }
+}
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
new file mode 100644
index 00000000..6cea70a2
--- /dev/null
+++ b/assets/js/components/VacancyList.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Lowongan from './Lowongan';
+
+export default class VacancyList extends React.Component {
+
+ static propTypes = {
+ vacancies: React.PropTypes.array
+ };
+
+ static defaultProps = {
+ vacancies: [],
+ };
+
+ generateVacancies(){
+ return(
+ this.props.vacancies.map((vacancyData) =>
+ <Lowongan data={vacancyData}/>)
+ );
+ }
+
+ render = () => (
+ <div className="vscancyList" >{ this.generateVacancies() }
+ </div>
+ )
+}
\ No newline at end of file
--
GitLab