1
import { useEffect, useRef, useState } from "react";
2
import { Checkbox, Spin } from "antd";
3
import type { ComputeServerTemplate } from "@cocalc/util/db-schema/compute-servers";
4
import { setTemplate } from "@cocalc/frontend/compute/api";
5
import { delay } from "awaiting";
6

7
export default function Template({
8
  id,
9
  template,
10
}: {
11
  id: number;
12
  template?: ComputeServerTemplate;
13
}) {
14
  const [saving, setSaving] = useState<boolean>(false);
15
  const changedRef = useRef<boolean>(false);
16
  useEffect(() => {
17
    changedRef.current = true;
18
    setSaving(false);
19
  }, [template]);
20
  if (!id) {
21
    // can't make it a template if it doesn't exist yet.
22
    return null;
23
  }
24
  return (
25
    <div>
26
      <Checkbox
27
        disabled={saving}
28
        checked={!!template?.enabled}
29
        onChange={async (e) => {
30
          try {
31
            setSaving(true);
32
            changedRef.current = false;
33
            await setTemplate({ id, template: { enabled: e.target.checked } });
34
          } finally {
35
            // just in case template doesn't change, we set this back manually
36
            await delay(5000);
37
            if (!changedRef.current) {
38
              setSaving(false);
39
            }
40
          }
41
        }}
42
      >
43
        Use as Template {saving ? <Spin /> : undefined}
44
      </Checkbox>
45
    </div>
46
  );
47
}
48

49