@fortawesome/free-solid-svg-icons#faChevronRight JavaScript Examples

Accordion = ({ titles, children }) => {
  const [currentTab, setCurrentTab] = useState(0);
  return (
    <Fragment>
      {children.map((child, ix) => {
        const isCurrent = ix === currentTab;
        return (
          <Fragment key={ix}>
            <div
              className={`bg-${
                isCurrent ? "primary" : "secondary"
              } ps-1 text-white w-100 mt-1`}
              onClick={() => setCurrentTab(ix)}
            >
              <span className="w-1em">
                {isCurrent ? (
                  <FontAwesomeIcon icon={faChevronDown} />
                ) : (
                  <FontAwesomeIcon icon={faChevronRight} />
                )}
              </span>
              {child.props.accordiontitle || titles[ix]}
            </div>
            {isCurrent ? child : null}
          </Fragment>
        );
      })}
    </Fragment>
  );
}

LinkEdgePosts = ({ pageContext }) => {
  const { prev, next } = pageContext
  return prev || next ? (
    <ul className="link-edge-posts">
      <li>
        {prev && (
          <Link to={prev.fields.slug} className="link-edge-post">
            <FontAwesomeIcon
              className="icon-fa icon-chevron"
              icon={faChevronLeft}
            />
            {prev.frontmatter.title}
          </Link>
        )}
      </li>
      <li>
        {next && (
          <Link to={next.fields.slug} className="link-edge-post">
            {next.frontmatter.title}
            <FontAwesomeIcon
              className="icon-fa icon-chevron"
              icon={faChevronRight}
            />
          </Link>
        )}
      </li>
    </ul>
  ) : null
}

CustomRightArrow = ({ onClick, ...rest }) => {
  return (
    <button
      className={`${styles["best-members-arrow"]} ${styles["best-members-arrow_right"]}`}
      onClick={() => onClick()}
    >
      <FontAwesomeIcon icon={faChevronRight} />
      <span className="sr-only"> Slide right controller </span>
    </button>
  );
}

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

render() {
    let Selected;
    switch (this.props.type) {
      case 'paragraph':
        Selected = Paragraph;
        break;
      case 'header':
        Selected = Header;
        break;
      default:
        Selected = Span;
        break;
    }
    return (
      <Selected {...this.props} data-dropdownopen={JSON.stringify(this.state.dropdownOpen)}>
        {this.props.children}
        {this.props.dropdown && <>
          <DropdownIcon icon={this.state.dropdownOpen ? faChevronDown : faChevronRight} size="sm" onClick={this.toogleDropdown} />
          <DropdownContent {...this.props} className="dropdownContent">
            {this.props.dropdown}
          </DropdownContent>
        </>}
      </Selected>
    )
  }

