reactstrap#Input JavaScript Examples

Search = (props) => {

    const history = useHistory();

    const [searchValue, setSearchValue] = useState("");

    const handleSearchInput = e => {
        setSearchValue(e.target.value);
    };

    const resetInputField = e => {
        setSearchValue('');
    };

    const callSearchFunction = e => {
        e.preventDefault();
        props.searchStoreName(searchValue);
        resetInputField();
        history.push('/products')
    };

    return (
        <Form className='search'>
            <Input
                value={searchValue}
                onChange={handleSearchInput}
                type='text'
                placeholder='Store Name'
            />
            <Button onClick={callSearchFunction}>
                <i class="fa fa-search"></i>
            </Button>

        </Form>

    )
}

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>
        )
    }

InputField = props => {
  const {
    input,
    label,
    placeholder,
    type,
    meta: { error, touched, pristine }
  } = props;

  return (
    <FormGroup>
      <Label htmlFor={input.name}>{label}</Label>
      <Input
        valid={touched && !error && !pristine}
        invalid={touched && !!error}
        {...input}
        id={input.name}
        placeholder={placeholder}
        type={type}
      />
      <FormFeedback>{error}</FormFeedback>
    </FormGroup>
  );
}

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>
    )
}

CheckBox = props => {
  const [isChecked, setIsChecked] = React.useState(false)

  return (
    <FormGroup key={props.lang} check inline>
      <Label check>
        <Input type="checkbox" onChange={e => setIsChecked(e.target.checked)} />
        <span className={isChecked ? 'text-success font-weight-bold' : null}>
          {props.lang}
        </span>
      </Label>
    </FormGroup>
  )
}

DefaultColumnFilter = ({
  column: {
    filterValue,
    setFilter,
    preFilteredRows: { length },
  },
}) => {
  return (
    <Input
      value={filterValue || ''}
      onChange={(e) => {
        setFilter(e.target.value || undefined);
      }}
      placeholder={`search (${length}) ...`}
    />
  );
}

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>
    );
  }

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>
    );
}

Search = props => {
    return (
        <React.Fragment>
            <h4>Búsqueda</h4>
            <Row>
                <Col>
                    <Input
                        name="Name"
                        id="nameInput"
                        type="text"
                        onChange={props.handleFilter}
                        value={props.filters.Name}
                        placeholder="Nombre"
                    />
                </Col>
                <Col>
                    <Input
                        name="Brand"
                        id="brandInput"
                        type="text"
                        onChange={props.handleFilter}
                        value={props.filters.Brand}
                        placeholder="Tipo de producto"
                    />
                </Col>
                <Col>
                    <Button color="primary" onClick={props.submitFilter}>
                        <MdSearch /> Buscar
          </Button>
                    <Button color="primary" className="ml-3" onClick={props.clearFilter}>
                        <MdCancel /> Limpiar
          </Button>
                </Col>
            </Row>
        </React.Fragment>
    );
}

Search = (props) => {
  return (
    <React.Fragment>
      <h4>Búsqueda</h4>
      <Row>
        <Col>
          <Input
            name="initials"
            id="nameInput"
            type="text"
            onChange={props.handleFilter}
            value={props.filters.initials}
            placeholder="Iniciales"
          />
        </Col>
        <Col>
          <Input
            name="description"
            id="emailInput"
            type="text"
            onChange={props.handleFilter}
            value={props.filters.description}
            placeholder="Descripcion"
          />
        </Col>
        <Col>
          <Button color="primary" onClick={props.submitFilter}>
            <MdSearch /> Buscar
          </Button>
          <Button color="primary" className="ml-3" onClick={props.clearFilter}>
            <MdCancel /> Limpiar
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
}

render() {
        return (
            <InputGroup className="mb-3">
            <InputGroupAddon addonType="prepend">
              <InputGroupText>
                <i className={this.props.icon}></i>
                {this.props.text}
              </InputGroupText>
            </InputGroupAddon>
            <Input type='text' placeholder={this.props.placeholder} name={this.props.name} />
          </InputGroup>
        )
    }

QueryItem = props => {
  // const [queryStrings, setQueryString] = useState(props.queryItem);

  return (
    <div key={`${props.id}-queryItem`} id={`${props.id}-queryItem`}>
      <span className="querySpan">
        <Input
          type="textarea"
          name="queryString"
          id={`${props.id}-queries`}
          placeholder="Input your GraphQL queries"
          value={props.queryItem}
          onChange={props.queryChange}
        />
        <Button
          key={`button-${props.id}`}
          className="deleteBtn"
          type="button"
          size="sm"
          id={`${props.id}-delete`}
          onClick={props.deleteQuery}
          color="secondary"
        >
          X
        </Button>
      </span>
    </div>
  );
}

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>
  );
}

