Fakultas Ilmu Komputer UI

Commit b9ac3cf0 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#140652771] #18 Combine and Refactor VacancyPage and its child components from Sirin's

parent 0b75339e
...@@ -24,7 +24,7 @@ export default class VacancyPage extends React.Component { ...@@ -24,7 +24,7 @@ export default class VacancyPage extends React.Component {
const role = VacancyPage.getRole(); const role = VacancyPage.getRole();
this.state = { this.state = {
vacancies: [], vacancies: [],
id: role.type, id: role.id,
role: role.type, role: role.type,
}; };
} }
...@@ -36,7 +36,7 @@ export default class VacancyPage extends React.Component { ...@@ -36,7 +36,7 @@ export default class VacancyPage extends React.Component {
<Pane label="Semua Lowongan" > <Pane label="Semua Lowongan" >
<VacancyList <VacancyList
key={1} key={1}
studentId={this.state.id} userId={this.state.id}
url="/vacancies/" url="/vacancies/"
/> />
</Pane> </Pane>
...@@ -44,14 +44,14 @@ export default class VacancyPage extends React.Component { ...@@ -44,14 +44,14 @@ export default class VacancyPage extends React.Component {
<VacancyList <VacancyList
key={2} key={2}
status="Batal" status="Batal"
studentId={this.state.id} userId={this.state.id}
url={`/students/${this.state.id}/applied-vacancies/`} url={`/students/${this.state.id}/applied-vacancies/`}
/> />
</Pane> </Pane>
<Pane label="Lamaran Ditandai" > <Pane label="Lamaran Ditandai" >
<VacancyList <VacancyList
key={3} key={3}
studentId={this.state.id} userId={this.state.id}
url={`/students/${this.state.id}/bookmarked-vacancies/`} url={`/students/${this.state.id}/bookmarked-vacancies/`}
/> />
</Pane> </Pane>
...@@ -59,10 +59,10 @@ export default class VacancyPage extends React.Component { ...@@ -59,10 +59,10 @@ export default class VacancyPage extends React.Component {
); );
} else if (this.state.role === 'company') { } else if (this.state.role === 'company') {
return ( return (
<VacancyList key={1} studentId={this.state.id} url="/vacancies/" /> <VacancyList key={1} userId={this.state.id} url="/vacancies/" type="company" />
); );
} }
console.log(this.state);
return ( return (
<div> <div>
<h3> <h3>
......
import React from 'react'; import React from 'react';
import { Segment, Button, Icon, Item } from 'semantic-ui-react'; import { Segment, Button, Icon, Item } from 'semantic-ui-react';
const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export default class ApplicantList extends React.Component { export default class ApplicantList extends React.Component {
static propTypes = { static propTypes = {
header: React.PropTypes.string.isRequired, data: React.PropTypes.object.isRequired,
}; };
render() { render() {
return ( return (
<div className="applicant" > <Item className="applicantItems">
<Button icon="eye" secondary labelPosition="left" content="Lihat Semua Pendaftar" /> <Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
<Button icon="add" secondary labelPosition="left" content="Tambah Lowongan Baru" />
<Segment>
<Item.Group divided>
<Item className="applicantItems">
<Item.Image src="/assets/images/wireframe/image.png" siza="tiny" />
<Item.Content>
<Item.Header as="a">{this.props.header}</Item.Header>
<Segment padded basic floated="right">
<Button primary floated="right" >Ubah<Icon name="right chevron" /></Button>
<Segment basic> 5 jam lalu</Segment>
</Segment>
<Item.Extra> <Item.Content>
<h3> 105 Pendaftar </h3> <Item.Header as="a">{this.props.data.name}</Item.Header>
</Item.Extra> <Segment padded basic floated="right">
<Button primary floated="right" >Ubah<Icon name="right chevron" /></Button>
<Segment basic> 5 jam lalu</Segment>
</Segment>
</Item.Content> <Item.Extra>
<h3> 105 Pendaftar </h3>
</Item.Extra>
</Item> </Item.Content>
</Item.Group> </Item>
</Segment>
</div>
); );
} }
} }
import React from 'react';
import { Button, Image as ImageComponent, Item, Rating, Icon } from 'semantic-ui-react'
import ModalPendaftaran from './ApplyModal';
const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
const image = <Item.Image size="small" src="http://semantic-ui.com/images/wireframe/image.png" />;
export default class Lowongan extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
};
render() {
return (
<Item >
{image}
<Item.Content verticalAlign="middle">
<Item.Header>
{this.props.header}
</Item.Header>
<Item.Description>{this.props.content}</Item.Description>
<Item.Content>
<h3>{ this.props.data.data1 }</h3>
<h4>PT. Koding Kuat </h4>
<h5> JL.Kali deres utara no.1 Jakarta Barat, DKI Jakarta</h5>
<ApplicancyModal id={1} data={ { header: 'Deskripsi Lowongan', description: 'Lorem ipsum dolor sit amet'} } buttonTitle="Daftar" />
</Item.Content>
</Item.Content>
</Item>
);
}
}
\ No newline at end of file
...@@ -49,7 +49,7 @@ export default class Vacancy extends React.Component { ...@@ -49,7 +49,7 @@ export default class Vacancy extends React.Component {
render() { render() {
return ( return (
<Item > <Item className="applicantItems">
<Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} /> <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
<Item.Content verticalAlign="middle"> <Item.Content verticalAlign="middle">
<Item.Extra> <Item.Extra>
......
import React from 'react'; import React from 'react';
import { Item } from 'semantic-ui-react'; import { Segment, Item, Button } from 'semantic-ui-react';
import Vacancy from './Vacancy'; import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import Server from '../lib/Server'; import Server from '../lib/Server';
export default class VacancyList extends React.Component { export default class VacancyList extends React.Component {
static propTypes = { static propTypes = {
url: React.PropTypes.string.isRequired, url: React.PropTypes.string.isRequired,
studentId: React.PropTypes.number.isRequired, userId: React.PropTypes.number.isRequired,
status: React.PropTypes.string, status: React.PropTypes.string,
type: React.PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
status: 'Daftar', status: 'Daftar',
type: 'student',
}; };
constructor(props) { constructor(props) {
super(props); super(props);
/* istanbul ignore next */ /* istanbul ignore next */
this.updateBookmarkList(); if (this.props.type === 'student') {
this.updateBookmarkList();
}
Server.get(this.props.url, false).then((data) => { Server.get(this.props.url, false).then((data) => {
this.setState({ vacancies: data }); this.setState({ vacancies: data });
}); });
...@@ -26,6 +31,7 @@ export default class VacancyList extends React.Component { ...@@ -26,6 +31,7 @@ export default class VacancyList extends React.Component {
this.updateBookmarkList = this.updateBookmarkList.bind(this); this.updateBookmarkList = this.updateBookmarkList.bind(this);
this.generateVacancies = this.generateVacancies.bind(this); this.generateVacancies = this.generateVacancies.bind(this);
this.checkBookmark = this.checkBookmark.bind(this); this.checkBookmark = this.checkBookmark.bind(this);
this.companyHeader = this.companyHeader.bind(this);
} }
checkBookmark(id) { checkBookmark(id) {
...@@ -36,26 +42,51 @@ export default class VacancyList extends React.Component { ...@@ -36,26 +42,51 @@ export default class VacancyList extends React.Component {
} }
updateBookmarkList() { updateBookmarkList() {
Server.get(`/students/${this.props.studentId}/bookmarked-vacancies/`, false).then((data) => { Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
this.setState({ bookmarkList: data }); this.setState({ bookmarkList: data });
}); });
} }
generateVacancies() { generateVacancies() {
if (this.props.type === 'student') {
return this.state.vacancies.map(vacancy =>
(
<Vacancy
key={vacancy.id}
status={this.props.status}
bookmarked={this.checkBookmark(vacancy.id)}
data={vacancy}
/>
),
);
}
return this.state.vacancies.map(vacancy => return this.state.vacancies.map(vacancy =>
<Vacancy (
key={vacancy.id} <CompanyVacancy key={vacancy.id} data={vacancy} />
status={this.props.status} ),
bookmarked={this.checkBookmark(vacancy.id)}
data={vacancy}
/>,
); );
} }
companyHeader() {
if (this.props.type === 'company') {
return (
<div>
<Button icon="eye" secondary labelPosition="left" content="Lihat Semua Pendaftar" />
<Button icon="add" secondary labelPosition="left" content="Tambah Lowongan Baru" />
</div>
);
}
return '';
}
render = () => ( render = () => (
<Item.Group relaxed> <Segment>
{ this.generateVacancies() } { this.companyHeader() }
</Item.Group> <Item.Group relaxed>
{ this.generateVacancies() }
</Item.Group>
</Segment>
); );
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment