How can I refactor this RXJS / Angular code? - javascript

How can I refactor these nested arrays so that I can call something once all of the subscriptions have finished? I am sure it has to do with a combination of pipes, mergeMaps, concatMaps, etc.
this.teams = [
{
Assignments: [{Id: 0, Name: 'assignment', Notes: 'notes'}]
},
{
Assignments: [{Id: 0, Name: 'assignment', Notes: 'notes'}]
}]
this.teams.map((team:any) => {
team.Assignments.map((a: Assignment) => {
return this.videoService.getById(a.VideoId).subscribe(
res => {
let e = new Event();
e.Id = a.Id;
e.title = a.Name;
e.location = '';
e.message = a.Notes;
e.startDate = a.StartDate;
e.endDate = a.EndDate;
e.video = res;
e.team = team.Name;
this.eventList.push(e);
},
err => {
});
})
})

With lodash:
Observable.from(
lodash.flatten(
this.teams.map(team => team.Assignments)
)
)
.flatMap(a => this.videoService.getById(a.VideoId))
. subscribe(
res => {
//handle individual responses
},
err => {},
() => {
//handle after all complete
}
)

You can't listen on subscriptions, however, you could return an observable for each assignment an do a forkJoin of them, something like:
this.teams.map((team:any) => {
forkJoin(...team.Assignments.map((a: Assignment) => {
return this.videoService.getById(a.VideoId).map(
res => {
const e = new Event();
e.Id = a.Id;
e.title = a.Name;
e.location = '';
e.message = a.Notes;
e.startDate = a.StartDate;
e.endDate = a.EndDate;
e.video = res;
e.team = team.Name;
this.eventList.push(e);
});
})).subscribe(data => {
// Do something;
})
})
Now, I would refactor a little that code in order to make it more readable, something like:
function mapToEvent(team, assignment, response) {
const e = new Event();
e.Id = assignment.Id;
e.title = assignment.Name;
e.location = '';
e.message = assignment.Notes;
e.startDate = assignment.StartDate;
e.endDate = assignment.EndDate;
e.video = response;
e.team = team.Name;
return e;
}
this.teams.map(team => {
forkJoin(
...team.Assignments.map(a =>
this.videoService
.getById(a.VideoId)
.map(res => mapToEvent(team, a, res))
.do(event => this.events.push(event))
)
).subscribe(data => {
// Do something;
});
});
p.s. Some alternative syntax I was thinking on is:
function mapToEvent(team, assignment, response) {
const obj = {
Id: assignment.Id,
title: assignment.Name,
location: '',
message: assignment.Notes,
startDate: assignment.StartDate,
endDate: assignment.EndDate,
video: response,
team: team.Name
};
return Object.assign(new Event(), obj);
}
However, I'm not sure how it looks, although this may cause some underlying issues with V8, due to hidden classes.
Based on the other answer
I'm not much a fan of lodash, so I just wanted to present a vanilla js alternative:
Observable.from(
this.teams
.map(team => team.Assignments)
.reduce((acc, a) => [...acc, ...a], [])
)
.flatMap(a => this.videoService.getById(a.VideoId))
.catch(err => {
// Do Something
})
.finally(() => {
// Do something
})
.subscribe(res => {
// Handle Single
});

Related

Check Box Update Request,ReactJS

