function FilePickerApp({ onSubmit }) {
  const submitButton = /** @type {{ current: HTMLInputElement }} */ (useRef());
  const {
    filePicker: { formAction, formFields, ltiLaunchUrl, blackboard, canvas },
  } = useContext(Config);

  const [content, setContent] = useState(/** @type {Content|null} */ (null));

  const enableGroupConfig = blackboard?.groupsEnabled || canvas?.groupsEnabled;

  const [groupConfig, setGroupConfig] = useState(
    /** @type {GroupConfig} */ ({
      useGroupSet: false,
      groupSet: null,
    })
  );

  const [errorInfo, setErrorInfo] = useState(
    /** @type {ErrorInfo|null} */ (null)
  );

  /**
   * Flag indicating whether the form should be auto-submitted on the next
   * render.
   */
  const [shouldSubmit, setShouldSubmit] = useState(false);
  const submit = useCallback(() => setShouldSubmit(true), []);

  // Submit the form after a selection is made via one of the available
  // methods.
  useEffect(() => {
    if (shouldSubmit) {
      // Submit form using a hidden button rather than calling `form.submit()`
      // to facilitate observing the submission in tests and suppressing the
      // actual submit.
      submitButton.current.click();
    }
  }, [shouldSubmit]);

  /** @type {(c: Content) => void} */
  const selectContent = useCallback(
    content => {
      setContent(content);
      if (!enableGroupConfig) {
        submit();
      }
    },
    [enableGroupConfig, submit]
  );

  return (
    <main>
      <form
        className="FilePickerApp__form"
        action={formAction}
        method="POST"
        onSubmit={onSubmit}
      >
        <h1 className="FilePickerApp__heading">Assignment details</h1>
        <div className="FilePickerApp__left-col">Assignment content</div>
        <div className="FilePickerApp__right-col">
          {content ? (
            <i data-testid="content-summary" style="break-all">
              {contentDescription(content)}
            </i>
          ) : (
            <>
              <p>
                You can select content for your assignment from one of the
                following sources:
              </p>
              <ContentSelector
                onSelectContent={selectContent}
                onError={setErrorInfo}
              />
            </>
          )}
        </div>
        {content && enableGroupConfig && (
          <>
            <div className="FilePickerApp__left-col">Group assignment</div>
            <div className="FilePickerApp__right-col">
              <GroupConfigSelector
                groupConfig={groupConfig}
                onChangeGroupConfig={setGroupConfig}
              />
            </div>
            <div className="FilePickerApp__footer">
              <LabeledButton
                disabled={groupConfig.useGroupSet && !groupConfig.groupSet}
                variant="primary"
                onClick={submit}
              >
                Continue
              </LabeledButton>
            </div>
          </>
        )}
        {content && (
          <FilePickerFormFields
            ltiLaunchURL={ltiLaunchUrl}
            content={content}
            formFields={formFields}
            groupSet={groupConfig.useGroupSet ? groupConfig.groupSet : null}
          />
        )}
        <input style={{ display: 'none' }} ref={submitButton} type="submit" />
      </form>
      {shouldSubmit && <FullScreenSpinner />}
      {errorInfo && (
        <ErrorDialog
          description={errorInfo.message}
          error={errorInfo.error}
          onCancel={() => setErrorInfo(null)}
        />
      )}
    </main>
  );
}
/**
 * An application that allows the user to choose the web page or PDF for an
 * assignment.
 *
 * @param {FilePickerAppProps} props
 */
An application that allows the user to choose the web page or PDF for an
assignment.


