1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
/*
7
Functionality and UI to ensure a user with given email (or account_id) is sync'd with stripe.
8
*/
9

10
import { Button, Input, InputNumber, Flex } from "antd";
11
import { User } from "@cocalc/frontend/frame-editors/generic/client";
12
import { actions } from "./actions";
13
import { UserResult } from "./user";
14
import { useTypedRedux } from "@cocalc/frontend/app-framework";
15
import { ADMIN_SEARCH_LIMIT } from "@cocalc/util/db-schema/accounts";
16

17
export function UserSearch({}) {
18
  const status = useTypedRedux("admin-users", "status");
19
  const query = useTypedRedux("admin-users", "query");
20
  const limit = useTypedRedux("admin-users", "limit");
21
  const result = useTypedRedux("admin-users", "result");
22

23
  function renderUser(user: User) {
24
    return <UserResult key={user.account_id} {...user} />;
25
  }
26

27
  return (
28
    <div style={{ margin: "0 30px" }}>
29
      <div>
30
        <Flex style={{ maxWidth: "100%" }}>
31
          <Input.Search
32
            allowClear
33
            autoFocus
34
            style={{ flex: 1, marginRight: "15px" }}
35
            value={query}
36
            placeholder="Search for users by partial name, email, account_id or project_id..."
37
            onChange={(e) => actions.set_query(e.target.value)}
38
            onKeyDown={(e) => {
39
              if (e.keyCode === 13) {
40
                actions.search();
41
              }
42
            }}
43
            enterButton="Search"
44
            size="large"
45
            onSearch={() => {
46
              actions.search();
47
            }}
48
          />
49
          <InputNumber
50
            style={{ width: "150px" }}
51
            size="large"
52
            defaultValue={limit}
53
            min={1}
54
            max={ADMIN_SEARCH_LIMIT}
55
            step={10}
56
            onChange={(limit) => {
57
              if (limit) {
58
                actions.setState({ limit });
59
              }
60
            }}
61
            addonAfter="Limit"
62
          />
63
        </Flex>
64
        {!!status && (
65
          <div>
66
            <pre>{status}</pre>
67
            <Button onClick={() => actions.clear_status()}>Clear</Button>
68
          </div>
69
        )}
70
        {(result?.size ?? 0) > 0 &&
71
          result.map((user) => renderUser(user.toJS()))}
72
      </div>
73
    </div>
74
  );
75
}
76

77