reactstrap#ListGroup JavaScript Examples

Todos = ({ todos, markComplete }) => {
    return (
        <ListGroup className='mt-5 mb-2'>
            {todos.map((todo) => (
                <ListGroupItem key={todo.id}>
                    {todo.title}
                    <span onClick={() => markComplete(todo.id)} className='float-end'>
                        <FaCheck />
                    </span>
                </ListGroupItem>
            ))}
        </ListGroup>
    )
}

Todos = () => {
    const { todos, dispatch } = useContext(TodoContext);

    return (
        <ListGroup className="mt-5 mb-2 items">
            {todos.map(todo => (
                <ListGroupItem key={todo.id}>
                    {todo.todoString}
                    <span
                        className="float-end"
                        onClick={() => {
                            dispatch({
                                type: REMOVE_TODO,
                                payload: todo.id
                            });
                        }}
                    >
                        <FaCheck />
                    </span>
                </ListGroupItem>
            ))}
        </ListGroup>
    );
}

Todo = ({ todos, completedFlag }) => {
    return (
        <ListGroup className='m-5 mb-2 items'>
            {
                todos.map((todo => (
                    <ListGroupItem key={todo.id}>
                        {todo.todoVal}
                        <span className='float-end' onClick={() => completedFlag(todo.id)} ><FaCheck /></span>
                    </ListGroupItem>
                )))
            }
        </ListGroup>
    )
}

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

  const { contacts, isLoading } = state;

  const history = useHistory();

  const AddContact = () => {
    dispatch({
      type: CONTACT_TO_UPDATE,
      payload: null,
      key: null
    })
    history.push("/contact/add");
  };

  if (isLoading) {
    return (
      <div className="Center">
        <Spinner color="primary" />
        <div className="text-primary">Loading...</div>
      </div>
    );
  }

  return (
    <Container className="mt-4">
      {
        contacts.length === 0 && !isLoading ?
          (
            <div className="Center text-large text-primary">
              No Contacts Found.
            </div>
          )
          :
          (
            <ListGroup>
              {Object.entries(contacts).map(([key, value]) => (
                <ListGroupItem key={key}>
                  <Contact contact={value} contactKey={key} />
                </ListGroupItem>
              ))}
            </ListGroup>
          )
      }
      <MdAdd className="fab icon " onClick={AddContact} />
    </Container>
  );
}

Details = ({ apiUrl }) => {
    const [repos, setRepos] = useState([])

    const fetchRepos = async () => {
        const { data } = await Axios.get(apiUrl)
        setRepos(data)
    }

    useEffect(() => {
        fetchRepos()
    }, [apiUrl])

    return (
        <ListGroup>
            {repos.map(repo => (
                <ListGroupItem key={repo.id}>
                    <div className='text-primary'>
                        Repo Name: {repo.name}
                    </div>
                    <div className='text-secondary'>
                        Description: {repo.description}
                    </div>
                    <div className='text-secondary'>
                        Stars: {repo.stargazers_count}
                    </div>
                    <div className='text-secondary'>
                        Watchers: {repo.watchers_count}
                    </div>
                    <div className='text-secondary'>
                        Forks: {repo.forks_count}
                    </div>
                    <div className='text-secondary'>
                        Issues: {repo.open_isses_count}
                    </div>
                    <div className='text-secondary'>
                        Size: {repo.size}
                    </div>
                    <div className='text-secondary'>
                        Language: {repo.language}
                    </div>
                    <div className='text-secondary'>
                        Created at: {repo.created_at}
                    </div>
                    <div className='text-secondary'>
                        Updated at: {repo.updated_at}
                    </div>
                </ListGroupItem>
            ))}
        </ListGroup>

    )
}

Cart = ({ cartItem, removeItem, buy }) => {
    let amount = 0;
    cartItem.forEach(item => {
        amount = parseFloat(amount) + parseFloat(item.productPrice)
    })

    return (
        <Container fluid>
            <h1 className='text text-center'>Your Cart</h1>
            <ListGroup>
                {cartItem.map(item => (
                    <ListGroupItem key={item.id}>
                        <Row>
                            <Col>
                                <img height={80} src={item.tinyImage} />
                            </Col>
                            <Col className='text-center'>
                                <div className='text-primary'>
                                    {item.productName}
                                </div>
                                <span>Price: {item.productPrice}</span>
                                <Button color="danger" onClick={() => removeItem(item)}>Remove</Button>
                            </Col>
                        </Row>
                    </ListGroupItem>
                ))}
            </ListGroup>
            {
                cartItem.length >= 1 ?
                    (
                        <Card className='text-center mt-3'>
                            <CardHeader>
                                Grand Total
                            </CardHeader>
                            <CardBody>
                                Total amount for {cartItem.length} products is: $ {amount}
                            </CardBody>
                            <CardFooter>
                                <Button color="success" onClick={buy}>Proceed to Payment</Button>
                            </CardFooter>
                        </Card>
                    )
                    :
                    (
                        <h1 className='text-warning text-center'>Your cart is empty.</h1>
                    )
            }
        </Container>
    )
}

