Bonus class: deploy

Excelente curso: https://davidcortesa.github.io/state-machine/

Aqui mi componente de tickets para que actualize el nombre del pais con el guardado en el context:

import React from 'react';
import './Tickets.css';

export const Tickets = ({ send, state }) => {
  const finish = () => {
    send('FINISH')
  };

  return (
    <div className='Tickets'>
      <p className='Tickets-description description'>Gracias por volar con book a fly 💚</p>
      <div className='Tickets-ticket'>
        <div className='Tickets-country'>{ state.context.selectedCountry }</div>
        <div className='Tickets-passengers'>
          <span>✈</span>
          { state.context.passengers.map(person => (
            <p key={person}>{person}</p>
          )) }
        </div>
      </div>
      <button 
        onClick={finish} 
        className='Tickets-finalizar button'
      >Finalizar</button>
    </div>
  );
}; 

Dejo mi aporte al curso

Se añadieron algunas funcionalidades nuevas como la fecha, y país de origen, se mejoró la interfaz para la vista de los tickets.

https://alejou343.github.io/state-machine/

Hay un bug en el cual si pasan 5 segundos se eliminan los datos pero si se pone finalizar no, estuve intentando, pero al parecer es el action que se pone de primeras el que funciona, intente la solucion de alguien de los comentarios pero el bug se repite, solo que al revez, entonces esta fue mi solucion, que aunque funciona no entendi por que sucede pero funciona

 tickets: {
        after: {
          5000: {
            target: "initial",
            actions: "cleanContext",
          },
        },
        on: {
          FINISH: {
            target: "initial",
            actions: assign({
              selectedCountry: "",
              passengers: [],
            }),
          },
        },
      },

entonces, en lugar de llamar un ation exterior se hace desde el finish, con eso ambos terminan funcionando

así se resuelve el bug que la profesora mencionó en la clase
donde decía Colombia fijamente ponemos {context.selectedCountry} y listo

  <div className="Tickets-country">{context.selectedCountry}</div>

listo el proyecto con fecha de viaje por el momento
https://capable-duckanoo-95dec7.netlify.app/

Dejo mi repo de React + typescript + vite + xtstate:
https://github.com/modoZen/booking-state-machine

Y la app
https://helpful-kangaroo-ed363c.netlify.app/

Dejo mi código de la app typescript + vite, especificamente del archivo

src/type/BookingMachine

import { Event, EventData, SingleOrArray, StateFrom } from 'xstate';
import { Country } from './Country';
import { bookingMachine } from '../machines/bookingMachine';

export interface BookingContext {
	passengers: string[];
	selectedCountry: string;
	countries: Country[];
	error: string;
}

export type BookingEvent =
	| { type: 'START' }
	| { type: 'CONTINUE'; selectedCountry: string }
	| { type: 'ADD'; newPassenger: string }
	| { type: 'DONE' }
	| { type: 'FINISH' }
	| { type: 'RETRY' }
	| { type: 'CANCEL' };

export interface Props {
	state?: StateFrom<typeof bookingMachine>;
	send?: (
		event: SingleOrArray<Event<BookingEvent>>,
		payload?: EventData,
	) => void;
}

Mi aporte al problema del país de destino 👍

export const Tickets = ({ send, context }) => {
  const finish = () => {
    send('FINISH')
  };

  return (
    <div className='Tickets'>
      <p className='Tickets-description description'>Gracias por volar con book a fly 💚</p>
      <div className='Tickets-ticket'>
        <div className='Tickets-country'>{context.selectedCountry}</div>
        <div className='Tickets-passengers'>
          <span>✈</span>
          {context.passengers.map((person, idx) => {
            return <p key={idx}>{person}</p>
          })}
        </div>
      </div>
      <button onClick={finish} className='Tickets-finalizar button'>Finalizar</button>
    </div>
  );
};

También les comparto una forma de solucionar el problema de la lista de usuarios que quedan al darle finalizar.

      tickets: {
        after: {
          5000: {
            target: 'initial',
            actions: 'cleanContext',
          }
        },
        on: {
          FINISH: {
            target: 'initial',
            actions: 'cleanContext',
          },
        },
      },

Hay un bug muy extraño en el proyecto, cuando se le da a cancelar o finalizar no limpia el estado del array passengers, pero si lo hace cuando se deja pasar el tiempo de esperar de los 5 segundos

excelente

Muy buen curso!