{"size": 1022, "ext": "js", "max_stars_repo_path": "UI/src/components/Users/index.js", "max_stars_repo_name": "Eazymov/spring-admin-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "UI/src/components/Users/index.js", "max_issues_repo_name": "Eazymov/spring-admin-app", "max_issues_repo_issues_event_min_datetime": "2021-10-06T21:19:56.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-13T19:54:07.000Z", "max_forks_repo_path": "UI/src/components/Users/index.js", "max_forks_repo_name": "Eazymov/spring-admin-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 24.9268292683, "max_line_length": 78, "alphanum_fraction": 0.5547945205}
/* @flow strict */
import * as React from 'react';
import { Link } from 'react-router-dom';

import { API } from '../../API';
import { routes } from '../../routes';
import { tableConfig } from './tableConfig';
import { usePending } from '../../lib/hooks';
import { Icon, Card, Table, Button } from '../../controls';

type Props = {||};

export function Users(props: Props) {
  const [users, setUsers] = React.useState([]);
  const [loadUsers, isLoading] = usePending(API.user.getUsers);

  React.useEffect(() => {
    loadUsers().then(setUsers);
  }, [loadUsers]);

  return (
    <>
      <Link to={routes.user.create.path}>
        <Button
          theme={Button.themes.PRIMARY}
          leftIcon={<Icon.icons.Add width={14} />}
        >
          Add
        </Button>
      </Link>
      <br />
      <Card>
        <Card.Header title={`Users (${users.length})`} />
        <Card.Body>
          <Table records={users} config={tableConfig} isLoading={isLoading} />
        </Card.Body>
      </Card>
    </>
  );
}
