export function EditOrganisation()

in frontend/src/views/organisationManagement.js [144:262]
114 lines of code
11 McCabe index (conditional complexity)

export function EditOrganisation(props) {
  const userDetails = useSelector((state) => state.auth.get('userDetails'));
  const token = useSelector((state) => state.auth.get('token'));
  const [initManagers, setInitManagers] = useState(false);
  const [managers, setManagers] = useState([]);
  const [error, loading, organisation] = useFetch(`organisations/${props.id}/`, props.id);
  const [isUserAllowed] = useEditOrgAllowed(organisation);
  const [projectsError, projectsLoading, projects] = useFetch(
    `projects/?organisationId=${props.id}&omitMapResults=true`,
    props.id,
  );
  useSetTitleTag(`Edit ${organisation.name}`);

  useEffect(() => {
    if (!initManagers && organisation && organisation.managers) {
      setManagers(organisation.managers);
      setInitManagers(true);
    }
  }, [organisation, managers, initManagers]);

  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 updateManagers = () => {
    let payload = JSON.stringify({ managers: managers.map((i) => i.username) });
    pushToLocalJSONAPI(`organisations/${props.id}/`, payload, token, 'PATCH');
  };

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

  return (
    <ReactPlaceholder
      showLoadingAnimation={true}
      type={'media'}
      rows={26}
      delay={100}
      ready={!error && loading === false && typeof organisation === 'object'}
    >
      {isUserAllowed ? (
        <div className="cf">
          <div className="cf pv4 w-100">
            <div className="w-auto fl">
              <h3 className="f2 ttu blue-dark fw7 ma0 barlow-condensed v-mid dib">
                <FormattedMessage {...messages.manageOrganisation} />
              </h3>
              <DeleteModal
                id={organisation.organisationId}
                name={organisation.name}
                type="organisations"
              />
            </div>
            <div className="w-auto fr">
              <Link to={`/organisations/${organisation.organisationId}/stats/`}>
                <CustomButton
                  className="bg-primary ba b--red white pv2 ph3"
                  icon={<ChartLineIcon className="h1 v-mid" />}
                >
                  <FormattedMessage {...messages.statistics} />
                </CustomButton>
              </Link>
            </div>
          </div>
          <div className="w-40-l w-100 mt4 fl">
            <OrganisationForm
              userDetails={userDetails}
              organisation={{
                name: organisation.name,
                url: organisation.url,
                slug: organisation.slug,
                logo: organisation.logo,
                description: organisation.description,
                type: organisation.type,
                subscriptionTier: organisation.subscriptionTier,
              }}
              updateOrg={updateOrg}
              disabledForm={error || loading}
            />
            <Members
              addMembers={addManagers}
              removeMembers={removeManagers}
              saveMembersFn={updateManagers}
              resetMembersFn={setManagers}
              members={managers}
            />
          </div>
          <div className="w-60-l w-100 mt4 pl5-l pl0 fr">
            <Projects
              projects={!projectsLoading && !projectsError && projects}
              viewAllEndpoint={`/manage/projects/?organisation=${organisation.name}`}
              ownerEntity="organisation"
            />
            <Teams
              teams={organisation.teams}
              viewAllQuery={`?organisationId=${props.id}`}
              isReady={!error && !loading}
            />
          </div>
        </div>
      ) : (
        <div className="cf w-100 pv5">
          <div className="tc">
            <h3 className="f3 fw8 mb4 barlow-condensed">
              <FormattedMessage {...messages.editOrgNotAllowed} />
            </h3>
          </div>
        </div>
      )}
    </ReactPlaceholder>
  );
}