Convert pickBy and mapValues from lodash to function

Question

I'm trying to convert this function that uses pickBy and mapValues from lodash to a function that doesn't use lodash.

import mapValues from 'lodash/mapValues';
import pickBy from 'lodash/pickBy';

    function clinicsWithInvitations(upcomingClinics) {
      const upClinics = upcomingClinics.clinics;
      const upInvitations = upcomingClinics.invitations;

      const getInvitations = id => pickBy(upInvitations, inv => inv.clinicId === id);
      const mergeInvitations = (clinic, clinicId) => ({
        ...clinic,
        invitations: getInvitations(clinicId),
      });

      return mapValues(upClinics, mergeInvitations);
    }

I tried this but it didn't work

function clinicsWithInvitations(upcomingClinics) {
  const upClinics = upcomingClinics.clinics;
  const upInvitations = upcomingClinics.invitations;

  const getInvitations = clinicId =>
    Object.keys(upInvitations).reduce((acc, invId) => {
      const inv = upInvitations[invId];
      return inv.clinicId === clinicId ? { ...acc, [inv.clinicId]: inv } : acc;
    }, {});

  const mergeInvitations = (acc, clinicId) => ({
    ...acc,
    [clinicId]: {
      ...upClinics[clinicId],
      invitations: getInvitations(clinicId),
    },
  });
  return Object.keys(upClinics).reduce(mergeInvitations, {});
}

What I'm trying to do is to combine two objects into one object, I'm trying to associate the clinics with the invitations taking into account the clinicId, so I have this:

const upcomingClinics = {
  "clinics": {
    "a0CW000000271LuMAI": {
      "id": "a0CW000000271LuMAI",
      "contact": {
        "name": null,
        "phone": null,
        "email": null
      },
      "shifts": {
        "teamLeads": 1,
        "healthTechs": 1
      }
    },
    "a0CW00000026gikMAA": {
      "id": "a0CW00000026gikMAA",
      "contact": {
        "name": null,
        "phone": null,
        "email": null
      },
      "shifts": {
        "teamLeads": 1,
        "healthTechs": 4
      }
    }
  },
  "invitations": {
    "56392": {
      "id": "56392",
      "clinicId": "a0CW00000026gikMAA"
    },
    "56393": {
      "id": "56393",
      "clinicId": "a0CW00000026gikMAA"
    },
    "56402": {
      "id": "56402",
      "clinicId": "a0CW00000026gikMAA"
    },
    "56427": {
      "id": "56427",
      "clinicId": "a0CW000000271LuMAI"
    },
    "56428": {
      "id": "56428",
      "clinicId": "a0CW000000271LuMAI"
    }
  }
}

And this is the desired output but without causing any mutations.

const upcomingClinics = {
  "clinics": {
    "a0CW000000271LuMAI": {
      "id": "a0CW000000271LuMAI",
      "contact": {
        "name": null,
        "phone": null,
        "email": null
      },
      "shifts": {
        "teamLeads": 1,
        "healthTechs": 1
      }
      "invitations": {
        "56427": {
          "id": "56427",
          "clinicId": "a0CW000000271LuMAI"
        },
        "56428": {
          "id": "56428",
          "clinicId": "a0CW000000271LuMAI"
        }
      }
    },
    "a0CW00000026gikMAA": {
      "id": "a0CW00000026gikMAA",
      "contact": {
        "name": null,
        "phone": null,
        "email": null
      },
      "shifts": {
        "teamLeads": 1,
        "healthTechs": 4
      }
      "invitations": {
        "56392": {
          "id": "56392",
          "clinicId": "a0CW00000026gikMAA"
        },
        "56393": {
          "id": "56393",
          "clinicId": "a0CW00000026gikMAA"
        },
        "56402": {
          "id": "56402",
          "clinicId": "a0CW00000026gikMAA"
        },
      }
    }
  },
}

Answer 1

Following creates a Map of all the invitations using clinicId as keys first.

Then is a simple loop over all the clinics to merge them in

function clinicsWithInvitations(upcomingClinics) {

  const invitesMap = Object.entries(upcomingClinics.invitations).reduce((a, [id, invite]) => {
    const clinic = a.get(invite.clinicId)  || {}
    clinic[id] = { ...invite};
    return a.set(invite.clinicId, clinic)
  }, new Map)

  const clinics = { ...upcomingClinics.clinics};

  Object.keys(clinics).forEach(k => clinics[k].inivitations = invitesMap.get(k) || {});
  
  return {clinics: clinics};
}

console.log(clinicsWithInvitations(upcomingClinics))

.as-console-wrapper {
  max-height: 100%!important;
}

<script>
  const upcomingClinics = {
    "clinics": {
      "a0CW000000271LuMAI": {
        "id": "a0CW000000271LuMAI",
        "contact": {
          "name": null,
          "phone": null,
          "email": null
        },
        "shifts": {
          "teamLeads": 1,
          "healthTechs": 1
        }
      },
      "a0CW00000026gikMAA": {
        "id": "a0CW00000026gikMAA",
        "contact": {
          "name": null,
          "phone": null,
          "email": null
        },
        "shifts": {
          "teamLeads": 1,
          "healthTechs": 4
        }
      }
    },
    "invitations": {
      "56392": {
        "id": "56392",
        "clinicId": "a0CW00000026gikMAA"
      },
      "56393": {
        "id": "56393",
        "clinicId": "a0CW00000026gikMAA"
      },
      "56402": {
        "id": "56402",
        "clinicId": "a0CW00000026gikMAA"
      },
      "56427": {
        "id": "56427",
        "clinicId": "a0CW000000271LuMAI"
      },
      "56428": {
        "id": "56428",
        "clinicId": "a0CW000000271LuMAI"
      }
    }
  }
</script>

Answer 2

Your current attempt looks really close, but I think you have a small typo. This:

const getInvitations = clinicId =>
  Object.keys(upInvitations).reduce((acc, invId) => {
    const inv = upInvitations[invId];
    return inv.clinicId === clinicId ? { ...acc, [inv.clinicId]: inv } : acc;
  }, {});

...is using [inv.clinicId] as the key, when it's invId that you want if the invitations property will be keyed by invitation ID:

const getInvitations = clinicId =>
  Object.keys(upInvitations).reduce((acc, invId) => {
    const inv = upInvitations[invId];
    return inv.clinicId === clinicId ? { ...acc, [invId]: inv } : acc;
  }, {});