export function EditTeam()

in frontend/src/views/teams.js [220:341]
118 lines of code
10 McCabe index (conditional complexity)

export function EditTeam(props) {
  const userDetails = useSelector((state) => state.auth.get('userDetails'));
  const token = useSelector((state) => state.auth.get('token'));
  const [error, loading, team] = useFetch(`teams/${props.id}/`);
  const [initManagers, setInitManagers] = useState(false);
  const [managers, setManagers] = useState([]);
  const [members, setMembers] = useState([]);
  const [requests, setRequests] = useState([]);
  const [canUserEditTeam] = useEditTeamAllowed(team);
  useEffect(() => {
    if (!initManagers && team && team.members) {
      setManagers(filterActiveManagers(team.members));
      setMembers(filterActiveMembers(team.members));
      setRequests(filterInactiveMembersAndManagers(team.members));
      setInitManagers(true);
    }
  }, [team, managers, initManagers]);
  useSetTitleTag(`Edit ${team.name}`);

  const addManagers = (values) => {
    const newValues = values
      .filter((newUser) => !managers.map((i) => i.username).includes(newUser.username))
      .map((user) => formatMemberObject(user, true));
    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))
      .map((user) => formatMemberObject(user));
    setMembers(members.concat(newValues));
  };
  const removeMembers = (username) => {
    setMembers(members.filter((i) => i.username !== username));
  };
  const updateManagers = () => {
    const { usersAdded, usersRemoved } = getMembersDiff(team.members, managers, true);
    usersAdded.forEach((user) => joinTeamRequest(team.teamId, user, 'MANAGER', token));
    usersRemoved.forEach((user) => leaveTeamRequest(team.teamId, user, 'MANAGER', token));
    team.members = team.members
      .filter((user) => user.function === 'MEMBER' || user.active === false)
      .concat(managers);
  };
  const updateMembers = () => {
    const { usersAdded, usersRemoved } = getMembersDiff(team.members, members);
    usersAdded.forEach((user) => joinTeamRequest(team.teamId, user, 'MEMBER', token));
    usersRemoved.forEach((user) => leaveTeamRequest(team.teamId, user, 'MEMBER', token));
    team.members = team.members
      .filter((user) => user.function === 'MANAGER' || user.active === false)
      .concat(members);
  };

  const updateTeam = (payload) => {
    pushToLocalJSONAPI(`teams/${props.id}/`, JSON.stringify(payload), token, 'PATCH');
  };

  if (team && team.teamId && !canUserEditTeam) {
    return (
      <div className="cf w-100 pv5">
        <div className="tc">
          <h3 className="f3 fw8 mb4 barlow-condensed">
            <FormattedMessage {...messages.teamEditNotAllowed} />
          </h3>
        </div>
      </div>
    );
  }

  return (
    <div className="cf pb4 bg-tan">
      <div className="cf mt4">
        <h3 className="f2 ttu blue-dark fw7 barlow-condensed v-mid ma0 dib ttu">
          <FormattedMessage {...messages.manageTeam} />
        </h3>
        <DeleteModal id={team.teamId} name={team.name} type="teams" />
      </div>
      <div className="w-40-l w-100 mt4 fl">
        <TeamForm
          userDetails={userDetails}
          team={{
            name: team.name,
            description: team.description,
            inviteOnly: team.inviteOnly,
            visibility: team.visibility,
            organisation_id: team.organisation_id,
          }}
          updateTeam={updateTeam}
          disabledForm={error || loading}
        />
      </div>
      <div className="w-40-l w-100 mt4 pl5-l pl0 fl">
        <Members
          addMembers={addManagers}
          removeMembers={removeManagers}
          saveMembersFn={updateManagers}
          resetMembersFn={setManagers}
          members={managers}
        />
        <div className="h1"></div>
        <Members
          addMembers={addMembers}
          removeMembers={removeMembers}
          saveMembersFn={updateMembers}
          resetMembersFn={setMembers}
          members={members}
          type="members"
        />
        <div className="h1"></div>
        <JoinRequests
          requests={requests}
          teamId={team.teamId}
          addMembers={addMembers}
          updateRequests={setRequests}
        />
        <div className="h1"></div>
        <MessageMembers teamId={team.teamId} />
      </div>
    </div>
  );
}