index.js

import React from 'react'
import { renderBubbles, useBubbles } from './bubbles-helper'
import { BUBBLES_API_ERROR } from '../../../utility/constants/messages'

function BubblesContainer() {
  const [buckets, err] = useBubbles()

  if (!buckets) return null
  if (err) return <h2>`${BUBBLES_API_ERROR}`</h2>

  const showBucket = Object.keys(buckets).some(
    (bucket) => buckets[bucket]._count > 0
  )

  if (showBucket) {
    return renderBubbles(buckets)
  } else {
    return <h2>Add bubbles to this bucket</h2>
  }
}

export default BubblesContainer