Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 3 tasks
cirosantilli opened this issue Jun 25, 2021 · 0 comments

Comments

@cirosantilli
Copy link
Contributor

cirosantilli commented Jun 25, 2021

🚀 feature request

Relevant scope

What is the scope of this request?

  • 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:

Related issue: gothinkster/react-redux-realworld-example-app#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":

Screenshot from 2021-06-25 15-31-42

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant