1

I being trying to make a request to a REST endpoint using the CycleJS HTTP driver, but the way I'm getting the values of the input fields is not Reactive, but I'm not being able to find a way to do it (the right way)

User case:

The user fills the UserName and Password fields, then he clicks the "Sign up", the request get done with the input fields as data.

But if I create a xs-stream of the fields,the value is never set for the HTTP Request.

So what I ended up doing is:

.select('.btn-signup').events('click')
.map( ev => { 

  let request = API.requestCreate;

  // TODO - search for the best way to use the values.
  var user = document.querySelector('.user-input').value;
  var pass = document.querySelector('.user-password').value;

  if(user && pass ) {
    request.send = { username:user, password: pass };  
    return request;
  }
});

I'm definitely missing something but not being able to find a solution for it.

ismapro
  • 162
  • 9

1 Answers1

3

Seems valid for me

.select('.btn-signup').events('click')
.map( ev => ({ 
  username: document.querySelector('.user-input').value,
  password: document.querySelector('.user-password').value
})
.filter(data => data.username && data.password)
.map(data => {
  const request = API.requestCreate;

  request.send = data;

  return request;
});

Or alternatively:

const username$ = .select('.btn-signup')
  .events('.user-input')
  .map(e => e.target.value);

const password$ = .select('.btn-signup')
  .events('.user-input')
  .map(e => e.target.value)

.select('.btn-signup')
  .events('click')
  .withLatestFrom(
    username$,
    password$,
    (username, password) => ({username, password})
  )
  .filter(data => data.username && data.password)
  .map(data => {
    const request = API.requestCreate;

    request.send = data;

    return request;
  });
Lukas Neicelis
  • 438
  • 3
  • 6
  • Thank you, the first option worked good, I tried to use the second option but it didn't work because the stream library doesn't have the **withLatestForm** operation. Tried to implement the solution shown in the stream docs, but it didn't work. Thanks – ismapro Aug 16 '16 at 20:51
  • Thanks for the comment. I did not noticed that I did type and instead of "withLatestFrom" wrote "withLatestForm". Sorry about that! – Lukas Neicelis Sep 15 '16 at 08:42
  • If you want to do this the CycleJS way and still find that **withLatestFrom** doesn't exist, then check out **sampleCombine** from https://github.com/staltz/xstream#faq as linked by @bloodyKnuckles – xiankai Mar 24 '17 at 10:11