Merge pull request #25 from developmentseed/state-refactor

Refactor state management

Author: batpad

src/ImageBuilder.jsx renamed to src/ImageSelect/ImageBuilder.jsx

@@ -1,7 +1,8 @@
+import { useEffect, useState, useContext } from "react";
 import { Terminal } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
-import { useEffect, useState } from "react";
 import { BinderRepository } from "@jupyterhub/binderhub-client";
+import { SpawnerFormContext } from "../state";
 
 async function buildImage(repo, ref, term, fitAddon, onImageBuilt) {
   const providerSpec = "gh/" + repo + "/" + ref;
@@ -89,9 +90,9 @@ function ImageLogs({ visible, setTerm, setFitAddon }) {
     </>
   );
 }
-export function ImageBuilder({ visible, unlistedInputName }) {
+export function ImageBuilder({ visible, name }) {
   const [repo, setRepo] = useState("");
-  const [builtImage, setBuiltImage] = useState(null);
+  const { customImage, setCustomImage } = useContext(SpawnerFormContext);
 
   // FIXME: Allow users to actually configure this
   const [ref, _] = useState("HEAD"); // eslint-disable-line no-unused-vars
@@ -132,15 +133,15 @@ export function ImageBuilder({ visible, unlistedInputName }) {
           value="Build image"
           onClick={async () => {
             await buildImage(repo, ref, term, fitAddon, (imageName) => {
-              setBuiltImage(imageName);
+              setCustomImage(imageName);
               term.write(
                 "\nImage has been built! Click the start button to launch your server",
               );
             });
           }}
         />
-        {visible && builtImage && (
-          <input name={unlistedInputName} type="hidden" value={builtImage} />
+        {visible && customImage && (
+          <input name={name} type="hidden" value={customImage} />
         )}
       </div>
 

src/ImageSelect/index.jsx

@@ -0,0 +1,70 @@
+import { useContext } from "react";
+import { SelectField, TextField } from "../components/form/fields";
+import { ImageBuilder } from "./ImageBuilder";
+import useSelectOptions from "../hooks/useSelectOptions";
+import { SpawnerFormContext } from "../state";
+
+const extraChoices = [
+  {
+    value: "dockerImage",
+    label: "Specify an existing docker image",
+    description:
+      "Use a pre-existing docker image from a public docker registry",
+  },
+  {
+    value: "buildImage",
+    label: "Build your own image",
+    description:
+      "Use a mybinder.org compatible GitHub repo to build your own image",
+  },
+];
+
+function ImageSelect({ config }) {
+  const { profile } = useContext(SpawnerFormContext);
+  const FIELD_ID = `profile-option-${profile.slug}--image`;
+  const FIELD_ID_UNLISTED = `${FIELD_ID}--unlisted-choice`;
+  const { display_name, choices } = config;
+
+  const { options, defaultOption } = useSelectOptions(choices, extraChoices);
+
+  const {
+    image,
+    setImage,
+    customImage,
+    setCustomImage,
+    errors,
+    touched,
+    setTouched,
+  } = useContext(SpawnerFormContext);
+
+  return (
+    <>
+      <SelectField
+        id={FIELD_ID}
+        label={display_name}
+        options={options}
+        defaultOption={defaultOption}
+        error={touched[FIELD_ID] && errors[FIELD_ID]}
+        onChange={(e) => setImage(e.value)}
+        onBlur={() => setTouched(FIELD_ID, true)}
+      />
+      {image === "dockerImage" && (
+        <TextField
+          id={FIELD_ID_UNLISTED}
+          label="Custom image"
+          value={customImage}
+          required
+          pattern="^.+:.+$"
+          error={touched[FIELD_ID_UNLISTED] && errors[FIELD_ID_UNLISTED]}
+          onChange={(e) => setCustomImage(e.target.value)}
+          onBlur={() => setTouched(FIELD_ID_UNLISTED, true)}
+        />
+      )}
+      {image === "buildImage" && (
+        <ImageBuilder name={FIELD_ID_UNLISTED} visible="true" />
+      )}
+    </>
+  );
+}
+
+export default ImageSelect;

src/Form.jsx renamed to src/ProfileForm.jsx

@@ -1,11 +1,10 @@
-import { createRoot } from "react-dom/client";
-
+import { useContext } from "react";
 import "../node_modules/xterm/css/xterm.css";
 
 import "./form.css";
-import { ResourceSelector } from "./ResourceSelector";
-import { SpawnerFormContext, SpawnerFormProvider } from "./state";
-import { useContext } from "react";
+import ImageSelect from "./ImageSelect";
+import ResourceSelect from "./ResourceSelect";
+import { SpawnerFormContext } from "./state";
 
 /**
  * Generates the *contents* of the form shown in the profile selection page
@@ -14,11 +13,11 @@ import { useContext } from "react";
  * be generated here.
  */
 function Form() {
-  const profileList = window.profileList;
-
   // Currently, we only support a single profile, with many options.
-  const profile = profileList[0];
-  const { canSubmit } = useContext(SpawnerFormContext);
+  const { profile, errors } = useContext(SpawnerFormContext);
+  const { image, resources } = profile.profile_options;
+
+  const canSubmit = Object.keys(errors).length === 0;
 
   return (
     <div className="form-grid">
@@ -30,21 +29,18 @@ function Form() {
         checked
         readOnly
       />
-      <ResourceSelector profile={profile} />
-      <input
-        id="submit-button"
+      <ImageSelect config={image} />
+      <ResourceSelect config={resources} />
+      <div />
+      <button
+        className="btn btn-jupyter form-control"
         type="submit"
-        value="Start"
         disabled={!canSubmit}
-        className="btn btn-jupyter form-control"
-      />
+      >
+        Start
+      </button>
     </div>
   );
 }
 
-const root = createRoot(document.getElementById("form"));
-root.render(
-  <SpawnerFormProvider>
-    <Form />
-  </SpawnerFormProvider>,
-);
+export default Form;

src/ProfileOption.jsx

@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import useSelectOptions from "./hooks/useSelectOptions";
+import { SpawnerFormContext } from "./state";
+import { SelectField } from "./components/form/fields";
+
+function ResourceSelect({ config }) {
+  const { display_name, choices } = config;
+
+  const { options, defaultOption } = useSelectOptions(choices);
+  const { setResource, profile, touched, setTouched, errors } =
+    useContext(SpawnerFormContext);
+  const FIELD_ID = `profile-option-${profile.slug}--resource`;
+
+  return (
+    <SelectField
+      id={FIELD_ID}
+      label={display_name}
+      options={options}
+      defaultOption={defaultOption}
+      error={touched[FIELD_ID] && errors[FIELD_ID]}
+      onChange={(e) => setResource(e.value)}
+      onBlur={() => setTouched(FIELD_ID, true)}
+    />
+  );
+}
+
+export default ResourceSelect;

src/ResourceSelect.jsx

@@ -23,7 +23,7 @@ import Select from "react-select";
  * @param {Props} props
  * @returns
  */
-export function CustomizedSelect({ options, ...props }) {
+export function CustomizedSelect({ options, hasError, ...props }) {
   const [lastSelectedChoice, setLastSelectedChoice] = useState(null);
   return (
     <Select
@@ -67,6 +67,12 @@ export function CustomizedSelect({ options, ...props }) {
         }
         setLastSelectedChoice(option);
       }}
+      styles={{
+        control: (baseStyles) => ({
+          ...baseStyles,
+          borderColor: hasError ? "red" : "grey",
+        }),
+      }}
       {...props}
     />
   );