react-icons/ai AiOutlineLoading JavaScript Examples

Source File: TownshipModal.js From mVoterWeb with GNU General Public License v3.0

4 votes

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

Source File: SearchPage.js From mVoterWeb with GNU General Public License v3.0

4 votes

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

Source File: ballots.js From mVoterWeb with GNU General Public License v3.0

4 votes

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

react-icons/ai#AiOutlineLoading JavaScript Examples