api.js

/* global React AddressProfileUnit AddressProfileUnitForm ProfileUnitContainer */

const fakeResponse = {
  "address": [
    {
      "address_line_one": "STRING",
      "address_line_two": "STRING",
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "label": "STRING",
      "postal_code": "STRING",
    },
    {
      "address_line_one": "STRING",
      "address_line_two": "STRING",
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "label": "STRING",
      "postal_code": "STRING",
    },
  ],
  "country_choices": [
    "Afghanistan",
    "Albania",
    "ETC",
  ],
  "education": [
    {
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "degree_date": "STRING",
      "degree_major": "STRING",
      "degree_minor": "STRING",
      "degree_name": "STRING",
      "education_level_code": 1,
      "education_score": "STRING",
      "end_date": "STRING",
      "organization_name": "STRING",
      "start_date": "STRING",
    },
    {
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "degree_date": "STRING",
      "degree_major": "STRING",
      "degree_minor": "STRING",
      "degree_name": "STRING",
      "education_level_code": 1,
      "education_score": "STRING",
      "end_date": "STRING",
      "organization_name": "STRING",
      "start_date": "STRING",
    },
  ],
  "education_level_choices": [
    "Education Level",
    "High School",
    "Non-Degree Education",
    "Associate",
    "Bachelor",
    "Master",
    "Doctoral",
  ],
  "employment_history": [
    {
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "current_indicator": true,
      "description": "STRING",
      "end_date": "STRING",
      "industry_code": "STRING",
      "job_category_code": "STRING",
      "onet_code": "STRING",
      "organization_name": "STRING",
      "position_title": "STRING",
      "start_date": "STRING",
    },
    {
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "current_indicator": false,
      "description": "STRING",
      "end_date": "STRING",
      "industry_code": "STRING",
      "job_category_code": "STRING",
      "onet_code": "STRING",
      "organization_name": "STRING",
      "position_title": "STRING",
      "start_date": "STRING",
    },
  ],
  "license": [
    {
      "description": "STRING",
      "license_name": "STRING",
      "license_type": "STRING",
    },
    {
      "description": "STRING",
      "license_name": "STRING",
      "license_type": "STRING",
    },
  ],
  "military_service": [
    {
      "branch": "STRING",
      "campaign": "STRING",
      "country_code": "STRING",
      "department": "STRING",
      "division": "STRING",
      "end_rank": "STRING",
      "expertise": "STRING",
      "honor": "STRING",
      "service_end_date": "STRING",
      "service_start_date": "STRING",
      "start_rank": "STRING",
    },
    {
      "branch": "STRING",
      "campaign": "STRING",
      "country_code": "STRING",
      "department": "STRING",
      "division": "STRING",
      "end_rank": "STRING",
      "expertise": "STRING",
      "honor": "STRING",
      "service_end_date": "STRING",
      "service_start_date": "STRING",
      "start_rank": "STRING",
    },
  ],
  "name": [
    {
      "family_name": "STRING",
      "given_name": "STRING",
      "primary": true,
    },
    {
      "family_name": "STRING",
      "given_name": "STRING",
      "primary": false,
    },
  ],
  "overview": {
    "email": "STRING",
    "full_name": "STRING",
    "profile_completion": 90,
  },
  "secondary_email": [
    {
      "email": "STRING",
      "label": "STRING",
      "verified": true,
      "verified_date": "STRING",
    },
    {
      "email": "STRING",
      "label": "STRING",
      "verified": true,
      "verified_date": "STRING",
    },
  ],
  "summary": {
    "headline": "STRING",
    "the_summary": "STRING",
  },
  "telephone": [
    {
      "area_dialing": "STRING",
      "channel_code": "STRING",
      "country_dialing": "STRING",
      "extension": "STRING",
      "number": "STRING",
      "use_code": "STRING",
      "use_code_choices": [
        "----------",
        "Phone Type",
        "Home",
        "Work",
        "Mobile",
        "Pager",
        "Fax",
        "Other",
      ],
    },
    {
      "area_dialing": "STRING",
      "channel_code": "STRING",
      "country_dialing": "STRING",
      "extension": "STRING",
      "number": "STRING",
      "use_code": "STRING",
      "use_code_choices": [
        "----------",
        "Phone Type",
        "Home",
        "Work",
        "Mobile",
        "Pager",
        "Fax",
        "Other",
      ],
    },
  ],
  "volunteer_history": [
    {
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "current_indicator": true,
      "description": "STRING",
      "end_date": "STRING",
      "organization_name": "STRING",
      "position_title": "STRING",
      "start_date": "STRING",
    },
    {
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "current_indicator": true,
      "description": "STRING",
      "end_date": "STRING",
      "organization_name": "STRING",
      "position_title": "STRING",
      "start_date": "STRING",
    },
  ],
  "website": [
    {
      "description": "STRING",
      "display_text": "STRING",
      "site_type": "STRING",
      "site_type_choices": [
        {
          "personal": "Personal",
        },
        {
          "portfolio": "Portfolio of my work",
        },
        {
          "created": "Site I created or helped create",
        },
        {
          "association": "Group or Association",
        },
        {
          "social": "Social media",
        },
        {
          "other": "Other",
        },
      ],
      "uri": "STRING",
      "uri_active": true,
    },
    {
      "description": "STRING",
      "display_text": "STRING",
      "site_type": "STRING",
      "site_type_choices": [
        {
          "personal": "Personal",
        },
        {
          "portfolio": "Portfolio of my work",
        },
        {
          "created": "Site I created or helped create",
        },
        {
          "association": "Group or Association",
        },
        {
          "social": "Social media",
        },
        {
          "other": "Other",
        },
      ],
      "uri": "STRING",
      "uri_active": true,
    },
  ],
};

