reactstrap#Form JavaScript Examples

render(){
      const {redirect} = this.state;
      if(redirect){
        return <Redirect to={"/PlacementEditBoard"}/>
      }
        return (
            <div className="container">
              <Form onSubmit={this.handleSubmit}>
              <FormGroup>
                <Label htmlfor="company">Name Of The Company</Label>
                <Input type="text" id="company" name="company"  value={this.state.company} onChange={this.onChangeCompany} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="date"> From </Label>
                <Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="CTC"> CTC </Label>
                <Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
              </FormGroup>
              <Button type="submit" value="submit" color="primary">
                Submit
              </Button>
            </Form>
            </div>
        )
    }

ProviderForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field label="Nombre" name="name" component={InputField} type="text" />
      <Field label="Telefono" name="phone" component={InputField} type="text" />
      <Field label="Email" name="email" component={InputField} type="text" />
      <Button className="provider-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="provider-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

render() {
        const {
            fields,
            submitContactData
        } = this.props;

        return (
            <Container fluid>
                <Form>
                    {map(fields, field => (
                        <FormGroup>
                            <Label>
                                {field.label}
                                <br/>
                                <Input
                                    key={field.control}
                                    name={field.control}
                                    {...field}
                                />
                            </Label>
                        </FormGroup>
                    ))}
                    <Button
                        onClick={() => submitContactData()}
                    >
                        Submit
                    </Button>
                </Form>
            </Container>
        );
    }

TodoForm = ({ addTodo }) => {
    const [title, setTitle] = useState('')

    const handleSubmit = e => {
        e.preventDefault();
        if (title === '') {
            return alert('Empty Todo')
        }
        const todo = {
            title,
            id: v4()
        }

        addTodo(todo)
        setTitle("")
    }

    return (
        <Form onSubmit={handleSubmit}>
            <FormGroup>
                <InputGroup>
                    <Input
                        type="text"
                        name="todo"
                        id="todo"
                        placeholder='Enter Todo...'
                        value={title}
                        onChange={e => setTitle(e.target.value)}
                    />
                    <Button color="secondary" onClick={handleSubmit}>Add</Button>
                </InputGroup>
            </FormGroup>
        </Form>
    )
}

ProductForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field
        label="Iniciales"
        name="initials"
        component={InputField}
        type="text"
      />
      <Field
        label="Descripción"
        name="description"
        component={InputField}
        type="text"
      />
      <Button className="product-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="product-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

LanguageCheckBox = () => {
  const languages = ['JavaScript', 'Ruby', 'Java', 'C#']

  return (
    <Form className="p-2">
      <FormGroup>
        <legend>Select Preferred Languages</legend>

        {languages.map(lang => (
          <CheckBox key={lang} lang={lang} />
        ))}
      </FormGroup>
    </Form>
  )
}

render() {
    return (
      <div className={s.errorPage}>
        <Container>
          <div className={`${s.errorContainer} mx-auto`}>
            <h1 className={s.errorCode}>404</h1>
            <p className={s.errorInfo}>
              Opps, it seems that this page does not exist here.
            </p>
            <p className={[s.errorHelp, 'mb-3'].join(' ')}>
              If you are sure it should, please search for it:
            </p>
            <Form method="get">
              <FormGroup>
                <Input className="input-no-border" type="text" placeholder="Search Pages" />
              </FormGroup>
              <Link to="app/extra/search">
                <Button className={s.errorBtn} type="submit" color="inverse">
                  Search <i className="fa fa-search text-secondary ml-xs" />
                </Button>
              </Link>
            </Form>
          </div>
          <footer className={s.pageFooter}>
            2020 &copy; Light Blue Template - React Admin Dashboard Template.
          </footer>
        </Container>
      </div>
    );
  }

render() {
    return (
      <React.Fragment>
        <div className="page-content">
          <Container fluid={true}>

          <Breadcrumbs title="Form Editors" breadcrumbItems={this.state.breadcrumbItems} />

            <Row>
              <Col>
                <Card>
                  <CardBody>
                    <CardTitle>react-draft-wysiwyg</CardTitle>
                    <CardSubtitle className="mb-3">
                      Bootstrap-wysihtml5 is a javascript plugin that makes it
                      easy to create simple, beautiful wysiwyg editors with the
                      help of wysihtml5 and Twitter Bootstrap.
                    </CardSubtitle>

                    <Form method="post">
                      <Editor
                        toolbarClassName="toolbarClassName"
                        wrapperClassName="wrapperClassName"
                        editorClassName="editorClassName"
                      />
                    </Form>

                  </CardBody>
                </Card>
              </Col>
            </Row>

          </Container>
        </div>
      </React.Fragment>
    );
  }

export default function Login({ history }) {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")


    const handleSubmit = async evt => {
        evt.preventDefault();
        console.log('result of the submit', email, password)

        const response = await api.post('/login', { email, password })
        const userId = response.data._id || false;

        if (userId) {
            localStorage.setItem('user', userId)
            history.push('/dashboard')
        } else {
            const { message } = response.data
            console.log(message)
        }
    }

    return (
        <Container>
            <h2>Login:</h2>
            <p>Please <strong>Login</strong> into your account</p>
            <Form onSubmit={handleSubmit}>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
                </FormGroup>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        </Container>
    );
}

ProductTypeForm = (props) => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field
        label="Iniciales"
        name="initials"
        component={InputField}
        type="text"
      />
      <Field
        label="Descripcion"
        name="description"
        component={InputField}
        type="text"
      />
      <Button className="provider-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="provider-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

NavSearch = () => {
  return (
    <Form inline className='ml-3'>
      <InputGroup size='sm'>
        <Input className='form-control-navbar' type='search' placeholder='Search' aria-label='Search' />
        <InputGroupAddon addonType='append'>
          <button className='btn btn-navbar' type='submit'>
            <FontAwesomeIcon icon={faSearch} />
            <span className='d-none'>Search</span>
          </button>
        </InputGroupAddon>
      </InputGroup>
    </Form>
  );
}

ProductTypeForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field label="Iniciales" name="initials" component={InputField} type="text" />
      <Field label="Descripcion" name="description" component={InputField} type="text" />
      <Button className="producttype-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="producttype-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