SideBar = () => {
    const { MenuVisible, toggleMenu } = useContext(MenuContext);

    let menuStyle = {};
    if (MenuVisible) {
        menuStyle = {
            left: '0px',
        };
    }
    const toggleMenuHandler = () => toggleMenu();

    return (
        <div
            className="SideBar-container"
            style={menuStyle}
            data-test="component-sideBar"
            data-testid="component-sideBar-id"
            id="menuId"
            isVisible={MenuVisible}
        >
            <button
                className="sideBar-button"
                onClick={toggleMenuHandler}
                type="button"
                data-test="sideBar-button"
            >
                X
            </button>
            <div className="sideBar-menu" data-test="sideBar-menu">
                <ListGroup>
                    <ListGroupItem active tag="button" action>
                        MENU
                    </ListGroupItem>

                    <ListGroupItem tag="button" action>
                        <NavLink extact to="/">
                            <div className="sideBar-link">
                                <img
                                    src={homeImage}
                                    className="sideBar-image"
                                    alt=""
                                    data-test="home-image"
                                />
                                <h4>Home</h4>
                            </div>
                        </NavLink>
                    </ListGroupItem>

                    <ListGroupItem tag="button" action>
                        <NavLink extact to="/Mattress">
                            <div className="sideBar-link">
                                <img
                                    src={Mattress}
                                    className="sideBar-image"
                                    alt=""
                                    data-test="mattress-image"
                                />
                                <h4>Mattress</h4>
                            </div>
                        </NavLink>
                    </ListGroupItem>

                    <ListGroupItem tag="button" action>
                        <NavLink extact to="/BedBases">
                            <div className="sideBar-link">
                                <img
                                    src={BedBase}
                                    className="sideBar-image"
                                    alt=""
                                    data-test="bedBase-image"
                                />
                                <h4>Bed Bases</h4>
                            </div>
                        </NavLink>
                    </ListGroupItem>
                </ListGroup>
            </div>
        </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() {
    return (
      <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
        <ListGroupItem className={[s.listGroupItem].join(' ')}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a2} alt="..." />
            <i className="status status-bottom bg-success" />
          </span>
          <time className="text-link help float-right">10 sec ago</time>
          <h6 className="m-0 fw-bold mb-1">Chris Gray</h6>
          <p className="deemphasize text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={avatar} alt="..." />
            <i className="status status-bottom bg-success" />
          </span>
          <time className="text-link help float-right">2 min ago</time>
          <h6 className="m-0 mb-1">Jamey Brownlow</h6>
          <p className="deemphasize text-ellipsis m-0">Good news coming tonight. Seems they agreed to proceed</p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a1} alt="..." />
            <i className="status status-bottom bg-warning" />
          </span>
          <time className="text-link help float-right">9 min ago</time>
          <h6 className="m-0 mb-1">Livia Walsh</h6>
          <p className="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={avatar} alt="..." />
            <i className="status status-bottom bg-danger" />
          </span>
          <time className="text-link help float-right">12:56 AM</time>
          <h6 className="m-0 mb-1">Jaron Fitzroy</h6>
          <p className="deemphasize text-ellipsis m-0">What about summer break?</p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a4} alt="..." />
            <i className="status status-bottom bg-primary" />
          </span>
          <time className="text-link help float-right">Yesterday</time>
          <h6 className="m-0 mb-1">Mike Lewis</h6>
          <p className="deemphasize text-ellipsis m-0">Just ain&apos;t sure about the weekend now. 90% I&apos;ll make it.</p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a6} alt="..." />
            <i className="status status-bottom bg-success" />
          </span>
          <time className="text-link help float-right">Apr 23</time>
          <h6 className="m-0 mb-1">Freda Edison</h6>
          <p className="deemphasize text-ellipsis m-0">Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna join?</p>
        </ListGroupItem>
      </ListGroup>
    );
  }

