Fakultas Ilmu Komputer UI

ProfilePage.jsx 8.08 KB
Newer Older
1
import React from 'react';
M. Reza Qorib's avatar
M. Reza Qorib committed
2
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid } from 'semantic-ui-react';
3
import Server from './lib/Server';
4
import Storage from './lib/Storage';
5
import ModalAlert from './components/ModalAlert';
6
7
8

export default class ProfilePage extends React.Component {

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

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

  getProfile() {
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
    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,
67
        acceptedNo: data.accepted_no,
68
69
        bagikanTranskrip: data.show_transcript,
        refresh: this.state.refresh + 1,
70
      });
71
72
73
74
75
76
      if (this.props.route.own) {
        const newSession = this.props.user.data;
        newSession.student = data;
        Storage.set('user-data', newSession);
        window.scrollTo(0, 0);
      }
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
    }, error => error.then(() => {
      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(() => {
92
      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.getProfile);
93
    }, error => error.then((r) => {
94
      this.modalAlert.open('Pembaharuan profil gagal', r.detail);
95
96
97
98
99
100
101
102
    }));
  };


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

105
  handleChange = (e) => {
106
107
108
109
110
111
112
113
    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;
114
    this.setState({ form, show_transcript: d.checked });
115
116
  };

117
118
119
120
121
  gotoLink = (url) => {
    const win = window.open(url);
    win.focus();
  };

122
123
124
  updateForm(show) {
    if (show) {
      return (
125
        <Segment className="profile-form">
126
127
128
129
130
131
          <Header as="h3" textAlign="center">
            <Icon name="edit" />
            <Header.Content>
              Edit Profile Page
            </Header.Content>
          </Header>
132
          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
133
          <Form ref={(input) => { this.form = input; }} key={this.state.refresh} size="small" onSubmit={this.handleSubmit}>
134
135
            <Form.Field>
              <label htmlFor="photo">Profile Picture</label>
136
              <input onChange={this.handleFile} placeholder="Profile Photo.jpg" name="photo" type="File" />
137
            </Form.Field>
138
139
            <Form.Field>
              <label htmlFor="email">Email</label>
140
              <input onChange={this.handleChange} placeholder="jojon@email.com" name="email" />
141
142
            </Form.Field>
            <Form.Field>
143
144
              <label htmlFor="phone_number">No. Hp</label>
              <input onChange={this.handleChange} placeholder="08123456789" name="phone_number" />
145
146
147
            </Form.Field>
            <Form.Field>
              <label htmlFor="resume">Resume</label>
148
              <input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
149
            </Form.Field>
150
151
152
            <Form.Field>
              <Checkbox
                onChange={this.handleCheckbox}
sirinbaisa's avatar
sirinbaisa committed
153
                checked={!!this.state.show_transcript}
154
                label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
155
                name="show_transcript"
156
157
              />
            </Form.Field>
158
159
            <Button type="submit" size="small" primary floated="right">Submit</Button>
          </Form>
160
        </Segment>
161
162
163
164
165
      );
    }

    return (<div />);
  }
166

167
  render() {
168
    const defaultPicture = 'http://semantic-ui.com/images/wireframe/square-image.png';
169
170
    return (
      <div className="profilePage">
sirinbaisa's avatar
sirinbaisa committed
171
172
        <Segment className="biodata-section" >
          <Grid>
sirinbaisa's avatar
sirinbaisa committed
173
            <Grid.Column width={7}>
sirinbaisa's avatar
sirinbaisa committed
174
              <Header as="h2" icon textAlign="center">
sirinbaisa's avatar
sirinbaisa committed
175
                <br />
176
                <Image src={this.state.photo || defaultPicture} size="medium" />
sirinbaisa's avatar
sirinbaisa committed
177
178
179
180
181
182
              </Header>
            </Grid.Column>

            <Grid.Column width={6}>
              <Container textAlign="left" className="profile-biodata">
                <div className="biodata">
M. Reza Qorib's avatar
M. Reza Qorib committed
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
                  <Segment basic textAlign="center">
                    <h1> { this.state.name } </h1>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="university" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <h3> { this.state.major }, { this.state.batch } </h3>
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>

                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="mail" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <h3> { this.state.email } </h3>
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="phone" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <h3> { this.state.phone_number }</h3>
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="gift" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <h3> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h3>
                      </Grid.Column>
                    </Grid>
                  </Segment>
sirinbaisa's avatar
sirinbaisa committed
231
232
                </div>

sirinbaisa's avatar
sirinbaisa committed
233
                <Container textAlign="center">
M. Reza Qorib's avatar
M. Reza Qorib committed
234
                  <div className="button-profile">
235
                    <a href={this.state.resume || '#'} ><Button primary size="small">Resume</Button></a>
sirinbaisa's avatar
sirinbaisa committed
236
237
238
239
240
241
                  </div>
                  <div>
                    <h4> Bagikan Transkrip : { this.state.bagikanTranskrip }</h4>
                  </div>
                </Container>
              </Container>
sirinbaisa's avatar
sirinbaisa committed
242
243
            </Grid.Column >
          </Grid>
244
245
        </Segment >
        { this.updateForm(this.props.route.own) }
246
247
248
249
      </div>
    );
  }
}