Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect } from "rx-connect";
import { Link } from "react-router";
import { hashCode, toHex } from "../utils";
import { fetchUser } from "../actions/users";
import { fetchPosts } from "../actions/posts";
@connect(undefined, wrapActionCreators({ fetchUser, fetchPosts }))
@rxConnect(props$ => {
const userId$ = props$.pluck("params", "userId").distinctUntilChanged();
return userId$.withLatestFrom(props$)
.switchMap(([userId, { fetchUser, fetchPosts }]) => {
const user$ = fetchUser(userId)
.catch(Rx.Observable.of(null));
const postsByUser$ = fetchPosts({ userId })
.pluck("data")
.catch(Rx.Observable.of(null));
// combineLatest to wait until both user and posts arrived to avoid flickering
return Rx.Observable
.combineLatest(user$, postsByUser$)
.startWith([])
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { Link } from "react-router";
import { rxConnect } from "rx-connect";
import { hashCode, toHex, capitalize } from "../../utils";
import { fetchPost, fetchComments } from "../../actions/posts";
import { fetchUser } from "../../actions/users";
import Comments from "./Comments";
@connect(undefined, wrapActionCreators({ fetchComments, fetchPost, fetchUser }))
@rxConnect(props$ => {
const postId$ = props$.pluck("params", "postId").distinctUntilChanged();
return postId$.withLatestFrom(props$).switchMap(([ postId, { fetchComments, fetchPost, fetchUser }]) => {
const post$ = fetchPost(postId)
.switchMap(post =>
fetchUser(post.userId)
.map(user => ({ ...post, user }))
)
.catch(Rx.Observable.of(null));
const comments$ = fetchComments(postId)
.catch(Rx.Observable.of(null));
// Fetch comments together with post's data to avoid flickering
return Rx.Observable
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect, ofActions } from "rx-connect";
import { push } from "react-router-redux";
import { login } from "../actions/auth";
@connect(null, wrapActionCreators({ login, push }))
@rxConnect(props$ => {
const actions = {
login$: new Rx.Subject()
};
return Rx.Observable.merge(
Rx.Observable::ofActions(actions),
actions.login$
.withLatestFrom(props$)
.switchMap(([[ email, password ], { login, push }]) =>
login(email, password)
.mapTo(undefined) // No error in case of success
.do(() => push("/")) // TODO use side-effect library
.catch(error => Rx.Observable.of(error))
.map(error => ({ loading: false, error }))
import React from "react";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { Link } from "react-router";
import Time from "./Time";
import { logout } from "../actions/auth";
@connect(
({ user }) => ({ user }),
wrapActionCreators({ logout })
)
export default class MainView extends React.PureComponent {
render() {
const { user, children } = this.props;
const { logout } = this.props;
return (
<div>
<div>
<div>
<div>
<img src="//placehold.it/60/00B5AD"> RxConnect blog example
</div>
Home</div></div></div>
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect } from "rx-connect";
import { Link } from "react-router";
import { keyBy } from "../utils";
import { fetchPosts } from "../actions/posts";
import { fetchUsers } from "../actions/users";
import Post from "./Post";
@connect(undefined, wrapActionCreators({ fetchPosts, fetchUsers }))
@rxConnect(props$ => {
const page$ = props$.pluck("location", "query", "page").map(page => page ? Number(page) : 1).distinctUntilChanged().publishReplay().refCount();
const posts$ = page$.withLatestFrom(props$)
.switchMap(([page, { fetchPosts }]) =>
fetchPosts({ page: page - 1 })
.startWith(undefined)
);
const users$ = props$
.pluck("fetchUsers")
.distinctUntilChanged()
.switchMap(fetchUsers => fetchUsers())
.map(users => users::keyBy("id"));
return Rx.Observable.merge(