render() {
    const posts = this.props.data.allMarkdownRemark.edges;
    const postLinks = posts.map((post) => (
      <ListGroupItem key={post.node.fields.slug}>
        <Link to={post.node.fields.slug} className="hover-underline">
          <h2 className="is-size-3">
            {post.node.frontmatter.title}
          </h2>
        </Link>
        <p>{post.node.frontmatter.author}</p>
      </ListGroupItem>
    ));
    const tag = this.props.pageContext.tag;
    const title = this.props.data.site.siteMetadata.title;
    const totalCount = this.props.data.allMarkdownRemark.totalCount;
    const tagHeader = `${totalCount} post${
      totalCount === 1 ? "" : "s"
    } tagged with “${tag}”`;

    return (
      <Layout>
        <section className="section mt-3">
          <Helmet title={`${tag} | ${title}`} />
          <div className="container content">
            <div className="columns">
              <div
                className="column is-10 is-offset-1"
                style={{ marginBottom: "6rem" }}
              >
                <h3 className="title is-size-4 is-bold-light">{tagHeader}</h3>
                <ListGroup>{postLinks}</ListGroup>
                <p>
                  <Link to="/categories/">Browse all tags</Link>
                </p>
              </div>
            </div>
          </div>
        </section>
      </Layout>
    );
  }

