How to use @nozbe/with-observables - 10 common examples

< Back
    <div>
        <span>Moderation queue for {blog.name}</span>
        <span>Nasty comments ({nastyComments.length})</span>
        {nastyComments.map(comment =&gt; (
            
        ))}
    </div>
  
)

const enhance = compose(
  withPropsOnChange(['match'], ({ match }) =&gt; ({
    blogId: match.params.blogId,
  })),
  withObservables(['id'], ({ blogId, database }) =&gt; ({
    blog: database.collections.get('blogs').findAndObserve(blogId),
  })),
  withObservables(['blog'], ({ blog }) =&gt; ({
    nastyComments: blog.nastyComments.observe(),
  })),
)

export default withDatabase(enhance(ModerationQueue))

import React from 'react'
import withObservables from '@nozbe/with-observables'

import style from './style'

const RawComment = ({ comment }) => (
  <div>
    {comment.isNasty &amp;&amp; '☹️ '}
    {comment.body}
  </div>
)

const enhance = withObservables(['comment'], ({ comment }) =&gt; ({
  comment: comment.observe(),
}))

export default enhance(RawComment)

countObservable={blog.nastyComments.observeCount()}
    to={to}
    isActive={isActive}
    onClick={onClick} />
)

const RawPostItem = ({ post, to, onClick, isActive }) => (
  
)

const PostItem = compose(
  withObservables(['post'], ({ post }) => ({
    post: post.observe(),
  })),
  withHandlers({
    onClick: ({ onClick, post, showMain }) => e => {
      onClick(e, post.id)
      showMain()
    },
  }),
)(RawPostItem)

const NastyCommentsItem = compose(
  withHandlers({
    onClick: ({ onClick, blog, showMain }) => e => {
      onClick(e, blog.id)
      showMain()
    },

<>
            
            
            
            
          
        )}
        ListFooterComponent={() => (
          <button title="Add comment" style="{styles.button}">
        )}
        keyExtractor={extractId} /&gt;
    )
  }
}

const enhance = withObservables(['post'], ({ post }) =&gt; ({
  post: post.observe(),
  comments: post.comments.observe(),
}))

export default enhance(Post)
</button>

const BlogList = ({ blogs, setActiveItem, activeItem, showPostList }) => (
  <div>
    {blogs.map(blog =&gt; (
      
    ))}
    {!blogs.length &amp;&amp; <span>Click “Generate x records” above!</span>}
  </div>
)

const enhance = compose(
  withObservables(['search'], ({ database, search }) =&gt; ({
    blogs: database.collections
      .get('blogs')
      .query(Q.where('name', Q.like(`%${Q.sanitizeLikeString(search)}%`))),
  })),
  withStateHandlers(
    {
      activeItem: null,
    },
    {
      setActiveItem: () =&gt; (e, postId) =&gt; {
        return {
          activeItem: postId,
        }
      },
    },
  ),

)

const BlogItem = withObservables(['blog'], ({ blog }) => ({
  blog: blog.observe(),
}))(RawBlogItem)

const BlogList = ({ blogs, navigation }) => (
  
)

const enhance = withObservables([], ({ database }) => ({
  blogs: database.collections
    .get('blogs')
    .query()
    .observe(),
}))

export default enhance(BlogList)

const renderComment = ({ item }) => 

const ModerationQueue = ({ blog, nastyComments }) => (
   (
    <>
      
      
    
    )}
    data={nastyComments}
    renderItem={renderComment}
    keyExtractor={extractId} />
)

const enhance = withObservables(['blog'], ({ blog }) => ({
  blog: blog.observe(),
  nastyComments: blog.nastyComments.observe(),
}))

export default enhance(ModerationQueue)

<button title="Add comment">
          
        
      
    
  )
}

const enhance = compose(
  withPropsOnChange(['match'], ({ match }) =&gt; ({
    postId: match.params.postId,
  })),
  withObservables(['postId'], ({ postId, database }) =&gt; ({
    post: database.collections.get('posts').findAndObserve(postId),
  })),
  withObservables(['post'], ({ post }) =&gt; ({
    comments: post.comments.observe(),
  })),
  withHandlers({
    addComment: props =&gt; async () =&gt; {
      const comment = prompt('Write a comment')
      await props.post.addComment(comment)
    },
  }),
)
export default withDatabase(enhance(Post))
</button>

key={post.id}
          to={`/blog/${blog.id}/post/${post.id}`}
          isActive={post.id === activeItem}
          onClick={setActiveItem}
          showMain={showMain}
        />
      ))}
    
  )
}

const enhance = compose(
  withPropsOnChange(['match'], ({ match }) => ({
    blogId: match.params.blogId,
  })),
  withObservables(['id'], ({ blogId, database }) => ({
    blog: database.collections.get('blogs').findAndObserve(blogId),
  })),
  withObservables(['blog'], ({ blog }) => ({
    posts: blog.posts.observe(),
  })),
  withStateHandlers(
    {
      activeItem: null,
    },
    {
      setActiveItem: () => (e, postId) => ({
        activeItem: postId,
      }),
    },
  ),
  withHandlers({

<span>Nasty comments ({nastyComments.length})</span>
        {nastyComments.map(comment =&gt; (
            
        ))}
    
  
)

const enhance = compose(
  withPropsOnChange(['match'], ({ match }) =&gt; ({
    blogId: match.params.blogId,
  })),
  withObservables(['id'], ({ blogId, database }) =&gt; ({
    blog: database.collections.get('blogs').findAndObserve(blogId),
  })),
  withObservables(['blog'], ({ blog }) =&gt; ({
    nastyComments: blog.nastyComments.observe(),
  })),
)

export default withDatabase(enhance(ModerationQueue))