TransactionContext.jsx

import { createContext, useEffect, useState, ReactNode } from 'react';
import { api } from '../services/api';

interface Transaction {
  id: number,
  title: string
}

interface TransactionsProviderProps {
  children: ReactNode
}

// cria o contexto com valor inicial
export const TransactionContext = createContext<Transaction[]>([]);

export function TransactionsProvider({ children }:TransactionsProviderProps) {
  const [transactions, setTransactions] = useState<Transaction[]>([]);

  useEffect({} => {
    api.get().then(response => {
      setTransactions(response.data)
    })
  }, []);

  return (
    <TransactionContext.Provider value={transactions}>
      {children}
    </TransactionContext.Provider>
  )
}


// na declaração do provider
import TransactionsProvider
<TransactionsProvider>
  {/*...*/}
</TransactionsProvider>

// on the consumer
const transactions = useContext(TransactionContext);

TransactionContextWithState.jsx

import { createContext, useEffect, useState, ReactNode } from 'react';
import { api } from '../services/api';

interface Transaction {
  id: number,
  title: string,
  createdAt: string
}

type TransactionInput = Omit<Transaction, 'id' | 'createdAt'>;

interface TransactionsProviderProps {
  children: ReactNode
}

interface TransactionsContextData {
  transactions: Transaction[];
  createTransaction: (transaction: TransactionInput) => Promise<void>;
}

// cria o contexto com valor inicial
export const TransactionContext = createContext<TransactionsContextData>(
  {} as TransactionsContextData
);

export function TransactionsProvider({ children }:TransactionsProviderProps) {
  const [transactions, setTransactions] = useState<Transaction[]>([]);

  useEffect({} => {
    api.get().then(response => {
      setTransactions(response.data)
    })
  }, []);

  async function createTransaction(transactionInput: TransactionInput) {
    const response = await api.post(`/transactions`, {
      ...transactionInput,
      createdAt: new Date()
    });
    const { transaction } = response.data;

    setTransactions(oldState => [...oldState, transaction]);
  }

  return (
    <TransactionContext.Provider value={{ transactions, createTransaction }}>
      {children}
    </TransactionContext.Provider>
  )
}

// na declaração do provider
import TransactionsProvider
<TransactionsProvider>
  {/*...*/}
</TransactionsProvider>

// on the consumer
// use the transactions data
const { transactions } = useContext(TransactionContext);
// to add transactions
const { createTransaction } = useContext(TransactionContext);
await createTransaction({}) // it will update the state, so you dont need get the result!

UseTransactions.jsx

import { createContext, useEffect, useState, ReactNode } from 'react';
import { api } from '../services/api';

interface Transaction {
  id: number,
  title: string,
  createdAt: string
}

type TransactionInput = Omit<Transaction, 'id' | 'createdAt'>;

interface TransactionsProviderProps {
  children: ReactNode
}

interface TransactionsContextData {
  transactions: Transaction[];
  createTransaction: (transaction: TransactionInput) => Promise<void>;
}

// cria o contexto com valor inicial
const TransactionContext = createContext<TransactionsContextData>(
  {} as TransactionsContextData
);

export function TransactionsProvider({ children }:TransactionsProviderProps) {
  const [transactions, setTransactions] = useState<Transaction[]>([]);

  useEffect({} => {
    api.get().then(response => {
      setTransactions(response.data)
    })
  }, []);

  async function createTransaction(transactionInput: TransactionInput) {
    const response = await api.post(`/transactions`, {
      ...transactionInput,
      createdAt: new Date()
    });
    const { transaction } = response.data;

    setTransactions(oldState => [...oldState, transaction]);
  }

  return (
    <TransactionContext.Provider value={{ transactions, createTransaction }}>
      {children}
    </TransactionContext.Provider>
  )
}

// na declaração do provider
import TransactionsProvider
<TransactionsProvider>
  {/*...*/}
</TransactionsProvider>


export function useTransactions() {
  const context = useContext(TransactionContext);

  return context;
}


// on the consumer
const { transactions } = useTransactions();
const { createTransaction } = useTransactions();