export function ChannelsModal({
  onCloseChannelsModal,
  channelData,
  onOpenJoinModal,
  open,
  className,
  intl,
}) {
  // @todo Move this object into `components/BaseModal`
  const closeBtn = (
    <button type="button" className="close" onClick={onCloseChannelsModal}>
      &times;
    </button>
  );
  const channelsModalTitle = intl.formatMessage(messages.ChannelsModalTitle);
  const cancelText = intl.formatMessage(messages.cancelText);
  const emptyChannelsText = intl.formatMessage(messages.emptyChannelsText);
  const joinNewText = intl.formatMessage(messages.joinNewText);

  const channels = Object.keys(channelData);
  let channelsBtns = <div />;
  if (channels.length === 0) {
    channelsBtns = <div key="empty">{emptyChannelsText}</div>;
  } else {
    channelsBtns = channels.map((chan) => (
      <ChannelItem key={`${chan}Btn`} channel={chan} />
    ));
  }

  return (
    <div>
      <Modal isOpen={open} toggle={onCloseChannelsModal} className={className}>
        <ModalHeader toggle={onCloseChannelsModal} close={closeBtn}>
          {channelsModalTitle}
        </ModalHeader>
        <ModalBody>
          <ListGroup>{channelsBtns}</ListGroup>
        </ModalBody>
        <ModalFooter>
          <Button
            onClick={() => {
              onCloseChannelsModal();
              onOpenJoinModal();
            }}
          >
            {joinNewText}
          </Button>{' '}
          <Button onClick={onCloseChannelsModal}>{cancelText}</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

render() {
    return (
      <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
        <ListGroupItem className={s.listGroupItem}>
          <span className="text-muted float-right">60%</span>
          <h6 className="m-0 mb-1">
            <strong>Urgent:</strong>
            &nbsp;Rails 4.1.0 upgrade
          </h6>
          <Progress className={['m-0'].join(' ')} color="primary" value="60" />
          <span className="help-block">3 notes added by James 2h ago...</span>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className="text-muted float-right">83%</span>
          <h6 className="m-0 mb-1">
            <strong>Primary:</strong>
            &nbsp;Light Blue App
          </h6>
          <Progress className={['progress-sm', 'm-0'].join(' ')} color="success" value="83" />
          <span className="help-block">verifying stable probability status</span>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className="text-muted float-right">44%</span>
          <h6 className="m-0 mb-1">
            <span className="circle bg-gray-dark text-warning" id="TooltipQuestion">
              <i className="fa fa-question" />
            </span>
            <UncontrolledTooltip placement="bottom" target="TooltipQuestion">
              2 issues require your attention
            </UncontrolledTooltip>
            &nbsp;
            Finish The Road to Hell Song
          </h6>
          <Progress className={['progress-sm', 'm-0'].join(' ')} color="gray-dark" value="44" />
          <span className="help-block">last update: 2h ago</span>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className="text-muted float-right">86%</span>
          <h6 className="m-0 mb-1">
            Complete project planning
          </h6>
          <Progress className={['progress-xs', 'm-0'].join(' ')} color="danger" value="86" />
          <span className="help-block">no, no way this is not working...</span>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className="text-muted float-right">100%</span>
          <h6 className="m-0 mb-1">
            <strong>Completed:</strong>
            &nbsp;Instruct newbies on coding standards
          </h6>
          <Progress className={['progress-xs', 'm-0'].join(' ')} color="primary" value="100" />
          <span className="help-block">last update: April 22, 2014 2:36 pm</span>
        </ListGroupItem>
      </ListGroup>
    );
  }

render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem>Cras justo odio</ListGroupItem>
                  <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem>Morbi leo risus</ListGroupItem>
                  <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem>Vestibulum at eros</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> tags</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
                  <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
                  <ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
                                                                                            color="warning">1</Badge></ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> disabled items</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
                  <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem disabled tag="a" href="#">Morbi leo risus</ListGroupItem>
                  <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> contextual classes</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem action color="success">Cras justo odio</ListGroupItem>
                  <ListGroupItem action color="info">Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem action color="warning">Morbi leo risus</ListGroupItem>
                  <ListGroupItem action color="danger">Porta ac consectetur ac</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> anchors</small>
              </CardHeader>
              <CardBody>
                <p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
                <ListGroup>
                  <ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
                  <ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
                  <ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
                </ListGroup>
                <p />
              </CardBody>
            </Card>
          </Col>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> buttons</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
                  <ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
                  <ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> custom content</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem active action>
                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
                    <ListGroupItemText>
                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </ListGroupItemText>
                  </ListGroupItem>
                  <ListGroupItem action>
                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
                    <ListGroupItemText>
                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </ListGroupItemText>
                  </ListGroupItem>
                  <ListGroupItem action>
                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
                    <ListGroupItemText>
                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </ListGroupItemText>
                  </ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col>
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
                <div className="card-header-actions">
                  <Badge>NEW</Badge>
                </div>
              </CardHeader>
              <CardBody>
                <Row>
                  <Col xs="4">
                    <ListGroup id="list-tab" role="tablist">
                      <ListGroupItem onClick={() => this.toggle(0)} action active={this.state.activeTab === 0} >Home</ListGroupItem>
                      <ListGroupItem onClick={() => this.toggle(1)} action active={this.state.activeTab === 1} >Profile</ListGroupItem>
                      <ListGroupItem onClick={() => this.toggle(2)} action active={this.state.activeTab === 2} >Messages</ListGroupItem>
                      <ListGroupItem onClick={() => this.toggle(3)} action active={this.state.activeTab === 3} >Settings</ListGroupItem>
                    </ListGroup>
                  </Col>
                  <Col xs="8">
                    <TabContent activeTab={this.state.activeTab}>
                      <TabPane tabId={0} >
                        <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
                          nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
                          tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
                          eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
                      </TabPane>
                      <TabPane tabId={1}>
                        <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
                          dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
                          anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
                          reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
                      </TabPane>
                      <TabPane tabId={2}>
                        <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
                          nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
                          est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
                          deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
                          laborum elit adipisicing pariatur cillum.</p>
                      </TabPane>
                      <TabPane tabId={3}>
                        <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
                          sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
                          aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
                          nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
                          eiusmod eu pariatur culpa mollit in irure.</p>
                      </TabPane>
                    </TabContent>
                  </Col>
                </Row>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }

render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Layout</strong>
        </h5>
        <div className="mb-5">
          <ListGroup>
            <ListGroupItem>Cras justo odio</ListGroupItem>
            <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
            <ListGroupItem>Morbi leo risus</ListGroupItem>
            <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
            <ListGroupItem>Vestibulum at eros</ListGroupItem>
          </ListGroup>
        </div>
        <h5 className="mb-4">
          <strong>Anchors and buttons</strong>
        </h5>
        <div className="mb-5">
          <div className="mb-5">
            <ListGroup>
              <ListGroupItem active tag="a" href="#" action>
                Cras justo odio
              </ListGroupItem>
              <ListGroupItem tag="a" href="#" action>
                Dapibus ac facilisis in
              </ListGroupItem>
              <ListGroupItem tag="a" href="#" action>
                Morbi leo risus
              </ListGroupItem>
              <ListGroupItem tag="a" href="#" action>
                Porta ac consectetur ac
              </ListGroupItem>
              <ListGroupItem disabled tag="a" href="#" action>
                Vestibulum at eros
              </ListGroupItem>
            </ListGroup>
          </div>
          <ListGroup>
            <ListGroupItem active tag="button" action>
              Cras justo odio
            </ListGroupItem>
            <ListGroupItem tag="button" action>
              Dapibus ac facilisis in
            </ListGroupItem>
            <ListGroupItem tag="button" action>
              Morbi leo risus
            </ListGroupItem>
            <ListGroupItem tag="button" action>
              Porta ac consectetur ac
            </ListGroupItem>
            <ListGroupItem disabled tag="button" action>
              Vestibulum at eros
            </ListGroupItem>
          </ListGroup>
        </div>
        <h5 className="mb-4">
          <strong>Horizontal</strong>
        </h5>
        <div className="mb-5">
          <ListGroup horizontal="lg">
            <ListGroupItem tag="a" href="#">
              Cras justo odio
            </ListGroupItem>
            <ListGroupItem tag="a" href="#">
              Dapibus ac facilisis in
            </ListGroupItem>
            <ListGroupItem tag="a" href="#">
              Morbi leo risus
            </ListGroupItem>
            <ListGroupItem tag="a" href="#">
              Porta ac consectetur ac
            </ListGroupItem>
            <ListGroupItem tag="a" href="#">
              Vestibulum at eros
            </ListGroupItem>
          </ListGroup>
        </div>
      </div>
    )
  }