I'm making simple To Do List app,Everything is working.I just want to make sure I'm doing it right without any mistakes.
I'm concerned about Check box update part,Please check the code and tell me if I'm doing anything wrong.
Here is the put method for Checkboxes
checkBoxRouteUpdate = () => {
let {todos} = this.state
let newArray = [...todos]
axios
.put(`http://localhost:8080/checkEdit/`, {
checked: newArray.every(todo => todo.checked)
}).then((res) => {
console.log("res", res);
})
.catch((err) => {
console.log("err", err);
});
}
checking all of them
checkAllCheckBox = () => {
let {todos} = this.state
let newArray = [...todos]
if (newArray.length !==0) {
newArray.map(item => {
if (item.checked === true) {
return item.checked = false
} else {
return item.checked = true
}
})
this.checkBoxRouteUpdate()
this.setState({todos: newArray})
}
}
Checking single Check Box
checkSingleCheckBox = (id) => {
let {todos} = this.state
let newArray = [...todos]
newArray.forEach(item => {
if (item._id === id) {
item.checked = !item.checked
axios
.put(`http://localhost:8080/edit/${id}`,{
checked:item.checked
})
.then(res => {
this.setState({todos: newArray})
console.log('res',res)
})
.catch((err) => {
console.log("err", err);
});
} else {
}
})
}
Deleting Only Checked Items
deleteAllChecked = () => {
const todos = this.state.todos.filter((item => item.checked !== true))
axios
.delete('http://localhost:8080/deleteAllChecked')
.then((res) => {
this.setState({ todos,
pageCount: Math.ceil(todos.length / 10)})
console.log("res", res);
})
.catch((err) => {
console.log("err", err);
});
}
You can check/uncheck them another way
this.checkBoxRouteUpdate()
this.setState(state => ({
...state,
todos: state.todos.map(todo => ({
...todo,
checked: !item.checked
}))
}))
I think you should delete after api returns ok status
.then((res) => {
this.setState(state => {
const todos = state.todos.filter((item => item.checked !== true));
return {
...state,
todos,
pageCount: Math.ceil(todos.length / 10)
}
})
I add a lot of comments, some of these some just another way to do what you do and others are personal preferences, but the most important is that you can see alternatives ways to do things :).
checkBoxRouteUpdate = () => {
const todos = [...this.state.todos] // Better use const and initialize the array of objects directly
/*since you will use this array just in one place, is better if you iterate in
the [...todos] directly without save it in a variable
let newArray = [...todos]
*/
axios
.put(`http://localhost:8080/checkEdit/`, {
checked: todos.every(({checked}) => checked) // here you can use destructuring to get checked
}).then((res) => {
console.log("res", res);
})
.catch((err) => {
console.log("err", err);
});
}
```
checking all of them
```
checkAllCheckBox = () => {
const todos = [...this.state.todos] // Better use const and initialize the array of objects directly
// let newArray = [...todos] same as in the first function,
// isn't neccesary this if because if the array is empty, the map doesn't will iterate
// if (newArray.length !==0) {
/* this is optional, but you can write this like
const modifiedTodos = [...todos].map(({checked}) => checked = !checked)
*/
/* In general, is better use const when possible because in this way
you will reassign a variable just when is necessary, and this is related with
avoid mutate values. */
const modifiedTodos = todos.map(item => {
if (item.checked === true) {
return item.checked = false
} else {
return item.checked = true
}
})
this.checkBoxRouteUpdate()
this.setState({ todos: modifiedTodos })
}
// Checking single Check Box
checkSingleCheckBox = (id) => {
// since you need be secure that the todos is an array, you can do this instead of the destructuring
const todos = [...this.state.todos]
// same as in the above function
// let newArray = [...todos]
// Here is better to use destructuring to get the _id and checked
[...todos].forEach(({checked, _id}) => {
/* this is totally personal preference but I try to avoid put a lot of code inside an if,
to do this, you can do something like:
if(_id !== id) return
and your code doesn't need to be inside the if
*/
if (_id === id) {
/* this mutation is a little difficult to follow in large codebase, so,
is better if you modified the value in the place you will use it*/
// checked = !item.checked
axios
.put(`http://localhost:8080/edit/${id}`, {
checked: !checked
})
.then(res => {
this.setState({ todos: todos }) // or just {todos} if you use the object shorthand notation
console.log('res', res)
})
.catch((err) => {
console.log("err", err);
});
}
// this else isn't necessary
// else {
// }
})
}
// Deleting Only Checked Items
deleteAllChecked = () => {
const todos = this.state.todos.filter((item => item.checked !== true))
/* Another way to do the above filtering is:
const todos = this.state.todos.filter((item => !item.checked))
*/
axios
.delete('http://localhost:8080/deleteAllChecked')
.then((res) => {
this.setState({
todos,
pageCount: Math.ceil(todos.length / 10)
})
console.log("res", res);
})
.catch((err) => {
console.log("err", err);
});
}

firebase promise call in foreach with node firebase functions [duplicate]

This question already has answers here:
How to use promise in forEach loop of array to populate an object
(5 answers)
Closed 2 years ago.
On the firebase functions, I have next code:
app.post('/licence', (req, res) => {
let { email, machine_id, product_id } = req.body
let arr_product_ids = product_id.split(",").map(function (val) { return {product_id: val}; });
let res_to_print = '';
return new Promise((resolve, reject) => {
arr_product_ids.forEach(function(n){
res_to_print = asyncGetLicences(n.product_id, email, machine_id)
console.log('res_to_print')
console.log(res_to_print)
});
}).then((state) => {
console.log(state)
})
.catch((error) => {
console.log(error)
});
I need to call query two times to firebase query! So I call it in foreach loop.
Here is the function that needs to be called twice:
function asyncGetLicences(product_id, email, machine_id) {
licences_to_print = []
db.collection('licences', 'desc').where('email', '==', email).where('product_id', '==', product_id).get()
.then(data => {
let licences = []
data.forEach(doc => {
console.log(doc.data().email);
licences.push({
id: doc.id,
email: doc.data().email,
product: doc.data().product,
createdAt: doc.data().createdAt
});
});
if(typeof this.licences !== 'undefined' && this.licences.length > 0){
let string = email+machine_id+product_id+'55';
let api = md5(string);
let uppercase = api.toUpperCase()+'-';
licences_to_print.push(uppercase);
return licences_to_print
//return res.send('"'+uppercase+'"');//res.json(this.licences);
} else {
return licences_to_print
//return res.status(200).send('nothing to find');
}
})
}
I'm struggling with this simple promise...I had this in PHP and it was very easy, but node.js and firebase I got stuck!
Add all the promises in an array and insert into Promise.all() and then return this in the main function. This will collectively get the return from each promises asynchronously and return a single collective response.
app.post('/licence', (req, res) => {
let { email, machine_id, product_id } = req.body
let arr_product_ids = product_id.split(",").map(function (val) { return {product_id: val}; });
let res_to_print = '';
const promises = [] // Empty array
arr_product_ids.forEach(function(n){
promises.push(asyncGetLicences(n.product_id, email, machine_id));
});
return Promise.all(promises).then(res_to_print => {
console.log('res_to_print')
console.log(res_to_print)
}).catch((error) => {
console.log(error)
});
The second function:
function asyncGetLicences(product_id, email, machine_id) {
licences_to_print = []
return new Promise((resolve, reject) => {
db.collection('licences', 'desc').where('email', '==', email).where('product_id', '==', product_id).get()
.then(data => {
let licences = []
data.forEach(doc => {
console.log(doc.data().email);
licences.push({
id: doc.id,
email: doc.data().email,
product: doc.data().product,
createdAt: doc.data().createdAt
});
});
if(typeof this.licences !== 'undefined' && this.licences.length > 0){
let string = email+machine_id+product_id+'55';
let api = md5(string);
let uppercase = api.toUpperCase()+'-';
licences_to_print.push(uppercase);
resolve(licences_to_print)
//return res.send('"'+uppercase+'"');//res.json(this.licences);
} else {
resolve(licences_to_print)
//return res.status(200).send('nothing to find');
}
}))

Angular & Firebase get data in observable in value changes

Problem with got data correctly execute function many one times, these function is execute in ngOnInit one time with abstraction but i dont know ocurrs these problem in a server, i thing in snapshotChanges but i don't know.
thx for help
https://i.stack.imgur.com/EinQg.png
return <Observable<Products[]>> t.db.collection(PATHS_FIRESTORE.products).snapshotChanges()
.pipe(
map(actions => {
let arr = actions.map((res) => {
let doc: any = <any>res.payload.doc.data()
let obj: any = {}
if (!isNullOrUndefined(cart)) {
for (const prod in cart) {
if (cart.hasOwnProperty(prod)) {
const element = cart[prod];
if (doc.uid === prod) {
obj[doc.uid] = {
name_product: doc.name_product,
path_img: doc.path_img,
price: doc.price,
quantity: doc.quantity + element.total,
uid: doc.uid,
uid_local: doc.uid_local
}
} else {
t.db.collection(PATHS_FIRESTORE.products).doc(prod).ref.get().then( res => {
const data = res.data()
return obj[res.id] = {
name_product: data.name_product,
path_img: data.path_img,
price: data.price,
quantity: element.total,
uid: doc.uid,
uid_local: doc.uid_local
}
})
}
}
console.log(obj)
}
return obj
}else {
obj = {
...doc
}
return obj
}
})
.filter((b: any) => {
return b.uid_local === uid_local
})
.filter((b: any) => {
return b.quantity > 0
})
.filter((b: any) => {
return !b.status
})
console.log(arr)
return arr
})
)

Combining observables of array objects

How do you combine two or more observable of array i.e. Observable<Object[]>, Observable<Object[]> using rxjs in order to return one Observable<Object[]>?
forkJoin and merge are emitting the two Observable<Object[]> arrays independently.
getEmployeesLeavesByEmployeeNumber2(employeeNumber,afromDate,atoDate) {
const scenario1 = this.afs.collection(`${environment.FB_LEAVES}`, ref => {
let query: firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
query = query.where("employeeNumber", "==", employeeNumber);
query = query.where("fromDate",">=",afromDate);
query = query.where("fromDate","<=",atoDate);
return query;
}).snapshotChanges()
.pipe(take(1))
.pipe(
map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Leave;
data.docId = a.payload.doc.id;
return data;
})
})
).pipe(map(leaves => {
let leavesArr=leaves.filter(leave => leave.status!==environment.LEAVE_STATUS_DECLINED)
return leavesArr;
}));
const scenario2 = this.afs.collection(`${environment.FB_LEAVES}`, ref => {
let query: firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
query = query.where("employeeNumber", "==", employeeNumber);
query = query.where("toDate","<=",afromDate);
query = query.where("toDate","<=",atoDate);
return query;
}).snapshotChanges()
.pipe(take(1))
.pipe(
map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Leave;
data.docId = a.payload.doc.id;
return data;
})
})
).pipe(map(leaves => {
let leavesArr=leaves.filter(leave => leave.status!==environment.LEAVE_STATUS_DECLINED)
return leavesArr;
}));
const scenario3 = this.afs.collection(`${environment.FB_LEAVES}`, ref => {
let query: firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
query = query.where("employeeNumber", "==", employeeNumber);
query = query.where("fromDate","<=",afromDate);
return query;
}).snapshotChanges()
.pipe(take(1))
.pipe(
map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Leave;
data.docId = a.payload.doc.id;
return data;
})
})
).pipe(
filter(leave => {
return leave!==undefined;
})
);
return merge(scenario1,scenario2);
}
I am expecting a single observable of array but getting 2 i.e.
emp's leaves: [{…}]
assign.component.ts:198 leaves array length at assignment error 1
assign.component.ts:168 emp's leaves: (2) [{…}, {…}]
assign.component.ts:198 leaves array length at assignment error 2
I have got it to work using:
return forkJoin(scenario1,scenario2).pipe(map((arr) => [...arr[0],...arr[1]] ));