render() {
    const {
      email, folder, oId, pIndex, updatePath, userId, shareFile, moveWithin,
    } = this.props;

    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    return (
      <span className="file-path">
        <span>
          {' '}
          <FontAwesomeIcon icon={faChevronRight} />
          <ContextMenuTrigger id={folder.id + userId.toString() + oId.toString()}>
            <button type="button" className="path-btn" onClick={() => updatePath(userId, oId, pIndex)}>{folder.name}</button>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={folder.id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(folder.webViewLink, 'blank')}>
              <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
              View on Google Drive
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(folder.id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, folder, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (folder.starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item and all its contents will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </span>
      </span>
    );
  }

Separator = () => (
  <li className="breadcrumbs-sep">
    <FontAwesomeIcon icon={faChevronRight} color="inherit" />
  </li>
)

function ParticipationsButtons({ participations, setParticipation }) {
    const screenClass = useScreenClass();
    const { tournaments } = useSelector((state) => state.tournaments);
    const [index, setIndex] = useState(undefined);
    const [tournament, setTournament] = useState(undefined);
    const { search } = useLocation();

    useEffect(() => {
        if (index === undefined && tournaments.length) {
            const { participationId } = queryString.parse(search);
            if (!participationId) setIndex(0);
            else {
                const participation = participations.find(
                    (p) => p.id === +participationId
                );
                const newIndex = _.findIndex(
                    tournaments,
                    (t) => t.id === participation?.TournamentId
                );
                if (newIndex !== -1) {
                    setIndex(newIndex);
                    if (newIndex === index)
                        setTournament(tournaments[newIndex]);
                }
            }
        } else {
            const newIndex = _.findIndex(
                tournaments,
                (t) => t.id === tournament?.id
            );
            if (newIndex !== -1) {
                setIndex(newIndex);
                if (newIndex === index) setTournament(tournaments[newIndex]);
            }
        }
    }, [tournaments]);

    useEffect(() => {
        const newTournament = tournaments[index];
        if (newTournament) {
            const participation = _.find(participations, {
                TournamentId: newTournament.id,
            });
            if (participation) setParticipation(participation);
            setTournament(newTournament);
        }
    }, [index]);

    useEffect(() => {
        const { participationId } = queryString.parse(search);
        if (!participationId) setIndex(0);
    }, [search]);

    const onTournamentChange = ({ value }) => {
        setIndex(_.findIndex(tournaments, { id: value }));
    };

    return (
        <Row
            justify={screenClass === 'xs' ? 'center' : 'between'}
            align="center"
        >
            <Hidden xs>
                <Col xs="content">
                    <button
                        className="btnPrimary"
                        onClick={() => setIndex(index - 1)}
                        disabled={index <= 0}
                    >
                        <FontAwesomeIcon icon={faChevronLeft} />
                    </button>
                </Col>
            </Hidden>

            <Col>
                <Select
                    value={{
                        value: tournament?.id,
                        label: tournament?.name,
                    }}
                    onChange={onTournamentChange}
                    options={tournaments.map((tournament) => ({
                        value: tournament.id,
                        label: tournament.name,
                    }))}
                    isSearchable={false}
                />
            </Col>

            <Hidden xs>
                <Col xs="content">
                    <button
                        className="btnPrimary"
                        onClick={() => setIndex(index + 1)}
                        disabled={index >= tournaments.length - 1}
                    >
                        <FontAwesomeIcon icon={faChevronRight} />
                    </button>
                </Col>
            </Hidden>
        </Row>
    );
}

function HomepageLoggedIn(props) {
  const [houseMembers, setHouseMembers] = useState([]);
  const getHouseMembers = useCallback(async () => {
    const response = await new UsersApi().getHouseMembers(props.currentUser.userId, 0, 4);
    setHouseMembers(response.data.members);
  }, [props.currentUser]);
  useEffect(() => {
    getHouseMembers();
  }, [getHouseMembers]);

  const [communities, setCommunities] = useState([]);

  const [currentPage, setCurrentPage] = useState(0);
  const [payments, setPayments] = useState();
  const [date, setDate] = useState([new Date(), new Date()]);
  const [selectedOption, setSelectedOption] = useState('weeks');

  const getPayments = useCallback(async (ids, page) => {
    for (let i = 0; i < ids.length; i++) {
      const response = await new PaymentsApi().getCommunityAdminPayments(ids[i], props.currentUser.userId, page, 4);
      setPayments(response.data);
    }
  }, [props.currentUser]);
  const recalculate = function (page) {
    setCurrentPage(page);
    getPayments(communities, page);
  }

  const [amenities, setAmenities] = useState([]);

  const getAmenities = useCallback(async (ids) => {
    const newAmenities = [];
    for (let i = 0; i < ids.length; i++) {
      const response = await new AmenitiesApi().getAmenitiesForCommunityId(ids[i]);
      response.data.forEach(amenity => newAmenities.push(amenity));
    }
    setAmenities(newAmenities);
  }, []);

  const getCommunities = useCallback(async () => {
    const response = await new UsersApi().getUser(props.currentUser.userId);
    setCommunities(response.data.communityIds);
    getAmenities(response.data.communityIds);
    getPayments(response.data.communityIds, 0);
  }, [getAmenities, getPayments, props.currentUser]);

  useEffect(() => {
    getCommunities();
  }, [getCommunities]);
  
  return (
    <OuterContainer>
      <MainContainer>
        <h1>Home</h1>
        <TopContainer>
          <TopCard
            header={
              <Text bold fontSize="24px">
                House Members
              </Text>
            }
            footer={
              <Link
                to="/housemembers"

                icon={faChevronRight}

                bold
                color={styles.colors.blue}
                width="fit-content"
              >
                View All
              </Link>
            }
          >
            {houseMembers.map(member => {
            return (
              <HouseMember key={member.id}>
                <HouseMemberInformation>
                  <Avatar src={member.image} />
                  <HouseMemberText>
                    <Text bold>
                      {member.name}
                    </Text>
                    {
                    // This is currently not used as the information is not available from the back-end service, nor would it be useful to have
                    // See #87

                    /*<Text color={darken(0.2, styles.colors.grey)}>
                      ID#{member.id}
                    </Text>*/
                    }
                  </HouseMemberText>
                </HouseMemberInformation>
                <Link to={`/users/${member.id}/message`} color={styles.colors.black}>
                  <FontAwesomeIcon icon={faEnvelope} size="lg" />
                </Link>
              </HouseMember>
            );
          })}
          </TopCard>
          <Spacer flexBasis="10%" />
          <TopCard
            header={
              <Text bold fontSize="24px">
                Payments
              </Text>
            }
          >
            <table>
              <thead>
                <tr>
                  <TableHeader>
                    <Text bold uppercase>Type</Text>
                  </TableHeader>
                  <TableHeader>
                    <Text bold uppercase>Amount</Text>
                  </TableHeader>
                  <TableHeader>
                    <Text bold uppercase>Due Date</Text>
                  </TableHeader>
                </tr>
              </thead>
              <tbody>
                {payments ? payments.payments.map(payment => {
                  return (
                    <tr key={payment.id}>
                      <TableData align="left">{payment.type || 'Not provided' /* payment.type */}</TableData>
                      <TableData>${payment.charge}</TableData>
                      <TableData>
                        {payment.dueDate}
                      </TableData>
                    </tr>
                  );
                }) : ''}
              </tbody>
            </table>
            <div>
              {payments ? <MultipleSelectClick
                justifyContent="center"
                options={(() => { // TODO: Improve DX here
                  const options = [];

                  options.push({
                    text: <FontAwesomeIcon icon={faChevronLeft} />,
                    onClick: () => recalculate(currentPage - 1),
                    disabled: (currentPage - 1) < 0,
                  });

                  if ((currentPage + 1) !== 1) options.push({
                    text: '1',
                    onClick: () => recalculate(0),
                  });

                  if ((currentPage - 1) > 1) {
                    options.push({
                      text: '...',
                      disabled: true,
                    });
                  }

                  if (currentPage > 1) {
                    options.push({
                      text: currentPage,
                      onClick: () => recalculate(currentPage - 1),
                    });
                  }

                  options.push({
                    text: (currentPage + 1),
                    onClick: () => recalculate(currentPage),
                    selected: true,
                  });

                  if ((currentPage + 1) < payments.pageInfo.totalPages) {
                    if ((currentPage + 2) < payments.pageInfo.totalPages) options.push({
                      text: currentPage + 2,
                      onClick: () => recalculate(currentPage + 1),
                    });

                    if ((currentPage + 2) <= (payments.pageInfo.totalPages - 2)) options.push({
                      text: '...',
                      disabled: true,
                    });

                    options.push({
                      text: payments.pageInfo.totalPages,
                      onClick: () => recalculate(payments.pageInfo.totalPages - 1),
                    });
                  }

                  options.push({
                    text: <FontAwesomeIcon icon={faChevronRight} />,
                    onClick: () => recalculate(currentPage + 1),
                    disabled: currentPage >= (payments.pageInfo.totalPages - 1),
                  });

                  return options;
                })()}
              /> : ''}
            </div>
          </TopCard>
        </TopContainer>

        <BottomContainer>
          <TopContainer>
            <div>
              <h1>Amenity Booking</h1>
            </div>
            <AmenityOptionContainer>
              <CustomisedMultipleSelect
                selected={selectedOption}
                setSelected={setSelectedOption}
                options={[
                  {id: 'days', text: 'Days'},
                  {id: 'weeks', text: 'Weeks'},
                  {id: 'months', text: 'Months'},
                ]}
              />
              <CustomisedDateRangePicker
                onChange={setDate}
                value={date}
              
                maxDetail="year"
                fomat="y-MM-dd"
                calendarIcon={
                  <FontAwesomeIcon
                    icon={faCalendarDay}
                    color={styles.colors.grey}
                  />
                }
                clearIcon={
                  <FontAwesomeIcon
                    icon={faTimes}
                  />
                }
              />
            </AmenityOptionContainer>
          </TopContainer>
          <AmenityListContainer>
            {amenities.map(amenity =>
              <Card
                key={amenity.id}
                margin="5px 0"
                image={
                  <Image
                    src="https://http.cat/400"
                  />
                }
                header={
                  <AmenityCardContainer>
                    <Text bold fontSize="24px">
                      {amenity.description}
                    </Text>
                    <FontAwesomeIcon
                      icon={faCloudMoon /* Needs to be calculated depending on time, need to see backend implementation of this*/ }
                      color={styles.colors.purple}
                    />
                  </AmenityCardContainer>
                }
              >
                <AmenityCardContainer>
                  <Text color={darken(0.2, styles.colors.grey)}>
                    12 AM
                  </Text>
                  <Text backgroundColor={styles.colors.red} label bold fontSize="12px" color={styles.colors.white}>
                    28. Aug 2021
                  </Text>
                </AmenityCardContainer>
              </Card>
            )}
          </AmenityListContainer>
        </BottomContainer>
      </MainContainer>
      <Spacer flexBasis="30%" />
    </OuterContainer>
  );
}

render() {
        const {pool: {createPool, relayConverterStatus}} = this.props;
        const {setConversionFeeVisible, setFundingDisplayVisible, conversionFee, reserves} = this.state;
        const converterAddress = relayConverterStatus.message.events["1"].address;
        const smartTokenAddress = relayConverterStatus.message.events.SmartTokenAdded.returnValues._smartToken; 

        let reserveDetails = <span/>;
        if (createPool && reserves.length > 0) {
          reserveDetails = createPool.reserves.map(function(item, idx){
            return <Col lg={4} xs={4}>
             <div className="cell-label">{item.data.symbol}</div>
             <div className="cell-data"><AddressDisplay address={item.data.address}/></div>
            </Col>
          })
        }
        
        let conversionFeeDisplay = <span/>;
        if (setConversionFeeVisible) {
          conversionFeeDisplay = (
            <Row className="set-pool-container">
              <Col lg={10} xs={10}> 
             <Form.Control type="text" placeHolder="Set pool conversion fees, maximum 3%"
             value={conversionFee} onChange={this.conversionFeeUpdated}/>
             </Col>
             <Col lg={2} xs={2}>
             <Button onClick={this.updateConversionFee}>Update</Button>
             </Col>
            </Row>
            )
        }
        
        let fundingDisplay = <span/>;
        const self = this;
        if (setFundingDisplayVisible && reserves.length > 0) {
          fundingDisplay = (
            <Row className="set-pool-container">
              {createPool.reserves.map(function(item, idx) {
                return <Col lg={12} xs={12}>
                <TokenAmountRow item={item.data} idx={idx} updateTokenAmount={self.updateTokenAmount}/>
                </Col>
              })}
             <Col lg={2} xs={2}>
             <Button onClick={this.updatePoolFunding}>Update</Button>
             </Col>
            </Row>            
            )
        }
        let transactionStatus = <span/>;
        
        return (
        <div className="create-pool-form-container app-toolbar-container">
        {transactionStatus}
        <Container>
              <div className="header">
                Congratulations !! Your pool has been deployed successfully.
              </div>
              <div>
              <Row className="sub-header">
                <Col lg={12} xs={12}>
                  Pool Details
                </Col>
              </Row>
              <Row>
                <Col lg={6}>
                  <div className="cell-label">
                  Pool Token Address
                  </div>
                  <div className="cell-data">
                  {smartTokenAddress}
                  </div>
                </Col>
                <Col lg={6}>
                  <div className="cell-label">
                  Pool Converter Address
                  </div>
                  <div className="cell-data">
                  {converterAddress}
                  </div>
                </Col>
              </Row>
              <Row>
                <Col lg={4} xs={4}>
                  <div className="cell-label">
                  Name
                  </div>
                  <div className="cell-data">
                  {createPool.name}
                  </div>
                </Col>
                <Col lg={4} xs={4}>
                <div className="cell-label">
                  Symbol
                    </div>
                 <div className="cell-data">  
                  {createPool.symbol}
                  </div>
                </Col>
                <Col lg={4} xs={4}>
                <div className="cell-label">
                  Supply
                      </div>
                      <div className="cell-data">      
                  {createPool.supply}
                   </div>
                </Col>
              </Row>
              <Row className="sub-header">
                <Col lg={12} xs={12}>
                  Pool Reserves
                </Col>
              </Row>              
              <Row>
                  {reserveDetails}
              </Row>
              
              <Row>
                <Col lg={12} className="sub-header">
                  Next steps
                </Col>
                <Col lg={12} className="app-next-step-col">
                  <div onClick={this.toggleExpandSetConversionFee}>
                    Set Pool conversion fees <FontAwesomeIcon icon={faChevronDown} />
                  </div>
                  {conversionFeeDisplay}
                </Col>
                <Col lg={12} className="app-next-step-col">
                  <div onClick={this.toggleExpandSetFunding}>
                  Add initial pool liquidity <FontAwesomeIcon icon={faChevronDown}/>
                  </div>
                  {fundingDisplay}
                </Col>
                <Col lg={12} className="app-next-step-col">
                  <div onClick={this.gotoPoolPage}>
                  View your pool <FontAwesomeIcon icon={faChevronRight} onClick={this.openPoolTab}/>
                  </div>
                </Col>
              </Row>
              </div>
              </Container>
            </div>
            )
    }