BranchesTags

Repository files navigation

pageProcess

Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.

🧠 Contexto

O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.

No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.

Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.

Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.



Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.

Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.

Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.

Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.

Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.



Resultado da nossa página inicial sem busca:


Resultado da nossa página com os dados:



    PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678

    • Tecnologias usadas

    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento

    |

    Como rodar o projeto localmente

    Siga os passos e inclua as informações abaixo:

    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev

    |



    😎 Próximos passos mapeados

    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About

    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.

    Resources

    Readme
    Activity

    Stars

    0 stars

    Watchers

    1 watching

    Forks

    0 forks
    Report repository

    Releases

    Packages

    Contributors

    Languages

    , 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
     blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

    Skip to content
    BranchesTags
    Repository files navigation
    pageProcess
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    🧠 Contexto
    O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.
    No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.
    Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.
    Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.


    
Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.


    
Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.


    
Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.


    
Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.


    Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei  para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.


    Resultado da nossa página inicial sem busca:

    Resultado da nossa página com os dados:


      PROCESSOS QUE PODEM SER CONSULTADOS:
  • 5001682-88.2020.8.13.0671
  • 5001682-88.2020.8.13.0672
  • 5001682-88.2020.8.13.0673
  • 5001682-88.2020.8.13.0674
  • 5001682-88.2020.8.13.0675
  • 5001682-88.2020.8.13.0676
  • 5001682-88.2020.8.13.0677
  • 5001682-88.2020.8.13.0678
    • Tecnologias usadas
    FerramentaDescrição
    ReactJSframework web
    Vitegerador de projeto de front-end
    npmgerenciador de pacotes
    GithubHospedagem do código fonte integrado com gerenciador de versionamento
    |
    Como rodar o projeto localmente
    Siga os passos e inclua as informações abaixo:
    PassoComando/informação
    Faça o forkbotão de forkar
    Faça o clonegit clone
    Instale as dependências após acessar a pasta projetonpm i
    Rode o projetonpm run dev
    |


    😎 Próximos passos mapeados
    • Incluir Testes utilizando o vitest.
    • Revisar acessibilidade
    • Revisar responsividade
    • Melhorar o layout


    About
    Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.
    Resources
    Readme
    Activity
    Stars
    0 stars
    Watchers
    1 watching
    Forks
    0 forks
    Report repository
    Releases
    Packages
    Contributors
    Languages