Create useFormState hook for modals

Aperta
  • Qualcosa non va?
#44 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Refactoring
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Start by comparing the repeated form state logic in BuyInModal.tsx, WithdrawalModal.tsx, DepositCore.tsx, TopUpModal.tsx, and QRDeposit.tsx. Create hooks/useFormState.ts from the specified generic interface, then refactor those modals while checking that their existing behavior remains unchanged. Done means all listed acceptance criteria are met without regressions.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

architecture enhancement tech debt ux

Priority: MEDIUM

Problem

Multiple modal components repeat identical form state logic:

  • BuyInModal.tsx
  • WithdrawalModal.tsx
  • DepositCore.tsx
  • TopUpModal.tsx
  • QRDeposit.tsx

Pattern repeated:

const [amount, setAmount] = useState("");
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);

Solution

Create a reusable form state hook:

// hooks/useFormState.ts
interface FormState<T> {
  values: T;
  setValues: (values: T) => void;
  isProcessing: boolean;
  setIsProcessing: (v: boolean) => void;
  error: string | null;
  setError: (e: string | null) => void;
  success: boolean;
  setSuccess: (s: boolean) => void;
  reset: () => void;
}

const useFormState = <T>(initialValues: T): FormState<T> => { ... }

Acceptance Criteria

  • Create useFormState hook with generic typing
  • Include processing, error, and success states
  • Add reset functionality
  • Refactor modals to use the hook
  • Maintain existing behavior

Related

Parent issue: block52/ui#45

Lingua principale
TypeScript
Stelle
2
Fork
5
Merge medio
21h 50m
PR unite (30g)
104

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di block52/ui

Tutte le issue di block52/ui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.