CompanyProfile.jsx

import React from 'react';
import PropTypes from 'prop-types';
import {
  Segment, Header, Image, Container, Form, Button, Icon, TextArea,
} from 'semantic-ui-react';
import { Doughnut } from 'react-chartjs-2';
import Server from './lib/Server';
import Dumper from './lib/Dumper';
import ModalAlert from './components/ModalAlert';

export default class CompanyProfile extends React.Component {
  static propTypes = {
    user: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      id: this.props.user.data.company.id,
      name: '',
      address: '',
      category: '',
      description: '',
      founded: '',
      website: '',
      logo: '',
      size: '',
      linkedin_url: '',
      loading: false,
      form: {
        name: '',
        address: '',
        description: '',
        founded: '',
        website: '',
        size: '',
      },
      refresh: 1,
      applications: [],
      vacancies: [],
    };

    this.getProfile();
    this.getProfile = this.getProfile.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

    Server.get(
      `/companies/${this.props.user.data.company.id}/applications/`,
      false,
    ).then((result) => {
      this.setState({ applications: result.results });
    },
    (error) => error.then(() => {
      console.log(error);
    }));
  }

  getProfile() {
    return Server.get(`/companies/${this.state.id}/`).then(
      (result) => {
        this.setState({
          name: result.name,
          address: result.address,
          category: result.category,
          id: result.id,
          description: result.description,
          founded: result.founded,
          refresh: this.state.refresh + 1,
          website: result.website,
          size: result.size,
          linkedin_url: result.linkedin_url,
          logo: result.logo,
        });
      },
      (error) => error.then(() => {
        this.state.name = 'Gagal mendapatkan informasi';
        console.log(error);
      }),
    );
  }

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

    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(
      `/companies/${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));
      }),
    );
  };

  handleChange = (e) => {
    const { form } = this.state;
    form[e.target.name] = e.target.value;
    this.setState({ form });
  };

  render() {
    const defaultLogo = 'https://semantic-ui.com/images/wireframe/square-image.png';
    const { applications } = this.state;
    const rejectedApplications = applications.filter((apl) => apl.status === 3)
      .length;
    const acceptedApplications = applications.filter((apl) => apl.status === 4)
      .length;
    const sisaApplications = applications.length - rejectedApplications - acceptedApplications;

    const chartData = {
      labels: ['Lamaran Ditolak', 'Lamaran Diterima', 'Lamaran Pending'],
      datasets: [
        {
          data: [rejectedApplications, acceptedApplications, sisaApplications],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        },
      ],
    };
    return (
      <div className="companyProfile">
        <Segment className="segmentProfileCompany">
          <Header as="h2" icon textAlign="center">
            <Image
              src={this.state.logo || defaultLogo}
              size="small"
              shape="circular"
            />
          </Header>
          <Container textAlign="center" className="profile-biodata">
            <div className="biodataCompany">
              <h2>{this.state.name}</h2>
              <h3>{this.state.address}</h3>
              <p>
                {this.state.category}
                {' '}
-
                {this.state.description}
              </p>
              <p>
                Founded: {this.state.founded}
              </p>
              <p>{this.state.website}</p>
              <p>
                {this.state.size}
                {' '}
karyawan
              </p>
              {this.state.linkedin_url ? (
                <a href={this.state.linkedin_url}>
                  {' '}
                  {this.state.linkedin_url}
                  {' '}
                </a>
              ) : (
                <p> Belum ada link LinkedIn</p>
              )}
            </div>
          </Container>
          <Container textAlign="center" className="statistik">
            <div className="statistikCompany">
              <Doughnut data={chartData} />
            </div>
          </Container>
        </Segment>
        <Segment className="profileFormCompany">
          <Header as="h3" textAlign="center">
            <Icon name="edit" />
            <Header.Content>Edit Profile Page</Header.Content>
          </Header>
          <ModalAlert
            ref={(modal) => {
              this.modalAlert = modal;
            }}
          />
          <Form
            size="small"
            ref={(input) => {
              this.form = input;
            }}
            key={this.state.refresh}
            onSubmit={this.handleSubmit}
          >
            <Form.Field>
              <label htmlFor="name">Nama Perusahaan</label>
              <input
                placeholder="Nama Perusahaan"
                name="name"
                onChange={this.handleChange}
                defaultValue={this.state.name === null ? null : this.state.name}
              />
            </Form.Field>
            <Form.Field>
              <label htmlFor="address">Alamat Perusahaan</label>
              <input
                placeholder="Alamat Perusahaan"
                name="address"
                onChange={this.handleChange}
                defaultValue={
                  this.state.address === null ? null : this.state.address
                }
              />
            </Form.Field>
            <Form.Field>
              <label htmlFor="description">Deskripsi</label>
              <TextArea
                placeholder="Try adding multiple lines"
                name="description"
                onChange={this.handleChange}
                autoHeight
                defaultValue={
                  this.state.description === null
                    ? null
                    : this.state.description
                }
              />
            </Form.Field>
              <label htmlFor="founded">Founded:</label>
                <input
                  name="founded"
                  placeholder="YYYY-MM-DD"
                  pattern="\d{4}\-\d{2}\-\d{2}"
                  onChange={this.handleChange}
                  defaultValue={
                    this.state.founded === null ? null : this.state.founded
                }
                />
            <Form.Field/>
            <Form.Field>
              <label htmlFor="size">Jumlah karyawan</label>
              <input
                placeholder="Jumlah karyawan keseluruhan"
                name="size"
                size="small"
                onChange={this.handleChange}
                defaultValue={
                  this.state.size === null ? '0' : this.state.size
                }
              />
            </Form.Field>
            <Form.Field>
              <label htmlFor="website">Website</label>
              <input
                placeholder="Alamat Website"
                name="website"
                onChange={this.handleChange}
                defaultValue={
                  this.state.website === null ? null : this.state.website
                }
              />
            </Form.Field>
            <Form.Field>
              <label htmlFor="linkedin_url">LinkedIn URL</label>
              <input
                placeholder="LinkedIn URL"
                name="linkedin_url"
                onChange={this.handleChange}
                defaultValue={
                  this.state.linkedin_url === null ? null : this.state.linkedin_url
                }
              />
            </Form.Field>
            <Button
              type="submit"
              size="small"
              loading={this.state.loading}
              primary
              floated="right"
            >
              Submit
            </Button>
          </Form>
        </Segment>
      </div>
    );
  }
}