Liferay: Usando React em um fragmento

main.js

"use strict";

const e = React.createElement;
const { useState, useEffect } = React;

// TODO pegar campos editáveis de um campo editável que só aparece na página de edição
const BibliotecaDeArquivos = (props) => {
  const [searchValue, setSearchValue] = useState('');

  function handleSearch(keywords) {
    setSearchValue(keywords);
  }

  return (
    <div className="container">
      <div className="d-flex mb-3 justify-content-between">
        <h3
          className="text-verde"
          data-lfr-editable-id="titulo"
          data-lfr-editable-type="text"
        >
          Faça sua busca
        </h3>
        <div className="d-flex">
          <SearchBar
            handleSearch={handleSearch}
          />
          <DateFilter />
        </div>
      </div>
      <p
        className="mb-3"
        data-lfr-editable-id="descricao"
        data-lfr-editable-type="text"
      >
        Para a facilitar a procura pelos documentos que você precisa, utilize a
        busca por palavra-chave, tipo de documento e/ou um tema-chave.
      </p>
      <div className="line-divider"></div>
      <SearchResults keywords={searchValue} />
    </div>
  );
};

const SearchBar = ({ handleSearch }) => {
  const [keywords, setKeywords] = useState("");

  function handleKeywordsChange(e) {
    setKeywords(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    handleSearch(keywords);
  }

  return (
    <div className="barra-de-busca mr-xl-4">
      <form onSubmit={handleSubmit}>
        <fieldset className="search-bar">
          <div className="input-group search-bar-simple">
            <div className="input-group-item search-bar-keywords-input-wrapper">
              <input
                className="input-group-inset input-group-inset-before search-bar-keywords-input h4 font-weight-normal mb-0"
                placeholder="${languageUtil.get(locale, 'click-to-search')}"
                title="languageUtil.get(locale, 'search')"
                type="text"
                onChange={handleKeywordsChange}
                value={keywords}
              />
              <div className="input-group-inset-item input-group-inset-item-before bg-branco px-0 search-bar-search-icon">
                <button
                  aria-label='${languageUtil.get(locale, "submit")}'
                  className="btn-unstyled shadow-none mr-2"
                  type="submit"
                >
                  <img
                    className="search-icon"
                    src="/documents/d/guest/busca_pri"
                  />
                </button>
              </div>
            </div>
          </div>
        </fieldset>
      </form>
      <div className="line-divider"></div>
    </div>
  );
};

const DateFilter = (props) => {
  return (
    <div className="filtro-de-data form-group-autofit">
      <div className="form-group-item form-group-item-label form-group-item-shrink">
        <label className="mt-2">
          <span className="text-truncate-inline">
            <div className="d-flex">
              <span className="text-truncate">sort-by</span>
              <div className="dropdown dropdown-action">
                <button
                  aria-expanded="false"
                  aria-haspopup="true"
                  className="btn-unstyled dropdown-toggle"
                  data-toggle="dropdown"
                  id="dropdownBtnAction1"
                  type="button"
                >
                  <img
                    alt="seta-opcoes"
                    className="dropdown-button ml-3 w-100"
                    id="dropdown-button"
                    src="/documents/d/guest/seta-2-bai_pri"
                  />
                </button>
                <ul
                  aria-labelledby="dropdownBtnAction1"
                  className="dropdown-menu dropdown-menu-right"
                >
                  <li>
                    <span className="dropdown-item" id="sort-option-${i}">
                      entry.getLanguageLabel()
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </span>
        </label>
      </div>
    </div>
  );
};

const SearchResults = ({ keywords }) => {
  // TODO pegar folderId da URL
  const [folderId, setFolderId] = useState(configuration.rootFolderId);
  const [results, setResults] = useState([]);

  useEffect(() => {
    console.log(keywords);
    if (keywords) {
      // TODO pesquisar arquivos nas pastas e sub-pastas da pasta atual
    } else {
      // TODO pegar todas as pastas e arquivos da pasta atual
      api.getFolders(folderId)
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
          return Promise.reject(response);
        })
        .then(response => {
          console.log(response);
          setResults(response);
        })
        .catch((response) => {
          console.log(response.status, "Erro no fetch de pastas");
        });
    }

  }, [keywords, folderId]);

  return (
    <div className="search-results">
      <p className="mt-3 texto-sm text-right">6 resultados</p>
      <table className="mb-6 table table-autofit">
        <thead className="thead">
          <tr>
            <th>
              <img src="/documents/d/guest/folder" />
            </th>
            <th className="font-weight-medium table-cell-expand text-verde">
              Name
            </th>
            <th className="d-none d-md-table-cell font-weight-medium table-cell-expand-smaller text-verde">
              Type
            </th>
            <th className="d-none d-md-table-cell font-weight-medium table-cell-expand-smaller text-verde">
              Theme
            </th>
            <th className="font-weight-medium table-cell-expand-small text-verde">
              <img
                className="sort-date-arrow mr-2"
                src="/documents/d/guest/seta-bai_sec"
              />
              Date
            </th>
            <th className="table-cell-expand-small"></th>
          </tr>
        </thead>
        <tbody>
          {results.map(result => {
          <tr>
            <td>
              <img src="/documents/d/guest/pdf_ic" />
            </td>
            <td className="font-weight-normal table-cell-expand">20F_2002_p</td>
            <td className="d-none d-md-table-cell font-weight-normal table-cell-expand-smaller">
              Relatório
            </td>
            <td className="d-none d-md-table-cell font-weight-normal table-cell-expand-smaller">
              Normativos
            </td>
            <td className="font-weight-normal table-cell-expand-small">
              Oct 21, 2022 1:27 PM
            </td>
            <td className="font-weight-medium table-cell-expand-small text-amarelo text-right">
              <a href="">
                <img className="mr-2" src="/documents/d/guest/download_ic" />{" "}
                <span className="d-none d-md-inline">Download</span>
              </a>
            </td>
          </tr>
          })}
        </tbody>
      </table>
      <div className="line-divider"></div>
      <div className="pagination d-flex justify-content-center my-5">
        <a
          className="pagination-option text-decoration-none mr-sm-5 disabled"
          href=""
          disabled="true"
        >
          {" "}
          <img
            className="btn btn-primary border-amarelo bg-amarelo mr-2 p-1 rounded-circle"
            src="/documents/d/guest/seta-2-esq_bra"
            alt="button-prev"
          />{" "}
          <span className="btn btn-link text-amarelo p-0 d-none d-sm-inline">
            {" "}
            Previous{" "}
          </span>{" "}
        </a>{" "}
        <a
          className="mr-2 disabled"
          href=""
        >
          {" "}
          <span
            className="pagination-item is-active btn btn-primary p-1 rounded-circle"
            alt="first-page-button"
          >
            1{" "}
          </span>{" "}
        </a>{" "}
        <a
          className="mr-2 "
          href=""
        >
          {" "}
          <span
            className="pagination-item  btn btn-primary p-1 rounded-circle"
            alt="first-page-button"
          >
            2{" "}
          </span>{" "}
        </a>{" "}
        <a
          className="mr-2 "
          href=""
        >
          {" "}
          <span
            className="pagination-item  btn btn-primary p-1 rounded-circle"
            alt="first-page-button"
          >
            3{" "}
          </span>{" "}
        </a>{" "}
        <span className="elipsis h-100 mt-auto mr-2">...</span>{" "}
        <a
          className="mr-2"
          href=""
        >
          {" "}
          <span
            className="pagination-item btn btn-primary p-1 rounded-circle"
            alt="last-page-button"
          >
            55{" "}
          </span>{" "}
        </a>{" "}
        <a
          className="pagination-option text-decoration-none ml-sm-5 "
          href=""
          disabled="false"
        >
          {" "}
          <span className="btn btn-link text-amarelo mr-2 p-0 d-none d-sm-inline">
            {" "}
            Next{" "}
          </span>{" "}
          <img
            className="btn btn-primary border-amarelo bg-amarelo p-1 rounded-circle"
            src="/documents/d/guest/seta-2-dir_bra"
            alt="button-next"
          />{" "}
        </a>
      </div>
    </div>
  );
};

const api = {
  getFolders: (folderId) => (
    fetch('/o/headless-delivery/v1.0/document-folders/' + folderId + '/documents')
  ),
  getFiles: (folderId) => (
    fetch('/o/headless-delivery/v1.0/document-folders/' + folderId + '/document-folders')
  )
}

const domContainer = fragmentElement.querySelector(
  ".fragmento-biblioteca-de-arquivos"
);
const root = ReactDOM.createRoot(domContainer);
root.render(e(BibliotecaDeArquivos));

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:watch": "npx babel --watch src --out-dir ../ --presets react-app/prod"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^3.1.2"
  }
}