Fakultas Ilmu Komputer UI

ProfilePage.jsx 5.96 KB
Newer Older
1
import React from 'react';
2
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form } from 'semantic-ui-react';
3
import Server from './lib/Server';
4
import ModalAlert from './components/ModalAlert';
5
6
7

export default class ProfilePage extends React.Component {

8
  static propTypes = {
9
10
    route: React.PropTypes.object.isRequired,
    params: React.PropTypes.object.isRequired,
11
    user: React.PropTypes.object.isRequired,
12
13
14
15
16
17
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
18
19
      id: '',
      npm: '',
20
21
22
23
24
25
26
      name: '',
      major: '',
      batch: '',
      email: '',
      cityOfBirth: '',
      dateOfBirth: '',
      resume: '',
27
28
29
      phone_number: '',
      show_transcript: '',
      photo: '',
30
31
      form: {
        picture: '',
32
        email: '',
33
        phone_number: '',
34
        resume: '',
35
        show_transcript: '',
36
      },
37
      bagikanTranskrip: '',
38
39
    };
    this.getProfile = this.getProfile.bind(this);
40
    this.handleChange = this.handleChange.bind(this);
41
    this.handleCheckbox = this.handleCheckbox.bind(this);
42
43
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFile = this.handleFile.bind(this);
44
    this.getProfile();
45
46
47
  }

  getProfile() {
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
    const id = this.props.route.own ? this.props.user.data.student.id : this.props.params.id;
    return Server.get(`/students/${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_number: data.phone_number,
        photo: data.photo,
        show_transcript: data.show_transcript,
        bagikanTranskrip: (data.show_transcript ? 'Ya' : 'Tidak'),
      });
    }, error => error.then(() => {
66
        // this.modalAlert.open('Gagal Mengambil ', r.error);
67
68
69
70
71
72
73
74
75
76
77
78
79
80
      this.state.name = 'Gagal mendapatkan informasi';
    }));
  }

  handleSubmit = (e) => {
    e.preventDefault();

    const submitForm = {};
    Object.keys(this.state.form).forEach((key) => {
      if (this.state.form[key] !== '') {
        submitForm[key] = this.state.form[key];
      }
    });
    Server.submit(`/profiles/students/${this.state.id}/`, submitForm, 'PATCH').then(() => {
81
      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda' );
82
83
84
85
86
87
88
89
90
91
    }, error => error.then((r) => {
      this.modalAlert.open('Pembaharuan profil gagal', r.error);
    }));
  };


  handleFile = (e) => {
    const form = this.state.form;
    form[e.target.name] = e.target.files[0];
    this.setState({ form });
92
  };
93

94
  handleChange = (e) => {
95
96
97
98
99
100
101
102
    const form = this.state.form;
    form[e.target.name] = e.target.value;
    this.setState({ form });
  };

  handleCheckbox = (e, d) => {
    const form = this.state.form;
    form[d.name] = d.checked;
103
    this.setState({ form, show_transcript: d.checked });
104
105
  };

106
107
108
  updateForm(show) {
    if (show) {
      return (
109
        <Segment className="profile-form">
110
111
112
113
114
115
          <Header as="h3" textAlign="center">
            <Icon name="edit" />
            <Header.Content>
              Edit Profile Page
            </Header.Content>
          </Header>
116
          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
117
          <Form size="small" onSubmit={this.handleSubmit}>
118
119
            <Form.Field>
              <label htmlFor="photo">Profile Picture</label>
120
              <input onChange={this.handleFile} placeholder="Profile Photo.jpg" name="photo" type="File" />
121
            </Form.Field>
122
123
            <Form.Field>
              <label htmlFor="email">Email</label>
124
              <input onChange={this.handleChange} placeholder="jojon@email.com" name="email" />
125
126
            </Form.Field>
            <Form.Field>
127
128
              <label htmlFor="phone_number">No. Hp</label>
              <input onChange={this.handleChange} placeholder="08123456789" name="phone_number" />
129
130
131
            </Form.Field>
            <Form.Field>
              <label htmlFor="resume">Resume</label>
132
              <input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
133
            </Form.Field>
134
135
136
            <Form.Field>
              <Checkbox
                onChange={this.handleCheckbox}
137
                checked={ this.state.show_transcript ? true : false }
138
                label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
139
                name="show_transcript"
140
141
              />
            </Form.Field>
142
143
            <Button type="submit" size="small" primary floated="right">Submit</Button>
          </Form>
144
        </Segment>
145
146
147
148
149
      );
    }

    return (<div />);
  }
150

151
  render() {
152
    const defaultPicture = 'http://semantic-ui.com/images/wireframe/square-image.png';
153
154
155
156
    return (
      <div className="profilePage">
        <Segment className="biodata-section">
          <Header as="h2" icon textAlign="center">
157
            <Image src={this.state.photo ? this.state.photo : defaultPicture} size="small" shape="circular" />
158
159
160
161
162
163
          </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>
164
              <h5> { this.state.phone_number } </h5>
165
166
167
              <h5> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h5>
            </div>
            <div className="button-profile">
168
              <a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a>
169
              { this.state.show_transcript &&
170
171
172
173
174
                <Button primary size="small">Transkrip</Button>
              }
            </div>
            <div>
              Bagikan Transkrip: <b>{ this.state.bagikanTranskrip }</b>
175
176
177
178
            </div>
          </Container>
        </Segment >
        { this.updateForm(this.props.route.own) }
179
180
181
182
183
      </div>

    );
  }
}