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

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