Fakultas Ilmu Komputer UI

Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
assets/js/VacancyPage.jsx
View file @ b9ac3cf0
......@@ -24,7 +24,7 @@ export default class VacancyPage extends React.Component {
const role = VacancyPage.getRole();
this.state = {
vacancies: [],
id: role.type,
id: role.id,
role: role.type,
};
}
......@@ -36,7 +36,7 @@ export default class VacancyPage extends React.Component {
<Pane label="Semua Lowongan" >
<VacancyList
key={1}
studentId={this.state.id}
userId={this.state.id}
url="/vacancies/"
/>
</Pane>
......@@ -44,14 +44,14 @@ export default class VacancyPage extends React.Component {
<VacancyList
key={2}
status="Batal"
studentId={this.state.id}
userId={this.state.id}
url={`/students/${this.state.id}/applied-vacancies/`}
/>
</Pane>
<Pane label="Lamaran Ditandai" >
<VacancyList
key={3}
studentId={this.state.id}
userId={this.state.id}
url={`/students/${this.state.id}/bookmarked-vacancies/`}
/>
</Pane>
......@@ -59,10 +59,10 @@ export default class VacancyPage extends React.Component {
);
} else if (this.state.role === 'company') {
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 (
<div>
<h3>
......
assets/js/components/CompanyVacancy.jsx
View file @ b9ac3cf0
import React from '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 {
static propTypes = {
header: React.PropTypes.string.isRequired,
data: React.PropTypes.object.isRequired,
};
render() {
return (
<div className="applicant" >
<Button icon="eye" secondary labelPosition="left" content="Lihat Semua Pendaftar" />
<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 className="applicantItems">
<Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
<Item.Extra>
<h3> 105 Pendaftar </h3>
</Item.Extra>
<Item.Content>
<Item.Header as="a">{this.props.data.name}</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.Content>
<Item.Extra>
<h3> 105 Pendaftar </h3>
</Item.Extra>
</Item>
</Item.Content>
</Item.Group>
</Segment>
</div>
</Item>
);
}
}
assets/js/components/Lowongan.jsx deleted 100644 → 0
View file @ 0b75339e
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
assets/js/components/Vacancy.jsx
View file @ b9ac3cf0
......@@ -49,7 +49,7 @@ export default class Vacancy extends React.Component {
render() {
return (
<Item >
<Item className="applicantItems">
<Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
<Item.Content verticalAlign="middle">
<Item.Extra>
......
assets/js/components/VacancyList.jsx
View file @ b9ac3cf0
import React from 'react';
import { Item } from 'semantic-ui-react';
import { Segment, Item, Button } from 'semantic-ui-react';
import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import Server from '../lib/Server';
export default class VacancyList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
studentId: React.PropTypes.number.isRequired,
userId: React.PropTypes.number.isRequired,
status: React.PropTypes.string,
type: React.PropTypes.string,
};
static defaultProps = {
status: 'Daftar',
type: 'student',
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.updateBookmarkList();
if (this.props.type === 'student') {
this.updateBookmarkList();
}
Server.get(this.props.url, false).then((data) => {
this.setState({ vacancies: data });
});
......@@ -26,6 +31,7 @@ export default class VacancyList extends React.Component {
this.updateBookmarkList = this.updateBookmarkList.bind(this);
this.generateVacancies = this.generateVacancies.bind(this);
this.checkBookmark = this.checkBookmark.bind(this);
this.companyHeader = this.companyHeader.bind(this);
}
checkBookmark(id) {
......@@ -36,26 +42,51 @@ export default class VacancyList extends React.Component {
}
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 });
});
}
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 =>
<Vacancy
key={vacancy.id}
status={this.props.status}
bookmarked={this.checkBookmark(vacancy.id)}
data={vacancy}
/>,
(
<CompanyVacancy key={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 = () => (
<Item.Group relaxed>
{ this.generateVacancies() }
</Item.Group>
<Segment>
{ this.companyHeader() }
<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

Excellence In Teamwork