Permitir que Usuários Reservem Novamente

Após enviar uma reserva, os usuários frequentemente querem fazer outra — para uma data, serviço ou pessoa diferente. Sem um mecanismo de redefinição, a única opção é atualizar a página.

Vamos adicionar um fluxo de redefinição adequado para que os usuários possam reservar múltiplos serviços em uma única sessão.

O que Você Aprenderá

Como redefinir múltiplas variáveis $state
Como retornar a interface ao seu estado inicial
Como criar um ciclo de vida completo do formulário

Adicionar o Botão "Fazer Outra Reserva"

Na seção de confirmação, adicione um botão que permite aos usuários recomeçar:

<!-- filename: src/lib/components/BookingForm.svelte -->
{#if submitted}
  <div class="confirmation">
    <h2>✓ Booking Requested!</h2>
    <p>Thank you, {customerName}. We've received your booking request.</p>
    <p>We'll send confirmation details to {email}.</p>
    
    <button onclick={resetForm}>Book Another Service</button>
  </div>
{:else}
  <!-- ... form ... -->
{/if}

Quando clicado, ele chama resetForm para limpar tudo e exibir o formulário novamente.

Criar a Função de Redefinição

A função de redefinição define cada variável de estado de volta ao seu valor inicial:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let email = $state('');
  let date = $state('');
  let time = $state('');
  let notes = $state('');
  let submitted = $state(false);
  
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Booking submitted:', { customerName, email, date, time, notes });
    submitted = true;
  }
  
  function resetForm() {
    customerName = '';
    email = '';
    date = '';
    time = '';
    notes = '';
    submitted = false;
  }
</script>

Cada atribuição limpa um campo. Definir submitted = false volta para a visualização do formulário.

Testar o Ciclo Completo

Preencha o formulário de reserva
Clique em "Solicitar Reserva"
Veja a mensagem de confirmação
Clique em "Reservar Outro Serviço"
O formulário reaparece, vazio e pronto

O ciclo pode se repetir indefinidamente sem atualizar a página.

Por que Isso Funciona

O sistema de reatividade do Svelte rastreia alterações nas variáveis $state. Quando atribuímos novos valores, o Svelte atualiza automaticamente o DOM. Ao redefinir todas as variáveis para seus valores iniciais, a interface retorna ao seu estado inicial.

Essa abordagem manual é direta e funciona bem para formulários com alguns campos. Para esta fase do aprendizado, é exatamente o que precisamos.

Nota: À medida que os formulários crescem, existem padrões alternativos, como agrupar campos em um objeto para redefinições mais fáceis. Exploraremos essas técnicas em lições mais avançadas.

O Componente Completo

Aqui está o BookingForm.svelte final com o ciclo de vida completo:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let email = $state('');
  let date = $state('');
  let time = $state('');
  let notes = $state('');
  let submitted = $state(false);
  
  function formatDate(dateString) {
    if (!dateString) return 'Not selected';
    const dateObj = new Date(dateString + 'T00:00:00');
    return dateObj.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
  
  function formatTime(timeString) {
    if (!timeString) return 'Not selected';
    const [hours, minutes] = timeString.split(':');
    const hour = parseInt(hours);
    const ampm = hour >= 12 ? 'PM' : 'AM';
    const displayHour = hour % 12 || 12;
    return `${displayHour}:${minutes} ${ampm}`;
  }
  
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Booking submitted:', { customerName, email, date, time, notes });
    submitted = true;
  }
  
  function resetForm() {
    customerName = '';
    email = '';
    date = '';
    time = '';
    notes = '';
    submitted = false;
  }
</script>