render() {
    const {login} = this.state;
    return (
        <Form role="form" onSubmit={this.submitData}>
          <FormGroupTemplate iconClass="fas fa-user" placeholder="Username"
                             value={login.username}
                             onChange={e => this.updateData(e, 'username')}/>
          <FormGroupTemplate iconClass="fas fa-key"
                             placeholder="Password" type="password"
                             value={login.password}
                             onChange={e => this.updateData(e, 'password')}/>
          <div className="text-center">
            <Button className="mt-4" color="primary" type="submit"
                    disabled={this.isSubmitDisabled()}>
              Submit
            </Button>
          </div>
        </Form>
    )
        ;
  }

render() {
    const {redirect} = this.state;

    if(redirect){
        return <Redirect to={"/home"}/>
    }
    return (
      <div className="container">
        <Card>
          <Card.Body>
            <div className="inline">
              <Card.Title>
                <h5 align="center">
                  Notice Board-Placements
                  <Tooltip title="Add">
                    <Link onClick={this.toggleModal}>
                      <FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
                    </Link>
                  </Tooltip>
                </h5>
              </Card.Title>
            </div>
            &nbsp;
            <div>
              <Table size="sm" responsive striped>
                <thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
                  <tr>
                    <th>S.No</th>
                    <th>Name of the Company</th>
                    <th>Date</th>
                    <th>CTC</th>
                    <th colspan="2">Operations</th>
                  </tr>
                </thead>
                <tbody>
                 {this.userList()}
                </tbody>
              </Table>
            </div>
          </Card.Body>
        </Card>
        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
          <ModalHeader toggle={this.toggleModal}>
            Add Placement Event
          </ModalHeader>
          <ModalBody>
            <Form onSubmit={this.handleSubmit}>
              <FormGroup>
                <Label htmlfor="company">Name Of The Company</Label>
                <Input type="text" id="company" name="company"  value={this.state.company} onChange={this.onChangeCompany} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="date"> From </Label>
                <Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="CTC"> CTC </Label>
                <Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
              </FormGroup>
              <Button type="submit" value="submit" color="primary">
                Submit
              </Button>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }

PlaylistModal = (props) => {
  const [modal, setModal] = useState(false)
  const [playlistName, setPlaylistName] = useState()
  const [playlistDes, setPlaylistDes] = useState()

  function addPlaylist(e) {
    const res = fetch(`https://api.codedigger.tech/lists/userlist/new`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
        Authorization: `Bearer ${props.acc}`,
      },
      body: JSON.stringify({
        name: playlistName,
        description: playlistDes,
        public: true,
      }),
    })

    window.location.reload()

    res.catch((err) => console.log(err))
  }
  const toggle = () => setModal(!modal)

  return (
    <div>
      <Button id="Add_Problem_List" color="danger" onClick={toggle}>
        Add Problem List
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Add a Problem List</ModalHeader>
        <ModalBody>
          Add the name and the description for your Problem List.
        </ModalBody>
        <Form id="form">
          <div>
            <Input
              type="text"
              id="playlistName"
              onChange={(e) => setPlaylistName(e.target.value)}
              placeholder="Playlist Name"
            />
            <Input
              type="textarea"
              onChange={(e) => setPlaylistDes(e.target.value)}
              id="playlistdec"
              placeholder="Playlist Description"
            />
            <Button
              id="Add_Problem_List_With_Details"
              color="primary"
              onClick={addPlaylist}
            >
              Add Problem List
            </Button>
          </div>
        </Form>
        <ModalFooter>
          <Button id="close" color="secondary" onClick={toggle}>
            Close
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  )
}

render() {
        const {
            fields,
            submitAssignmentData,
            assignment
        } = this.props;

        return (
            <Container>
                <Form>
                    {map(fields, field => (
                        <FormGroup>
                            <Label>
                                {field.label}
                                <br/>
                                <Input
                                    key={field.control}
                                    name={field.control}
                                    {...field}
                                >
                                    {!field.value && (<option>[Seleccione]</option>)}
                                    {map(field.options, opt => (
                                        <option value={opt.id}>
                                            {opt.name ? `${opt.name} - ${opt.address}` : `${opt.firstName} ${opt.lastName}`}
                                        </option>
                                    ))}
                                </Input>
                            </Label>
                        </FormGroup>
                    ))}
                    <Button
                        onClick={() => submitAssignmentData()}
                        disabled={!assignment.contact || !assignment.department}
                    >
                        Guardar
                    </Button>
                </Form>
            </Container>
        );
    }

TodoForm = () => {
    const [todoString, setTodoString] = useState("");
    const { dispatch } = useContext(TodoContext);

    const handleSubmit = e => {
        e.preventDefault();
        if (todoString === "") return alert("Please enter to-do");
        const todo = {
            todoString,
            id: v4()
        };
        dispatch({
            type: ADD_TODO,
            payload: todo
        });
        setTodoString("");
    }

    return (
        <Form onSubmit={handleSubmit}>
            <FormGroup>
                <InputGroup>
                    <Input
                        type="text"
                        name="todo"
                        id="todo"
                        placeholder="Enter your to-do item"
                        value={todoString}
                        onChange={e => setTodoString(e.target.value)}
                    />
                    <InputGroupAddon addonType="prepend">
                        <Button
                            color="warning"
                        >
                            Add
                        </Button>
                    </InputGroupAddon>
                </InputGroup>
            </FormGroup>
        </Form>
    )
}

function AddRoom() {
    const history = useHistory();
    const [room, setRoom] = useState({ roomname: '' });
    const [showLoading, setShowLoading] = useState(false);
    const ref = firebase.database().ref('rooms/');

    const save = (e) => {
        e.preventDefault();
        setShowLoading(true);
        ref.orderByChild('roomname').equalTo(room.roomname).once('value', snapshot => {
            if (snapshot.exists()) {
                return (
                    <div>
                        <Alert color="primary">
                            Room name already exist!
                        </Alert>
                    </div>
                );
            } else {
                const newRoom = firebase.database().ref('rooms/').push();
                newRoom.set(room);
                history.goBack();
                setShowLoading(false);
            }
        });
    };

    const onChange = (e) => {
        e.persist();
        setRoom({...room, [e.target.name]: e.target.value});
    }

    return (
        <div>
            {showLoading &&
                <Spinner color="primary" />
            }
            <Jumbotron>
                <h2>Please enter new Room</h2>
                <Form onSubmit={save}>
                    <FormGroup>
                        <Label>Room Name</Label>
                        <Input type="text" name="roomname" id="roomname" placeholder="Enter Room Name" value={room.roomname} onChange={onChange} />
                    </FormGroup>
                    <Button variant="primary" type="submit">
                        Add
                    </Button>
                </Form>
            </Jumbotron>
        </div>
    );
}