Create elements dynamically with CycleJS

I'm trying to learn some CycleJS and I ended up not knowing what to do exactly with this. The goal is to create inputs via configuration, instead of declaring them manually. The problem is I'm only getting rendered the last of the inputs from the array, instead of both. I'm assume the error is in view$ and how I'm dealing with the stream.My naive implementation is this:
Main.js
const sliderGunProps$ = xs.of({
value: 30,
id: 'gun'
});
const sliderCannonProps$ = xs.of({
value: 70,
id: 'cannon'
});
const propsConfig = [sliderGunProps$, sliderCannonProps$];
function view$(state$) {
return xs.fromArray(state$)
.map(state => {
return xs.combine(state.sliderVDom$, state.values)
.map(([sliderVDom, value]) =>
div([sliderVDom, h1(value)])
);
})
.flatten();
}
function model(actions$) {
return actions$.map((action) => {
const sliderVDom$ = action.DOM;
const sliderValue$ = action.value;
const values$ = sliderValue$.map(val => val);
return {
sliderVDom$: sliderVDom$,
values: values$
};
});
}
function intent(sources) {
return propsConfig.map(prop$ => Slider({
DOM: sources.DOM,
props$: prop$
}));
}
function main(sources) {
const actions$ = intent(sources);
const state$ = model(actions$);
const vdom$ = view$(state$);
const sink = {
DOM: vdom$
};
return sink;
}
Thanks!
I ended up figuring out how to solve it. The point was that I was not understanding how view$ handle the streams. The proper code:
function total(values) {
return xs.combine(...values)
.map(val => val.reduce((acc, x) => acc + x));
}
function view$(state$) {
const DOMElements = state$.map(slider => slider.sliderVDom$);
const values = state$.map(slider => slider.values);
const totalValue$ = total(values);
return xs.combine(totalValue$, ...DOMElements)
.map(([totalValue, ...elements]) => (
div([
...elements,
h1(totalValue)
])
));
}
function model(actions$) {
return actions$.map((action) => ({
sliderVDom$: action.DOM,
values: action.value.map(val => val)
}));
}
function intent(sources) {
return propsConfig.map(prop$ => Slider({
DOM: sources.DOM,
props$: prop$
}));
}

Categories