Search = props => {
  return (
    <React.Fragment>
      <h4>Búsqueda</h4>
      <Row>
        <Col>
		<Input
					name="initials"
					id="initialsInput"
					type="text"
					onChange={props.handleFilter}
					value={props.filters.initials}
					placeholder="Iniciales"
				/>
        </Col>
        <Col>
		<Input
					name="description"
					id="descriptionInput"
					type="text"
					onChange={props.handleFilter}
					value={props.filters.description}
					placeholder="Descripcion"
				/>
        </Col>
        <Col>
          <Button color="primary" onClick={props.submitFilter}>
            <MdSearch /> Buscar
          </Button>
          <Button color="primary" className="ml-3" onClick={props.clearFilter}>
            <MdCancel /> Limpiar
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
}

render() {
    const {placeholder, disabled, domID, showError} = this.props;
    const {query, isSelected} = this.state;

    return (
        <Input
            className={classnames({'is-invalid': showError && !isSelected})}
            type="text"
            name="dummy-add"
            id={domID}
            placeholder={placeholder}
            value={query}
            disabled={disabled}
            autoComplete={"new-password"}
            onChange={(event) => this.setState({query: event.target.value})}
        />
    )
  }

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>
  )
}

HomePage = () => {
  const [jobs, setJobs] = useState([]);

  const filterWithPropery = (properyName, value) => {
    let filteredJobs = jobs.filter((item) => {
      return item[properyName].toLowerCase().includes(value.toLowerCase());
    });
    setJobs(filteredJobs);
  };

  const handleChange = (e) => {
    if (e.target.value.length >= 3) {
      filterWithPropery(e.target.name, e.target.value);
    } else {
      // This will be a problem later where jobs are lost and then needed later
      // huge network hit
      setJobs(listOfJob);
    }
  };

  useEffect(() => {
    setJobs(listOfJob);
  }, []);

  return (
    <>
      <Navbar />
      <Container className="mt-4 mb-4">
        <h1>List of available jobs</h1>
        <div className="d-flex justify-content-end mt-3">
          <div className="w-25 mr-2">
            <Input
              name="jobCreator"
              onChange={handleChange}
              placeholder="Search with company name"
            />
          </div>
          <div className="w-25">
            <Input
              name="jobLocation"
              onChange={handleChange}
              placeholder="Search with location"
            />
          </div>
        </div>

        {jobs.length === 0 && (
          <h3 className="text-center mt-5">No result found</h3>
        )}

        <ListGroup className="mt-3">
          {jobs.map((job) => (
            <JobCard key={job.userId} job={job} />
          ))}
        </ListGroup>
      </Container>
    </>
  );
}

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>
        );
    }

Home = () => {
    const context = useContext(UserContext)
    const [query, setQuery] = useState("")
    const [user, setUser] = useState(null)

    const fetchDetails = async () => {
        try {
            const { data } = await Axios.get(`https://api.github.com/users/${query}`)
            setUser(data)
            console.log(data)
        } catch (err) {
            toast("Unable to locate the user", {
                type: "error"
            })
        }
    }

    if (!context.user?.uid) {
        return <Navigate to="/signin" />
    }

    return (
        <Container>
            <Row className=" mt-3">
                <Col md="5">
                    <InputGroup>
                        <Input
                            type="text"
                            value={query}
                            placeholder="Please provide the username"
                            onChange={e => setQuery(e.target.value)}
                        />
                        <InputGroupAddon addonType="append">
                            <Button onClick={fetchDetails} color="primary">Fetch User</Button>
                        </InputGroupAddon>
                    </InputGroup>
                    {user ?
                        <UserCard user={user} /> :
                        null
                    }
                </Col>
                <Col md="7">
                    {user ? <Details apiUrl={user.repos_url} /> : null}
                </Col>
            </Row>
        </Container>
    );
}

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>
    );
}

