outline-mobile/src/pages/Mine.tsx

import { NavBar, Toast } from 'antd-mobile';
import { useEffect, useRef, useState } from 'react';
import './Mine.scss';

import UploadedList from '../components/UploadedList';
import { Measurement } from '../services/apiTypes';
import UnuploadList from '../components/UnuploadList';
import MineSegment from '../components/MineSegment';
import Bridge from '../utils/bridge';

const PAGE_SIZE = 10;

export default function Mine() {
  const [tabIndex, setTabIndex] = useState(0);
  const [uploadedList, setUploadedList] = useState<Measurement[]>([]);
  const [unuploadList, setUnuploadList] = useState<Measurement[]>([]);
  const noMoreUploaded = useRef(false);
  const noMoreUnupload = useRef(false);
  const [selectIds, setSelectIds] = useState<number[]>([]);
  const onItemSelected = (id: number) => {
    if (selectIds.includes(id)) {
      setSelectIds(selectIds.filter((i) => i !== id));
    } else {
      setSelectIds([...selectIds, id]);
    }
  };

  useEffect(() => {
    Bridge.getUploadedRecords({
      size: PAGE_SIZE,
    }).then((res) => {
      if (res.success) {
        setUploadedList((list) => list.concat(res.data || []));
        noMoreUploaded.current = res.data.length < PAGE_SIZE;
      } else {
        noMoreUnupload.current = true;
        Toast.show(res.message);
      }
    });

    Bridge.getUnuploadRecords({
      size: PAGE_SIZE,
    }).then((res) => {
      if (res.success) {
        setUnuploadList((list) => list.concat(res.data || []));
        noMoreUnupload.current = res.data.length < PAGE_SIZE;
      } else {
        noMoreUnupload.current = true;
        Toast.show(res.message);
      }
    });
  }, []);

  const onUploadClick = () => {
    Bridge.uploadRecords({ ids: selectIds }).then((res) => {
      if (!res.success) {
        Toast.show(res.message);
      }
    });
  };

  async function loadMoreUploadedRecords() {
    const res = await Bridge.getUploadedRecords({
      lastId: uploadedList[uploadedList.length - 1].id,
      size: PAGE_SIZE,
    });
    if (res.success) {
      noMoreUploaded.current = res.data.length < PAGE_SIZE;
      setUploadedList((list) => list.concat(res.data));
    } else {
      noMoreUploaded.current = true;
      Toast.show(res.message);
    }
  }

  async function loadMoreUnuploadRecords() {
    const res = await Bridge.getUnuploadRecords({
      lastId: unuploadList[unuploadList.length - 1].id,
      size: PAGE_SIZE,
    });
    if (res.success) {
      noMoreUnupload.current = res.data.length < PAGE_SIZE;
      setUnuploadList((list) => list.concat(res.data));
    } else {
      noMoreUnupload.current = true;
      Toast.show(res.message);
    }
  }

  return (
    <div>
      <NavBar className="bg-white" back={null}>
        我的
      </NavBar>
      <div className="home-page-content">
        <MineSegment tabIndex={tabIndex} setTabIndex={setTabIndex} />
        <main>
          {tabIndex === 0 && (
            <UploadedList
              dataList={uploadedList}
              hasMore={!noMoreUploaded.current}
              loadMore={loadMoreUploadedRecords}
            />
          )}
          {tabIndex === 1 && (
            <UnuploadList
              dataList={unuploadList}
              selectIds={selectIds}
              onItemSelected={onItemSelected}
              onUpload={onUploadClick}
              hasMore={!noMoreUnupload.current}
              loadMore={loadMoreUnuploadRecords}
            />
          )}
        </main>
      </div>
    </div>
  );
}