Function NewForm

data-browser/src/routes/NewRoute.tsx:78–158

Form for instantiating a new Resource from some Class

({ classSubject }: NewFormProps)

/** Form for instantiating a new Resource from some Class */
function NewForm({ classSubject }: NewFormProps): JSX.Element {
  const klass = useResource(classSubject);
  // TODO: Don't push to history, but replace, because currenlty back is broken
  const [newSubject, setNewSubject] = useQueryParam('newSubject', StringParam);
  const [parentSubject] = useQueryParam('parent', StringParam);
  const klassTitle = useTitle(klass);
  const [klassShortname] = useString(klass, properties.shortname);
  const [klassDescription] = useString(klass, properties.description);
  const [showDetails, setShowDetails] = useState(false);
  const [subjectErr, setSubjectErr] = useState<Error>(null);
  const store = useStore();
  const [newSubjectInput, setNewSubjectInput] = useState<string>(newSubject);
  const resource = useResource(newSubject, { newResource: true });

  useEffect(() => {
    if (newSubject == undefined) {
      setNewSubject(store.createSubject(klassShortname));
    }
  }, [newSubject]);

  // Set the class for new resources
  const [currentClass] = useArray(resource, properties.isA);
  if (currentClass.length == 0) {
    resource.set(properties.isA, [klass.getSubject()], store);
  }

  /** Changes the URL of a subject. Updates the store */
  // Should be debounced as it is quite expensive, but getting that to work turned out to be really hard
  async function handleSetSubject(newSubject: string) {
    const oldSubject = resource.getSubject();
    if (oldSubject == newSubject) {
      return;
    }
    setSubjectErr(null);
    try {
      // Expensive!
      await store.renameSubject(oldSubject, newSubject);
      setNewSubject(newSubject);
    } catch (e) {
      setSubjectErr(e);
    }
  }

  return (
    <>
      <h2>
        new <AtomicLink subject={classSubject}>{klassTitle}</AtomicLink>{' '}
        <Button
          onClick={() => setShowDetails(!showDetails)}
          icon
          subtle={!showDetails}
          title='Toggle show Class details'
        >
          <FaInfo />
        </Button>
      </h2>
      {showDetails && klassDescription && <Markdown text={klassDescription} />}
      <Field