Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Fasilkom UI Open Source Software
Kape
Commits
e3e1abf9
Commit
e3e1abf9
authored
Mar 29, 2017
by
M. Reza Qorib
Browse files
[#140654507]
#13
Add bookmark and cancel bookmark feature
parent
a90f659f
Changes
4
Hide whitespace changes
Inline
Side-by-side
assets/js/VacancyPage.jsx
View file @
e3e1abf9
...
@@ -22,18 +22,17 @@ export default class VacancyPage extends React.Component {
...
@@ -22,18 +22,17 @@ export default class VacancyPage extends React.Component {
render
()
{
render
()
{
const
student
=
Storage
.
get
(
'
user-data
'
).
student
;
const
student
=
Storage
.
get
(
'
user-data
'
).
student
;
return
(
return
(
<
div
className
=
"halamanLowongan"
>
<
div
className
=
"halamanLowongan"
>
<
Tabs
selected
=
{
0
}
>
<
Tabs
selected
=
{
0
}
>
<
Pane
label
=
"Semua Lowongan"
>
<
Pane
label
=
"Semua Lowongan"
>
<
VacancyList
key
=
{
1
}
url
=
"/vacancies/"
/>
<
VacancyList
key
=
{
1
}
studentId
=
{
student
.
id
}
url
=
"/vacancies/"
/>
</
Pane
>
</
Pane
>
<
Pane
label
=
"Lamaran saya"
>
<
Pane
label
=
"Lamaran saya"
>
<
VacancyList
key
=
{
2
}
url
=
{
`/students/
${
student
.
id
}
/applied-vacancies/`
}
/>
<
VacancyList
key
=
{
2
}
studentId
=
{
student
.
id
}
url
=
{
`/students/
${
student
.
id
}
/applied-vacancies/`
}
/>
</
Pane
>
</
Pane
>
<
Pane
label
=
"Lamaran Ditandai"
>
<
Pane
label
=
"Lamaran Ditandai"
>
<
VacancyList
key
=
{
3
}
url
=
{
`/students/
${
student
.
id
}
/bookmarked-vacancies/`
}
/>
<
VacancyList
key
=
{
3
}
studentId
=
{
student
.
id
}
url
=
{
`/students/
${
student
.
id
}
/bookmarked-vacancies/`
}
/>
</
Pane
>
</
Pane
>
</
Tabs
>
</
Tabs
>
...
...
assets/js/components/LoginForm.jsx
View file @
e3e1abf9
...
@@ -57,14 +57,14 @@ export default class LoginForm extends React.Component {
...
@@ -57,14 +57,14 @@ export default class LoginForm extends React.Component {
<
Image
src
=
{
`./assets/img/
${
this
.
props
.
imgSrc
}
`
}
size
=
{
this
.
props
.
imgSize
}
verticalAlign
=
"middle"
/>
<
span
>
{
this
.
props
.
header
}
</
span
>
<
Image
src
=
{
`./assets/img/
${
this
.
props
.
imgSrc
}
`
}
size
=
{
this
.
props
.
imgSize
}
verticalAlign
=
"middle"
/>
<
span
>
{
this
.
props
.
header
}
</
span
>
</
div
>
</
div
>
<
Form
.
Group
widths
=
"equal"
>
<
Form
.
Group
widths
=
"equal"
>
<
Form
.
Field
required
>
<
Form
.
Field
>
<
label
htmlFor
=
"id"
>
Username
</
label
>
<
label
htmlFor
=
"id"
>
Username
</
label
>
<
Input
type
=
"text"
id
=
"username"
icon
=
"user"
iconPosition
=
"left"
placeholder
=
"username"
onChange
=
{
e
=>
this
.
handleChange
(
e
,
'
username
'
)
}
required
/>
<
Input
type
=
"text"
id
=
"username"
icon
=
"user"
iconPosition
=
"left"
placeholder
=
"username"
onChange
=
{
e
=>
this
.
handleChange
(
e
,
'
username
'
)
}
required
/>
</
Form
.
Field
>
</
Form
.
Field
>
</
Form
.
Group
>
</
Form
.
Group
>
<
Form
.
Group
widths
=
"equal"
>
<
Form
.
Group
widths
=
"equal"
>
<
Form
.
Field
required
>
<
Form
.
Field
>
<
label
htmlFor
=
"password"
>
Password
</
label
>
<
label
htmlFor
=
"password"
>
Password
</
label
>
<
Input
type
=
"password"
id
=
"password"
icon
=
"key"
iconPosition
=
"left"
placeholder
=
"password"
onChange
=
{
e
=>
this
.
handleChange
(
e
,
'
password
'
)
}
required
/>
<
Input
type
=
"password"
id
=
"password"
icon
=
"key"
iconPosition
=
"left"
placeholder
=
"password"
onChange
=
{
e
=>
this
.
handleChange
(
e
,
'
password
'
)
}
required
/>
</
Form
.
Field
>
</
Form
.
Field
>
...
...
assets/js/components/Vacancy.jsx
View file @
e3e1abf9
...
@@ -9,18 +9,29 @@ const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
...
@@ -9,18 +9,29 @@ const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export
default
class
Vacancy
extends
React
.
Component
{
export
default
class
Vacancy
extends
React
.
Component
{
static
propTypes
=
{
static
propTypes
=
{
data
:
React
.
PropTypes
.
object
.
isRequired
,
data
:
React
.
PropTypes
.
object
.
isRequired
,
bookmarked
:
React
.
PropTypes
.
number
,
};
static
defaultProps
=
{
bookmarked
:
0
,
};
};
constructor
(
props
)
{
constructor
(
props
)
{
super
(
props
);
super
(
props
);
/* istanbul ignore next */
/* istanbul ignore next */
this
.
state
=
{
bookmarked
:
this
.
props
.
bookmarked
};
this
.
bookmark
=
this
.
bookmark
.
bind
(
this
);
this
.
bookmark
=
this
.
bookmark
.
bind
(
this
);
}
}
bookmark
()
{
bookmark
()
{
const
studentId
=
Storage
.
get
(
'
user-data
'
).
student
.
id
;
const
studentId
=
Storage
.
get
(
'
user-data
'
).
student
.
id
;
const
data
=
{
vacancy_id
:
this
.
props
.
data
.
id
};
const
data
=
{
vacancy_id
:
this
.
props
.
data
.
id
};
Server
.
post
(
`/students/
${
studentId
}
/bookmarked-vacancies/`
,
data
);
if
(
this
.
state
.
bookmarked
<
1
){
Server
.
post
(
`/students/
${
studentId
}
/bookmarked-vacancies/`
,
data
);
}
else
{
Server
.
delete
(
`/students/
${
studentId
}
/bookmarked-vacancies/
${
this
.
props
.
data
.
id
}
/`
);
}
this
.
state
.
bookmarked
=
1
-
this
.
state
.
bookmarked
;
}
}
render
()
{
render
()
{
...
@@ -32,7 +43,7 @@ export default class Vacancy extends React.Component {
...
@@ -32,7 +43,7 @@ export default class Vacancy extends React.Component {
<
h3
>
{
this
.
props
.
data
.
name
}
</
h3
>
<
h3
>
{
this
.
props
.
data
.
name
}
</
h3
>
<
div
className
=
"bookmark"
>
<
div
className
=
"bookmark"
>
<
Rating
icon
=
"star"
onRate
=
{
this
.
bookmark
}
size
=
"massive"
defaultRating
=
{
0
}
maxRating
=
{
1
}
/>
<
Rating
icon
=
"star"
onRate
=
{
this
.
bookmark
}
size
=
"massive"
defaultRating
=
{
this
.
props
.
bookmarked
}
maxRating
=
{
1
}
/>
</
div
>
</
div
>
<
h4
>
{
this
.
props
.
data
.
company
.
name
}
</
h4
>
<
h4
>
{
this
.
props
.
data
.
company
.
name
}
</
h4
>
<
h5
>
{
this
.
props
.
data
.
company
.
address
}
</
h5
>
<
h5
>
{
this
.
props
.
data
.
company
.
address
}
</
h5
>
...
...
assets/js/components/VacancyList.jsx
View file @
e3e1abf9
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
{
Item
}
from
'
semantic-ui-react
'
;
import
{
Item
}
from
'
semantic-ui-react
'
;
import
Lowongan
from
'
./Vacancy
'
;
import
Vacancy
from
'
./Vacancy
'
;
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
,
};
static
defaultProps
=
{
bookmarkList
:
false
,
};
};
constructor
(
props
)
{
constructor
(
props
)
{
super
(
props
);
super
(
props
);
/* istanbul ignore next */
/* istanbul ignore next */
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
});
});
});
this
.
state
=
{
vacancies
:
[]
};
this
.
state
=
{
vacancies
:
[],
bookmarkList
:
[]
};
this
.
updateBookmarkList
=
this
.
updateBookmarkList
.
bind
(
this
);
this
.
generateVacancies
=
this
.
generateVacancies
.
bind
(
this
);
this
.
generateVacancies
=
this
.
generateVacancies
.
bind
(
this
);
this
.
checkBookmark
=
this
.
checkBookmark
.
bind
(
this
);
}
checkBookmark
(
id
)
{
for
(
let
i
=
0
;
i
<
this
.
state
.
bookmarkList
.
length
;
i
++
)
{
if
(
id
==
this
.
state
.
bookmarkList
[
i
].
id
)
{
return
1
;
}
}
return
0
;
}
}
updateBookmarkList
()
{
Server
.
get
(
`/students/
${
this
.
props
.
studentId
}
/bookmarked-vacancies/`
,
false
).
then
((
data
)
=>
{
this
.
setState
({
bookmarkList
:
data
});
});
}
generateVacancies
()
{
generateVacancies
()
{
return
this
.
state
.
vacancies
.
map
(
vacancy
=>
return
this
.
state
.
vacancies
.
map
(
vacancy
=>
<
Lowongan
ke
y
=
{
vacancy
.
id
}
data
=
{
vacancy
}
/>,
<
Vacancy
key
=
{
vacancy
.
id
}
bookmar
ke
d
=
{
this
.
checkBookmark
(
vacancy
.
id
)
}
data
=
{
vacancy
}
/>,
);
);
}
}
...
@@ -32,4 +52,4 @@ export default class VacancyList extends React.Component {
...
@@ -32,4 +52,4 @@ export default class VacancyList extends React.Component {
{
this
.
generateVacancies
()
}
{
this
.
generateVacancies
()
}
</
Item
.
Group
>
</
Item
.
Group
>
);
);
}
}
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment