Firebase decorator api

firebase-decorator-api.jsx

// Alternative 1
// One function at top-level that returns whatever it needs.
// Can be run multiple times, and return different things
@firebase(props => {
  if (!props.projectIndex) {
    return {
      projectIndex: `users/${props.authId}/projects`,
    };
  }

  return {
    projects: mapValues(props.projectIndex, (meta, projectId) => {
      return `/projects/${projectId}/name`;
    }),
  }
})

// Alternative 2
// Array with “steps”
@firebase({
  projects: [
    props => `users/${props.authId}/projects`,
    props => mapValues(props.projects, (meta, projectId) => {
      return `/projects/${projectId}/name`;
    }),
  ]
})

// Alternative 3
// Multiple with function that returns an object of paths
@firebase({
  projects: props => `users/${props.authId}/projects`,
})

@firebase({
  projects: props => mapValues(props.projects, (meta, projectId) => {
    return `/projects/${projectId}/name`;
  }),
})

// Alternative 4
// One subscription per decorator
@firebase('projects', props => `users/${props.authId}/projects`)

@firebase('projects', props => mapValues(projects, (meta, projectId) => {
  return `/projects/${projectId}/name`;
}))

// Alternative 5
// Multiple with function at top-level
@firebase(props => ({
  projects: `users/${props.authId}/projects`,
}))

@firebase(props => ({
  projects: mapValues(props.projects, (meta, projectId) => {
    return `/projects/${projectId}/name`;
  }),
})

Alternative 5!

Step 1
First we get the index:

@firebase(props => ({
  projects: `users/${props.authId}/projects`,
}))

This function will simply return and will be used as a subscription model for the decorator

{
  projects: 'users/1234/projects'
}

The props for the component will be something like:

{
  projects: {
    234567: true,
    987654: true,
    456765: true,
  }
}

---

Step 2

Then a “second pass” or child component will resolve the project names:

@firebase(props => ({
  projects: mapValues(props.projects, (meta, projectId) => {
    return `/projects/${projectId}/name`;
  }),
})

Through mapValues, we end up with an object of id/path as the subscription model

{
  projects: {
    234567: 'projects/234567/name',
    987654: 'projects/987654/name',
    456765: 'projects/456765/name',
  }
}

The final props for the component will be something like:

{
  projects: {
    234567: 'Project A',
    987654: 'Project B',
    456765: 'Project C',
  }
}