synapse-react-client/dist/components/ChallengeTeamWizard/CreateChallengeTeam.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as y, jsx as t } from "react/jsx-runtime";
import { forwardRef as P, useState as p, useMemo as N, useEffect as O, useImperativeHandle as W } from "react";
import { Box as n, Typography as l, Alert as _ } from "@mui/material";
import o from "../TextField/TextField.js";
import F from "./useCreateAndRegisterChallengeTeam.js";
import { noop as T, isEmpty as S } from "lodash-es";
import V from "papaparse";
const { parse: j } = V, B = 3, D = "Please limit the initial number of invited members to three. You may add additional members after the team has been created.", K = P(function(C, R) {
  const { challengeId: v, onCanSubmitChange: f = T, onFinished: g = T } = C, [a, w] = p({
    name: "",
    description: ""
  }), [d, E] = p(""), [m, M] = p(""), b = (e) => {
    const i = { ...a, ...e };
    w(i);
  }, { inviteesParseResult: I, parsedInvitees: u } = N(() => {
    const e = j(m, {
      delimiter: ",",
      transform(A) {
        return A.trim();
      }
    }), i = e.data[0] || [];
    return { inviteesParseResult: e, parsedInvitees: i };
  }, [m]), c = u.length > B, r = !!(a && a.name && a.name.length > 1 && !c);
  O(() => {
    f(r);
  }, [r, f]);
  const {
    createAndRegisterTeam: x,
    isPending: s,
    errors: h
  } = F();
  return W(
    R,
    () => ({
      submit() {
        if (!r) {
          console.warn(
            "Attempted to submit when form data was not valid. Nothing will happen."
          );
          return;
        }
        x(
          a,
          v,
          u,
          d
        ).then(([e]) => {
          g(e.id);
        }).catch(() => {
        });
      }
    }),
    [
      r,
      u,
      x,
      a,
      v,
      d,
      g
    ]
  ), /* @__PURE__ */ y(n, { children: [
    /* @__PURE__ */ t(l, { variant: "body1", sx: { lineHeight: "20px" }, children: "Create a new team for this Challenge!" }),
    /* @__PURE__ */ t(
      o,
      {
        id: "name",
        label: "Team Name",
        value: a.name,
        fullWidth: !0,
        autoFocus: !0,
        required: !0,
        onChange: (e) => b({ name: e.target.value }),
        disabled: s
      }
    ),
    /* @__PURE__ */ t(
      n,
      {
        sx: {
          display: "flex"
        },
        children: /* @__PURE__ */ t(
          o,
          {
            id: "description",
            label: /* @__PURE__ */ t(
              n,
              {
                sx: {
                  display: "flex",
                  gap: 2
                },
                children: /* @__PURE__ */ t(n, { children: "Team Description" })
              }
            ),
            value: a.description,
            fullWidth: !0,
            multiline: !0,
            rows: 4,
            onChange: (e) => b({ description: e.target.value }),
            disabled: s
          }
        )
      }
    ),
    /* @__PURE__ */ t(
      n,
      {
        sx: {
          display: "flex"
        },
        children: /* @__PURE__ */ t(
          o,
          {
            id: "message",
            label: /* @__PURE__ */ t(
              n,
              {
                sx: {
                  display: "flex",
                  gap: 2
                },
                children: /* @__PURE__ */ t(n, { children: "Recruitment Message" })
              }
            ),
            value: d,
            fullWidth: !0,
            multiline: !0,
            rows: 4,
            onChange: (e) => E(e.target.value),
            disabled: s
          }
        )
      }
    ),
    /* @__PURE__ */ t(
      o,
      {
        id: "invitees",
        label: "Emails of Additional Members to Invite (max 3)",
        placeholder: "Enter emails separated by comma",
        value: m,
        fullWidth: !0,
        onChange: (e) => M(e.target.value),
        disabled: s
      }
    ),
    (c || !S(I.errors) || h) && /* @__PURE__ */ y(_, { severity: "error", children: [
      c && /* @__PURE__ */ t(l, { variant: "body1", children: D }),
      I.errors.map((e, i) => /* @__PURE__ */ t(l, { variant: "body1", children: e.message }, i)),
      h && h.map((e) => /* @__PURE__ */ t(l, { variant: "body1", children: e.reason }, e.reason))
    ] })
  ] });
});
export {
  K as CreateChallengeTeam,
  D as TOO_MANY_INVITEES_ERROR
};
//# sourceMappingURL=CreateChallengeTeam.js.map