import React , { useEffect } from "react" ; import { useMachine , useService } from "@xstate/react" ; import { useParams } from "react-router-dom" ; import TransactionDetail from "../components/TransactionDetail" ; import { Transaction } from "../models" ; import { transactionDetailMachine } from "../machines/transactionDetailMachine" ; import { first } from "lodash/fp" ; import { Interpreter } from "xstate" ; import { AuthMachineContext , AuthMachineEvents } from "../machines/authMachine" ; export interface Props { authService : Interpreter < AuthMachineContext , any , AuthMachineEvents , any > ; } interface Params { transactionId : string ; } const TransactionDetailsContainer = ( { authService } ) => { const { transactionId } = useParams ( ) ; const [ authState ] = useService ( authService ) ; const [ transactionDetailState , sendTransactionDetail ] = useMachine ( transactionDetailMachine ) ; useEffect ( ( ) => { sendTransactionDetail ( "FETCH" , { transactionId } ) ; } , [ sendTransactionDetail , transactionId ] ) ; const transactionLike = ( transactionId ) => sendTransactionDetail ( "CREATE" , { entity : "LIKE" , transactionId } ) ; const transactionComment = ( payload ) => sendTransactionDetail ( "CREATE" , { entity : "COMMENT" , ... payload } ) ; const transactionUpdate = ( payload ) => sendTransactionDetail ( "UPDATE" , payload ) ; const transaction = first ( transactionDetailState . context ?. results ) ; const currentUser = authState ?. context ?. user ; return ( < > { transactionDetailState . matches ( "idle" ) && ( < div > Loading ... < br /> < /div>)} { currentUser && transactionDetailState . matches ( "success" ) && ( < TransactionDetail transaction = { transaction } transactionLike = { transactionLike } transactionComment = { transactionComment } transactionUpdate = { transactionUpdate } currentUser = { currentUser } / > ) } < />); } ; export default TransactionDetailsContainer ;