ViewerInfo blank first name causes errors

[mikemurray]

Type: minor

Describe the bug

ViewInfo component throws an error when the first name is blank. This causes the login dropdown to fail to open in the starter kit

To Reproduce
Steps to reproduce the behavior:

1. Test the component docs
2. Remove the first name

Expected behavior

The component should guard the first and last name against being blank. While it seems silly, this would ensure if bad data made it into the component, it doesn't fail to render.

For example, when signing up for an account in Reaction, the user never enters a name. So both their first name and last name will be blank. The can only set their name when they add an address to the address book, which might not happen until checkout.

[aldeed]

I thought we were going to handle this in the starter kit code, where we split name into firstName and lastName?

[aldeed]

From the component's perspective, requiring firstName is probably correct because it can't render anything if it has no data.

[impactmass]

@nnnnat is this the same (or related) issue you were working on in #289 ?

[nnnnat]

@impactmass Yeah I think so, I updated the ViewerInfo component to have a default firstName prop as discussed in slack. What I've seen in the starterkit when trying to implement the ViewerInfo component is that the viewer query only returns a name prop and not a firstName || lastName prop. @aldeed should the ViewerInfo component be splitting the viewer.name prop into two fistName && lastName strings?

[nnnnat]

@mikemurray I see the issue, I've created a default viewer prop really so the default firstName is kinda useless with the component is provided with an empty viewer object

[aldeed]

@nnnnat I think it's fine for ViewerInfo to expect two names. Starter kit can adjust the viewer object for now to add those properties. I'll make an issue for us to add firstName and lastName to GraphQL Account so that we can eventually have the server do the string splitting, or have two separate fields for entry.

[nnnnat]

Here is our approach to resolving this issue.
ViewerInfo Changes

• Updated to expect a viewer object of { firstName: "", lastName: "", primaryEmailAddress }.
• If no firstName || lastName then use the pre @ string from the primary email address.

Starterkit Changes

• When using the ViewerInfo component split the viewer.name into firstName && lastName props to pass down.

[rc-publisher]

🎉 This issue has been resolved in version 0.38.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