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

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
}

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

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