export default function ProjectEdit()

in frontend/src/views/projectEdit.js [55:194]
122 lines of code
15 McCabe index (conditional complexity)

export default function ProjectEdit({ id }) {
  useSetTitleTag(`Edit project #${id}`);
  const [errorLanguages, loadingLanguages, languages] = useFetch('system/languages/');
  const mandatoryFields = ['name', 'shortDescription', 'description', 'instructions'];
  const token = useSelector((state) => state.auth.get('token'));
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);
  const [option, setOption] = useState('description');
  const [projectInfo, setProjectInfo] = useState({
    mappingTypes: [],
    mappingEditors: [],
    validationEditors: [],
    organisation: '',
    teams: [],
    projectInfoLocales: [
      {
        locale: '',
        name: '',
        shortDescription: '',
        description: '',
        instructions: '',
        perTaskInstructions: '',
      },
    ],
    rapidPowerUser: false,
  });
  const [userCanEditProject] = useEditProjectAllowed(projectInfo);
  const supportedLanguages =
    !errorLanguages && !loadingLanguages ? languages.supportedLanguages : [];

  useLayoutEffect(() => {
    setSuccess(false);
    setError(null);
  }, [projectInfo, option]);

  useLayoutEffect(() => {
    async function fetchData() {
      try {
        const res = await fetchLocalJSONAPI(`projects/${id}/`, token, 'GET');
        setProjectInfo(res);
      } catch (e) {}
    }
    fetchData();
  }, [id, token]);

  const saveChanges = (resolve, reject) => {
    const [defaultLocaleInfo] = projectInfo.projectInfoLocales.filter(
      (l) => l.locale === projectInfo.defaultLocale,
    );
    // Get data for default locale.
    let missingFields = [];
    if (defaultLocaleInfo === undefined) {
      missingFields.push({
        locale: projectInfo.defaultLocale,
        fields: mandatoryFields,
      });
    } else {
      const mandatoryFieldsMissing = mandatoryFields.filter(
        (m) => Object.keys(defaultLocaleInfo).includes(m) === false || defaultLocaleInfo[m] === '',
      );
      if (mandatoryFieldsMissing.length) {
        missingFields.push({
          locale: defaultLocaleInfo.locale,
          fields: mandatoryFieldsMissing,
        });
      }
    }

    const nonLocaleMissingFields = [];
    if (projectInfo.mappingTypes.length === 0) nonLocaleMissingFields.push('mappingTypes');
    if (!projectInfo.organisation) nonLocaleMissingFields.push('organisation');

    if (nonLocaleMissingFields.length) {
      missingFields.push({ locale: null, fields: nonLocaleMissingFields });
    }

    if (missingFields.length > 0) {
      setError(missingFields);
      return new Promise((resolve, reject) => reject());
    } else {
      return pushToLocalJSONAPI(`projects/${id}/`, JSON.stringify(projectInfo), token, 'PATCH')
        .then((res) => {
          setSuccess(true);
          setError(null);
        })
        .catch((e) => setError('SERVER'));
    }
  };
  const saveChangesAsync = useAsync(saveChanges);

  if (!token) {
    return <Redirect to={'/login'} noThrow />;
  }

  if (projectInfo.projectId && !userCanEditProject) {
    return (
      <div className="cf w-100 pv5">
        <div className="tc">
          <h3 className="f3 fw8 mb4 barlow-condensed">
            <FormattedMessage {...messages.projectEditNotAllowed} />
          </h3>
        </div>
      </div>
    );
  }

  const renderList = () => {
    const checkSelected = (optionSelected) => {
      let liClass = 'w-90 link barlow-condensed f4 fw5 pv3 pl2 pointer';
      if (option === optionSelected) {
        liClass = liClass.concat(' fw6 bg-grey-light');
      }
      return liClass;
    };

    const elements = [
      { value: 'description', required: true },
      { value: 'instructions', required: true },
      { value: 'metadata', required: true },
      { value: 'priority_areas' },
      { value: 'imagery' },
      { value: 'permissions' },
      { value: 'settings' },
      { value: 'actions' },
      { value: 'custom_editor' },
    ];

    return (
      <div>
        <ul className="list pl0 mt0 ttu">
          {elements.map((elm, n) => (
            <li key={n} className={checkSelected(elm.value)} onClick={() => setOption(elm.value)}>
              <FormattedMessage {...messages[`projectEditSection_${elm.value}`]} />
              {elm.required && ' *'}
            </li>
          ))}
        </ul>
      </div>
    );
  };