📝 busca na API

unb-mds · Dec 4, 2023 · ed6511a · ed6511a
1 parent 03871c5
commit ed6511a
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "apexcharts": "^3.44.0",
+    "axios": "^1.6.2",
     "chart.js": "^4.4.0",
     "clsx": "2.0.0",
     "next": "13.5.6",

diff --git a/src/components/Pages/Pesquisar.tsx b/src/components/Pages/Pesquisar.tsx
@@ -1,18 +1,34 @@
 import Image from "next/image";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import axios from 'axios';
 
 export const Pesquisar = () => {
-  const [assunto, setAssunto] = useState("");
-  const [municipio, setMunicipio] = useState("");
+  const [tema, setTema] = useState("");
+  const [codigoIBGEMunicipio, setCodigoIBGEMunicipio] = useState("");
   const [dataInicial, setDataInicial] = useState("");
   const [dataFinal, setDataFinal] = useState("");
+  const [resultados, setResultados] = useState<{ total_gazettes: number, gazettes: Array<any> } | null>(null);
 
   const handleSearch = async () => {
-    // Implemente a chamada à API usando os estados (assunto, municipio, dataInicial, dataFinal)
-    // Certifique-se de utilizar a URL correta da API.
-
     try {
-      // Código para chamar a API aqui
+      const apiUrl = `https://queridodiario.ok.org.br/api/gazettes?querystring=${tema}&territory_ids=${codigoIBGEMunicipio}&published_since=${dataInicial}&published_until=${dataFinal}`;
+
+      console.log("API URL:", apiUrl);
+
+      const response = await axios.get(apiUrl);
+
+      if (response.status === 200) {
+        const data = response.data;
+        console.log("API Response:", data);
+
+        // Atualiza o estado diretamente com a resposta da API
+        setResultados(data);
+
+        // Remove o log abaixo, pois o estado pode não ser atualizado imediatamente
+        // console.log("Novo estado resultados:", resultados);
+      } else {
+        throw new Error(`Erro na resposta da API: ${response.statusText}`);
+      }
     } catch (error) {
       console.error("Erro ao chamar a API:", error);
     }
@@ -35,54 +51,77 @@ export const Pesquisar = () => {
         />
       </div>
       <div className="flex flex-col items-center ml-16">
-      <div className="flex space-x-6 mt-10">
-        <input
-          type="text"
-          placeholder="Sobre o que você quer saber?"
-          value={assunto}
-          onChange={(e) => setAssunto(e.target.value)}
-          className="p-2 border border-gray-300 rounded"
-        />
-        <select
-          value={municipio}
-          onChange={(e) => setMunicipio(e.target.value)}
-          className="p-2 border border-gray-300 rounded"
-        >
-          <option value="">Selecione o Município</option>
-          <option value="Sobral">Sobral (CE)</option>
-          <option value="Horizonte">Horizonte (CE)</option>
-        </select>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">
-            Data Inicial:
-          </label>
+        <div className="flex space-x-6 mt-10">
           <input
-            type="date"
-            value={dataInicial}
-            onChange={(e) => setDataInicial(e.target.value)}
+            type="text"
+            placeholder="Sobre o que você quer saber?"
+            value={tema}
+            onChange={(e) => setTema(e.target.value)}
             className="p-2 border border-gray-300 rounded"
           />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">
-            Data Final:
-          </label>
-          <input
-            type="date"
-            value={dataFinal}
-            onChange={(e) => setDataFinal(e.target.value)}
+          <select
+            value={codigoIBGEMunicipio}
+            onChange={(e) => setCodigoIBGEMunicipio(e.target.value)}
             className="p-2 border border-gray-300 rounded"
-          />
+          >
+            <option value="">Selecione o Município</option>
+            <option value="2312908">Sobral (CE)</option> {/* Código IBGE de Sobral */}
+            <option value="2305233">Horizonte (CE)</option> {/* Código IBGE de Horizonte */}
+          </select>
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Data Inicial:
+            </label>
+            <input
+              type="date"
+              value={dataInicial}
+              onChange={(e) => setDataInicial(e.target.value)}
+              className="p-2 border border-gray-300 rounded"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Data Final:
+            </label>
+            <input
+              type="date"
+              value={dataFinal}
+              onChange={(e) => setDataFinal(e.target.value)}
+              className="p-2 border border-gray-300 rounded"
+            />
+          </div>
         </div>
+        <button
+          onClick={handleSearch}
+          className="mt-4 bg-[#410c0c] text-white p-2 rounded hover:bg-[#832929]"
+          style={{ width: "200px" }}
+        >
+          Pesquisar
+        </button>
+        {/* Exibir os resultados da API, se disponíveis */}
+        {resultados && resultados.gazettes && (
+          <div>
+            {/* Ajuste na propriedade abaixo */}
+            <p>O assunto "{tema}" foi citado {resultados.total_gazettes} vezes no período:</p>
+            {/* Iterar sobre os excertos e exibir as informações desejadas */}
+            {resultados.gazettes.map((excerto, index) => (
+              <div key={index} className="border p-4 mt-4">
+                <p>Data: {excerto.date}</p>
+                <p>Edição: {excerto.edition}</p>
+                <p>Excerto:</p>
+                <pre>{excerto.excerpts.join("\n")}</pre>
+                <div className="mt-2">
+                  <a href={excerto.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 mr-4">Baixar PDF</a>
+                  <a href={excerto.txt_url} target="_blank" rel="noopener noreferrer" className="text-blue-500">Baixar TXT</a>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        {resultados && resultados.gazettes && resultados.gazettes.length === 0 && (
+          <p>Nenhum resultado encontrado para a pesquisa.</p>
+        )}
       </div>
-      <button
-        onClick={handleSearch}
-        className="mt-4 bg-[#410c0c] text-white p-2 rounded hover:bg-[#832929]"
-        style={{ width: "200px" }}
-      >
-        Pesquisar
-      </button>
-    </div>
     </div>
   );
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -6,7 +6,6 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head />
-      <link rel="shortcut icon" href="/favicon.ico" />
       <Component {...pageProps} />
     </>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -456,6 +456,11 @@ asynciterator.prototype@^1.0.0:
   dependencies:
     has-symbols "^1.0.3"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 autoprefixer@10:
   version "10.4.16"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
@@ -478,6 +483,15 @@ axe-core@^4.6.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz"
   integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
 
+axios@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz"
@@ -608,6 +622,13 @@ colord@^2.9:
   resolved "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz"
   integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
@@ -698,6 +719,11 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0, de
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
@@ -1132,13 +1158,27 @@ flatted@^3.2.9:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
+follow-redirects@^1.15.0:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
   integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
   dependencies:
     is-callable "^1.1.3"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fraction.js@^4.3.6:
   version "4.3.7"
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
@@ -1693,6 +1733,18 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+[email protected]:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
@@ -1999,6 +2051,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"