export default function Register({ history }) {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [firstName, setFirstName] = useState("")
    const [lastName, setLastName] = useState("")


    const handleSubmit = async evt => {
        evt.preventDefault();
        console.log('result of the submit', email, password, firstName, lastName)

        const response = await api.post('/user/register', { email, password, firstName, lastName })
        const userId = response.data._id || false;

        if (userId) {
            localStorage.setItem('user', userId)
            history.push('/dashboard')
        } else {
            const { message } = response.data
            console.log(message)
        }
    }

    return (
        <Container>
            <h2>Register:</h2>
            <p>Please <strong>Register</strong> for a new account</p>
            <Form onSubmit={handleSubmit}>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="text" name="firstName" id="firstName" placeholder="Your first name" onChange={evt => setFirstName(evt.target.value)} />
                </FormGroup>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="text" name="lastName" id="lastName" placeholder="Your last name" onChange={evt => setLastName(evt.target.value)} />
                </FormGroup>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
                </FormGroup>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        </Container>
    );
}

ProductForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field label="Nombre" name="name" component={InputField} type="text" />
      <Field
        label="Precio de costo"
        name="costPrice"
        component={InputField}
        type="number"
        parse={v => Number.parseInt(v)}
      />
      <Field
        label="Precio de venta"
        name="salePrice"
        component={InputField}
        type="number"
        parse={v => Number.parseInt(v)}
      />
      <Field
        name="productTypeId"
        label="Tipo de producto"
        component={SelectField}
        type="select"
        options={props.productTypeOptions}
      />
      <Field
        name="providerId"
        label="Proveedor"
        component={SelectField}
        type="select"
        options={props.providerOptions}
      />
      <Button className="product-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="product-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <Form>
                      <h1>Login</h1>
                      <p className="text-muted">Sign In to your account</p>
                      <InputGroup className="mb-3">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="icon-user"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
                      </InputGroup>
                      <font color="red">{this.state.messageErrorUsername}</font>
                      <InputGroup className="mb-4">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="icon-lock"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
                      </InputGroup>
                      <font color="red">{this.state.messageErrorPassword}</font>
                      <Row>
                        <Col xs="6">
                          <Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
                        </Col>
                      </Row>
                    </Form>
                  </CardBody>
                </Card>
                <Card className="text-white py-5 d-md-down-none" style={{ width: '44%', backgroundColor: '#1A446D' }}>
                  <CardBody className="text-center">
                    <div>
                      <img src={Logo} className="img-fluid" />
                      <h4 style={{marginTop: 20, fontFamily:'D-Din'}}>moonlay<b>technologies</b></h4>
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }

render() {
    const {user} = this.state;
    return (
        <Form role="form" onSubmit={this.submitData}>
          <FormGroupTemplate iconClass="fas fa-user" placeholder="Name"
                             value={user.name}
                             onChange={e => this.updateData(e, 'name')}/>
          <FormGroupTemplate iconClass="ni ni-mobile-button" placeholder="Mobile Number"
                             type="text"
                             value={user.mob_number}
                             onChange={e => this.updateData(e, 'mob_number')}/>
          <FormGroupTemplate iconClass="ni ni-email-83" placeholder="Email" type="email"
                             value={user.email_id}
                             onChange={e => this.updateData(e, 'email_id')}/>
          <FormGroupTemplate iconClass="fas fa-key"
                             placeholder="Password" type="password"
                             value={user.password}
                             onChange={e => this.updateData(e, 'password')}/>
          <FormGroupTemplate iconClass="fas fa-users" placeholder="Organisation Name"
                             value={user.organisation}
                             onChange={e => this.updateData(e, 'organisation')}/>

          <div className="custom-control custom-control-alternative custom-radio d-flex">
            <div className="col-6">
              <input
                  className="custom-control-input"
                  id="viewerAccessType"
                  type="radio"
                  value="viewer"
                  name="user_access_type"
                  onClick={e => this.updateData(e, 'user_access_type')}/>
              <label className="custom-control-label" htmlFor="viewerAccessType">
                <span className="text-muted">Viewer</span>
              </label>
            </div>
            <div className="col-6">
              <input
                  className="custom-control-input"
                  id="moderatorAccessType"
                  type="radio"
                  value="moderator"
                  name="user_access_type"
                  onClick={e => this.updateData(e, 'user_access_type')}/>
              <label className="custom-control-label" htmlFor="moderatorAccessType">
                <span className="text-muted">Moderator</span>
              </label>
            </div>
          </div>
          <div className="text-center">
            <Button className="mt-4" color="primary" type="submit"
                    disabled={this.isSubmitDisabled()}>
              Submit
            </Button>
          </div>
        </Form>
    )
        ;
  }

render() {
    return (
      <>
        <ExamplesNavbar activePage="/contact-us" />
        <div className="section text-center ">
          <Container className="reduce-margin">
            <Row>
              <h2 className="heading-contact-us" style={{ textAlign: "center", zIndex:"10" }}>CONTACT US</h2>
            </Row>
          </Container>
        </div>
        <Container className="main">
          <div className="section landing-section">
            <Container className="u-border contact-us-section">
              <Row>
                <Col lg="6" className="contact-us-form-container">
                  <h2 className=" heading-small-contact-us">Share Feedback or Ask your Queries </h2>
                  <Form className="contact-form" onSubmit={this.postDataHandler}>
                    <Row>
                      <Col md="12">
                        <label className="mb-0 desc-auv">Name</label>
                        <InputGroup>
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="nc-icon nc-single-02" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            placeholder="Name"
                            type="text"
                            value={this.state.name}
                            onChange={this.nameChangedHandler} />
                        </InputGroup>
                      </Col>
                      <Col md="12">
                        <label className="mb-0 desc-auv">Email</label>
                        <InputGroup>
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="nc-icon nc-email-85" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            placeholder="Email"
                            type="email"
                            value={this.state.email}
                            onChange={this.emailChangedHandler} />
                        </InputGroup>
                      </Col>
                    </Row>
                    <label className="mb-0 desc-auv">Message</label>
                    <Input
                      placeholder="Tell us your thoughts and feelings..."
                      type="textarea"
                      rows="4"
                      value={this.state.message}
                      onChange={this.messageChangedHandler}
                    />
                    <Button className="contact-us-form-button">
                      Send
                    </Button>
                  </Form>
                </Col>
                <Col lg="6" className="contact-us-form-container">
                  <h2 className="ml-5 small-heading">Contact details</h2>
                  <div className="row u-margin-top-large">
                    <Col md="1">
                      <i className="fa fa-phone contact-icon" />
                    </Col>
                    <Col md="10" className="ml-3 mt-4">
                      <p className="desc-auv">Phone Number : +91 9521597992 </p>
                    </Col>

                    <Col md="1">
                      <i className="fa fa-envelope-square contact-icon" />
                    </Col>
                    <Col md="10" className="ml-3 mt-4">
                      <p className="desc-auv">Email id : [email protected] </p>
                    </Col>

                    <Col md="1">
                      <i className="fa fa-map-marker contact-icon" />
                    </Col>
                    <Col md="10" className="ml-3 mt-4">
                      <p className="desc-auv">
                        Address : AUV Room, Hall of Residence 2, Indian
                        Institute of Technology, Kanpur, Uttar Pradesh, India -
                        208016{" "}
                      </p>
                    </Col>
                  </div>
                </Col>
              </Row>
            </Container>
          </div>
        </Container>
      </>
    );
  }

