daily pastebin goal
25%
SHARE
TWEET

CreateProfile.js

DarioDEBATECH Jan 22nd, 2019 122 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { connect } from 'react-redux';
  3. import { withRouter } from 'react-router-dom';
  4. import PropTypes from 'prop-types';
  5. import TextFieldGroup from '../common/TextFieldGroup';
  6. import TextAreaFieldGroup from '../common/TextAreaFieldGroup';
  7. import InputGroup from '../common/InputGroup';
  8. import SelectListGroup from '../common/SelectListGroup';
  9. import { createProfile } from '../../actions/profileActions';
  10.  
  11.  
  12. class CreateProfile extends Component {
  13.    constructor(props) {
  14.       super(props);
  15.       this.state = {
  16.          displaySocialInputs: false,
  17.          handle: '',
  18.          company: '',
  19.          website: '',
  20.          location: '',
  21.          status: '',
  22.          skills: '',
  23.          githubusername: '',
  24.          bio: '',
  25.          twitter: '',
  26.          facebook: '',
  27.          linkedin: '',
  28.          youtube: '',
  29.          instagram: '',
  30.          errors: {}
  31.       };
  32.  
  33.       /* this.onChange = this.onChange.bind(this);
  34.       this.onSubmit = this.onSubmit.bind(this); */
  35.    }
  36.  
  37.    componentWillReceiveProps(nextProps) {
  38.       if (nextProps.errors) {
  39.          this.setState({ errors: nextProps.errors });
  40.       }
  41.    }
  42.  
  43.    onSubmit = (e) => {
  44.       e.preventDefault();
  45.       const profileData = {
  46.          handle: this.state.handle,
  47.          company: this.state.company,
  48.          website: this.state.website,
  49.          location: this.state.location,
  50.          status: this.state.status,
  51.          skills: this.state.skills,
  52.          githubusername: this.state.githubusername,
  53.          bio: this.state.bio,
  54.          twitter: this.state.twitter,
  55.          facebook: this.state.facebook,
  56.          linkedin: this.state.linkedin,
  57.          youtube: this.state.youtube,
  58.          instagram: this.state.instagram,
  59.       }
  60.       this.props.createProfile(profileData, this.props.history);
  61.  
  62.    }
  63.  
  64.    onChange = (e) => {
  65.       this.setState({ [e.target.name]: e.target.value });
  66.    }
  67.  
  68.    render() {
  69.  
  70.       const { errors, displaySocialInputs } = this.state;
  71.       let socialInputs;
  72.       if (displaySocialInputs) {
  73.          socialInputs = (
  74.             <div>
  75.                <InputGroup
  76.                   placeholder="Perfil de Twitter"
  77.                   name="twitter"
  78.                   icon="fab fa-twitter"
  79.                   value={this.state.twitter}
  80.                   onchange={this.onChange}
  81.                   error={errors.twitter}
  82.                />
  83.                <InputGroup
  84.                   placeholder="Perfil de Facebook"
  85.                   name="facebook"
  86.                   icon="fab fa-facebook"
  87.                   value={this.state.facebook}
  88.                   onchange={this.onChange}
  89.                   error={errors.facebook}
  90.                />
  91.                <InputGroup
  92.                   placeholder="Perfil de LinkedIn"
  93.                   name="LinkedIn" Youtube
  94.                   icon="fab fa-linkedin" LinkedIn
  95.                   value={this.state.linkedin}
  96.                   onchange={this.onChange}
  97.                   error={errors.LinkedIn}
  98.                />
  99.                <InputGroup
  100.                   placeholder="Perfil de Youtube"
  101.                   name="Youtube"
  102.                   icon="fab fa-youtube"
  103.                   value={this.state.youtube}
  104.                   onchange={this.onChange}
  105.                   error={errors.Youtube}
  106.                />
  107.                <InputGroup
  108.                   placeholder="Perfil de Instagram"
  109.                   name="Instagram"
  110.                   icon="fab fa-instagram"
  111.                   value={this.state.instagram}
  112.                   onchange={this.onChange}
  113.                   error={errors.Instagram}
  114.                />
  115.             </div>
  116.          );
  117.       }
  118.  
  119.       const options = [
  120.          { label: '* Seleccione su Status', value: 0 },
  121.          { label: 'Developer', value: 'Developer' },
  122.          { label: 'Junior Developer', value: 'Junior Developer' },
  123.          { label: 'Senior Developer', value: 'Senior Developer' },
  124.          { label: 'Manager', value: 'Manager' },
  125.          { label: 'Estudiante o aprendiz', value: 'Estudiante o aprendiz' },
  126.          { label: 'Instructor o Maestro', value: 'Instructor o Maestro' },
  127.          { label: 'Interno', value: 'Interno' },
  128.          { label: 'Otro', value: 'Otro' }
  129.       ];
  130.  
  131.       return (
  132.          <div className="create-profile">
  133.             <div className="container">
  134.                <div className="row">
  135.                   <div className="col-md-8 m-auto">
  136.                      <h1 className="display-4 text-center">Crea tu Perfil</h1>
  137.                      <p className="lead text-center">Pongamos algo de info para hacer que tu perfil se destaque.</p>
  138.                      <small className="d-block pb-3">* => campos requeridos</small>
  139.                      <form onSubmit={this.onSubmit}>
  140.                         <TextFieldGroup
  141.                            placeholder="* Nickname con el que puedes entrar"
  142.                            name="handle"
  143.                            value={this.state.handle}
  144.                            onChange={this.onchange}
  145.                            error={errors.handle}
  146.                            info="Un manejador unico para la URL de tu perfil. Nombre completo, compañia, nickname"
  147.                         />
  148.                         <SelectListGroup
  149.                            placeholder="Status"
  150.                            name="status"
  151.                            value={this.state.status}
  152.                            onChange={this.onchange}
  153.                            options={options}
  154.                            errors={errors.status}
  155.                            info="Danos una idea de donde estas posicionado en tu carrera"
  156.                         />
  157.                         <TextFieldGroup
  158.                            placeholder="Compañía"
  159.                            name="company"
  160.                            value={this.state.company}
  161.                            onChange={this.onchange}
  162.                            error={errors.company}
  163.                            info="Tu propia compañia o para la cual trabajas"
  164.                         />
  165.                         <TextFieldGroup
  166.                            placeholder="Website"
  167.                            name="website"
  168.                            onChange={this.onChange}
  169.                            value={this.state.website}
  170.                            error={errors.website}
  171.                            info="Tu sitio web"
  172.                         />
  173.                         <TextFieldGroup
  174.                            placeholder="Ubicacion"
  175.                            name="location"
  176.                            value={this.state.location}
  177.                            onChange={this.onchange}
  178.                            error={errors.location}
  179.                            info="Tu ciudad o estado"
  180.                         />
  181.                         <TextFieldGroup
  182.                            placeholder="* Habilidades"
  183.                            name="skills"
  184.                            value={this.state.skills}
  185.                            onChange={this.onchange}
  186.                            error={errors.skills}
  187.                            info="Por favor use valores separados por comas ej. HTML, CSS, Javascript, PHP"
  188.                         />
  189.                         <TextFieldGroup
  190.                            placeholder="Usuario de Github"
  191.                            name="githubusername"
  192.                            value={this.state.githubusername}
  193.                            onChange={this.onchange}
  194.                            error={errors.githubusername}
  195.                            info="Tu link a Github"
  196.                         />
  197.                         <TextAreaFieldGroup
  198.                            placeholder="Biografia"
  199.                            name="bio"
  200.                            onChange={this.onchange}
  201.                            value={this.state.bio}
  202.                            error={errors.bio}
  203.                            info="Cuéntanos un poco de ti"
  204.                         />
  205.                         <div className="mb-3">
  206.                            <button onClick={() => {
  207.                               this.setState(prevState => ({ displaySocialInputs: !prevState.displaySocialInputs }))
  208.                            }} className="btn btn-light">Agregar Links a redes sociales</button>
  209.                            <span className="text-muted">Opcional</span>
  210.                         </div>
  211.                         {socialInputs}
  212.                         <input type="submit" value="Enviar" className="btn btn-info btn-block mt-4" />
  213.                      </form>
  214.                   </div>
  215.                </div>
  216.             </div>
  217.          </div>
  218.       )
  219.    }
  220. }
  221.  
  222. CreateProfile.propTypes = {
  223.    profile: PropTypes.object.isRequired,
  224.    errors: PropTypes.object.isRequired
  225. }
  226.  
  227. const mapStateToProps = state => ({ profile: state.profile, errors: state.errors });
  228.  
  229. export default connect(mapStateToProps, { createProfile })(withRouter(CreateProfile));
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top