render() {
    return (
      <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a3} alt="..." />
          </span>
          <p className="m-0 overflow-hidden">
            1 new user just signed up! Check out
            {/* eslint-disable */}
            &nbsp;<a href="#">Monica Smith</a>'s account.
            {/* eslint-enable */}
            <time className="help-block m-0">
              2 mins ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="glyphicon glyphicon-upload fa-lg" />
          </span>
          <p className="text-ellipsis m-0">
            2.1.0-pre-alpha just released.
            <time className="help-block m-0">
              5h ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="fa fa-bolt fa-lg" />
          </span>
          <p className="text-ellipsis m-0 overflow-hidden">
            Server load limited.
            <time className="help-block m-0">
              7h ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a5} alt="..." />
          </span>
          <p className="m-0 overflow-hidden">
            {/* eslint-disable */}
            User <a href="#">Jeff</a> registered
            {/* eslint-enable */}
            &nbsp;&nbsp;
            <Button size="xs" color="success" className="mr-1">Allow</Button>
            <Button size="xs" color="danger">Deny</Button>
            <time className="help-block m-0">
              12:18 AM
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="fa fa-shield fa-lg" />
          </span>
          <p className="m-0 overflow-hidden">
            {/* eslint-disable */}
            Instructions for changing your Envato Account password. Please
            check your account <a href="#">security page</a>.
            {/* eslint-enable */}
            <time className="help-block m-0">
              12:18 AM
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <span className="rounded bg-primary rounded-lg">
              <i className="fa fa-facebook text-white" />
            </span>
          </span>
          <p className="text-ellipsis m-0">
            New <strong>76</strong> facebook likes received.
            <time className="help-block m-0">
              15 Apr 2014
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <span className="circle circle-lg bg-gray-dark">
              <i className="fa fa-circle-o text-white" />
            </span>
          </span>
          <p className="text-ellipsis m-0">
            Dark matter detected.
            <time className="help-block m-0">
              15 Apr 2014
            </time>
          </p>
        </ListGroupItem>
      </ListGroup>
    );
  }

