The user should be able to @mention users in the comments of photos and be able to see all the photos that @mention a particular user.
Enhance the add comment support to allow @mentions of any existing user. In the comment text box there should be an intelligent way to select users (see hint).
Users should not be able to @mention an invalid (non-existent) user, and a @mention for an invalid user should not crash the app.
Extend the user detail view to show a list of all the photos that have comments that @mention the user, or display something reasonable if there are no @mentions. Each item in the @mention list should include:
A small thumbnail of the photo. Clicking on the photo should link to thelocationof the photo on the user’s photo page
The photo owner's name. Clicking on the owner’s name should link to the owner’s user detail page.
React Mentions:https://github.com/signavio/react-mentions(React)
Note that there is a difference between when a @mention is selected and when a comment is submitted. You may want to think of a way to mark the @mention in the comment text on selection.
You will need to modify the database to store @mentions that are associated with a specific photo. It might be useful to have API calls that add a @mention to a photo and return all photos with a user @mentioned.
A logged-in user should be able to favorite photos and have a user-specific list of favorites appear on a new page (path:/favorites). That page should be dedicated to showing a list of favorited photos of that user. Users should be able to remove favorited photos from that list.
Users should be able to intuitively mark any photo as a favorite by clicking on a button appearing next to any photo shown on any user's list of photos. While a photo is favorited:
The button to favorite that photo on a user's list of photos should be disabled.
There should be some clear indicator that this photo is currently favorited by the user.
On a new view component, the user should be able to see a list of favorited photos, which must meet the following specifications:
Each photo must be represented by a small thumbnail.
Clicking on the thumbnail should cause amodal windowto open up displaying a larger version of the image (see hint below). It’snotsufficient to just have the click direct the user to a new page containing only that photo.
The modal should also contain a caption consisting of the date associated with the image.
There should be an intuitive way to remove a photo (e.g., clicking the upper right “x” on a thumbnail) from the list so that it is not part of the user’s list of favorites any longer, even if the user refreshes the page and logs back in.
Other notes:
The list of favorited photos should be be accessible via the url path/favorites(#!/favoritesor#/favorites).
Conditionally display navigation UI in the sidenav or top toolbar to the favorites page depending on whether the user is logged in.
This list of favorited photos must persist across multiple sessions: i.e., you must use the server-side database to keep track of this list and access this information to construct the list when users visit their favorites page.
React Hints
You may findhttps://github.com/reactjs/react-modal,https://v4.mui.com/components/modal/, orhttps://github.com/react-bootstrap/react-overlayshelpful. When using libraries with components, read the documentation carefully.
A significant challenge for this story will be getting the dependencies installed and configured correctly for your photo sharing app.
AnyUNMET PEER DEPENDENCY during `npm install` means that you need to installbefore installing your current package.
Already registered? Login
Not Account? Sign up
Enter your email address to reset your password
Back to Login? Click here