// I suspect that your initial impression of the task has you wanting to get
// all units in one go then iterate over them dynamically as such:
class Overview extends React.Component {
  render() {
    // map each object above to a component with props for the various bits,
    // then attach them all to an array.    const profileUnits = [];
    const profileUnits = [];
    for (const profileUnitName in fakeResponse) {
      if (fakeResponse.hasOwnProperty(profileUnitName)) {
        switch (profileUnitName) {
        case "address":
          profileUnits.push(<AddressProfileUnit {...fakeResponse[profileUnitName]} />);
          break;
        default:
        }
      }
    }

    // That array is then passed as props to a container unit of sorts.
    return <ProfileUnitContainer profileUnits={profileUnits} />;
  }
}

// For the individual form case, I suspect you are wanting to do something
// analogous to the following:
class ProfileUnitForm extends React.Component { // eslint-disable-line react/no-multi-comp
  render() {
    for (const profileUnitName in fakeResponse) {
      if (fakeResponse.hasOwnProperty(profileUnitName)) {
        switch (profileUnitName) {
        case "address":
          return <AddressProfileUnitForm {...fakeResponse[profileUnitName]} />;
        default:
        }
      }
    }
  }
}

// For the form case, I am suggesting that the response need only concern
// itself with the profile unit in question, which frees up the frontend to be
// likewise free. So a response might look like
const simpleResponse = {
  "type": "address",
  "units": [
    {
      "address_line_one": "STRING",
      "address_line_two": "STRING",
      "city_name": "STRING",
      "country_code": "STRING",
      "country_sub_division_code": "STRING",
      "label": "STRING",
      "postal_code": "STRING",
    },
  ],
};

// In the above form, I know exactly what kind of profile unit i'm dealing
// with, and just how many instances of that profile unit I need to render.
// Thus, the form definition becomes:
class SimpleProfileUnitForm extends React.Component { // eslint-disable-line react/no-multi-comp
  render() {
    switch (simpleResponse.type) {
    case "address":
      return <AddressProfileUnitForm {...simpleResponse.units} />;
    default:
    }
  }
}

This isn't really accurate at all, as I wasn't considering props and all that. Some of the control flow logic doesn't make sense, but I figured posting something was better than nothing at all.

The main point, if you scroll to the end is that the api should only return enough information for the frontend to do its job. In this case, if i want to see all address profile units, simpleResponse should be enough. if I want multiple profile units, an array of such responses should be enough. Arrays, for what we are wanting to do, are much better than objects as they are ordered, which is what we want.

For the form view, all you need to know are field names and choices if available. When editing a profile unit, you may want to know what's in those values, but that should only be sent in that particular case. For new units, its just wasteful to send all of that back. I'll play in a repl with the current views and see what I can come up with.