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
87d5f682
Commit
87d5f682
authored
Apr 24, 2017
by
M. Reza Qorib
Browse files
[#140655219] [GREEN] #25 Refactor Profile Page for showing profile to self and companies
parent
08ba0780
Changes
4
Hide whitespace changes
Inline
Side-by-side
assets/js/ProfilePage.jsx
View file @
87d5f682
import
React
from
'
react
'
;
import
{
Segment
,
Image
,
Header
,
Icon
,
Container
,
Button
,
Form
}
from
'
semantic-ui-react
'
;
import
Server
from
'
./lib/Server
'
;
export
default
class
ProfilePage
extends
React
.
Component
{
static
propTypes
=
{
data
:
React
.
PropTypes
.
object
.
isRequired
,
own
:
React
.
PropTypes
.
string
.
isRequired
,
route
:
React
.
PropTypes
.
object
.
isRequired
,
params
:
React
.
PropTypes
.
object
.
isRequired
,
};
constructor
(
props
)
{
super
(
props
);
/* istanbul ignore next */
this
.
state
=
{
npm
:
props
.
data
.
student
.
npm
,
id
:
''
,
npm
:
''
,
name
:
''
,
major
:
''
,
batch
:
''
,
...
...
@@ -20,37 +22,55 @@ export default class ProfilePage extends React.Component {
cityOfBirth
:
''
,
dateOfBirth
:
''
,
resume
:
''
,
phone
:
''
,
showTranscript
:
''
,
};
this
.
handleItemClick
=
this
.
handleItemClick
.
bind
(
this
);
this
.
getProfile
=
this
.
getProfile
.
bind
(
this
);
this
.
getProfile
();
}
getProfile
()
{
if
(
this
.
props
.
route
.
own
)
{
// check api format in /api#!/login
this
.
state
=
{
id
:
this
.
props
.
route
.
data
.
student
.
id
,
npm
:
this
.
props
.
route
.
data
.
student
.
npm
,
name
:
this
.
props
.
route
.
data
.
student
.
name
,
major
:
this
.
props
.
route
.
data
.
student
.
major
,
batch
:
this
.
props
.
route
.
data
.
student
.
batch
,
email
:
this
.
props
.
route
.
data
.
student
.
user
.
email
,
cityOfBirth
:
this
.
props
.
route
.
data
.
student
.
birth_place
,
dateOfBirth
:
this
.
props
.
route
.
data
.
student
.
birth_date
,
resume
:
this
.
props
.
route
.
data
.
student
.
resume
,
phone
:
this
.
props
.
route
.
data
.
student
.
phone_number
,
showTranscript
:
this
.
props
.
route
.
data
.
student
.
show_transcript
,
};
return
Promise
.
resolve
(
this
.
state
);
}
else
{
return
Server
.
get
(
`/students/
${
this
.
props
.
params
.
id
}
/`
).
then
((
data
)
=>
{
this
.
setState
({
id
:
data
.
id
,
name
:
data
.
name
,
npm
:
data
.
npm
,
resume
:
data
.
resume
,
major
:
data
.
major
,
batch
:
data
.
batch
,
email
:
data
.
user
.
email
,
cityOfBirth
:
data
.
birth_place
,
dateOfBirth
:
data
.
birth_date
,
phone
:
data
.
phone_number
,
showTranscript
:
data
.
show_transcript
,
});
},
error
=>
error
.
then
(()
=>
{
// this.modalAlert.open('Gagal Mengambil ', r.error);
this
.
state
.
name
=
'
Gagal mendapatkan informasi
'
;
}));
}
}
render
()
{
return
(
<
div
className
=
"profilePage"
>
<
Segment
className
=
"biodata-section"
>
<
Header
as
=
"h2"
icon
textAlign
=
"center"
>
<
Image
src
=
"http://semantic-ui.com/images/wireframe/square-image.png"
size
=
"small"
shape
=
"circular"
/>
</
Header
>
<
Container
textAlign
=
"center"
className
=
"profile-biodata"
>
<
div
className
=
"biodata"
>
<
h3
>
{
this
.
state
.
name
}
</
h3
>
<
h5
>
{
this
.
state
.
major
}
,
{
this
.
state
.
batch
}
</
h5
>
<
h5
>
{
this
.
state
.
email
}
</
h5
>
<
h5
>
{
this
.
props
.
data
.
student
.
phone_number
}
</
h5
>
<
h5
>
{
this
.
state
.
cityOfBirth
}
,
{
this
.
state
.
dateOfBirth
}
</
h5
>
</
div
>
<
div
className
=
"button-profile"
>
<
Button
primary
size
=
"small"
>
Resume
</
Button
>
<
Button
primary
size
=
"small"
>
Transkrip
</
Button
>
</
div
>
</
Container
>
</
Segment
>
updateForm
(
show
)
{
if
(
show
)
{
return
(
<
Segment
className
=
"profile-form"
>
<
Header
as
=
"h3"
textAlign
=
"center"
>
<
Icon
name
=
"edit"
/>
...
...
@@ -59,6 +79,10 @@ export default class ProfilePage extends React.Component {
</
Header
.
Content
>
</
Header
>
<
Form
size
=
"small"
onSubmit
=
{
this
.
handleSubmit
}
>
<
Form
.
Field
>
<
label
htmlFor
=
"photo"
>
Profile Picture
</
label
>
<
input
placeholder
=
"Profile Photo.jpg"
name
=
"photo"
type
=
"File"
/>
</
Form
.
Field
>
<
Form
.
Field
>
<
label
htmlFor
=
"email"
>
Email
</
label
>
<
input
placeholder
=
"jojon@email.com"
name
=
"email"
/>
...
...
@@ -74,7 +98,34 @@ export default class ProfilePage extends React.Component {
<
Button
type
=
"submit"
size
=
"small"
primary
floated
=
"right"
>
Submit
</
Button
>
</
Form
>
</
Segment
>
);
}
return
(<
div
/>);
}
render
()
{
return
(
<
div
className
=
"profilePage"
>
<
Segment
className
=
"biodata-section"
>
<
Header
as
=
"h2"
icon
textAlign
=
"center"
>
<
Image
src
=
"http://semantic-ui.com/images/wireframe/square-image.png"
size
=
"small"
shape
=
"circular"
/>
</
Header
>
<
Container
textAlign
=
"center"
className
=
"profile-biodata"
>
<
div
className
=
"biodata"
>
<
h3
>
{
this
.
state
.
name
}
</
h3
>
<
h5
>
{
this
.
state
.
major
}
,
{
this
.
state
.
batch
}
</
h5
>
<
h5
>
{
this
.
state
.
email
}
</
h5
>
<
h5
>
{
this
.
state
.
phone
}
</
h5
>
<
h5
>
{
this
.
state
.
cityOfBirth
}
,
{
this
.
state
.
dateOfBirth
}
</
h5
>
</
div
>
<
div
className
=
"button-profile"
>
<
Button
primary
size
=
"small"
>
Resume
</
Button
>
{
this
.
state
.
showTranscript
?
<
Button
primary
size
=
"small"
>
Transkrip
</
Button
>
:
<
div
/>
}
</
div
>
</
Container
>
</
Segment
>
{
this
.
updateForm
(
this
.
props
.
route
.
own
)
}
</
div
>
);
...
...
assets/js/__test__/ProfilePage-test.jsx
View file @
87d5f682
...
...
@@ -5,7 +5,6 @@ import fetchMock from 'fetch-mock';
import
ProfilePage
from
'
../ProfilePage
'
;
describe
(
'
ProfilePage
'
,
()
=>
{
const
studentSession
=
{
url
:
'
http://localhost:8000/api/users/9/
'
,
username
:
'
muhammad.reza42
'
,
...
...
@@ -27,8 +26,14 @@ describe('ProfilePage', () => {
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
,
...
...
@@ -48,55 +53,42 @@ describe('ProfilePage', () => {
};
const
response
=
{
url
:
'
http://api.cs.ui.ac.id/siakngcs/mahasiswa/1406543593/
'
,
npm
:
'
1406543593
'
,
nama
:
'
Muhammad Reza Qorib
'
,
alamat_mhs
:
'
Pesona Khayangan Estate Blok CO/4, RT 04/RW 27, Kel. Mekarjaya, Kec. Sukmajaya, Margonda Kota Depok Jawa Barat 16411
'
,
kd_pos_mhs
:
'
16411
'
,
kota_lahir
:
'
Jakarta
'
,
tgl_lahir
:
'
1996-08-30
'
,
program
:
[
{
url
:
'
http://api.cs.ui.ac.id/siakngcs/program/42380/
'
,
periode
:
{
url
:
'
http://api.cs.ui.ac.id/siakngcs/periode/31/
'
,
term
:
2
,
tahun
:
2016
,
},
kd_org
:
'
01.00.12.01
'
,
nm_org
:
'
Ilmu Komputer
'
,
nm_prg
:
'
S1 Reguler
'
,
angkatan
:
2014
,
nm_status
:
'
Aktif
'
,
kd_status
:
'
1
'
,
},
],
id
:
3
,
name
:
'
Muhammad R.
'
,
user
:
{
url
:
'
http://localhost:8000/api/users/9/
'
,
username
:
'
muhammad.reza42
'
,
email
:
'
muhammad.reza42@ui.ac.id
'
,
is_staff
:
false
,
},
npm
:
1406543593
,
resume
:
null
,
phone_number
:
null
,
birth_place
:
null
,
birth_date
:
null
,
major
:
null
,
batch
:
null
,
show_transcript
:
false
,
};
it
(
'
renders without problem
'
,
()
=>
{
const
profile
=
ReactTestUtils
.
renderIntoDocument
(
<
ProfilePage
data
=
{
studentSession
}
/>);
expect
(
profile
).
to
.
exist
;
});
it
(
'
renders without problem for error case
'
,
()
=>
{
const
profile
=
ReactTestUtils
.
renderIntoDocument
(
<
ProfilePage
data
=
{
brokenSession
}
/>);
expect
(
profile
).
to
.
exist
;
<
ProfilePage
route
=
{
{
own
:
true
,
data
:
studentSession
}
}
params
=
{
{}
}
/>);
expect
(
profile
.
state
.
name
).
to
.
equal
(
studentSession
.
student
.
name
);
});
it
(
'
get
data
without problem
'
,
()
=>
{
it
(
'
get
profile for company
without problem
'
,
()
=>
{
fetchMock
.
get
(
'
*
'
,
response
);
const
profile
=
ReactTestUtils
.
renderIntoDocument
(
<
ProfilePage
data
=
{
{
student
:
{
npm
:
1406543593
}
}
}
/>);
const
userProfile
=
profile
.
getProfile
(
);
expect
(
JSON
.
stringify
(
userProfile
)).
to
.
equal
(
JSON
.
stringify
(
response
)
);
<
ProfilePage
route
=
{
{
own
:
false
,
data
:
student
Session
}
}
params
=
{
{
id
:
3
}
}
/>);
profile
.
getProfile
().
then
(()
=>
expect
(
profile
.
state
.
name
).
to
.
equal
(
response
.
name
)
);
fetchMock
.
restore
(
);
});
it
(
'
renders without problem when error getting data
'
,
()
=>
{
fetchMock
.
get
(
'
*
'
,
400
);
const
profile
=
ReactTestUtils
.
renderIntoDocument
(
<
ProfilePage
data
=
{
{
student
:
{
npm
:
1406543593
}
}
}
/>);
expect
(
profile
).
to
.
exist
;
<
ProfilePage
route
=
{
{
own
:
false
,
data
:
student
Session
}
}
params
=
{
{
id
:
3
}
}
/>);
profile
.
getProfile
().
then
(()
=>
expect
(
profile
.
state
.
name
).
to
.
equal
(
'
Gagal mendapatkan informasi
'
))
;
});
});
assets/js/__test__/components/CancelModal-test.jsx
View file @
87d5f682
...
...
@@ -29,6 +29,8 @@ describe('CancelModal', () => {
});
it
(
'
remove vacancy without problem
'
,
()
=>
{
const
fetchMock
=
require
(
'
fetch-mock
'
);
fetchMock
.
delete
(
'
*
'
,
{
data
:
'
value
'
})
const
modalPendaftaran
=
ReactTestUtils
.
renderIntoDocument
(
<
CancelModal
id
=
{
4
}
/>);
...
...
@@ -36,6 +38,7 @@ describe('CancelModal', () => {
Storage
.
set
(
'
user-data
'
,
response3
);
modalPendaftaran
.
removeVacancy
();
expect
(
modalPendaftaran
.
state
.
header
).
to
.
exist
;
fetchMock
.
restore
();
});
it
(
'
confirm without problem
'
,
()
=>
{
...
...
assets/js/index.jsx
View file @
87d5f682
...
...
@@ -31,7 +31,7 @@ export default class App extends React.Component {
handleHome
=
(
nextState
,
replace
)
=>
{
if
(
Server
.
isLoggedIn
())
{
Storage
.
get
(
'
user-data
'
).
student
?
replace
({
pathname
:
'
/lowongan
'
})
:
replace
({
pathname
:
'
/profile
'
});
Storage
.
get
(
'
user-data
'
).
student
?
replace
({
pathname
:
'
/lowongan
'
})
:
replace
({
pathname
:
'
/profile
'
});
}
else
{
replace
({
pathname
:
'
/login
'
});
}
...
...
@@ -42,7 +42,8 @@ export default class App extends React.Component {
<
Route
path
=
"/login"
component
=
{
Login
}
/>
<
Route
component
=
{
Dashboard
}
onEnter
=
{
this
.
handleAuth
}
>
<
Route
path
=
"/"
component
=
{
VacancyPage
}
/>
<
Route
path
=
"/profile"
component
=
{
ProfilePage
}
/>
<
Route
path
=
"/profile"
component
=
{
ProfilePage
}
data
=
{
Storage
.
get
(
'
user-data
'
)
}
own
=
{
true
}
/>
<
Route
path
=
"/mahasiswa/:id"
component
=
{
ProfilePage
}
data
=
{
Storage
.
get
(
'
user-data
'
)
}
own
=
{
false
}
/>
<
Route
path
=
"/lowongan"
component
=
{
VacancyPage
}
/>
<
Route
path
=
"/users"
component
=
{
Profile
}
/>
</
Route
>
...
...
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