EditComponents = ({ buttonLabel, component }) => {
  // console.log(component);
  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);
  const dispatch = useDispatch();
  const [editInfo, setEditInfo] = useState({
    id: "",
    descriptions: "",
    manufacturer: "",
    partNumber: "",
    stockCode: "",
    image: "",
    resources: "",
    cutsheet: "",
    storesPartNumber: "",
  });
  const { updateComponent } = dispatchers;

  useEffect(() => {
    setEditInfo({
      id: component.id,
      descriptions: component.descriptions,
      manufacturer: component.manufacturer,
      partNumber: component.partNumber,
      stockCode: component.stockCode,
      image: component.image,
      resources: component.resources,
      cutsheet: component.cutsheet,
      storesPartNumber: component.storesPartNumber,
    });
  }, []);

  const { register } = useForm();

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(editInfo, "DATA!!!");

    dispatch(updateComponent(editInfo.id, editInfo));
    toggle();
  };

  const handleChange = (e) => {
    setEditInfo({ ...editInfo, [e.target.name]: e.target.value });
  };

  const handleImageChange = (url) => {
    setEditInfo({ ...editInfo, image: url });
  };

  const Update = () => {
    return (
      <>
        <MH1></MH1>
        <MBody>
          {editInfo.descriptions === null || editInfo.manufacturer === null ? (
            <Container>
              {/* <FieldError>All Fields Required.</FieldError> */}
            </Container>
          ) : (
            <></>
          )}
          <Form onSubmit={onSubmit}>
            <FormGroup>
              <Label for="descriptions">Description</Label>

              <Input
                type="text"
                value={editInfo.descriptions}
                id="descriptions"
                placeholder="Type Description"
                name="descriptions"
                onChange={handleChange}
                autoComplete="off"
                ref={register({})}
              />
            </FormGroup>
            <FormGroup>
              <Label for="manufacturer">Manufacturer</Label>

              <Input
                type="text"
                value={editInfo.manufacturer}
                id="manufacturer"
                placeholder="Type Manufacturer"
                name="manufacturer"
                onChange={handleChange}
                autoComplete="off"
                ref={register}
              />
            </FormGroup>
            <FormGroup>
              <Label for="partNumber">Part Number</Label>

              <Input
                type="text"
                value={editInfo.partNumber}
                id="partNumber"
                placeholder="Type Part Number"
                name="partNumber"
                onChange={handleChange}
                autoComplete="off"
                ref={register}
              />
            </FormGroup>

            <FormGroup>
              <Label for="stockCode">Stock Code</Label>

              <Input
                type="text"
                value={editInfo.stockCode}
                id="stockCode"
                placeholder="Type Stock Code"
                name="stockCode"
                onChange={handleChange}
                autoComplete="off"
                ref={register}
              />
            </FormGroup>

            <FormGroup>
              <Label for="image">Image</Label>
              {/* display the last part of the image URL which is the name of the image */}
              <p>
                Currently:{" "}
                {editInfo.image &&
                  editInfo.image.split("/").slice(-1)[0].split("?")[0]}
              </p>
              <DropboxChooser
                inPopup={true}
                handleSelected={handleImageChange}
              />
            </FormGroup>

            <FormGroup>
              <Label for="resources">Resource</Label>

              <Input
                type="text"
                value={editInfo.resources}
                id="resources"
                placeholder="Type Resource"
                name="resources"
                onChange={handleChange}
                autoComplete="off"
                ref={register}
              />
            </FormGroup>

            <FormGroup>
              <Label for="cutsheet">Cutsheet</Label>

              <Input
                type="text"
                value={editInfo.cutsheet}
                id="cutsheet"
                placeholder="Type Cutsheet"
                name="cutsheet"
                onChange={handleChange}
                autoComplete="off"
                ref={register}
              />
            </FormGroup>
            <FormGroup>
              <Label for="storespart#">Stores Part #</Label>

              <Input
                type="text"
                value={editInfo.storesPartNumber}
                id="storespart#"
                placeholder="Type Stores Part #"
                name="storesPartNumber"
                onChange={handleChange}
                autoComplete="off"
                ref={register}
              />
            </FormGroup>

            <button
              type="submit"
              style={{ border: "1px solid gray", borderRadius: "5px" }}
            >
              Update Component
            </button>
          </Form>
        </MBody>{" "}
      </>
    );
  };

  return (
    <ModalCont>
      <NewProjBtn onClick={toggle}>{buttonLabel}</NewProjBtn>
      <Mod isOpen={modal} toggle={toggle}>
        <h2 style={{ textAlign: "center", padding: "2rem 0" }}>
          Edit Component
        </h2>
        <MBody>{Update(editInfo)}</MBody>
      </Mod>
    </ModalCont>
  );
}