An application that allows the user to choose the web page or PDF for an assignment .
function FilePickerApp({ onSubmit }) {
  const submitButton =  (useRef());
  const {
    filePicker: { formAction, formFields, ltiLaunchUrl, blackboard, canvas },
  } = useContext(Config);
  const [content, setContent] = useState( (null));
  const enableGroupConfig = blackboard?.groupsEnabled || canvas?.groupsEnabled;
  const [groupConfig, setGroupConfig] = useState(
     ({
      useGroupSet: false,
      groupSet: null,
    })
  );
  const [errorInfo, setErrorInfo] = useState(
     (null)
  );
  const [shouldSubmit, setShouldSubmit] = useState(false);
  const submit = useCallback(() => setShouldSubmit(true), []);
  useEffect(() => {
    if (shouldSubmit) {
      submitButton.current.click();
    }
  }, [shouldSubmit]);
  const selectContent = useCallback(
    content => {
      setContent(content);
      if (!enableGroupConfig) {
        submit();
      }
    },
    [enableGroupConfig, submit]
  );
  return (
    <main>
      <form
        className="FilePickerApp__form"
        action={formAction}
        method="POST"
        onSubmit={onSubmit}
      >
        <h1 className="FilePickerApp__heading">Assignment details</h1>
        <div className="FilePickerApp__left-col">Assignment content</div>
        <div className="FilePickerApp__right-col">
          {content ? (
            <i data-testid="content-summary" style="break-all">
              {contentDescription(content)}
            </i>
          ) : (
            <>
              <p>
                You can select content for your assignment from one of the
                following sources:
              </p>
              <ContentSelector
                onSelectContent={selectContent}
                onError={setErrorInfo}
              />
            </>
          )}
        </div>
        {content && enableGroupConfig && (
          <>
            <div className="FilePickerApp__left-col">Group assignment</div>
            <div className="FilePickerApp__right-col">
              <GroupConfigSelector
                groupConfig={groupConfig}
                onChangeGroupConfig={setGroupConfig}
              />
            </div>
            <div className="FilePickerApp__footer">
              <LabeledButton
                disabled={groupConfig.useGroupSet && !groupConfig.groupSet}
                variant="primary"
                onClick={submit}
              >
                Continue
              </LabeledButton>
            </div>
          </>
        )}
        {content && (
          <FilePickerFormFields
            ltiLaunchURL={ltiLaunchUrl}
            content={content}
            formFields={formFields}
            groupSet={groupConfig.useGroupSet ? groupConfig.groupSet : null}
          />
        )}
        <input style={{ display: 'none' }} ref={submitButton} type="submit" />
      </form>
      {shouldSubmit && <FullScreenSpinner />}
      {errorInfo && (
        <ErrorDialog
          description={errorInfo.message}
          error={errorInfo.error}
          onCancel={() => setErrorInfo(null)}
        />
      )}
    </main>
  );
}
function FilePickerApp ( { onSubmit } ) { const submitButton = ( useRef ( ) ) ; const { filePicker : { formAction , formFields , ltiLaunchUrl , blackboard , canvas } , } = useContext ( Config ) ; const [ content , setContent ] = useState ( ( null ) ) ; const enableGroupConfig = blackboard ?. groupsEnabled || canvas ?. groupsEnabled ; const [ groupConfig , setGroupConfig ] = useState ( ( { useGroupSet : false , groupSet : null , } ) ) ; const [ errorInfo , setErrorInfo ] = useState ( ( null ) ) ; const [ shouldSubmit , setShouldSubmit ] = useState ( false ) ; const submit = useCallback ( ( ) => setShouldSubmit ( true ) , [ ] ) ; useEffect ( ( ) => { if ( shouldSubmit ) { submitButton . current . click ( ) ; } } , [ shouldSubmit ] ) ; const selectContent = useCallback ( content => { setContent ( content ) ; if ( ! enableGroupConfig ) { submit ( ) ; } } , [ enableGroupConfig , submit ] ) ; return ( < main > < form className = "FilePickerApp__form" action = { formAction } method = "POST" onSubmit = { onSubmit } > < h1 className = "FilePickerApp__heading" > Assignment details < / h1 > < div className = "FilePickerApp__left-col" > Assignment content < / div > < div className = "FilePickerApp__right-col" > { content ? ( < i data-testid = "content-summary" style = "break-all" > { contentDescription ( content ) } < / i > ) : ( < > < p > 
                You can select content for your assignment from one of the
                following sources:
               < / p > < ContentSelector onSelectContent = { selectContent } onError = { setErrorInfo } / > < / > ) } < / div > { content && enableGroupConfig && ( < > < div className = "FilePickerApp__left-col" > Group assignment < / div > < div className = "FilePickerApp__right-col" > < GroupConfigSelector groupConfig = { groupConfig } onChangeGroupConfig = { setGroupConfig } / > < / div > < div className = "FilePickerApp__footer" > < LabeledButton disabled = { groupConfig . useGroupSet && ! groupConfig . groupSet } variant = "primary" onClick = { submit } > 
                Continue
               < / LabeledButton > < / div > < / > ) } { content && ( < FilePickerFormFields ltiLaunchURL = { ltiLaunchUrl } content = { content } formFields = { formFields } groupSet = { groupConfig . useGroupSet ? groupConfig . groupSet : null } / > ) } < input style = { { display : 'none' } } ref = { submitButton } type = "submit" / > < / form > { shouldSubmit && < FullScreenSpinner / > } { errorInfo && ( < ErrorDialog description = { errorInfo . message } error = { errorInfo . error } onCancel = { ( ) => setErrorInfo ( null ) } / > ) } < / main > ) ; }
An application that allows the user to choose the web page or PDF for an
 assignment.
An application that allows the user to choose the web page or PDF for an assignment .
/** @type {{ current: HTMLInputElement }} */ /** @type {Content|null} */ /** @type {GroupConfig} */ /** @type {ErrorInfo|null} */ /**
   * Flag indicating whether the form should be auto-submitted on the next
   * render.
   */ // Submit the form after a selection is made via one of the available // methods. // Submit form using a hidden button rather than calling `form.submit()` // to facilitate observing the submission in tests and suppressing the // actual submit. /** @type {(c: Content) => void} */