Giter Site home page Giter Site logo

react-utils's Introduction

[GET] listagens de temas e tipos (select)

response

{
    "owner": {
        "name": "string",
        "id": "string"
    },
    "farm": {
        "name": "string",
        "id": "string"
    }
}
  

📁 arquitetura do projeto

src/
|-- domain/
|   |-- user/
|   |-- task/
|-- infra/
|   |-- api/
|-- data/
|   |--
|-- presentation/
|   |-- pages/
|   |-- templates/
|   |-- components/
|   |   |-- atoms/
|   |   |-- molecules/
|   |   |-- organisms/
 

📚 Documentação

Categoria Ferramenta de Documentação
Componentes Storybook
Hooks e Classes jsDocs
Utilitários Markdown

📄 Sumário

🌐 createHttp()

//uso do createHttp
import { apiClient } from "@/infra/api";
import { createHttp } from "@/infra/http-client"; // Importe a classe e a função

// Crie uma instância de HttpService configurada para um tipo específico de resposta
const { http } = createHttp<MyResponseType>();

// Faça uma solicitação GET para um endpoint
const response = await http.exec({
  endpoint: "/exemplo",
  method: "GET",
  params: { id: "1" },
});

📡 useHttpQuery ()

//uso do useHttpQuery 
import { useHttpQuery  } from '@/hooks/index';
import { endpoint } from '@/endpoint';

//parametros
-`queryKey` (QueryKey): Uma chave única que identifica a consulta ou recurso a ser buscado. Isso pode ser útil para cache ou invalidação de cache.
-`options` (UseQueryOptions): Opções adicionais para personalizar o comportamento do `useQuery` da biblioteca `react-query`.
-`HttpService` (HttpProps): Um objeto de configuração que define os detalhes da requisição HTTP GET.
-`endpoint` (string): O endpoint da API ou URL de onde os dados devem ser buscados.
-`headers` (object): Um objeto contendo cabeçalhos HTTP opcionais a serem enviados com a requisição.
-Outras opções relevantes para uma requisição HTTP GET, como `params`, `auth`, etc.

//exemplo de uso(obs: evitar usar string diretamente no endpoint)
const { data, isLoading, isError } = useHttpQuery <IResponsePost[]>({
    queryKey: ['getPosts'],
    HttpService: { endpoint: endpoint.getPosts },
    options: {enabled: true}
});

🔄 useHttpMutation()

//uso do useHttpMutation
import { useHttpMutation } from '@/hooks/index';
import { endpoint } from '@/endpoint';

//parametros
- `options` (MutationOptions<TData, TError, TRequest>): Um objeto opcional contendo opções de configuração para a mutação. Essas opções são as mesmas que as fornecidas pelo `useMutation` do `react-query`. Elas permitem personalizar o comportamento da mutação, como manipulação de erros, atualização de cache, etc.
- `HttpService` (HttpProps): Um objeto que representa os dados da solicitação POST. Isso geralmente inclui o corpo da solicitação, cabeçalhos e outras informações relevantes para a solicitação.


//exemplo de uso(obs: evitar usar string diretamente no endpoint)
 const { isLoading, isError, isSuccess, mutate } = useHttpMutation<TData, TError, TRequest>({
    options: {
       // Opções de configuração da mutação (opcional),
    },
    HttpService: {
       endpoint: endpoint.createPost 
    },
  });

  const handleSubmit = () => {
    mutate();
  };

🧩 Composition

import { Input } from './Input';

function App() {
  return (
    <div>
      <Input.Text />
      <Input.Title>Título</Input.Title>
      <Input.Mask mask="99/99/9999" />
      <Input.Error>Error</Input.Error>
    </div>
  );
}

🔌patterns Adapter

const CookiesStorage = {
	setItem: Cookies.set,
	getItem: Cookies.get,
	removeItem: Cookies.remove,
}
export const cookiesStorageFactory = () => useStorage(CookiesStorage)

🎮 unControlled vs controlled

  const uncontrolled = useRef<HTMLInputElement>(null)
  const [controlled, setControlled] = useState('')

  <Input
    name="uncontrolled"
    ref={uncontrolled}
  />
  <Input
    name="controlled"
    value={controlled}
    onChange={e => setControlled(e.target.value)}
  />

react-utils's People

Contributors

isaac545454 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.