score:0

Accepted answer

to quickly make it work you could just do something like:

function mapstatetoprops(state) {

    const employees = state.firestore.ordered.employees;

    const schedules = employees
        ? employees.map(employee => ({
            id: employee.id,
            name: {
                first: employee.name.first,
                last: employee.name.last
            },
            schedule: [null, null, null, null, null, null, null]
        }))
        : undefined;

    const rota = {
        id: null,
        date: moment(),
        notes: null,
        events: [null, null, null, null, null, null, null],
        published: null,
        body: schedules
    };

    return { rota }
}

then, in you component, you can check for schedules attribute of rota object and if it's still undefined, render something to indicate that data is not loaded yet.

still, putting such a complex logic into mapstatetoprops is an antipattern for me. you can use selector pattern to make your code more organized.

score:0

your component should be reactive to the changes in the underlying data. so you can render something like this:

getschedules(emps) {
 return emps.map(employee => <someemployeerenderingcomponent emp={employee} /> );
}
render() {
  return (
   <div>{this.getschedules(this.props.employees).bind(this)}</div>
  )
}

and mapstatetoprops becomes:

function mapstatetoprops(state) {

  const rota = {
   id: null,
   date: moment(),
   notes: null,
   events: [null, null, null, null, null, null, null],
   published: null,
   employees: state.firestore.ordered.employees
  };

  return rota
}

Related Query

More Query from same tag