function EditPrefixModal()

in packages/graph-explorer/src/modules/Namespaces/UserPrefixes.tsx [186:275]
70 lines of code
8 McCabe index (conditional complexity)

function EditPrefixModal({
  opened,
  onClose,
}: {
  opened: boolean;
  onClose: () => void;
}) {
  const config = useConfiguration();

  const [hasError, setError] = useState(false);
  const [form, setForm] = useState<PrefixForm>({
    prefix: "",
    uri: "",
  });

  const onFormChange = useCallback(
    (attribute: "prefix" | "uri") => (value: string) => {
      setForm(prev => ({
        ...prev,
        [attribute]: value,
      }));
    },
    []
  );

  const onSave = useAtomCallback(
    useCallback(
      async (_get, set, prefix: string, uri: string) => {
        if (!config?.id) {
          return;
        }

        await set(schemaAtom, async prevSchemas => {
          const updatedSchemas = new Map(await prevSchemas);
          const activeSchema = updatedSchemas.get(config.id);

          updatedSchemas.set(config.id, {
            ...(activeSchema || {}),
            vertices: activeSchema?.vertices || [],
            edges: activeSchema?.edges || [],
            prefixes: [...(activeSchema?.prefixes || []), { prefix, uri }],
          });

          return updatedSchemas;
        });
      },
      [config?.id]
    )
  );

  const onSubmit = useCallback(() => {
    if (!form.prefix || !form.uri) {
      setError(true);
      return;
    }

    onSave(form.prefix, form.uri);
    setForm({ prefix: "", uri: "" });
    setError(false);
    onClose();
  }, [form.prefix, form.uri, onClose, onSave]);

  return (
    <Modal
      opened={opened}
      onClose={onClose}
      centered={true}
      title="Create a new Namespace"
    >
      <div>
        <InputField
          label="Namespace"
          value={form.prefix}
          onChange={onFormChange("prefix")}
          placeholder="Namespace"
          validationState={hasError && !form.prefix ? "invalid" : "valid"}
          errorMessage="Namespace is required"
        />
        <InputField
          className="input-uri"
          label="URI"
          value={form.uri}
          onChange={onFormChange("uri")}
          placeholder="URI"
          validationState={hasError && !form.uri ? "invalid" : "valid"}
          errorMessage="URI is required"
        />
      </div>
      <div className="flex flex-row justify-end border-t pt-4">
        <Button icon={<SaveIcon />} variant="filled" onPress={onSubmit}>