export default()

in source/frontend/src/components/Drawer/Settings/AccountManagement/Account/AccountAndRegionSettings.js [82:205]
105 lines of code
4 McCabe index (conditional complexity)

export default () => {
  const pageSize = 10;
  const [selected, setSelected] = React.useState([]);
  const [accounts, setAccounts] = useState([]);
  const [error, setError] = useState();
  const [render, setRender] = useState(false);
  const [loading, setLoading] = useState(false);

  const waitAndReload = async () =>
    Promise.resolve(await sleep(2000))
      .then(clearTimeout(sleep))
      .then(() => fetchAccounts())
      .then(() => setLoading(false));

  const deleteSelectedRegions = async (items) => {
    await Promise.resolve(
      R.groupWith((a, b) => a.accountId === b.accountId, items)
    ).then(
      R.forEach((e) => {
        R.map(
          (account) =>
            wrapRequest(deleteRegions, {
              accountId: account.accountId,
              regions: [{ name: account.regionId }],
            })
              .then(handleResponse)
              .then(setLoading(true))
              .then(waitAndReload)
              .then(setSelected([]))
              .catch((err) => {
                setLoading(false);
                setError(err);
              }),
          e
        );
      })
    );
    const accountsToDelete = [];
    await Promise.resolve(
      R.groupWith((a, b) => a.accountId === b.accountId, items)
    ).then(
      R.forEach((group) =>
        accounts.forEach(
          (account) =>
            account.accountId === R.head(group).accountId &&
            R.length(account.regions) === R.length(group) &&
            accountsToDelete.push(account.accountId)
        )
      )
    );
    deleteEmptyAccounts(accountsToDelete);
  };

  const deleteEmptyAccounts = (accountsToDelete) => {
    wrapRequest(deleteAccounts, {
      accountIds: accountsToDelete,
    })
      .then(handleResponse)
      .then(setLoading(true))
      .then(waitAndReload)
      .catch((err) => setError(err));
  };

  React.useEffect(() => {
    fetchAccounts();
  }, [render]);

  const fetchAccounts = async () => {
    await wrapRequest(getAccounts)
      .then(handleResponse)
      .then(R.pathOr([], ['body', 'data', 'getAccounts']))
      .then(
        R.reduce((acc, e) => {
          acc.push({
            accountId: e.accountId,
            accountName: e.name,
            regions: e.regions,
            lastCrawled: e.lastCrawled,
          });
          return acc;
        }, [])
      )
      .then(R.flatten)
      .then(setAccounts)
      .catch((err) => setError(err));
  };

  const getRows = () =>
    R.flatten(
      accounts.map((account) =>
        account.regions.map((region) =>
          createData(
            `${account.accountId + region.name}`,
            region.name,
            account.accountId,
            account.accountName,
            region.lastCrawled
          )
        )
      )
    );
  return (
    <div>
      {error && (
        <Flashbar
          type='error'
          message='We could not process that request. It could be a temporary issue. Please try again.'
        />
      )}
      <SpaceBetween direction='vertical' size='l'>
        <AccountTable
          trackBy='id'
          reload={fetchAccounts}
          rows={getRows()}
          columns={columns}
          onRemove={deleteSelectedRegions}
          sortColumn={'region'}
          pageSize={pageSize}
          selectionType='multi'
          selectedItems={selected}
          onSelectionChange={(item) => setSelected(item)}
          loading={loading}
        />
        <AccountImportForm onChange={() => setRender(!render)} />