2.3 El objeto Usuario

Obtención de los datos del usuario (cliente)

Siempre que tu aplicación necesite mostrar, por ejemplo, el nombre del usuario (¡imprescindible para una buena UX!) o conocer los roles que tiene el usuario, podemos hacer algo así:

import React, { useEffect, useState } from 'react'
import { CustomerDTO, fetchMe, useSession } from './vyou-react'
import { MyLoadingComponent } from './widget/MyLoadingComponent'

export const HomeScreen = () => {
  const [me, setMe] = useState<CustomerDTO>()
  const session = useSession()

  useEffect(() => {
    fetchMe().then((res) => {
      if (res.error) {
        return
      }
      setMe(res.data)
    })
  }, [])

  return (
    <div>
      {(me === undefined || !session.signedIn) && <MyLoadingComponent />}
      {me !== undefined && session.signedIn && (
        <>
          <p>Hi, {me.mandatory_fields.name}!</p>
          <p>
            Your user roles are:{' '}
            {session.customerTenantData.tenant_role.join('')}
          </p>
        </>
      )}
    </div>
  )
}