render() {
    const {redirect} = this.state;
    if(redirect){
      return <Redirect to={"/home"}/>
    }
    return (
      <div className="container">
        <Card>
          <Card.Body>
            <div className="row">
              <Col>
                <Card.Title>
                  <h5 align="center">
                    Notice Board-Training&nbsp;
                    <Tooltip title="Add">
                    <Link onClick={this.toggleModal}>
                        <FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
                    </Link>
                    </Tooltip>

                  </h5>
                </Card.Title>
              </Col>
            </div>
            &nbsp;
            <div>
              <Table size="sm" responsive striped>
                <thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
                  <tr>
                    <th>From</th>
                    <th>To</th>
                    <th>Name of the Programme</th>
                    <th>Status</th>
                    <th>Operations</th>
                  </tr>
                </thead>
                <tbody className="p-1">
                  {this.userList()}
               </tbody>
              </Table>
            </div>
          </Card.Body>
        </Card>
        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
          <ModalHeader toggle={this.toggleModal}>
            Add Training Event
          </ModalHeader>
          <ModalBody>
            <Form onSubmit={this.handleSubmit}>
              <FormGroup>
                <Label htmlfor="username">Year Of Passing</Label>
                <Input
                  type="text"
                  id="YOP"
                  value ={this.state.YOP}
                  name="YOP"
                 onChange={this.onChangeYOP}
                />
              </FormGroup>
              <FormGroup>
                <Label htmlfor="program">Name Of The Program</Label>
                <Input type="text" id="program" value={this.state.program} name="program" onChange={this.onChangeProgram} />
              </FormGroup>

              <FormGroup>
                <Label htmlFor="from-date"> From </Label>
                <Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
              </FormGroup>
              <FormGroup>
                <Label htmlFor="to-date"> To </Label>
                <Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
              </FormGroup>
              <Button type="submit" value="submit" color="primary">
                Submit
              </Button>
            </Form>
          </ModalBody>
        </Modal>
       {/* <Modal isOpen={this.state.isModalOpen1} toggle={this.toggleModal1}>
          <ModalHeader toggle={this.toggleModal1}>
              Edit Training Event
          </ModalHeader>
          <ModalBody>
            <Form onSubmit={this.handleSubmit}>
              <FormGroup>
                <Label htmlfor="username">Year Of Passing</Label>
                  <Input
                     type="text" id="YOP" value ={item.YOP} name="YOP" onChange={this.onChangeYOP}
                  />
                  {console.log("item.name_of_the_program"), console.log(index+1)}
              </FormGroup>
              <FormGroup>
                  <Label  htmlfor="program">Name Of The Program</Label>
                  <Input key={index} type="text" id="program" value={item.name_of_the_program} name="program" onChange={this.onChangeProgram} />
              </FormGroup>
              <FormGroup>
                  <Label htmlFor="from-date"> From </Label>
                  <Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
              </FormGroup>
              <FormGroup>
                  <Label htmlFor="to-date"> To </Label>
                  <Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
             </FormGroup>
             <Button type="submit" value="submit" color="primary">
                                      Submit
              </Button>
              </Form>
          </ModalBody>
               </Modal>*/}
      </div>
    );
  }