render() {

        return (
            <React.Fragment>
                <div className="home-btn d-none d-sm-block">
                    <Link to="/"><i className="mdi mdi-home-variant h2 text-white"></i></Link>
                </div>

                <div>
                    <Container fluid className="p-0">
                        <Row className="no-gutters">
                            <Col lg={4}>
                                <div className="authentication-page-content p-4 d-flex align-items-center min-vh-100">
                                    <div className="w-100">
                                        <Row className="justify-content-center">
                                            <Col lg={9}>
                                                <div>
                                                    <div className="text-center">
                                                        <div>
                                                            <Link to="/" className="logo"><img src={logodark} height="30" alt="logo" /></Link>
                                                        </div>

                                                        <h4 className="font-size-18 mt-4">Welcome Back !</h4>
                                                        <p className="text-muted">Sign in to continue</p>
                                                    </div>


                                                    <div className="p-2 mt-5">
                                                        <AvForm className="form-horizontal" >

                                                            <FormGroup className="auth-form-group-custom mb-4">
                                                                <i className="ri-user-2-line auti-custom-input-icon"></i>
                                                                <Label htmlFor="username">Username</Label>
                                                                {/* <AvField name="username" type="text" className="form-control" id="username" validate={{ email: true, required: true }} placeholder="Enter username" /> */}
                                                                <AvField name="username" type="text" className="form-control" id="username" placeholder="Enter username" />
                                                            </FormGroup>

                                                            <FormGroup className="auth-form-group-custom mb-4">
                                                                <i className="ri-lock-2-line auti-custom-input-icon"></i>
                                                                <Label htmlFor="userpassword">Password</Label>
                                                                <AvField name="password" type="password" className="form-control" id="userpassword" placeholder="Enter password" />
                                                            </FormGroup>

                                                            <div className="custom-control custom-checkbox">
                                                                <Input type="checkbox" className="custom-control-input" id="customControlInline" />
                                                                <Label className="custom-control-label" htmlFor="customControlInline">Remember me</Label>
                                                            </div>

                                                            <div className="mt-4 text-center">
                                                                <Button color="primary" className="w-md waves-effect waves-light" type="submit">Log In</Button>
                                                            </div>

                                                            <div className="mt-4 text-center">
                                                                <Link to="/auth-recoverpw" className="text-muted"><i className="mdi mdi-lock mr-1"></i> Forgot your password?</Link>
                                                            </div>
                                                        </AvForm>
                                                    </div>

                                                    <div className="mt-5 text-center">
                                                        <p>Don't have an account ? <Link to="/auth-register" className="font-weight-medium text-primary"> Register </Link> </p>
                                                        <p>© 2021 Gedge Platform</p>
                                                    </div>
                                                </div>

                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>
                            <Col lg={8}>
                                <div className="authentication-bg">
                                    <div className="bg-overlay"></div>
                                </div>
                            </Col>
                        </Row>
                    </Container>
                </div>
            </React.Fragment>
        );
    }

render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Input Addons</strong>
        </h5>
        <InputGroup>
          <InputGroupAddon addonType="prepend">@</InputGroupAddon>
          <Input placeholder="username" />
        </InputGroup>
        <br />
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>
              <Input addon type="checkbox" aria-label="Checkbox for following text input" />
            </InputGroupText>
          </InputGroupAddon>
          <Input placeholder="Check it out" />
        </InputGroup>
        <br />
        <InputGroup>
          <Input placeholder="username" />
          <InputGroupAddon addonType="append">
            <InputGroupText>@example.com</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
        <br />
        <InputGroup>
          <InputGroupAddon addonType="prepend">
            <InputGroupText>$</InputGroupText>
            <InputGroupText>$</InputGroupText>
          </InputGroupAddon>
          <Input placeholder="Dolla dolla billz yo!" />
          <InputGroupAddon addonType="append">
            <InputGroupText>$</InputGroupText>
            <InputGroupText>$</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
        <br />
        <InputGroup>
          <InputGroupAddon addonType="prepend">$</InputGroupAddon>
          <Input placeholder="Amount" min={0} max={100} type="number" step="1" />
          <InputGroupAddon addonType="append">.00</InputGroupAddon>
        </InputGroup>
      </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>
    );
}

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>
    );
  }

