synapse-react-client/dist/components/UserCardList/UserCardList.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as o } from "react/jsx-runtime";
import { getUserProfileWithProfilePicAttached as m } from "../../utils/functions/getUserData.js";
import { MEDIUM_USER_CARD as c } from "../../utils/SynapseConstants.js";
import { ColumnTypeEnum as f } from "@sage-bionetworks/synapse-types";
import { without as p } from "lodash-es";
import { Component as h } from "react";
import { UserCard as u } from "../UserCard/UserCard.js";
class C extends h {
  constructor(e) {
    super(e), this.state = {
      userProfileMap: {}
    }, this.update = this.update.bind(this);
  }
  componentDidMount() {
    const { list: e } = this.props;
    this.update(e);
  }
  componentDidUpdate(e) {
    const t = e.list, i = p(
      this.props.list.filter((n) => n),
      ...t
    );
    i.length > 0 && this.update(i);
  }
  update(e) {
    m(
      e.filter((t) => !!t)
    ).then((t) => {
      const i = {};
      t.list.forEach((n) => {
        const { ownerId: a } = n;
        i[a] = n;
      }), this.setState({
        userProfileMap: { ...this.state.userProfileMap, ...i }
      });
    }).catch((t) => {
      console.error("Error on batch call =", t);
    });
  }
  /**
   * Given data this will find rows where there is no userId columnType and create faux user profiles
   * using firstName, lastName, and institution (company in UserProfile object).
   * @param {RowSet} rowSet
   * @returns list of UserProfiles with firstName, lastName, company, userName (first letter of firstName) filled out.
   * @memberof UserCardList
   */
  manuallyExtractData(e) {
    const t = e.headers.findIndex(
      (r) => r.name === "firstName"
    ), i = e.headers.findIndex((r) => r.name === "lastName"), n = e.headers.findIndex(
      (r) => r.name === "institution"
    ), a = e.headers.findIndex(
      (r) => r.columnType === f.USERID
    );
    return e.rows.filter((r) => !r.values[a]).map((r) => {
      const s = r.values;
      return {
        firstName: s[t] ?? "",
        lastName: s[i] ?? "",
        company: s[n] ?? void 0,
        ownerId: null,
        userName: s[t] ? s[t][0] ?? "" : ""
      };
    });
  }
  render() {
    const { size: e = c, rowSet: t, list: i } = this.props, { userProfileMap: n = {} } = this.state, a = t && this.manuallyExtractData(t);
    let l = 0;
    return /* @__PURE__ */ o("div", {
      className: "SRC-card-grid-row",
      // we loop through the list from the props because thats the 'active set of data' whereas the data stored in state could be stale
      children: i.map((r) => {
        const s = r != null ? n[r] : null;
        if (s)
          return /* @__PURE__ */ o(
            "div",
            {
              className: "SRC-grid-item SRC-narrow-grid-item",
              children: /* @__PURE__ */ o(
                u,
                {
                  size: e,
                  preSignedURL: s.clientPreSignedURL,
                  userProfile: s
                }
              )
            },
            JSON.stringify(s)
          );
        const d = a && a[l];
        return d ? (l += 1, /* @__PURE__ */ o(
          "div",
          {
            className: "SRC-grid-item SRC-narrow-grid-item",
            children: /* @__PURE__ */ o(
              u,
              {
                disableLink: !0,
                hideEmail: !0,
                size: e,
                userProfile: d
              }
            )
          },
          JSON.stringify(d)
        )) : !1;
      })
    });
  }
}
export {
  C as UserCardList,
  C as default
};
//# sourceMappingURL=UserCardList.js.map