Fixed bug with auth panel on profile page. Implemented autocomplete c… #2
Conversation
…omponent. Implemented profile details UI. Implemented registration validation.
| switchMap(userName => fetchUserByName(userName)) | ||
| // TODO: add delay 300ms | ||
| // TODO: add finalize operator to hide the loader | ||
| tap(_ => showHideLoader(true)), |
There was a problem hiding this comment.
tap(() => method()) is more common
| // TODO: create fromEvent listeners for username password etc., use mapToTarget, startWith and map to value => ({ [key]: value }) | ||
| // TODO: then track form changes (like in balance.ts) and validate form, show errors, current form data on UI | ||
| // TIPS: you can use Object.keys, fromEvent, map, startWith, combineLatest, js reduce operator etc. | ||
| function init() { |
There was a problem hiding this comment.
const mapToTarget = map((e: Event) => (e.target as HTMLInputElement).value);
const registrationForm = {
username: "",
password: "",
email: "",
age: ""
};
const combinedSourceArr$ = Object.keys(registrationForm).map(key => {
return fromEvent(document.querySelector(#${key}), "input").pipe(
mapToTarget,
startWith((document.querySelector(#${key}) as HTMLInputElement).value),
map(value => ({ [key]: value }))
);
});
/// creates
{
username: value,
password: value,
....
}
combineLatest(...combinedSourceArr$)
.pipe(
map(errorList => errorList.reduce((acc, val) => ({...acc, ...val}), {}))
)
.subscribe(data => console.log('return', data));
Consider the following code -
I guess we can do a little bit generic.
| } | ||
|
|
||
| function initUserRender() { | ||
| of(1) |
There was a problem hiding this comment.
why do we need of(..) ?
I guess would be better to do like so:
ajax.getJSON(usersApiUrl).pipe(
pluck('results')
).subsribe(...
2 participants
…omponent. Implemented profile details UI. Implemented registration validation.