Unable to Refresh DOM data with button click about awesome-cyclejs HOT 8 CLOSED

Your model outputs a steam of streams, it needs to be flattened

from awesome-cyclejs.

Your startWith has to be after the flatten

from awesome-cyclejs.

Hi, you are using combine with your two http response, so the resulting combined stream is emitting a value only after both requests have emitted at least once, which in your case, happens when we have the user2 response, so your bug.

I guess you would want to do things differently in your intent and model functions :

function intent(sources) {
    const user1$ = sources.HTTP.select('user1')
        .flatten()
        .startWith(null)  // this stream now emits `null` immediately

    const user2$ = sources.HTTP.select('user2')
        .flatten()
        .startWith(null) // this stream now emits `null` immediately

    return xs.combine(user1$, user2$); // this combined stream will now emit [null, null] then [user1, null], then [user1, user2], etc.
}

function model(intent$) {
   // `intent$` emits a value immediately, and the model function becomes straightforward :
    return intent$.map(([user1, user2]) => {
        console.log(user1)
        return [
            user1 === null ? null : user1.body,
            user2 === null ? null : user2.body,
        ]
    })
}

from awesome-cyclejs.

@fuunnx Thank a lot. You have explained it very well. I was wondering about when and how to suer the StartWith operator. Now I think, I am clear.

from awesome-cyclejs.

Your model outputs a steam of streams, it needs to be flattened

Thanks @staltz staltz for your quick reply. I have changed my model code to below. But still it does not work. It still opens a blank page. However, In the network tab, I can find the httprequest for user1 is processed. Is there anything I am doing wrong, again?

function model(stream$) {
return stream$.map(([user1, user2]) => {
console.log(user1)
return xs.combine(
xs.of(user1.body).startWith(null),
xs.of(user2.body).startWith(null)
)
}).flatten()
}

from awesome-cyclejs.

Thanks again for giving me the hint. Now the button is rendering fine but initially there is no data loaded into the form from http request (although http request is still firing). It loads a blank form with just the button. After clicking of button I am getting the data as expected. Can't figure out where am i doing wrong. I somehow feel startWith in model has not been used correctly. Can you please help?

My HttpRequests

function multihttp(sources) {
const user1$ = xs.of({
url: 'https://jsonplaceholder.typicode.com/users/' + String(2),
category: 'user1',
method: 'GET'
});

    const user2$ = click$
        .map((ev) => {
            const randomNum = Math.round(Math.random() * 9) + 1;
            return {
                url: 'https://jsonplaceholder.typicode.com/users/' + String(randomNum),
                category: 'user2',
                method: 'GET'
            };
        });



    return xs.merge(user1$, user2$)
}

My Intent

function multiintent(sources) {
const user1$ = sources.HTTP.select('user1')
.flatten()
const user2$ = sources.HTTP.select('user2')
.flatten()
return xs.combine(user1$, user2$)
}

My Model

function multimodel(stream$) {
return stream$.map(([user1, user2]) => {
return xs.combine(
xs.of(user1.body),
xs.of(user2.body)
)
})
.flatten()
.startWith([null,null])
}

My View

function multiview(state$) {
return state$.map(([user1, user2]) => div('.users', [
button('.get-random', 'Get random user'),
(user1 === null && user2 === null) ? null : div('.user-details', [
h1('.user-name', user2 === null ? user1.name : user2.name),
h4('.user-email', user2 === null ? user1.email : user2.email),
a('.user-website', {
attrs: {
href: user2 === null ?
user1.website : user2.website
}
},
user2 === null ? user1.website : user2.website)
])
])
);
}

from awesome-cyclejs.

Hi,
I am still stuck with it. Can't figure out the mistake. Can you please help?

from awesome-cyclejs.

If I use same category for both the httprequests, it works fine for both page load and button click. But thats not what I want. I want to accomplish it by using two different categories. How to do that?

from awesome-cyclejs.