function PersonaInfoModal()

in source/app/components/PersonaInfoModal/PersonaInfoModal.js [30:140]
102 lines of code
4 McCabe index (conditional complexity)

function PersonaInfoModal({ onClose, onSubmit, searchPersona }) {
  const [selectedPersona, setSelectedPersona] = useState(searchPersona);

  const inputRef = useRef();

  const submit = useCallback(
    (query) => {
      onSubmit(selectedPersona, query);
    },
    [onSubmit, selectedPersona]
  );

  const submitForm = useCallback(
    (e) => {
      e.preventDefault();
      submit(inputRef.current.value);
    },
    [submit]
  );

  const [apiVisible, setApiVisible] = useState(false);
  const toggleAPI = useCallback(() => setApiVisible((x) => !x), []);

  return (
    <Modal
      title="Filter query results on User Context"
      onRequestClose={onClose}
    >
      <p>
        Amazon Kendra can deliver highly relevant query results based on user
        name or group membership associated with the content metadata. Follow these simple steps, and see how this
        feature works.
      </p>

      <section>
        <header>
          <div className={css.stepLabel}>Step 1</div>
          <p>
            For this demo, we created fictitious users and search queries to
            showcase how the filtering feature works. Select one of the
            fictitious users below.
          </p>
        </header>

        <div className={css.personas}>
          <label>
            <img src="/static/images/healthcare-provider.png" />
            <input
              name="persona"
              type="radio"
              value="healthcareprovider"
              onChange={() => setSelectedPersona("healthcareprovider")}
              checked={selectedPersona === 'healthcareprovider'}
            />
            <h4>Healthcare provider</h4>
            <p>Has access to information for Healthcare Professionals.</p>
          </label>
          <label>
            <img src="/static/images/scientist.png" />
            <input
              name="persona"
              type="radio"
              value="scientist"
              onChange={() => setSelectedPersona("scientist")}
              checked={selectedPersona === 'scientist'}
            />
            <h4>Scientist</h4>
            <p>Has access to scientific papers and research documents.</p>
          </label>
          <label>
            <img src="/static/images/general-public.png" />
            <input
              name="persona"
              type="radio"
              value="generalpublic"
              onChange={() => setSelectedPersona("generalpublic")}
              checked={selectedPersona === 'generalpublic'}
            />
            <h4>General public</h4>
            <p>
              Has access to official guidance to prevent and manage diseases/medical conditions.
            </p>
          </label>
          <label>
            <img src="/static/images/nofilter.svg" />
            <input
              name="persona"
              type="radio"
              value=""
              onChange={() => setSelectedPersona(undefined)}
              checked={!selectedPersona}
            />
            <h4>No filter</h4>
            <p>Use this option for unfiltered search results.</p>
          </label>
        </div>
      </section>

      <section>
        <header>
          <div className={css.stepLabel}>Step 2</div>
          <p>
            Choose one of the auto suggested queries we’ve created to
            demonstrate this feature.
          </p>
        </header>

        <ul className={css.sampleQueries}>
          {PERSONA_QUESTIONS.map((q) => (
            <li onClick={() => submit(q)}>{q}</li>
          ))}