MobX - User profile different fields and null defaults issue - mobx

Question

I have an AuthStore with these userData defaults:
#observable userData = {
username: null,
firstname: null,
lastname: null,
email: null
}
The object is populated on login with the respective fields and looks like this:
#observable userData = {
username: "jdoe",
firstname: "john",
lastname: "doe",
email: "johndoe#website.com" <— This field is special
}
The email field is special, it should only be fetched/existent if it’s on the authenticated user's profile when they view their own profile. When visiting another user’s profile, all the other fields should be existent except email, and are fetched from an api without email.
Since these are 2 different types of users, an auth user with their email present, and when they visit any other user, there is no email, just all the other respective fields. What’s the best way to handle this multi userData use case?
Should there be 2 stores with the same repeated fields except for email? So the above with the email intact in the AuthStore, and then another UserStore with the same fields without the email, and create 2 different react native ownerProfile.js (for auth user) and profile.js (for other users)? This doesn’t feel right...
What’s the best way to store the logged in userData object to retrieve it on application refresh if it’s available, as it currently empties out the profile's userData fields on app refresh and visiting the profile results in an error since I use AuthStore.userData.username.toUpperCase(); and I get an error because it’s trying to run .toUpperCase() on null.
I came across hydrate/toJson but I am confused by the whole thing, and not even sure when/how to implement them or even if they’re the solution to my problem. I am stuck on my project and can’t move forward because of this issue.
Any idea how to solve this using MobX?

Answer 1

I would create a class User
class User {
#observable username = null;
#observable firstname = null;
#observable lastname = null;
#observable email = null;
}
Then you can make UserStore which contains an observable array of User instances and AuthStore which has an observable field self pointing to the current user profile.
create 2 different react native ownerProfile.js (for auth user) and profile.js (for other users)? This doesn’t feel right...
I usually reuse existing components, but if I start adding too many ifs to a component I consider it a clear signal to extract code into a separate component.
It is hard to say when you should split OwnerProfile and Profile and it depends on what you want to show there. Remember that you can do something like this
function UserProfile({ user, otherProps }) {
return (
<common>
<markup>
<goes here>
{ user.email
? <OwnerProfile user={user} {...otherProps} />
: <Profile user={user} {...otherProps} />
</goes here>
</markup>
</common>
);
}
if you need to wrap OwnerProfile and Profile with the same markup (or you can turn UserProfile into a HOC and apply it to Profile and OwnerProfile on export).
What’s the best way to store the logged in userData object to retrieve it on application refresh if it’s available
You can take a look at mobx-contact-list example. Here it loads contacts from localStorage and here it saves it to localStorage.