Function ProjectForm

client/src/components/ProjectForm.jsx:30–265

(props)

  Contains the project creation functionality
*/
function ProjectForm(props) {
  const {
    onComplete = () => {},
    hideType = false,
    onClose,
    open,
  } = props;

  const [loading, setLoading] = useState(false);
  const [newProject, setNewProject] = useState({});
  const [error, setError] = useState("");
  const [activeMenu, setActiveMenu] = useState("empty");
  const [createdProject, setCreatedProject] = useState(null);
  const modalDialogClassName = useMemo(() => {
    if (activeMenu === "empty") return "sm:max-w-xl";
    return "sm:max-w-5xl";
  }, [activeMenu]);
  const [communityTemplate, setCommunityTemplate] = useState("");

  const team = useSelector(selectTeam);
  const connections = useSelector(selectConnections);

  const dispatch = useDispatch();

  const _onCreateProject = (noRedirect) => {
    setLoading(true);
    return dispatch(createProject({ data: newProject }))
      .then((project) => {
        setLoading(false);
        setNewProject({});
        setCreatedProject(project.payload);

        if (noRedirect) return project.payload;

        return onComplete(project.payload);
      })
      .catch((error) => {
        setLoading(false);
        setError(error);
      });
  };

  const _onCompleteTemplate = () => {
    setTimeout(() => {
      onComplete(createdProject, false);
    }, 1000);
  };

  return (
    <Modal>
      <Modal.Backdrop isOpen={open} onOpenChange={onClose}>
        <Modal.Container scroll="inside">
          <Modal.Dialog className={modalDialogClassName}>
            <Modal.CloseTrigger />
            <Modal.Header>
              <Modal.Heading className="text-2xl font-semibold">
                Create a new dashboard
              </Modal.Heading>