react-icons/ai#AiOutlineLoading JavaScript Examples

The following examples show how to use react-icons/ai#AiOutlineLoading. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TownshipModal.js    From mVoterWeb with GNU General Public License v3.0 4 votes vote down vote up 
TownshipModal = props => {
  const { isModalOpen, setModalOpen, onClickTownship } = props;
  const [stateRegions, setStateRegions] = useState([]);
  const [townships, setTownships] = useState([]);
  const [, fetchData] = useAPI();

  async function fetchStateRegions() {
    const response = await fetchData('/api/locations', {
      type: 'state_regions'
    });

    setStateRegions(response.data);
  }

  useEffect(() => {
    if (isModalOpen) {
      fetchStateRegions();
    }
  }, [isModalOpen]);

  async function fetchTownships(stateRegion) {
    // Use cached values if it is already loaded
    const townshipsLoaded =
      townships.findIndex(({ stateRegion: sr }) => sr === stateRegion) > -1;

    if (townshipsLoaded) return;

    const { data } = await fetchData('/api/locations', {
      type: 'townships',
      state_region: stateRegion
    });

    const clonedTownships = [...townships];

    clonedTownships.push({
      stateRegion,
      townships: data
    });

    setTownships(clonedTownships);
  }

  function renderTownships(stateRegion) {
    const containedTownships = townships.find(
      ({ stateRegion: sr }) => sr === stateRegion
    );

    if (containedTownships) {
      return containedTownships.townships.map(township => (
        <div
          key={township}
          className="location-child"
          onClick={() => onClickTownship(stateRegion, township)}
        >
          {township}
        </div>
      ));
    }
    return <AiOutlineLoading className="loader" />;
  }

  return (
    <div style={{ width: 100 }}>
      <Modal
        isOpen={isModalOpen}
        className="location-modal"
        onRequestClose={() => setModalOpen(false)}
      >
        <div className="text-center text-bold">မြို့နယ်ရွေးပါ</div>
        {stateRegions.map((stateRegion, srIndex) => (
          <Collapsible
            key={srIndex}
            transitionTime={200}
            trigger={stateRegion}
            onOpen={() => fetchTownships(stateRegion)}
          >
            {renderTownships(stateRegion)}
          </Collapsible>
        ))}
      </Modal>
    </div>
  );
}
Example #2
Source File: SearchPage.js    From mVoterWeb with GNU General Public License v3.0 4 votes vote down vote up 
SearchPage = props => {
  const {
    type = 'candidates',
    endpoint,
    children,
    inputPlaceholder = 'ရှာဖွေလိုသော အမည်ကို ရိုက်ထည့်ပါ',
    emptyPlaceholder = '',
    notFoundPlaceholder = ''
  } = props;

  const router = useRouter();
  const [list, setList] = useState(null);
  const [page, setPage] = useState(1);
  const [searchString, setSearchString] = useState('');
  const [hasMore, setHasMore] = useState(true);
  const [loading, fetchData] = useAPI();
  const searchInputRef = useRef(null);

  useEffect(() => {
    ReactGA.pageview(window.location.pathname);
    searchInputRef.current.focus();
  }, []);

  async function apiCall(value) {
    const arr = list ?? [];

    if (page === 1) {
      setList(null);
    }

    const { data } = await fetchData(`/api/${endpoint}`, {
      page,
      query: value || searchString,
      item_per_page: 25
    });

    if (data.length === 0) {
      setHasMore(false);
    } else {
      setHasMore(true);
    }

    setPage(page + 1);

    return setList(arr.concat(data));
  }

  const debouncedCall = useCallback(
    debounce(value => apiCall(value), 500),
    []
  );

  function loadMoreData() {
    apiCall();
  }

  function onChangeSearch(e) {
    const {
      target: { value }
    } = e;
    setSearchString(value);
    debouncedCall(value);
  }

  return (
    <Layout>
      <Head>
        <title>mVoter 2020</title>
      </Head>
      <AppHeader>
        <Button>
          <i className="material-icons" onClick={() => router.back()}>
            arrow_back
          </i>
        </Button>
        <div className="search-input-group">
          <i className="material-icons">search</i>
          <input
            type="text"
            className="search-input"
            ref={searchInputRef}
            placeholder={inputPlaceholder}
            onChange={onChangeSearch}
            value={searchString}
          />
        </div>
      </AppHeader>
      <section>
        <div className="row">
          <div className="col-12">
            {!list && !loading && (
              <p className="text-center color-primary mt-3">
                {emptyPlaceholder}
              </p>
            )}
            {list && list.length === 0 && !loading && (
              <p className="text-center color-danger mt-3">
                {notFoundPlaceholder}
              </p>
            )}
            {loading && (
              <AiOutlineLoading className="loader search-page-loader" />
            )}
            <InfiniteScroll
              next={loadMoreData}
              dataLength={list && list.length}
              hasMore={hasMore}
            >
              {React.Children.map(children, child =>
                React.cloneElement(child, { [type]: list ?? [] })
              )}
            </InfiniteScroll>
          </div>
        </div>
      </section>
    </Layout>
  );
}
Example #3
Source File: ballots.js    From mVoterWeb with GNU General Public License v3.0 4 votes vote down vote up 
Ballots = () => {
  const router = useRouter();
  const [ballots, setBallots] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentSlide, setCurrentSlide] = useState(1);
  const sliderRef = useRef();
  const [, fetchData] = useAPI();

  const settings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    count: ballots.length,
    prevArrow: <PrevArrow />,
    nextArrow: <NextArrow />,
    afterChange: current => {
      setCurrentSlide(current + 1);
    }
  };

  async function fetchBallots(category = 'normal') {
    setLoading(true);

    const { data } = await fetchData('/api/ballots', {
      category
    });

    setBallots(data);
    setLoading(false);
  }

  useEffect(() => {
    ReactGA.pageview(window.location.pathname);

    fetchBallots();
  }, []);

  function onChangeCategory(value) {
    sliderRef.current.slickGoTo(0, true); // don't animate
    fetchBallots(value);
    setCurrentSlide(1);
  }

  return (
    <Layout style={{ height: '100%' }}>
      <Head>
        <title>မဲနမူနာများ | mVoter 2020</title>
      </Head>
      <AppHeader>
        <div className="d-flex">
          <Button className="no-padding" onClick={() => router.back()}>
            <i className="cursor-pointer material-icons">arrow_back</i>
          </Button>
          <span className="d-inline-block ml-3">သိမှတ်ဖွယ်ရာများ</span>
        </div>
      </AppHeader>
      <section id="Ballots" className="Ballots">
        <Select
          className="Ballots__SelectCategory"
          defaultValue={BALLOT_CATEGORIES[0]}
          isSearchable={false}
          styles={customSelectStyle}
          options={BALLOT_CATEGORIES}
          onChange={({ value }) => onChangeCategory(value)}
        />
        {/* <button onClick={() => sliderRef.current.slickGoTo(0)}>ခိုင်လုံမဲ</button>
        <button onClick={() => sliderRef.current.slickGoTo(invalidBallotIndex)}>ပယ်မဲ</button> */}
        {loading && <AiOutlineLoading className="loader ballot-loader" />}
        {!loading && (
          <>
            <Slider {...settings} ref={sliderRef}>
              {ballots.map(({ attributes: ballot }) => (
                <div key={ballot.id} className="Ballots__ballot-item">
                  <img src={ballot.image_path} alt="Ballot Sample" />
                  <div
                    className={`my-2 ${
                      ballot.is_valid ? 'valid-color' : 'invalid-color'
                    }`}
                  >
                    {ballot.is_valid ? 'ခိုင်လုံမဲ' : 'ပယ်မဲ'}
                  </div>
                  <div className="mt-1">{ballot.reason}</div>
                </div>
              ))}
            </Slider>
            <div className="text-center text-bold">
              {myanmarNumbers(currentSlide, 'my')} /
              {myanmarNumbers(ballots.length, 'my')}
            </div>
          </>
        )}
      </section>
    </Layout>
  );
}