ListModal = ({ creds, acc, handle, user }) => {
  const { buttonLabel, className } = { creds, acc, handle, user }

  const [modal, setModal] = useState(false)
  const [nestedModal1, setNestedModal1] = useState(false)
  const [nestedModal2, setNestedModal2] = useState(false)
  const [nestedModal3, setNestedModal3] = useState(false)
  const [closeAll, setCloseAll] = useState(false)
  const [friends, setFriends] = useState({})
  const [friendReq, setFriendReq] = useState({})
  const [sentReq, setSentReq] = useState({})

  const [friendsOptions, setFriendsOptions] = useState(true)

  const toggle = (e) => {
    e.preventDefault()
    setFriendsOptions(!friendsOptions)
    setModal(!modal)
    if (friendsOptions) {
      // console.log("true");
      $('.popout-right>.popout-menu-right').removeClass('hideOptions')
      $('.popout-right>.popout-menu-right').addClass('showOptions')
      $('.window-button>.icon-popout-right').removeClass(
        'glyphicon-menu-hamburger'
      )
      $('.window-button>.icon-popout-right').addClass(
        'animated rotateIn glyphicon-remove'
      )
      $('.dropdown-link-right').addClass('animated bounceIn')
    } else {
      // console.log("false");
      $('.popout-right>.popout-menu-right').removeClass('showOptions')
      $('.popout-right>.popout-menu-right').addClass('hideOptions')
      $('.window-button>.icon-popout-right').removeClass(
        'animated rotateIn glyphicon-remove'
      )
      $('.dropdown-link-right').removeClass('animated bounceIn')
      $('.window-button>.icon-popout-right').addClass(
        'animated bounceIn glyphicon-menu-hamburger'
      )
    }
  }

  const toggleNested1 = (e) => {
    e.preventDefault()
    setNestedModal1(!nestedModal1)
    if (nestedModal1) {
      // console.log("pppppp");
    }
    setCloseAll(false)
  }
  const toggleNested2 = (e) => {
    e.preventDefault()
    setNestedModal2(!nestedModal2)
    setCloseAll(false)
  }
  const toggleNested3 = (e) => {
    e.preventDefault()
    setNestedModal3(!nestedModal3)
    setCloseAll(false)
  }
  const toggleAll = (e) => {
    e.preventDefault()
    setNestedModal1(!nestedModal1)
    setNestedModal2(!nestedModal2)
    setNestedModal3(!nestedModal3)
    setCloseAll(true)
  }

  const [formUsername, setFormUsername] = useState('')
  const [friendStatus, setFriendStatus] = useState({})

  async function submitForm(e) {
    e.preventDefault()
    // console.log(formUsername);
    const res = await fetch(
      `https://api.codedigger.tech/auth/user/send-request`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${acc}`,
        },
        body: JSON.stringify({
          to_user: formUsername,
        }),
      }
    )
    res.json().then((res) => setFriendStatus(res))
    window.location.reload()
  }

  useEffect(() => {
    getFriends(acc).then((res) => setFriends(res))
    // console.log(friends);
    async function showList() {
      // const res= await fetch(`https://api.codedigger.tech/auth/user/friends`,{
      //     method:"GET",
      //     headers:{
      //         "Content-Type":"application/json",
      //         "Authorization":`Bearer ${acc}`
      //     }
      // });
      // res
      //     .json()
      //     .then(res => setFriends(res));

      // setFriends(getFriends(acc));

      const res1 = await fetch(
        `https://api.codedigger.tech/auth/user/show-request`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${acc}`,
          },
        }
      )
      res1.json().then((res1) => setFriendReq(res1))

      const res2 = await fetch(
        `https://api.codedigger.tech/auth/user/show-send-request`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${acc}`,
          },
        }
      )
      res2.json().then((res2) => setSentReq(res2))
    }
    showList()
  }, [])

  return (
    <>
      <div
        style={{ marginTop: '-15px' }}
        class="dropdown popout-right pull-left"
      >
        <div onClick={toggle}>
          <button
            style={{ width: '135px', padding: '5px' }}
            class="window-button btn-primary dropdown-toggle friendsButton"
            type="button"
            role="button"
            id="dropdownMenu1"
            data-toggle="dropdown"
            aria-expanded="true"
          >
            <svg
              style={{ width: '28px', marginRight: '9px' }}
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 32 32"
            >
              <defs>
                <linearGradient
                  id="Live-Events_svg__a"
                  x1="-55.5"
                  y1="1295.5"
                  x2="-55.5"
                  y2="1301.5"
                  gradientTransform="translate(64.5 -1283.5)"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop offset=".001" stop-opacity="0"></stop>
                  <stop offset=".83"></stop>
                </linearGradient>
                <linearGradient
                  id="Live-Events_svg__b"
                  y1="-41.5"
                  y2="-35.5"
                  gradientTransform="matrix(1 0 0 -1 78.5 -23.5)"
                  xlinkHref="#Live-Events_svg__a"
                ></linearGradient>
                <linearGradient
                  id="Live-Events_svg__d"
                  y1="32"
                  x2="32"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop offset=".1" stop-color="#be95ff"></stop>
                  <stop offset=".9" stop-color="#4589ff"></stop>
                </linearGradient>
                <mask
                  id="Live-Events_svg__c"
                  x="0"
                  y="0"
                  width="32"
                  height="32"
                  maskUnits="userSpaceOnUse"
                >
                  <path
                    d="M24 4a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5zM8 4a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5zM12 14H6a5.006 5.006 0 00-5 5v4h2v-4a3 3 0 013-3h6zM26 14h-6v2h6a3 3 0 013 3v4h2v-4a5.006 5.006 0 00-5-5z"
                    fill="#fff"
                  ></path>
                  <path
                    transform="rotate(-90 9 15)"
                    fill="url(#Live-Events_svg__a)"
                    d="M7 12h4v6H7z"
                  ></path>
                  <path
                    transform="rotate(-90 23 15)"
                    fill="url(#Live-Events_svg__b)"
                    d="M21 12h4v6h-4z"
                  ></path>
                </mask>
              </defs>
              <g data-name="Layer 2">
                <g data-name="Dark theme icons">
                  <g mask="url(#Live-Events_svg__c)">
                    <path
                      fill="url(#Live-Events_svg__d)"
                      d="M0 0h32v32H0z"
                    ></path>
                  </g>
                  <path
                    d="M23 30h-2v-2a3 3 0 00-3-3h-4a3 3 0 00-3 3v2H9v-2a5.006 5.006 0 015-5h4a5.006 5.006 0 015 5zM16 13a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5z"
                    fill="#f4f4f4"
                  ></path>
                </g>
              </g>
            </svg>
            <span style={{ fontSize: '16px' }}>My Friends</span>
          </button>
        </div>

        <ul
          class="dropdown-menu popout-menu-right hideOptions"
          role="menu"
          aria-labelledby="dropdownMenu1"
        >
          <li
            onClick={toggleNested1}
            role="presentation"
            class="dropdown-link-right arrow-box-left"
          >
            <a onClick={toggleNested1} role="menuitem" tabindex="-1" href="#">
              Friends
            </a>
          </li>
          <li
            onClick={toggleNested3}
            role="presentation"
            class="dropdown-link-right arrow-box-left"
          >
            <a role="menuitem" tabindex="-1" href="#">
              Sent Friend Requests
            </a>
          </li>
          <li
            onClick={toggleNested2}
            role="presentation"
            class="dropdown-link-right arrow-box-left"
          >
            <a role="menuitem" tabindex="-1" href="#">
              Friend Requests
            </a>
          </li>
        </ul>
      </div>
      <Modal
        isOpen={nestedModal1}
        toggle={toggleNested1}
        onClosed={closeAll ? toggle : undefined}
      >
        <ModalHeader>List of Friends</ModalHeader>
        <ModalBody>
          {friends != undefined ? (
            <FriendList friends={friends} i="1" acc={acc} />
          ) : (
            <Loading />
          )}
        </ModalBody>
        <Form onSubmit={submitForm} style={{ marginBottom: '70px' }}>
          <Label for="formUsername">Add Friend</Label>
          <div style={{ display: 'flex' }}>
            <Input
              style={{ marginLeft: '11px', width: '73%' }}
              type="text"
              id="formUsername"
              onChange={(e) => setFormUsername(e.target.value)}
              placeholder="Enter Username"
            />
            <Button
              style={{
                position: 'relative',
                top: '-4px',
                left: '0px',
                borderRadius: '13px',
              }}
              onClick={submitForm}
              type="submit"
            >
              Submit
            </Button>
          </div>
        </Form>
        <ModalFooter>
          <Button color="primary" onClick={toggleNested1}>
            Close{' '}
          </Button>{' '}
        </ModalFooter>
      </Modal>
      <Modal
        isOpen={nestedModal2}
        toggle={toggleNested2}
        onClosed={closeAll ? toggle : undefined}
      >
        <ModalHeader>List of Friend Requests</ModalHeader>
        <ModalBody>
          {friendReq != undefined ? (
            <FriendList friends={friendReq} i="2" acc={acc} />
          ) : (
            <Loading />
          )}
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggleNested2}>
            Close{' '}
          </Button>{' '}
        </ModalFooter>
      </Modal>
      <Modal
        isOpen={nestedModal3}
        toggle={toggleNested3}
        onClosed={closeAll ? toggle : undefined}
      >
        <ModalHeader>List of Sent Friend Requests</ModalHeader>
        <ModalBody>
          {sentReq != undefined ? (
            <FriendList friends={sentReq} i="3" acc={acc} />
          ) : (
            <Loading />
          )}
        </ModalBody>
        <br />
        <br />
        <ModalFooter>
          <Button color="primary" onClick={toggleNested3}>
            Close{' '}
          </Button>{' '}
        </ModalFooter>
      </Modal>
      {/* <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Choose a list</ModalHeader>
        <ModalBody>
          <br />
          <br />
          
          <Button color="success"
          onClick={toggleNested2}
            style={{
              right: '50px',
              bottom: '10px',
            }}
          >Friend Requests List</Button>
          <Button color="success"
          onClick={toggleNested1}
            style={{
              right: '310px',
              bottom: '10px'
            }}
          >Friends List</Button>

          <Button color="success"
          onClick={toggleNested3}
            style={{
              right: '130px',
              bottom: '-60px'
            }}
          >Show Sent Requests List</Button>
          
          
          
        </ModalBody>
        <br />
        <br />
        <br />
        <br />
        <br />
      </Modal> */}
    </>
  )
}

