From 41e04392874b139cbc8ace4e438c5d6a36538c02 Mon Sep 17 00:00:00 2001 From: tyagita <tiagita@gmail.com> Date: Thu, 5 Dec 2019 17:12:22 +0700 Subject: [PATCH 1/5] Add section skills in Profilepage --- assets/js/ProfilePage.jsx | 302 +++++++++++++++++++------------------- 1 file changed, 154 insertions(+), 148 deletions(-) diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx index 53d7799b..3c22836e 100755 --- a/assets/js/ProfilePage.jsx +++ b/assets/js/ProfilePage.jsx @@ -96,7 +96,7 @@ export default class ProfilePage extends ProfileHandler { github_url: '', gitlab_url: '', awards: '', - sertifikat:'', + sertifikat: '', projects: '', certification: '', languages: '', @@ -328,7 +328,7 @@ export default class ProfilePage extends ProfileHandler { <p> {' '} {this.state.major || 'N/A'} -, + , {' '} {this.state.batch || 'N/A'} {' '} @@ -389,7 +389,7 @@ export default class ProfilePage extends ProfileHandler { <p> {' '} {this.state.cityOfBirth || 'N/A'} -, + , {' '} {this.state.dateOfBirth || 'N/A'} {' '} @@ -427,21 +427,6 @@ export default class ProfilePage extends ProfileHandler { </Grid> </Segment> - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="pencil alternate" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <p href={this.state.student_toefl}> - {' '} - {this.state.student_toefl || 'N/A'} - {' '} - </p> - </Grid.Column> - </Grid> - </Segment> - <Segment basic vertical> <Grid> <Grid.Column width={2}> @@ -488,20 +473,6 @@ export default class ProfilePage extends ProfileHandler { </Grid.Column> </Grid> </Segment> - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="cogs" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <p> - {' '} - {this.state.skills || 'Skills belum ditambahkan'} - {' '} - </p> - </Grid.Column> - </Grid> - </Segment> <Segment basic vertical> <Grid> <Grid.Column width={2}> @@ -618,22 +589,6 @@ export default class ProfilePage extends ProfileHandler { </Grid.Column> </Grid> </Segment> - - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="comment" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <p> - {' '} - {this.state.languages || 'N/A'} - {' '} - </p> - </Grid.Column> - </Grid> - </Segment> - <Segment basic vertical> <Grid> <Grid.Column width={2}> @@ -754,7 +709,7 @@ export default class ProfilePage extends ProfileHandler { </Segment> <Container textAlign="center"> <div className="buttonProfile"> - <Button + <Button onClick={this.gotoStudentToeflFile} disabled={!this.state.student_toefl_file} primary @@ -810,120 +765,171 @@ export default class ProfilePage extends ProfileHandler { </p> </Message> ) : ( - <Message negative> - <Message.Header>Tidak mencari pekerjaan</Message.Header> - <p> + <Message negative> + <Message.Header>Tidak mencari pekerjaan</Message.Header> + <p> Saya sedang tidak mencari pekerjaan. Mohon jangan kirimkan informasi mengenai lowongan pekerjaan. </p> - </Message> - )} + </Message> + )} </h4> </div> </Segment> - <Segment className="links-form"> - <h3>Links</h3> + <Segment> + <h3>Skills</h3> <Grid stackable> <Grid.Column width={6}> - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="linkify" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <a href={this.state.portfolio_link}> - {' '} - {this.state.portfolio_link || 'Portofolio belum ditambahkan'} - {' '} - </a> - </Grid.Column> - </Grid> - </Segment> - - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="linkedin" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <a href={this.state.linkedin_url}> - {' '} - {this.state.linkedin_url || 'N/A'} - {' '} - </a> - </Grid.Column> - </Grid> - </Segment> + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="cogs" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <p> + {' '} + {this.state.skills || 'Skills belum ditambahkan'} + {' '} + </p> + </Grid.Column> + </Grid> + </Segment> + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="comment" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <p> + {' '} + {this.state.languages || 'N/A'} + {' '} + </p> + </Grid.Column> + </Grid> + </Segment> + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="pencil alternate" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <p href={this.state.student_toefl}> + {' '} + {this.state.student_toefl || 'N/A'} + {' '} + </p> + </Grid.Column> + </Grid> + </Segment> - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="hackerrank" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <a href={this.state.hackerrank_url}> - {' '} - {this.state.hackerrank_url || 'N/A'} - {' '} - </a> - </Grid.Column> - </Grid> + </Grid.Column> + </Grid> </Segment> - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="globe" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <a href={this.state.website_url}> - {' '} - {this.state.website_url || 'N/A'} - {' '} - </a> - </Grid.Column> - </Grid> - </Segment> - - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="github" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - {this.state.github_url ? ( - <a href={this.state.github_url}> + <Segment className="links-form"> + <h3>Links</h3> + <Grid stackable> + <Grid.Column width={6}> + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="linkify" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <a href={this.state.portfolio_link}> + {' '} + {this.state.portfolio_link || 'Portofolio belum ditambahkan'} + {' '} + </a> + </Grid.Column> + </Grid> + </Segment> + + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="linkedin" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <a href={this.state.linkedin_url}> + {' '} + {this.state.linkedin_url || 'N/A'} + {' '} + </a> + </Grid.Column> + </Grid> + </Segment> + + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="hackerrank" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <a href={this.state.hackerrank_url}> + {' '} + {this.state.hackerrank_url || 'N/A'} + {' '} + </a> + </Grid.Column> + </Grid> + </Segment> + + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="globe" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <a href={this.state.website_url}> + {' '} + {this.state.website_url || 'N/A'} + {' '} + </a> + </Grid.Column> + </Grid> + </Segment> + + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="github" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + {this.state.github_url ? ( + <a href={this.state.github_url}> + {' '} + {this.state.github_url} + {' '} + </a> + ) : ( + <p> N/A </p> + )} + </Grid.Column> + </Grid> + </Segment> + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="gitlab" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + { + this.state.gitlab_url + ? ( + <a href={this.state.gitlab_url}> {' '} - {this.state.github_url} + {this.state.gitlab_url} {' '} </a> - ) : ( - <p> N/A </p> - )} - </Grid.Column> - </Grid> - </Segment> - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="gitlab" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - { - this.state.gitlab_url - ? ( - <a href={this.state.gitlab_url}> - {' '} - { this.state.gitlab_url } - {' '} - </a> - ) - : <p> N/A </p> - } - </Grid.Column> - </Grid> - </Segment> + ) + : <p> N/A </p> + } + </Grid.Column> + </Grid> + </Segment> </Grid.Column> </Grid> </Segment> -- GitLab From b00eb7ccd1b5b4cc8f1ffd120017ef53f3d62b9a Mon Sep 17 00:00:00 2001 From: tyagita <tiagita@gmail.com> Date: Thu, 5 Dec 2019 17:14:56 +0700 Subject: [PATCH 2/5] Add section skills in EditProfilePage --- assets/js/EditProfile.jsx | 203 ++++++++++++++++++++++++++------------ 1 file changed, 142 insertions(+), 61 deletions(-) diff --git a/assets/js/EditProfile.jsx b/assets/js/EditProfile.jsx index dadbd4d2..4bac8d25 100644 --- a/assets/js/EditProfile.jsx +++ b/assets/js/EditProfile.jsx @@ -11,9 +11,10 @@ import { import Server from './lib/Server'; import Storage from './lib/Storage'; import ModalAlert from './components/ModalAlert'; -import ProfileHandler from './ProfileHandler'; +import Dumper from './lib/Dumper'; +import { isFromGithubLinkValid } from './Utils'; -export default class EditProfile extends ProfileHandler { +export default class EditProfile extends React.Component { static propTypes = { route: PropTypes.object.isRequired, params: PropTypes.object.isRequired, @@ -156,6 +157,72 @@ export default class EditProfile extends ProfileHandler { return dateIndexArray.reverse().join(' '); } + handleSubmit = (e) => { + e.preventDefault(); + if (!isFromGithubLinkValid(this.state.form.github_url)) { + this.modalAlert.open( + 'Pembaharuan profil gagal', + 'Pastikan link github yang anda tulis benar.(Berpola : https://github.com/<username>', + ); + } else { + const submitForm = {}; + Object.keys(this.state.form).forEach((key) => { + if (this.state.form[key] !== '') { + submitForm[key] = this.state.form[key]; + } + }); + this.setState({ loading: true }); + Server.submit( + `/students/${this.state.id}/profile/`, + submitForm, + 'PATCH', + ).then( + () => { + this.setState({ loading: false }); + this.modalAlert.open( + 'Profil berhasil diperbaharui', + 'Silakan periksa kembali profil anda', + this.getProfile, + ); + }, + (error) => error.then((r) => { + this.setState({ loading: false }); + this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r)); + }), + ); + } + }; + + handleFile = (e) => { + const { form } = this.state; + form[e.target.name] = e.target.files[0]; + this.setState({ form }); + }; + + handleChange = (e) => { + const { form } = this.state; + form[e.target.name] = e.target.value; + this.setState({ form }); + }; + + handleCheckbox = (e, d) => { + const { form } = this.state; + form[d.name] = d.checked; + this.setState({ form, show_transcript: d.checked }); + }; + + handleRadioGender = (e, { value }) => { + const { form } = this.state; + form.gender = value; + this.setState({ form }); + }; + + handleRadio = (e, { value }) => { + const { form } = this.state; + form.job_seeking_status = value; + this.setState({ form }); + }; + updateForm(show) { if (show) { return ( @@ -270,15 +337,6 @@ export default class EditProfile extends ProfileHandler { name="alamat" /> </Form.Field> - <Form.Field> - <label htmlFor="skills">Skills</label> - <input - onChange={this.handleChange} - placeholder="Isi sesuai dengan keahlian anda" - defaultValue={this.state.skills === null ? 'Competitive Programming' : this.state.skills} - name="skills" - /> - </Form.Field> <Form.Field> <label htmlFor="latest_work">Latest Working Experience</label> <input @@ -345,39 +403,6 @@ export default class EditProfile extends ProfileHandler { name="projects" /> </Form.Field> - <Form.Field> - <label htmlFor="certification">Sertifikasi</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.certification === null - ? 'TOEFL' - : this.state.certification - } - defaultValue={ - this.state.certification === null - ? null - : this.state.certification - } - name="certification" - /> - </Form.Field> - <Form.Field> - <label htmlFor="languages">Bahasa yang dikuasai</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.languages === null - ? 'Indonesia' - : this.state.languages - } - defaultValue={ - this.state.languages === null ? null : this.state.languages - } - name="languages" - /> - </Form.Field> - <Form.Field> <label htmlFor="seminar">Seminar dan Training</label> <input @@ -498,6 +523,76 @@ export default class EditProfile extends ProfileHandler { </Form.Field> <Form.Field> + <label htmlFor="dependants">Dependants</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.dependants === null ? '0' : this.state.dependants + } + defaultValue={ + this.state.dependants === null ? null : this.state.dependants + } + name="dependants" + /> + </Form.Field> + </Form> + </Segment> + + <Segment> + <Header as="h3" textAlign="center"> + <Icon name="edit" /> + <Header.Content>Edit Skills</Header.Content> + </Header> + <Form + ref={(input) => { + this.form = input; + }} + key={this.state.refresh} + size="small" + onSubmit={this.handleSubmit} + > + <Form.Field> + <label htmlFor="skills">Skills</label> + <input + onChange={this.handleChange} + placeholder="Isi sesuai dengan keahlian anda" + defaultValue={this.state.skills === null ? 'Competitive Programming' : this.state.skills} + name="skills" + /> + </Form.Field> + <Form.Field> + <label htmlFor="languages">Bahasa yang dikuasai</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.languages === null + ? 'Indonesia' + : this.state.languages + } + defaultValue={ + this.state.languages === null ? null : this.state.languages + } + name="languages" + /> + </Form.Field> + <Form.Field> + <label htmlFor="certification">Sertifikasi</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.certification === null + ? 'TOEFL' + : this.state.certification + } + defaultValue={ + this.state.certification === null + ? null + : this.state.certification + } + name="certification" + /> + </Form.Field> + <Form.Field> <label htmlFor="student_toefl">TOEFL</label> <input onChange={this.handleChange} @@ -520,22 +615,8 @@ export default class EditProfile extends ProfileHandler { type="File" /> </Form.Field> - - <Form.Field> - <label htmlFor="dependants">Dependants</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.dependants === null ? '0' : this.state.dependants - } - defaultValue={ - this.state.dependants === null ? null : this.state.dependants - } - name="dependants" - /> - </Form.Field> - </Form> - </Segment> + </Form> + </Segment> <Segment className="links-form"> <Header as="h3" textAlign="center"> @@ -655,4 +736,4 @@ export default class EditProfile extends ProfileHandler { <div className="profilePage">{this.updateForm(this.props.route.own)}</div> ); } -} +} \ No newline at end of file -- GitLab From 7f99314e3d215bafc6fe311ac1101d90462c6d09 Mon Sep 17 00:00:00 2001 From: tyagita <tiagita@gmail.com> Date: Thu, 5 Dec 2019 17:34:11 +0700 Subject: [PATCH 3/5] Fixing editprofile and profile page --- assets/js/EditProfile.jsx | 811 +++++++++++++++++++------------------- assets/js/ProfilePage.jsx | 29 +- 2 files changed, 419 insertions(+), 421 deletions(-) diff --git a/assets/js/EditProfile.jsx b/assets/js/EditProfile.jsx index 4bac8d25..8e9cec2f 100644 --- a/assets/js/EditProfile.jsx +++ b/assets/js/EditProfile.jsx @@ -227,318 +227,318 @@ export default class EditProfile extends React.Component { if (show) { return ( <div className="editProfile"> - <Segment className="profile-form"> - <Header as="h3" textAlign="center"> - <Icon name="edit" /> - <Header.Content>Edit Profile Page</Header.Content> - </Header> - <ModalAlert - ref={(modal) => { - this.modalAlert = modal; - }} - /> - <Form - ref={(input) => { - this.form = input; - }} - key={this.state.refresh} - size="small" - > - <Form.Field> - <label htmlFor="photo">Profile Picture</label> - <input - onChange={this.handleFile} - placeholder="Profile Photo.jpg" - name="photo" - type="File" - /> - </Form.Field> - <Form.Field> - <label htmlFor="email">Email</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.email === null - ? 'jojon@email.com' - : this.state.email - } - defaultValue={ - this.state.email === null ? null : this.state.email - } - name="email" - /> - </Form.Field> - <Form.Field> - <label htmlFor="phone_number">No. Hp</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.phone_number === null - ? '08123456789' - : this.state.phone_number - } - defaultValue={ - this.state.phone_number === null - ? null - : this.state.phone_number - } - name="phone_number" - /> - </Form.Field> - <Form.Field> - <label htmlFor="gender">Jenis Kelamin</label> - <Form.Radio - label="Perempuan" - name="gender" - value="Perempuan" - onClick={this.handleRadioGender} - /> - <Form.Radio - label="Laki-laki" - name="gender" - value="Laki-laki" - onClick={this.handleRadioGender} - /> - </Form.Field> - <Form.Field> - <label htmlFor="self_description">Deskripsi Diri</label> - <input - onChange={this.handleChange} - placeholder="Saya suka belajar" - name="self_description" - /> - </Form.Field> - - <Form.Field> - <label htmlFor="region">Region</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.region === null ? 'Indonesia' : this.state.region - } - defaultValue={ - this.state.region === null ? null : this.state.region - } - name="region" - /> - </Form.Field> - <Form.Field> - <label htmlFor="alamat">Alamat</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.alamat === null - ? 'JL. Satya Raya No.41' - : this.state.alamat - } - defaultValue={ - this.state.alamat === null ? null : this.state.alamat - } - name="alamat" - /> - </Form.Field> - <Form.Field> - <label htmlFor="latest_work">Latest Working Experience</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.latest_work === null - ? 'Teaching Asssistant at Fasilkom UI' - : this.state.latest_work - } - defaultValue={ - this.state.latest_work === null - ? null - : this.state.latest_work - } - name="latest_work" - /> - </Form.Field> - <Form.Field> - <label htmlFor="latest_work_desc"> - Latest Working Experience Description + <Segment className="profile-form"> + <Header as="h3" textAlign="center"> + <Icon name="edit" /> + <Header.Content>Edit Profile Page</Header.Content> + </Header> + <ModalAlert + ref={(modal) => { + this.modalAlert = modal; + }} + /> + <Form + ref={(input) => { + this.form = input; + }} + key={this.state.refresh} + size="small" + > + <Form.Field> + <label htmlFor="photo">Profile Picture</label> + <input + onChange={this.handleFile} + placeholder="Profile Photo.jpg" + name="photo" + type="File" + /> + </Form.Field> + <Form.Field> + <label htmlFor="email">Email</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.email === null + ? 'jojon@email.com' + : this.state.email + } + defaultValue={ + this.state.email === null ? null : this.state.email + } + name="email" + /> + </Form.Field> + <Form.Field> + <label htmlFor="phone_number">No. Hp</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.phone_number === null + ? '08123456789' + : this.state.phone_number + } + defaultValue={ + this.state.phone_number === null + ? null + : this.state.phone_number + } + name="phone_number" + /> + </Form.Field> + <Form.Field> + <label htmlFor="gender">Jenis Kelamin</label> + <Form.Radio + label="Perempuan" + name="gender" + value="Perempuan" + onClick={this.handleRadioGender} + /> + <Form.Radio + label="Laki-laki" + name="gender" + value="Laki-laki" + onClick={this.handleRadioGender} + /> + </Form.Field> + <Form.Field> + <label htmlFor="self_description">Deskripsi Diri</label> + <input + onChange={this.handleChange} + placeholder="Saya suka belajar" + name="self_description" + /> + </Form.Field> + + <Form.Field> + <label htmlFor="region">Region</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.region === null ? 'Indonesia' : this.state.region + } + defaultValue={ + this.state.region === null ? null : this.state.region + } + name="region" + /> + </Form.Field> + <Form.Field> + <label htmlFor="alamat">Alamat</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.alamat === null + ? 'JL. Satya Raya No.41' + : this.state.alamat + } + defaultValue={ + this.state.alamat === null ? null : this.state.alamat + } + name="alamat" + /> + </Form.Field> + <Form.Field> + <label htmlFor="latest_work">Latest Working Experience</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.latest_work === null + ? 'Teaching Asssistant at Fasilkom UI' + : this.state.latest_work + } + defaultValue={ + this.state.latest_work === null + ? null + : this.state.latest_work + } + name="latest_work" + /> + </Form.Field> + <Form.Field> + <label htmlFor="latest_work_desc"> + Latest Working Experience Description </label> - <input - onChange={this.handleChange} - placeholder={ - this.state.latest_work_desc === null - ? 'Evaluate weekly assignment for 15 students' - : this.state.latest_work_desc - } - defaultValue={ - this.state.latest_work_desc === null - ? null - : this.state.latest_work_desc - } - name="latest_work_desc" - /> - </Form.Field> - <Form.Field> - <label htmlFor="awards">Awards and Achievements</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.awards === null - ? 'Juara 2 UIUX Gemastik 2019' - : this.state.awards - } - defaultValue={ - this.state.awards === null ? null : this.state.awards - } - name="awards" - /> - </Form.Field> - <Form.Field> - <label htmlFor="projects">Projects</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.projects === null - ? 'Ow-Jek - Android Mobile Project' - : this.state.projects - } - defaultValue={ - this.state.projects === null ? null : this.state.projects - } - name="projects" - /> - </Form.Field> - <Form.Field> - <label htmlFor="seminar">Seminar dan Training</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.seminar === null - ? 'Seminar CompFest' - : this.state.seminar - } - defaultValue={ - this.state.seminar === null ? null : this.state.seminar - } - name="seminar" - /> - </Form.Field> + <input + onChange={this.handleChange} + placeholder={ + this.state.latest_work_desc === null + ? 'Evaluate weekly assignment for 15 students' + : this.state.latest_work_desc + } + defaultValue={ + this.state.latest_work_desc === null + ? null + : this.state.latest_work_desc + } + name="latest_work_desc" + /> + </Form.Field> + <Form.Field> + <label htmlFor="awards">Awards and Achievements</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.awards === null + ? 'Juara 2 UIUX Gemastik 2019' + : this.state.awards + } + defaultValue={ + this.state.awards === null ? null : this.state.awards + } + name="awards" + /> + </Form.Field> + <Form.Field> + <label htmlFor="projects">Projects</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.projects === null + ? 'Ow-Jek - Android Mobile Project' + : this.state.projects + } + defaultValue={ + this.state.projects === null ? null : this.state.projects + } + name="projects" + /> + </Form.Field> + <Form.Field> + <label htmlFor="seminar">Seminar dan Training</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.seminar === null + ? 'Seminar CompFest' + : this.state.seminar + } + defaultValue={ + this.state.seminar === null ? null : this.state.seminar + } + name="seminar" + /> + </Form.Field> - <Form.Field> - <label htmlFor="interests">Interests</label> - <input - onChange={this.handleChange} - placeholder={this.state.interests === null ? 'Machine Learning' : this.state.interests} - defaultValue={this.state.interests === null ? null : this.state.interests} - name="interests" - /> - </Form.Field> + <Form.Field> + <label htmlFor="interests">Interests</label> + <input + onChange={this.handleChange} + placeholder={this.state.interests === null ? 'Machine Learning' : this.state.interests} + defaultValue={this.state.interests === null ? null : this.state.interests} + name="interests" + /> + </Form.Field> - <Form.Field> - <label htmlFor="related_course">Related Coursework Taken</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.related_course === null - ? 'Intraction System, Machine Learning' - : this.state.related_course - } - defaultValue={ - this.state.related_course === null ? null : this.state.related_course - } - name="related_course" - /> - </Form.Field> + <Form.Field> + <label htmlFor="related_course">Related Coursework Taken</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.related_course === null + ? 'Intraction System, Machine Learning' + : this.state.related_course + } + defaultValue={ + this.state.related_course === null ? null : this.state.related_course + } + name="related_course" + /> + </Form.Field> - <Form.Field> - <label htmlFor="resume">Resume</label> - <input - onChange={this.handleFile} - placeholder="Resume" - name="resume" - type="File" - /> - </Form.Field> - <Form.Field> - <label htmlFor="expected_salary">Expected Salary</label> - <input onChange={this.handleChange} placeholder="2000000" name="expected_salary" /> - </Form.Field> - <Form.Field> - <label htmlFor="intro">Intro</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.intro === null - ? 'Ceritakan dirimu secara singkat' - : this.state.intro - } - defaultValue={ - this.state.intro === null ? null : this.state.intro - } - name="intro" - /> - </Form.Field> - <Form.Field> - <label htmlFor="volunteer">Volunteering Experience</label> - <input - onChange={this.handleChange} - placeholder="Ketua Organisasi A - 2020" - name="volunteer" - /> - </Form.Field> - <Form.Field> - <label htmlFor="intro">Status Pencarian Kerja</label> - <Form.Radio - label="Aktif" - name="job_seeking_status" - value="Active" - onClick={this.handleRadio} - /> - <Form.Radio - label="Pasif" - name="job_seeking_status" - value="Passive" - onClick={this.handleRadio} - /> - </Form.Field> - <Form.Field> - <Checkbox - onChange={this.handleCheckbox} - checked={!!this.state.show_transcript} - label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya" - name="show_transcript" - /> - </Form.Field> - <Form.Field> - <label htmlFor="student_gpa">GPA</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.student_gpa === null - ? '3.50' - : this.state.student_gpa - } - defaultValue={ - this.state.student_gpa === null - ? null - : this.state.student_gpa - } - name="student_gpa" - /> - </Form.Field> + <Form.Field> + <label htmlFor="resume">Resume</label> + <input + onChange={this.handleFile} + placeholder="Resume" + name="resume" + type="File" + /> + </Form.Field> + <Form.Field> + <label htmlFor="expected_salary">Expected Salary</label> + <input onChange={this.handleChange} placeholder="2000000" name="expected_salary" /> + </Form.Field> + <Form.Field> + <label htmlFor="intro">Intro</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.intro === null + ? 'Ceritakan dirimu secara singkat' + : this.state.intro + } + defaultValue={ + this.state.intro === null ? null : this.state.intro + } + name="intro" + /> + </Form.Field> + <Form.Field> + <label htmlFor="volunteer">Volunteering Experience</label> + <input + onChange={this.handleChange} + placeholder="Ketua Organisasi A - 2020" + name="volunteer" + /> + </Form.Field> + <Form.Field> + <label htmlFor="intro">Status Pencarian Kerja</label> + <Form.Radio + label="Aktif" + name="job_seeking_status" + value="Active" + onClick={this.handleRadio} + /> + <Form.Radio + label="Pasif" + name="job_seeking_status" + value="Passive" + onClick={this.handleRadio} + /> + </Form.Field> + <Form.Field> + <Checkbox + onChange={this.handleCheckbox} + checked={!!this.state.show_transcript} + label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya" + name="show_transcript" + /> + </Form.Field> + <Form.Field> + <label htmlFor="student_gpa">GPA</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.student_gpa === null + ? '3.50' + : this.state.student_gpa + } + defaultValue={ + this.state.student_gpa === null + ? null + : this.state.student_gpa + } + name="student_gpa" + /> + </Form.Field> - <Form.Field> - <label htmlFor="dependants">Dependants</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.dependants === null ? '0' : this.state.dependants - } - defaultValue={ - this.state.dependants === null ? null : this.state.dependants - } - name="dependants" - /> - </Form.Field> - </Form> - </Segment> + <Form.Field> + <label htmlFor="dependants">Dependants</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.dependants === null ? '0' : this.state.dependants + } + defaultValue={ + this.state.dependants === null ? null : this.state.dependants + } + name="dependants" + /> + </Form.Field> + </Form> + </Segment> - <Segment> + <Segment> <Header as="h3" textAlign="center"> <Icon name="edit" /> <Header.Content>Edit Skills</Header.Content> @@ -549,7 +549,6 @@ export default class EditProfile extends React.Component { }} key={this.state.refresh} size="small" - onSubmit={this.handleSubmit} > <Form.Field> <label htmlFor="skills">Skills</label> @@ -618,111 +617,111 @@ export default class EditProfile extends React.Component { </Form> </Segment> - <Segment className="links-form"> - <Header as="h3" textAlign="center"> - <Icon name="edit" /> - <Header.Content>Edit Links</Header.Content> - </Header> - <Form - ref={(input) => { - this.form = input; - }} - key={this.state.refresh} - size="small" - onSubmit={this.handleSubmit} - > + <Segment className="links-form"> + <Header as="h3" textAlign="center"> + <Icon name="edit" /> + <Header.Content>Edit Links</Header.Content> + </Header> + <Form + ref={(input) => { + this.form = input; + }} + key={this.state.refresh} + size="small" + > - <Form.Field> - <label htmlFor="portfolio_link">Portfolio Link</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.portfolio_link === null - ? 'https://www.example.com/myproject/' - : this.state.portfolio_link - } - defaultValue={ - this.state.portfolio_link === null - ? null - : this.state.portfolio_link - } - name="portfolio_link" - /> - </Form.Field> + <Form.Field> + <label htmlFor="portfolio_link">Portfolio Link</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.portfolio_link === null + ? 'https://www.example.com/myproject/' + : this.state.portfolio_link + } + defaultValue={ + this.state.portfolio_link === null + ? null + : this.state.portfolio_link + } + name="portfolio_link" + /> + </Form.Field> - <Form.Field> - <label htmlFor="linkedin_url">URL Profile LinkedIn</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.linkedin_url === null - ? 'https://www.linkedin.com/in/jojo/' - : this.state.linkedin_url - } - defaultValue={ - this.state.linkedin_url === null - ? null - : this.state.linkedin_url - } - name="linkedin_url" - /> - </Form.Field> + <Form.Field> + <label htmlFor="linkedin_url">URL Profile LinkedIn</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.linkedin_url === null + ? 'https://www.linkedin.com/in/jojo/' + : this.state.linkedin_url + } + defaultValue={ + this.state.linkedin_url === null + ? null + : this.state.linkedin_url + } + name="linkedin_url" + /> + </Form.Field> - <Form.Field> - <label htmlFor="hackerrank_url">URL Profile Hackerrank</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.hackerrank_url === null - ? 'https://www.hackerrank.com/james' - : this.state.hackerrank_url - } - defaultValue={ - this.state.hackerrank_url === null - ? null - : this.state.hackerrank_url - } - name="hackerrank_url" - /> - </Form.Field> + <Form.Field> + <label htmlFor="hackerrank_url">URL Profile Hackerrank</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.hackerrank_url === null + ? 'https://www.hackerrank.com/james' + : this.state.hackerrank_url + } + defaultValue={ + this.state.hackerrank_url === null + ? null + : this.state.hackerrank_url + } + name="hackerrank_url" + /> + </Form.Field> - <Form.Field> - <label htmlFor="website_url">Website URL</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.website_url === null - ? 'https://www.example.com/' - : this.state.website_url - } - defaultValue={ - this.state.website_url === null - ? null - : this.state.website_url - } - name="website_url" - /> - </Form.Field> + <Form.Field> + <label htmlFor="website_url">Website URL</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.website_url === null + ? 'https://www.example.com/' + : this.state.website_url + } + defaultValue={ + this.state.website_url === null + ? null + : this.state.website_url + } + name="website_url" + /> + </Form.Field> - <Form.Field> - <label htmlFor="github_url">URL Profile Github</label> - <input - onChange={this.handleChange} - placeholder={this.state.github_url === null ? 'https://github.com/bob' : this.state.github_url} - defaultValue={this.state.github_url === null ? null : this.state.github_url} - name="github_url" - /> - </Form.Field> + <Form.Field> + <label htmlFor="github_url">URL Profile Github</label> + <input + onChange={this.handleChange} + placeholder={this.state.github_url === null ? 'https://github.com/bob' : this.state.github_url} + defaultValue={this.state.github_url === null ? null : this.state.github_url} + name="github_url" + /> + </Form.Field> </Form> - </Segment> - <Button onClick={this.handleSubmit} - fluid - type="submit" - size="small" - loading={this.state.loading} - primary - > - Submit + </Segment> + <Button + onClick={this.handleSubmit} + fluid + type="submit" + size="small" + loading={this.state.loading} + primary + > + Submit </Button> </div> ); diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx index 88012ecf..8a2d10a0 100755 --- a/assets/js/ProfilePage.jsx +++ b/assets/js/ProfilePage.jsx @@ -573,21 +573,6 @@ export default class ProfilePage extends ProfileHandler { </Grid.Column> </Grid> </Segment> - - <Segment basic vertical> - <Grid> - <Grid.Column width={2}> - <Icon name="certificate" size="big" /> - </Grid.Column> - <Grid.Column width={13}> - <p> - {' '} - {this.state.certification || 'N/A'} - {' '} - </p> - </Grid.Column> - </Grid> - </Segment> <Segment basic vertical> <Grid> <Grid.Column width={2}> @@ -808,6 +793,20 @@ export default class ProfilePage extends ProfileHandler { </Grid.Column> </Grid> </Segment> + <Segment basic vertical> + <Grid> + <Grid.Column width={2}> + <Icon name="certificate" size="big" /> + </Grid.Column> + <Grid.Column width={13}> + <p> + {' '} + {this.state.certification || 'N/A'} + {' '} + </p> + </Grid.Column> + </Grid> + </Segment> <Segment basic vertical> <Grid> <Grid.Column width={2}> -- GitLab From 59b53de92fb3b87f9bb87327fb1f6bf4663ddc64 Mon Sep 17 00:00:00 2001 From: tyagita <tiagita@gmail.com> Date: Thu, 5 Dec 2019 20:25:39 +0700 Subject: [PATCH 4/5] merge conflict with master --- assets/js/EditProfile.jsx | 132 ++++++++++++++++++-------------------- 1 file changed, 64 insertions(+), 68 deletions(-) diff --git a/assets/js/EditProfile.jsx b/assets/js/EditProfile.jsx index fb783206..c27ba056 100644 --- a/assets/js/EditProfile.jsx +++ b/assets/js/EditProfile.jsx @@ -389,29 +389,6 @@ export default class EditProfile extends React.Component { name="volunteer" /> </Form.Field> - <Form.Field> - <label htmlFor="intro">Status Pencarian Kerja</label> - <Form.Radio - label="Aktif" - name="job_seeking_status" - value="Active" - onClick={this.handleRadio} - /> - <Form.Radio - label="Pasif" - name="job_seeking_status" - value="Passive" - onClick={this.handleRadio} - /> - </Form.Field> - <Form.Field> - <Checkbox - onChange={this.handleCheckbox} - checked={!!this.state.show_transcript} - label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya" - name="show_transcript" - /> - </Form.Field> <Form.Field> <label htmlFor="student_gpa">GPA</label> <input @@ -429,7 +406,6 @@ export default class EditProfile extends React.Component { name="student_gpa" /> </Form.Field> - <Form.Field> <label htmlFor="resume">Resume</label> <input @@ -458,29 +434,6 @@ export default class EditProfile extends React.Component { name="intro" /> </Form.Field> - <Form.Field> - <label htmlFor="intro">Status Pencarian Kerja</label> - <Form.Radio - label="Aktif" - name="job_seeking_status" - value="Active" - onClick={this.handleRadio} - /> - <Form.Radio - label="Pasif" - name="job_seeking_status" - value="Passive" - onClick={this.handleRadio} - /> - </Form.Field> - <Form.Field> - <Checkbox - onChange={this.handleCheckbox} - checked={!!this.state.show_transcript} - label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya" - name="show_transcript" - /> - </Form.Field> <Form.Field> <label htmlFor="student_gpa">GPA</label> <input @@ -498,9 +451,6 @@ export default class EditProfile extends React.Component { name="student_gpa" /> </Form.Field> - - - <Form.Field> <label htmlFor="dependants">Dependants</label> <input @@ -514,6 +464,29 @@ export default class EditProfile extends React.Component { name="dependants" /> </Form.Field> + <Form.Field> + <label htmlFor="intro">Status Pencarian Kerja</label> + <Form.Radio + label="Aktif" + name="job_seeking_status" + value="Active" + onClick={this.handleRadio} + /> + <Form.Radio + label="Pasif" + name="job_seeking_status" + value="Passive" + onClick={this.handleRadio} + /> + </Form.Field> + <Form.Field> + <Checkbox + onChange={this.handleCheckbox} + checked={!!this.state.show_transcript} + label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya" + name="show_transcript" + /> + </Form.Field> </Form> </Segment> @@ -585,24 +558,6 @@ export default class EditProfile extends React.Component { /> </Form.Field> - <Form.Field> - <label htmlFor="certification">Sertifikasi</label> - <input - onChange={this.handleChange} - placeholder={ - this.state.certification === null - ? 'TOEFL' - : this.state.certification - } - defaultValue={ - this.state.certification === null - ? null - : this.state.certification - } - name="certification" - /> - </Form.Field> - <Form.Field> <label htmlFor="projects">Projects</label> <input @@ -683,8 +638,49 @@ export default class EditProfile extends React.Component { name="languages" /> </Form.Field> + <Form.Field> + <label htmlFor="certification">Sertifikasi</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.certification === null + ? 'TOEFL' + : this.state.certification + } + defaultValue={ + this.state.certification === null + ? null + : this.state.certification + } + name="certification" + /> + </Form.Field> + <Form.Field> + <label htmlFor="student_toefl">TOEFL</label> + <input + onChange={this.handleChange} + placeholder={ + this.state.student_toefl === null + ? '400' + : this.state.student_toefl + } + defaultValue={ + this.state.student_toefl === null + ? null + : this.state.student_toefl + } + name="student_toefl" + /> + <input + onChange={this.handleFile} + placeholder="TOEFL file" + name="student_toefl_file" + type="File" + /> + </Form.Field> </Form> </Segment> + <Segment className="links-form"> <Header as="h3" textAlign="center"> <Icon name="edit" /> -- GitLab From 5adfc1552550e1ecf15825a0de29b5d95cf959d2 Mon Sep 17 00:00:00 2001 From: tyagita <tiagita@gmail.com> Date: Thu, 5 Dec 2019 20:55:25 +0700 Subject: [PATCH 5/5] Fixing duplication code --- assets/js/EditProfile.jsx | 71 +----------------------------------- assets/js/ProfileHandler.jsx | 1 + 2 files changed, 3 insertions(+), 69 deletions(-) diff --git a/assets/js/EditProfile.jsx b/assets/js/EditProfile.jsx index c27ba056..a6510952 100644 --- a/assets/js/EditProfile.jsx +++ b/assets/js/EditProfile.jsx @@ -11,10 +11,9 @@ import { import Server from './lib/Server'; import Storage from './lib/Storage'; import ModalAlert from './components/ModalAlert'; -import Dumper from './lib/Dumper'; -import { isFromGithubLinkValid } from './Utils'; +import ProfileHandler from './ProfileHandler'; -export default class EditProfile extends React.Component { +export default class EditProfile extends ProfileHandler { static propTypes = { route: PropTypes.object.isRequired, params: PropTypes.object.isRequired, @@ -157,72 +156,6 @@ export default class EditProfile extends React.Component { return dateIndexArray.reverse().join(' '); } - handleSubmit = (e) => { - e.preventDefault(); - if (!isFromGithubLinkValid(this.state.form.github_url)) { - this.modalAlert.open( - 'Pembaharuan profil gagal', - 'Pastikan link github yang anda tulis benar.(Berpola : https://github.com/<username>', - ); - } else { - const submitForm = {}; - Object.keys(this.state.form).forEach((key) => { - if (this.state.form[key] !== '') { - submitForm[key] = this.state.form[key]; - } - }); - this.setState({ loading: true }); - Server.submit( - `/students/${this.state.id}/profile/`, - submitForm, - 'PATCH', - ).then( - () => { - this.setState({ loading: false }); - this.modalAlert.open( - 'Profil berhasil diperbaharui', - 'Silakan periksa kembali profil anda', - this.getProfile, - ); - }, - (error) => error.then((r) => { - this.setState({ loading: false }); - this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r)); - }), - ); - } - }; - - handleFile = (e) => { - const { form } = this.state; - form[e.target.name] = e.target.files[0]; - this.setState({ form }); - }; - - handleChange = (e) => { - const { form } = this.state; - form[e.target.name] = e.target.value; - this.setState({ form }); - }; - - handleCheckbox = (e, d) => { - const { form } = this.state; - form[d.name] = d.checked; - this.setState({ form, show_transcript: d.checked }); - }; - - handleRadioGender = (e, { value }) => { - const { form } = this.state; - form.gender = value; - this.setState({ form }); - }; - - handleRadio = (e, { value }) => { - const { form } = this.state; - form.job_seeking_status = value; - this.setState({ form }); - }; - updateForm(show) { if (show) { return ( diff --git a/assets/js/ProfileHandler.jsx b/assets/js/ProfileHandler.jsx index e21b96aa..40cb8ae4 100644 --- a/assets/js/ProfileHandler.jsx +++ b/assets/js/ProfileHandler.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import Server from './lib/Server'; import Dumper from './lib/Dumper'; import { isFromGithubLinkValid } from './Utils'; -- GitLab