Skip to content

feat: 🍰 Webapp, Backend – User Profile – Display, Select and Upload User Profile Header Image

Hannes Heine requested to merge pr3634head into master

Created by: Tirokk

DriesCruyskens Authored by DriesCruyskens

🍰 Pullrequest

Since this feature is pretty similar to uploading and displaying a user's profile avatar I was able to mostly mirror the already existing implementation. Here you can see the drag and drop in action as well as the standard grey header for when no previous image is available:

dragndrop

Clicking opens up a file browser to select a file to upload just as with a profile avatar.

The issue also mentions cropping the image (to not use unnecessary bandwidth I assume) although I am not sure what to expected behavior is when using the app on mobile. As u can see in the next GIF, the image is mostly visible on mobile screens and even exposes the grey background if the image is not tall enough. Should the container have a max-height depending on the height of the image so no grey background is visible on wide images? Or use a CSS background image with repeat instead of an <img> tag?

mobile resize

Extra notes

UserProfileHeader component

I did not not reuse the hc-upload component since that one already has avatar specific code and the styling needs to be different. I instead (sort off) merged the hc-upload and UserAvatar component into a new UserProfileHeader component.

back-end

I did not add new tests to image.spec.js since already contains test functions for a profile avatar and all functionality is shared. The only thing that had to be done is add the relationship type to the array of relationship types.

I also added a cleanDatabase() in passwordReset.spec.js and statistics.spec.js before all tests because they would fail. Presumably because of artifacts from previous tests?

Db seed

Unlike avatars, profile headers are not added to user accounts by default when seeding the database. I lot of tests failed because they do a hard-coded check of the total amount of images in the database. I tried changing the amounts but I can't quite figure out why the amounts are what they are as they seem very arbitrary so I thought it best to leave them as is. This way I can just mock profile headers when needed and not break any previous tests.

Locales

Purposefully didn't reuse the user.avatar.submitted but made a new user.profileHeader.submitted although the text is the same. There is no text for failed toasts because that just prints the error message.

Storybook

I did not add a storybook entry since the component is very basic and does not have different states. Let me know if you still think this is necessary.

Issues

Todo

  • Made header component and added it to the profile page + Graphql functionality.
  • Back-end functionality for the header image similar to avatar image.
  • Database seeds.
  • Unit tests web-app and back-end.
  • Integration tests.
  • Locales for the successful upload toast.
  • Cropping image?

Merge request reports