CategoryData = props => {
  return (
    <div>
      <CardTitle>
        <h4>{props.catData.name}</h4>
      </CardTitle>
      <CardSubtitle>
        Frequency(ms): <br />{' '}
        <div id="freqExamples">
          (ex: 1 sec = 1000; 1 min = 60000; 30 min = 1800000; 1 hour = 3600000; 1 day = 86400000)
        </div>
      </CardSubtitle>
      <Input
        type="text"
        name="frequency"
        id={`${props.catData.name}-freq`}
        placeholder="Set frequency of query execution"
        value={props.catData.frequency}
        onChange={props.freqChange}
      />
      <br />
      <CardSubtitle>Queries:</CardSubtitle>
      <QueryList
        key={props.catData.name}
        name={props.catData.name}
        queries={props.catData.queries}
        deleteQuery={props.deleteQuery}
        queryChange={props.queryChange}
      />
      <div id="btnAddQuery">
        <Button
          className="addQueryBtn"
          color="primary"
          size="md"
          id={`${props.catData.name}-addQuery`}
          onClick={props.addQuery}
          block
        >
          Add Query
        </Button>
      </div>
    </div>
  );
}

CommentBox = (props) => {

  const [isComment, setIsComment] = useState(false);

  const [commentData, setCommentData] = useState({
    id: 0,
    user: {},
    isLike: true,
    likeCount: 0,
    date: '',
    commentList: [],
    comment: ''
  });

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleCommentToggle();
    }
  };

  useEffect(() => {
    setCommentData(props.commentData)
  }, [props.commentData]);


  const handleLikeToggle = () => {
    setCommentData({
      ...commentData,
      isLike: !commentData.isLike,
      likeCount: (commentData.isLike === true ? commentData.likeCount - 1 : commentData.likeCount + 1)
    });
  };

  const handleCommentToggle = () => {
    setIsComment((previousState) => (
        !previousState
      
    ));
  };

  const {user, isLike, date, comment} = commentData;
  return (
    <div className="media flex-nowrap jr-wall-user-info mb-3">
      <Avatar alt="..." className="mr-3 jr-size-40" src={user.image}/>
      <div className="media-body">
        <h5 className="jr-wall-user-title">{user.name}</h5>
        <DisplayDate date={date}/>
        <p className="mt-2">{comment}</p>
        <div className="flex-row">
          <Button data-test="buttonComp1" variant="contained" color="primary" className="mr-3 mb-1" size="small"
                  onClick={handleLikeToggle}>{isLike === true ? 'Like' : 'UnLike'}</Button>
          <Button data-test="buttonComp2" variant="contained" className="bg-light-blue text-white mb-1" size="small"
                  onClick={handleCommentToggle}>Comment</Button>
        </div>{console.log(isComment,"isComment")}
        {isComment === true ? <div className="media mt-3">
          <Avatar className="mr-3 size-30" src={user.image}/>
          <div className="media-body">
            <Input
            data-test="pressComp"
              id="required" className="border-0"
              placeholder="Type Comments"
              onKeyPress={(event) => handleKeyPress(event)}
            />
          </div>
        </div> : null}

      </div>
    </div>
  )
}

render() {
    const {iconClass, placeholder, type, optionsArray, optionGroupsArray, optionGroupsLabels, ...attributes} = this.props;
    return (
        <FormGroup>
          <CardText className="text-gray text-custom-small mb-0">
            {placeholder}
          </CardText>
          <InputGroup className="input-group-alternative mb-3">
            <InputGroupAddon addonType="prepend">
              <InputGroupText>
                <i className={iconClass}/>
              </InputGroupText>
            </InputGroupAddon>
            {
              type === 'select' && optionsArray ?
                  <Input {...attributes} placeholder={placeholder} type={type}>
                    <option value="">{placeholder}</option>
                    {optionsArray.map(option => {
                      return (
                          <option key={option.value} value={option.value}>{option.label}</option>);
                    })}
                  </Input>
                  :
                  type === 'select' && optionGroupsArray ?
                      <Input {...attributes} placeholder={placeholder} type={type}>
                        <option value="">{placeholder}</option>
                        {optionGroupsArray.map(optionGroup => {
                          return (
                              <optgroup label={optionGroup.label} key={optionGroup.label}>
                                {optionGroup.optionList.map(option => {
                                  return (
                                      <option key={option.value}
                                              value={option.value}>{option.label}</option>);
                                })}
                              </optgroup>
                          )
                        })}
                      </Input>
                      :
                      <Input {...attributes} placeholder={placeholder} type={type}/>
            }
          </InputGroup>
        </FormGroup>
    );
  }