<div class="booking-container">
  {#if submitted}
    <div class="confirmation">
      <h2>✓ Booking Requested!</h2>
      <p>Thank you, {customerName}. We've received your booking request.</p>
      
      <dl>
        <dt>Service Date</dt>
        <dd>{formatDate(date)} at {formatTime(time)}</dd>
        
        <dt>Confirmation Email</dt>
        <dd>We'll send details to {email}</dd>
      </dl>
      
      <p>We'll contact you within 24 hours to confirm your appointment.</p>
      
      <button onclick={resetForm}>Book Another Service</button>
    </div>
  {:else}
    <form onsubmit={handleSubmit}>
      <h2>Book a Service</h2>
      
      <div class="field">
        <label for="name">Your Name</label>
        <input 
          type="text" 
          id="name" 
          placeholder="Jane Smith"
          bind:value={customerName}
          required 
        />
      </div>
      
      <div class="field">
        <label for="email">Email Address</label>
        <input 
          type="email" 
          id="email" 
          placeholder="jane@example.com"
          bind:value={email}
          required 
        />
      </div>
      
      <div class="field">
        <label for="date">Preferred Date</label>
        <input type="date" id="date" bind:value={date} required />
      </div>
      
      <div class="field">
        <label for="time">Preferred Time</label>
        <select id="time" bind:value={time} required>
          <option value="">Select a time...</option>
          <option value="09:00">9:00 AM</option>
          <option value="10:00">10:00 AM</option>
          <option value="11:00">11:00 AM</option>
          <option value="13:00">1:00 PM</option>
          <option value="14:00">2:00 PM</option>
          <option value="15:00">3:00 PM</option>
        </select>
      </div>
      
      <div class="field">
        <label for="notes">Additional Notes</label>
        <textarea 
          id="notes" 
          rows="3"
          placeholder="Any special requests?"
          bind:value={notes}
        ></textarea>
      </div>
      
      <button type="submit">Request Booking</button>
    </form>
    
    <aside class="preview">
      <h3>Booking Preview</h3>
      
      <dl>
        <dt>Name</dt>
        <dd>{customerName || 'Not entered'}</dd>
        
        <dt>Email</dt>
        <dd>{email || 'Not entered'}</dd>
        
        <dt>Date</dt>
        <dd>{formatDate(date)}</dd>
        
        <dt>Time</dt>
        <dd>{formatTime(time)}</dd>
        
        <dt>Notes</dt>
        <dd>{notes || 'None'}</dd>
      </dl>
    </aside>
  {/if}
</div>

Erros Comuns

Esquecer de Redefinir `submitted`

function resetForm() {
  customerName = '';
  email = '';
  date = '';
  time = '';
  notes = '';
  // ❌ Forgot submitted — still shows confirmation!
}

Sempre redefina o estado que controla qual visualização é exibida:

function resetForm() {
  customerName = '';
  email = '';
  date = '';
  time = '';
  notes = '';
  submitted = false;  // ✅ Now the form appears again
}

Resumo

O formulário de reserva agora tem um ciclo de vida completo: preencher → enviar → confirmar → redefinir. Os usuários podem fazer múltiplas reservas sem atualizar a página, e todo o estado é redefinido de forma limpa para os valores iniciais.

Principais conclusões:

Funções de redefinição definem cada variável de estado de volta ao seu valor inicial
Não se esqueça do estado de controle da interface, como submitted
A redefinição manual funciona bem para formulários simples

Módulo Concluído! 🎉

Você concluiu o Módulo 4: Noções Básicas de Reatividade. O formulário de reservas do BookIt agora:

Rastreia todos os valores dos campos com $state
Exibe uma pré-visualização ao vivo enquanto os usuários digitam
Gerencia o envio do formulário
Exibe a confirmação com os detalhes da reserva
Redefine para reservas adicionais

O que você aprendeu:

Por que $state é necessário para atualizações reativas
Vinculação bidirecional com bind:value
Tratamento de eventos com onsubmit e onclick
Gerenciamento do estado da interface para diferentes visualizações

Próximos Passos

O formulário de reservas funciona, mas a página de serviços exibe apenas uma lista simples. Continue com o Módulo 5: Fluxo de Controle para aprender como exibir conteúdo condicionalmente e lidar com estados vazios.