Resolve "Refactor profile page"
This merge request refactors the user profile page as suggested in the issue #205 (closed). The top part with the username and scores stays unchanged. Everything below the scores was remade.
All changes:
- Backend: Can now request a page of answers which returns all answers up to a certain page instead of all answers at once.
- Backend: Updated
GET
request for documents to support giving back all documents by a username or all documents liked by a username. - Frontend: Revamped profile page to be made up of multiple tabs: Overview, Answers, Documents, and Settings (only visible to oneself). "Overview" contains the recent notifications and payments, "Answers" contains all the user's answers, "Documents" contains the user's documents and liked documents, and "Settings" is currently quite empty and only contains the notification settings (could be used in the future for things like dark mode, etc.).
- Frontend: Updated answer hooks to allow for an optional page parameter.
- Frontend: Added new
useDocumentsUsername
anduseDocumentsLikedBy
hooks to request all the documents from a username or all documents liked by a username. - Frontend: Added infinite scrolling to answers. Meaning in the beginning only 10 answers are loaded and when a user scrolls down more answers are loaded in.
- Frontend: Added proper working masonry to the answers layout. Now the best answers are located at the top and the worst are at the bottom. Note: For this to work well an external package was introduced: react-masonry-component
- Frontend: Added new documents view. When viewing your own profile, there is now a
Your documents
and aLiked documents
view. These list all documents submitted by the user and all the documents liked by the user. When viewing another profile, only the documents of that person are shown (can't see liked documents of others). - Frontend: Notifications was slightly remade:
- Notification settings are now located separately in the Settings tab.
- Read/Unread button was changed from
"Hide Read Notifications"
and"Show Read Notifications"
to"Show unread"
and"Show all"
for more clarity.
- Frontend: If there are no notifications, answers or documents, a label is added that properly states that.
Edited by Lukas Möller