How to use the @nozbe/with-observables function in @nozbe/with-observables

To help you get started, we’ve selected a few @nozbe/with-observables examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Nozbe / WatermelonDB / examples / web / src / components / ModerationQueue / index.js View on Github external
< 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))
github Nozbe / WatermelonDB / examples / web / src / components / Comment / index.js View on Github external
import React from 'react'
import withObservables from '@nozbe/with-observables'

import style from './style'

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

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

export default enhance(RawComment)
github Nozbe / WatermelonDB / examples / web / src / components / Blog / index.js View on Github external
countObservable={blog.nastyComments.observeCount()}
    to={to}
    isActive={isActive}
    onClick={onClick} /&gt;
)

const RawPostItem = ({ post, to, onClick, isActive }) =&gt; (
  
)

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

const NastyCommentsItem = compose(
  withHandlers({
    onClick: ({ onClick, blog, showMain }) =&gt; e =&gt; {
      onClick(e, blog.id)
      showMain()
    },
github Nozbe / WatermelonDB / examples / native / src / components / Post.js View on Github external
&lt;&gt;
            
            
            
            
          
        )}
        ListFooterComponent={() =&gt; (
          <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>
github Nozbe / WatermelonDB / examples / web / src / components / BlogList / index.js View on Github external
const BlogList = ({ blogs, setActiveItem, activeItem, showPostList }) =&gt; (
  <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,
        }
      },
    },
  ),
github Nozbe / WatermelonDB / examples / native / src / components / BlogList.js View on Github external
)

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

const BlogList = ({ blogs, navigation }) =&gt; (
  
)

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

export default enhance(BlogList)
github Nozbe / WatermelonDB / examples / native / src / components / ModerationQueue.js View on Github external
const renderComment = ({ item }) =&gt; 

const ModerationQueue = ({ blog, nastyComments }) =&gt; (
   (
    &lt;&gt;
      
      
    
    )}
    data={nastyComments}
    renderItem={renderComment}
    keyExtractor={extractId} /&gt;
)

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

export default enhance(ModerationQueue)
github Nozbe / WatermelonDB / examples / web / src / components / Post / index.js View on Github external
<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>
github Nozbe / WatermelonDB / examples / web / src / components / Blog / index.js View on Github external
key={post.id}
          to={`/blog/${blog.id}/post/${post.id}`}
          isActive={post.id === activeItem}
          onClick={setActiveItem}
          showMain={showMain}
        /&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; ({
    posts: blog.posts.observe(),
  })),
  withStateHandlers(
    {
      activeItem: null,
    },
    {
      setActiveItem: () =&gt; (e, postId) =&gt; ({
        activeItem: postId,
      }),
    },
  ),
  withHandlers({
github Nozbe / WatermelonDB / examples / web / src / components / ModerationQueue / index.js View on Github external
<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))

@nozbe/with-observables

<a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT License"> </a>

MIT
Latest version published 1 year ago

Package Health Score

58 / 100
Full package analysis

Popular @nozbe/with-observables functions