render() {
    return (
      <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="fa fa-check text-success fa-lg" />
          </span>
          <p className="m-0 overflow-hidden">
            2 issues require your approval.
            {/* eslint-disable */}
            &nbsp;<a href="#">The Search Project</a> completed on time!
            {/* eslint-enable */}
            <time className="help-block m-0">
              just now
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a6} alt="..." />
          </span>
          <p className="m-0 overflow-hidden">
          {/* eslint-disable */}
          <a href="#">Jeniffer Willington </a>has just endorsed you with 50 points!
          {/* eslint-enable */}
            <time className="help-block m-0">
              30 sec ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a3} alt="..." />
          </span>
          <p className="m-0 overflow-hidden">
            1 new user just signed up! Check out
            {/* eslint-disable */}
            &nbsp;<a href="#">Monica Smith</a>'s account.
            {/* eslint-enable */}
            <time className="help-block m-0">
              2 mins ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="glyphicon glyphicon-upload fa-lg" />
          </span>
          <p className="text-ellipsis m-0">
            2.1.0-pre-alpha just released.
            <time className="help-block m-0">
              5h ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="fa fa-bolt fa-lg" />
          </span>
          <p className="text-ellipsis m-0 overflow-hidden">
            Server load limited.
            <time className="help-block m-0">
              7h ago
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <img className="rounded-circle" src={a5} alt="..." />
          </span>
          <p className="m-0 overflow-hidden">
            {/* eslint-disable */}
            User <a href="#">Jeff</a> registered
            {/* eslint-enable */}
            &nbsp;&nbsp;
            <Button size="xs" color="success" className="mr-1">Allow</Button>
            <Button size="xs" color="danger">Deny</Button>
            <time className="help-block m-0">
              12:18 AM
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <i className="fa fa-shield fa-lg" />
          </span>
          <p className="m-0 overflow-hidden">
            {/* eslint-disable */}
            Instructions for changing your Envato Account password. Please
            check your account <a href="#">security page</a>.
            {/* eslint-enable */}
            <time className="help-block m-0">
              12:18 AM
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <span className="rounded bg-primary rounded-lg">
              <i className="fa fa-facebook text-white" />
            </span>
          </span>
          <p className="text-ellipsis m-0">
            New <strong>76</strong> facebook likes received.
            <time className="help-block m-0">
              15 Apr 2014
            </time>
          </p>
        </ListGroupItem>
        <ListGroupItem className={s.listGroupItem}>
          <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
            <span className="circle circle-lg bg-gray-dark">
              <i className="fa fa-circle-o text-white" />
            </span>
          </span>
          <p className="text-ellipsis m-0">
            Dark matter detected.
            <time className="help-block m-0">
              15 Apr 2014
            </time>
          </p>
        </ListGroupItem>
      </ListGroup>
    );
  }

function RoomList() {
    const [room, setRoom] = useState([]);
    const [showLoading, setShowLoading] = useState(true);
    const [nickname, setNickname] = useState('');
    const history = useHistory();

    useEffect(() => {
        const fetchData = async () => {
            setNickname(localStorage.getItem('nickname'));
            firebase.database().ref('rooms/').on('value', resp => {
                setRoom([]);
                setRoom(snapshotToArray(resp));
                setShowLoading(false);
            });
        };
      
        fetchData();
    }, []);

    const snapshotToArray = (snapshot) => {
        const returnArr = [];

        snapshot.forEach((childSnapshot) => {
            const item = childSnapshot.val();
            item.key = childSnapshot.key;
            returnArr.push(item);
        });

        return returnArr;
    }

    const enterChatRoom = (roomname) => {
        const chat = { roomname: '', nickname: '', message: '', date: '', type: '' };
        chat.roomname = roomname;
        chat.nickname = nickname;
        chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
        chat.message = `${nickname} enter the room`;
        chat.type = 'join';
        const newMessage = firebase.database().ref('chats/').push();
        newMessage.set(chat);

        firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).on('value', (resp) => {
            let roomuser = [];
            roomuser = snapshotToArray(resp);
            const user = roomuser.find(x => x.nickname === nickname);
            if (user !== undefined) {
              const userRef = firebase.database().ref('roomusers/' + user.key);
              userRef.update({status: 'online'});
            } else {
              const newroomuser = { roomname: '', nickname: '', status: '' };
              newroomuser.roomname = roomname;
              newroomuser.nickname = nickname;
              newroomuser.status = 'online';
              const newRoomUser = firebase.database().ref('roomusers/').push();
              newRoomUser.set(newroomuser);
            }
        });
    
        history.push('/chatroom/' + roomname);
    }

    const logout = () => {
        localStorage.removeItem('nickname');
        history.push('/login');
    }

    return (
        <div>
            {showLoading &&
                <Spinner color="primary" />
            }
            <Jumbotron>
                <h3>{nickname} <Button onClick={() => { logout() }}>Logout</Button></h3>
                <h2>Room List</h2>
                <div>
                    <Link to="/addroom">Add Room</Link>
                </div>
                <ListGroup>
                    {room.map((item, idx) => (
                        <ListGroupItem key={idx} action onClick={() => { enterChatRoom(item.roomname) }}>{item.roomname}</ListGroupItem>
                    ))}
                </ListGroup>
            </Jumbotron>
        </div>
    );
}