Show placeholder image to represent the currently logged in user without a specified profile image on navbar and new comment form

[cirosantilli]

🚀 feature request

Relevant scope

What is the scope of this request?

• [X] Frontend specs
• [ ] Backend specs
• [ ] Other... Please describe:

Description

A clear and concise description of the problem or missing capability...

Currently, the placeholder image https://static.productionready.io/images/smiley-cyrus.jpg shows clearly on all created articles and comments when the user does not have any profile image set (default unless they edit profile after creation).

However, on locations that represent the currently logged in user, which are:

• login image next to name on navbar on top right
• image next to "Post Comment" button of article pages

the image is either omitted (not ideal IMO, but graceful), or an empty or bogus src= (buggy), behaviour is as follows on some existing implementations:

• https://github.com/gothinkster/angular-realworld-example-app/tree/9e8c49514ee874e5e0bbfe53ffdba7d2fd0af36f http://localhost:4200/article/my-title-90-e2ef8f
  • login: omitted
  • comment: bugged
• https://github.com/gothinkster/react-redux-realworld-example-app/tree/9186292054dc37567e707602a15a0884d6bdae35 http://localhost:4101/article/my-title-99-ufkns3
  • login: omitted
  • comment: bugged, alt text shows
• https://demo.realworld.io/#/article/test-article-207b4z
  • login: omitted
  • comment: bugged, alt text shows
• https://react-redux.realworld.io/#/article/test-article-207b4z?_k=l5vp4s
  • login: omitted
  • comment: bugged, alt text shows

Related issue: https://github.com/gothinkster/react-redux-realworld-example-app/pull/183

Here's a screenshot showing the omitted placeholder on top right, present placeholder on article I've created, and bogus placeholder next to "Post Comment":

Describe the solution you'd like

If you have a solution in mind, please describe it.

Frontends should use the placeholder everywhere to represent the currently logged in user. It is very confusing otherwise that you don't see your own placeholder, but that it does show up after posting.

Currently, when the image is unset, backends return for /api/user the value image: null:

{"user":{"image":null, ...}}

and /api/profiles/iu4hfu4iuh3nf383u gives:

{"profile":{"username":"iu4hfu4iuh3nf383u","bio":null,"image":"https://static.productionready.io/images/smiley-cyrus.jpg","following":false}}

This different behavior is needed, because when you go into Settings https://demo.realworld.io/#/settings to edit your image, you should be able to see if the field is empty or not, while everywhere else, the placeholder should be returned.

This difference of behavior is also needed to hide your email from other users.

So, we should just keep the API unchanged, and frontends should just always query the current users's /profile to get the image: data where needed, in addition/in place of /user, except for the Settings form.

Here's an example of a frontend doing that: https://github.com/cirosantilli/node-express-sequelize-nextjs-realworld-example-app/blob/adb6dbeb92cbdf535f95092d639c706515515c17/components/profile/LoginForm.tsx#L36 and then you use .effectiveImage from local storage instead of .image on most places.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

We could also make the API slightly better and make /api/user also return an effectiveImage key with the placeholder if one is not given. This way the login form won't have to set fetch profile as well to store it in local storage.