export function CreateTeam()

in frontend/src/views/teams.js [112:218]
104 lines of code
7 McCabe index (conditional complexity)

export function CreateTeam() {
  useSetTitleTag('Create new team');
  const navigate = useNavigate();
  const userDetails = useSelector((state) => state.auth.get('userDetails'));
  const token = useSelector((state) => state.auth.get('token'));
  const [managers, setManagers] = useState([]);
  const [members, setMembers] = useState([]);

  useEffect(() => {
    if (userDetails && userDetails.username && managers.length === 0) {
      setManagers([{ username: userDetails.username, pictureUrl: userDetails.pictureUrl }]);
    }
  }, [userDetails, managers]);

  const addManagers = (values) => {
    const newValues = values.filter(
      (newUser) => !managers.map((i) => i.username).includes(newUser.username),
    );
    setManagers(managers.concat(newValues));
  };
  const removeManagers = (username) => {
    setManagers(managers.filter((i) => i.username !== username));
  };
  const addMembers = (values) => {
    const newValues = values.filter(
      (newUser) => !members.map((i) => i.username).includes(newUser.username),
    );
    setMembers(members.concat(newValues));
  };
  const removeMembers = (username) => {
    setMembers(members.filter((i) => i.username !== username));
  };
  const createTeam = (payload) => {
    delete payload['organisation'];
    pushToLocalJSONAPI('teams/', JSON.stringify(payload), token, 'POST').then((result) => {
      managers
        .filter((user) => user.username !== userDetails.username)
        .map((user) => joinTeamRequest(result.teamId, user.username, 'MANAGER', token));
      members.map((user) => joinTeamRequest(result.teamId, user.username, 'MEMBER', token));
      navigate(`/manage/teams/${result.teamId}`);
    });
  };

  return (
    <Form
      onSubmit={(values) => createTeam(values)}
      render={({ handleSubmit, pristine, form, submitting, values }) => {
        return (
          <form onSubmit={handleSubmit} className="blue-grey">
            <div className="cf pb5">
              <h3 className="f2 mb3 ttu blue-dark fw7 barlow-condensed">
                <FormattedMessage {...messages.newTeam} />
              </h3>
              <div className="w-40-l w-100 fl">
                <div className="bg-white b--grey-light ba pa4 mb3">
                  <h3 className="f3 blue-dark mv0 fw6">
                    <FormattedMessage {...messages.teamInfo} />
                  </h3>
                  <TeamInformation />
                </div>
              </div>
              <div className="w-40-l w-100 fl pl5-l pl0 ">
                <div className="mb3">
                  <Members
                    addMembers={addManagers}
                    removeMembers={removeManagers}
                    members={managers}
                    resetMembersFn={setManagers}
                    creationMode={true}
                  />
                </div>
                <div className="mb3">
                  <Members
                    addMembers={addMembers}
                    removeMembers={removeMembers}
                    members={members}
                    resetMembersFn={setMembers}
                    creationMode={true}
                    type={'members'}
                  />
                </div>
              </div>
            </div>
            <div className="fixed left-0 right-0 bottom-0 cf bg-white h3">
              <div className="w-80-ns w-60-m w-50 h-100 fl tr">
                <Link to={'../'}>
                  <CustomButton className="bg-white mr5 pr2 h-100 bn bg-white blue-dark">
                    <FormattedMessage {...messages.cancel} />
                  </CustomButton>
                </Link>
              </div>
              <div className="w-20-l w-40-m w-50 h-100 fr">
                <FormSubmitButton
                  disabled={submitting || pristine || !values.organisation_id || !values.visibility}
                  className="w-100 h-100 bg-primary white"
                  disabledClassName="bg-primary o-50 white w-100 h-100"
                >
                  <FormattedMessage {...messages.createTeam} />
                </FormSubmitButton>
              </div>
            </div>
          </form>
        );
      }}
    ></Form>
  );
}