CreateJob = () => {
  const { handleSubmit, watch, errors, control, getValues } = useForm({
    mode: "all",
    reValidateMode: "onChange",
  });
  const [selectedPostDate, setSelectedPostDate] = useState();
  const watchDate = watch("jobPostDate");

  const onSubmit = (data) => {
    // code to submit form
    console.log(data);
  };

  useEffect(() => {
    if (!getValues("jobPostDate")) {
      return;
    }
    const selectedDate = new Date(getValues("jobPostDate"));
    setSelectedPostDate(selectedDate.toDateString());
  }, [watchDate]);

  return (
    <>
      <div className="create-job-container" style={styles.pageContainer}>
        <div>
          <Card style={styles.cardContainer}>
            <CardBody>
              <CardTitle style={styles.section}>
                <h3> Create New Job</h3>
              </CardTitle>
              <Form
                style={styles.formContainer}
                onSubmit={handleSubmit(onSubmit)}
              >
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="jobTitle"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Job Title"
                  />
                  {errors.jobTitle && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="jobDesc"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Job Description"
                  />
                  {errors.jobDesc && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    name="skills"
                    as={Select}
                    options={skills}
                    control={control}
                    rules={{ required: true }}
                    isMulti
                    placeholder="Select Skills"
                  />
                  {errors.skills && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="companyName"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Company Name"
                  />
                  {errors.companyName && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup style={styles.relativeEle}>
                  <Input
                    type="text"
                    name="jobPostDateInput"
                    placeholder="Select Job Post Date"
                    value={selectedPostDate}
                  />
                  {errors.jobPostDate && (
                    <span className="error-text">This field is required</span>
                  )}
                  <Controller
                    name="jobPostDate"
                    as={DatePicker}
                    control={control}
                    rules={{ required: true }}
                    maxDate={new Date()}
                    clearIcon={null}
                    className="app-date-custom-style"
                  />
                </FormGroup>
                <FormGroup>
                  <Controller
                    as={Input}
                    type="text"
                    name="workLocation"
                    control={control}
                    rules={{ required: true }}
                    placeholder="Enter Work Location"
                  />
                  {errors.workLocation && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    name="benefits"
                    as={Select}
                    options={benefits}
                    control={control}
                    rules={{ required: true }}
                    placeholder="Select Benefits"
                    isMulti
                  />
                  {errors.benefits && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>
                <FormGroup>
                  <Controller
                    name="workVisa"
                    as={Select}
                    options={visaSelection}
                    control={control}
                    rules={{ required: true }}
                    placeholder="Will Sponsor Work Visa"
                  />
                  {errors.workVisa && (
                    <span className="error-text">This field is required</span>
                  )}
                </FormGroup>

                <div style={styles.section}>
                  <Button type="submit" variant="primary">
                    Create New Job
                  </Button>
                </div>
              </Form>
            </CardBody>
          </Card>
        </div>
      </div>
    </>
  );
}

AddContact = () => {
  const { state, dispatch } = useContext(ContactContext)

  const { contactToUpdate, contactToUpdateKey } = state

  const history = useHistory()

  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phoneNumber, setPhoneNumber] = useState("")
  const [address, setAddress] = useState("")
  const [isUploading, setIsUploading] = useState(false)
  const [downloadUrl, setDownloadUrl] = useState(null)
  const [star, setStar] = useState(false)
  const [isUpdate, setIsUpdate] = useState(false)

  useEffect(() => {
    if (contactToUpdate) {
      setName(contactToUpdate.name)
      setEmail(contactToUpdate.email)
      setPhoneNumber(contactToUpdate.phoneNumber)
      setAddress(contactToUpdate.address)
      setStar(contactToUpdate.star)
      setDownloadUrl(contactToUpdate.picture)
      setIsUpdate(true)
    }
  }, [contactToUpdate])

  const imagePicker = async e => {
    try {
      const file = e.target.files[0]

      var metadata = {
        contentType: file.type
      }

      let resizedImage = await readAndCompressImage(file, imageConfig)

      const storageRef = await firebase.storage().ref()
      var upload = storageRef.child('iamges/' + file.name).put(resizedImage, metadata)

      upload.on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        snapshot => {
          setIsUploading(true)
          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100

          switch (snapshot.state) {
            case firebase.storage.TaskState.PAUSED:
              setIsUploading(false)
              console.log('Uploading Paused.')
              break;
            case firebase.storage.TaskState.RUNNING:
              console.log('Uploading In Progress.')
              break;
            case firebase.storage.TaskState.FAILED:
              setIsUploading(false)
              console.log('Uploading Failed.')
              break;
            case firebase.storage.TaskState.SUCCESS:
              console.log('Uploading Successful.')
              break;
          }

          if (progress == 100) {
            setIsUploading(false);
            toast("Uploaded!", { type: "success" })
          }
        },
        error => {
          toast('Something went wrong.', { type: 'error' })
        }, () => {
          upload.snapshot.ref.getDownloadURL().then(downloadUrl => {
            setDownloadUrl(downloadUrl)
          }).catch(err => console.log(err))
        }

      )

    } catch (err) {
      console.log(err)
      toast('Something went wrong', { type: "error" })
    }
  }

  const addContact = async () => {
    try {
      firebase.database().ref('contacts/' + v4()).set({
        name,
        email,
        phoneNumber,
        address,
        picture: downloadUrl,
        star
      })
    } catch (err) {
      console.log(err)
    }
  }

  const updateContact = async () => {
    try {
      firebase.database().ref('contacts/' + contactToUpdateKey).set(
        {
          name,
          email,
          phoneNumber,
          address,
          picture: downloadUrl,
          star
        }
      )
    } catch (err) {
      console.log(err)
      toast('Failed to update', { type: 'error' })
    }
  }

  const handleSubmit = e => {
    e.preventDefault()
    isUpdate ? updateContact() : addContact()

    toast('Success', { type: 'success' })

    dispatch({
      type: CONTACT_TO_UPDATE,
      payload: null,
      key: null
    })

    history.push("/")
  }

  return (
    <Container fluid className="mt-5">
      <Row>
        <Col md="6" className="offset-md-3 p-2">
          <Form onSubmit={handleSubmit}>
            <div className="text-center">
              {isUploading ? (
                <Spinner type="grow" color="primary" />
              ) : (
                <div>
                  <label htmlFor="imagepicker" className="">
                    <img src={downloadUrl} alt="" className="profile" />
                  </label>
                  <input
                    type="file"
                    name="image"
                    id="imagepicker"
                    accept="image/*"
                    multiple={false}
                    onChange={e => imagePicker(e)}
                    className="hidden"
                  />
                </div>
              )}
            </div>

            <FormGroup>
              <Input
                type="text"
                name="name"
                id="name"
                placeholder="Name"
                value={name}
                onChange={e => setName(e.target.value)}
              />
            </FormGroup>
            <FormGroup>
              <Input
                type="email"
                name="email"
                id="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="Email"
              />
            </FormGroup>
            <FormGroup>
              <Input
                type="number"
                name="number"
                id="phonenumber"
                value={phoneNumber}
                onChange={e => setPhoneNumber(e.target.value)}
                placeholder="phone number"
              />
            </FormGroup>
            <FormGroup>
              <Input
                type="textarea"
                name="area"
                id="area"
                value={address}
                onChange={e => setAddress(e.target.value)}
                placeholder="address"
              />
            </FormGroup>
            <FormGroup check>
              <Label check>
                <Input
                  type="checkbox"
                  onChange={() => {
                    setStar(!star)
                  }}
                  checked={star}
                />{" "}
                <span className="text-right">Mark as Star</span>
              </Label>
            </FormGroup>
            <Button
              type="submit"
              color="primary"
              block
              className="text-uppercase"
            >
              {isUpdate ? "Update Contact" : "Add Contact"}
            </Button>
          </Form>
        </Col>
      </Row>
    </Container>
  )
}

render() {
        return (
            <div className='pt-2 px-3'>
                <div className='row mr-auto ml-0 mb-4 mt-0'>
                    <Button
                        color='primary'
                        size='lg'
                        onClick={() => {
                            window.location.href = "/";
                        }}
                        style={{
                            width: "60px",
                            height: "60px",
                            borderRadius: "50%",
                        }}>
                        <FontAwesomeIcon icon={faArrowLeft} />
                    </Button>
                </div>
                {!this.state.loaded ? (
                    <ReactLoading
                        type={"spin"}
                        color={"orange"}
                        height={"100vh"}
                        width={"40%"}
                        className='loading'
                    />
                ) : (
                    <Card id='blog' className='p-2 col-12 singleBlog'>
                        <CardImg
                            src={this.state.image}
                            alt='Card image cap'
                            className='img-thumbnail'
                        />
                        <CardBody>
                            <CardTitle className='text-primary'>
                                <h5>
                                    {this.state.title}
                                    <span className='float-right text-secondary'>
                                        {"-"}
                                        <em>@{this.state.author.username}</em>
                                    </span>
                                </h5>
                            </CardTitle>
                            {this.state.date !== "" && (
                                <CardSubtitle className='text-dark'>
                                    <FontAwesomeIcon
                                        icon={faCalendar}
                                        className='mr-2'
                                    />
                                    {new Intl.DateTimeFormat("en-US", {
                                        month: "long",
                                        day: "numeric",
                                        year: "numeric",
                                        hour: "numeric",
                                        minute: "numeric",
                                    }).format(Date.parse(this.state.date))}
                                    <span className='float-right'>
                                        <FontAwesomeIcon
                                            className='text-danger'
                                            icon={faHeart}
                                        />{" "}
                                        {this.state.likes.length}
                                    </span>
                                </CardSubtitle>
                            )}
                            <CardText>
                                <br />
                                {this.state.body}
                            </CardText>
                        </CardBody>
                        <CardFooter>
                            {this.props.user !== null &&
                                this.props.user._id ===
                                    this.state.author.id && (
                                    <div
                                        style={{ display: "flex" }}
                                        className='p-1'>
                                        <Button
                                            className='btn btn-danger mr-1'
                                            style={{ width: "48%" }}
                                            onClick={this.deleteBlog}>
                                            Delete
                                        </Button>{" "}
                                        <Button
                                            className='btn btn-warning ml-1'
                                            style={{ width: "48%" }}
                                            onClick={this.toggleModal}>
                                            Edit
                                        </Button>
                                    </div>
                                )}
                        </CardFooter>
                    </Card>
                )}
                <Modal
                    isOpen={this.state.isModalOpen}
                    fade={false}
                    toggle={this.toggleModal}>
                    <ModalHeader toggle={this.toggleModal}>
                        Add a blog
                    </ModalHeader>
                    <Form onSubmit={this.onSubmit}>
                        <ModalBody>
                            <FormGroup>
                                <Label htmlFor='title'>title</Label>
                                <Input
                                    type='text'
                                    id='title'
                                    onChange={this.ontitleChange}
                                    value={this.state.title}
                                    name='title'
                                />
                            </FormGroup>
                            <FormGroup>
                                <Label htmlFor='imageURL'>imageURL</Label>
                                <Input
                                    type='text'
                                    id='imageURL'
                                    onChange={this.onimgChange}
                                    value={this.state.image}
                                    name='imageURL'
                                />
                            </FormGroup>
                            <FormGroup>
                                <Label htmlFor='body'>body</Label>
                                <Input
                                    type='textarea'
                                    id='body'
                                    onChange={this.onbodyChange}
                                    value={this.state.body}
                                    name='body'
                                />
                            </FormGroup>
                        </ModalBody>
                        <ModalFooter>
                            <Button
                                type='submit'
                                value='submit'
                                color='primary'>
                                UPDATE BLOG
                            </Button>
                        </ModalFooter>
                    </Form>
                </Modal>
            </div>
        );
    }