Test.tsx

import React, { useState, useEffect } from 'react'
import { withClient, Client } from 'cozy-client'

interface TestProps {
  client: Client
}

const Test: React.FC<TestProps> = ({ client }: TestProps) => {
  const [challenges, setChallenges] = useState(null)
  const [userChallenge, setUserChallenge] = useState(null)

  useEffect(() => {
    let subscribed = true
    async function loadData() {
      const data = await client.query(
        client
          .find('io.ecolyo.challengetype')
          .where({ level: { $lte: 0 } })
          .include(['availableEcogestures'])
          .limitBy(20)
      )
      console.log(data)
      if (subscribed && data) {
        setChallenges(data)
      }
    }
    async function loadUserChallenge() {
      const data = await client.query(
        client
          .find('io.ecolyo.userchallenge')
          .where({ state: { $eq: 0 } })
          .include(['selectedEcogestures', 'challengeType'])
          .limitBy(1)
      )
      console.log(data)
      if (subscribed && data) {
        setUserChallenge(data)
      }
    }
    loadData()
    loadUserChallenge()
    return () => {
      subscribed = false
    }
  }, [])

  return (
    <div>
      <div className="card-text">
        Defi disponible:
        {challenges &&
          challenges.data.map((challenge, index) => {
            return <ul key={index}>{challenge.title}</ul>
          })}
      </div>
      <div className="card-text">
        Ecogeste dispo pour le challenge:
        {challenges &&
          challenges.included.map((ecogesture, index) => {
            return <ul key={index}>{ecogesture.shortName}</ul>
          })}
      </div>
      <div className="card-text">
        challenge en cours:
        {userChallenge &&
          userChallenge.data.map((item, index) => {
            return <ul key={index}>{item.state}</ul>
          })}
      </div>
      <div className="card-text">
        challenge en cours - challenge type:
        {userChallenge &&
          userChallenge.included.map((item, index) => {
            if (item._type === 'io.ecolyo.challengetype') {
              return <ul key={index}>Challenge Type : {item.title}</ul>
            } else if (item._type === 'io.ecolyo.ecogesture') {
              return <ul key={index}>Ecogeste : {item.shortName}</ul>
            }
          })}
      </div>
    </div>
  )
}

export default withClient(Test)