CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/landing/compute-server-templates.tsx
Views: 687
1
import PublicTemplates from "@cocalc/frontend/compute/public-templates";

2
import { useState } from "react";

3
import InPlaceSignInOrUp from "components/auth/in-place-sign-in-or-up";

4
import useProfile from "lib/hooks/profile";

5
import SelectProject from "components/project/select";

6
import basePath from "lib/base-path";

7
import { join } from "path";

8
import apiPost from "lib/api/post";

9


10
type State = "browse" | "sign-in" | "select-project";

11


12
export default function ComputeServerTemplates({

13
  style,

14
  getPopupContainer,

15
}: {

16
  style?;

17
  getPopupContainer?;

18
}) {

19
  const [id, setId0] = useState<number | null>(null);

20
  const setId = (id) => {

21
    setId0(id);

22
    setState("browse");

23
  };

24
  const [state, setState] = useState<State>("browse");

25
  const profile = useProfile({ noCache: true });

26
  //const [account_id, setAccountId] = useState<string | null>(null);

27
  return (

28
    <div>

29
      <PublicTemplates

30
        getPopupContainer={getPopupContainer}

31
        style={style}

32
        setId={(id) => {

33
          setId(id);

34
          if (!id) {

35
            setState("browse");

36
          } else if (profile?.account_id) {

37
            setState("select-project");

38
          } else {

39
            setState("sign-in");

40
          }

41
        }}

42
      />

43
      {state == "sign-in" && (

44
        <InPlaceSignInOrUp

45
          title="Create Account"

46
          why="to build your compute server"

47
          onSuccess={() => {

48
            setState("select-project");

49
          }}

50
        />

51
      )}

52
      {state == "select-project" && (

53
        <div style={{ maxWidth: "600px", margin: "auto" }}>

54
          <SelectProject

55
            label={"Select or Create Project for your Compute Server"}

56
            defaultOpen

57
            allowCreate

58
            onChange={async ({ project_id, title }) => {

59
              if (!project_id) {

60
                // create the project

61
                const response = await apiPost("/projects/create", {

62
                  title,

63
                });

64
                project_id = response.project_id;

65
                if (!project_id) {

66
                  // didn't work -- TODO: show error

67
                  return;

68
                }

69
              }

70
              window.location.href = join(

71
                basePath,

72
                "projects",

73
                project_id,

74
                `servers?compute-server-template=${id}.${project_id}`,

75
              );

76
            }}

77
          />

78
        </div>

79
      )}

80
    </div>

81
  );

82
}

83


84