#### Repository https://github.com/jrawsthorne/review.app ### New Features - ~~Better filters for pages - store list of posts matching filter in redux store~~ - ~~Post formatting - youtube/dtube/more complex markdown/html~~ - ~~User profile pages~~ - ~~Allow all users to give star rating~~ - ~~Subscribe to certain show~~ - ~~Subscribed page showing all posts from subscribed shows/movies~~ ### #1 User profile pages [GitHub Link](https://github.com/jrawsthorne/review.app/commit/01c5a585cd6c84827641bcb80a71bcc1aee7be2b) You can visit a user's profile page by going to /@username like with most steem apps. The profile page shows the name, username, website, location and bio at the top with the avatar to the left and cover in the background. Below that is posts by that user. ![image.png](https://gateway.ipfs.io/ipfs/QmSeMchyiAmjvwNxdm81AEwdEsA5eeJoM7YdbFGTz4QKPa) ![profiles.gif](https://gateway.ipfs.io/ipfs/QmQZGDwt8YMTyfTzFakdoRoeXXxwStjGmREGoqzJ3WcnYd) ### #2 Star ratings I decided that a user should be able to rate any media item on the site so I needed to create a place for ratings in the database. This is the schema ([GitHub Link](https://github.com/jrawsthorne/review.app/blob/master/src/apis/models/Rating.js)) ```javascript const schema = new Schema( { user: { type: Schema.Types.ObjectId, ref: 'users', required: true, }, score: { type: Number, required: true, }, mediaType: { type: String, required: true, }, tmdbid: { type: Number, required: true, }, seasonNum: { type: Number, }, episodeNum: { type: Number, }, }, { timestamps: true, }, ); ``` Once logged in a user can go to any post and with the rest of the metadata at the top there are 5 stars. Clicking one will immediately add this rating to your account. In the future when there are sufficient ratings I hope to display an average as well. Clicking the same number of stars again will remove the rating so the minimum you can give is 1 star. ![image.png](https://gateway.ipfs.io/ipfs/QmRT8hiXXeaHPZYZneRzozPZisM9WC1dB7yncbb6mBbADk) ![ratings.gif](https://gateway.ipfs.io/ipfs/QmX3R84pUt48W5QVgJe4UuGkX1mXT8T9MiRAMhndeeid7A) When a user sets the score to 0 it is completely deleted from the database. [GitHub Link](https://github.com/jrawsthorne/review.app/blob/0c4ef17f7b0d451a69e9bab4fc4420a950a70407/src/apis/routes/ratings.js#L41-L55) ```javascript if (parseInt(value, 10) === 0) { return Rating .findOne({ user, mediaType, tmdbid, seasonNum, episodeNum, }) .remove() .then(() => { User.update({ _id: user.id }, { $pull: { ratings: rating.id } }) .then(() => res.json({})); }); } ``` ### #3 Subscriptions A user is also able to subscribe to certain shows or movies if they want to produce a feed with just posts from those shows/movies. I decided to implement this and will provide it as well as a general steem feed of content from users you follow. This is the schema ([GitHub Link](https://github.com/jrawsthorne/review.app/blob/0c4ef17f7b0d451a69e9bab4fc4420a950a70407/src/apis/models/Subscription.js#L5-L24)) ```javascript const schema = new Schema( { user: { type: Schema.Types.ObjectId, ref: 'users', required: true, }, tmdbid: { type: Number, required: true, }, type: { type: String, required: true, }, }, ); ``` To display all the posts for a subscription I loop through each one and find all the posts matching that criteria and add it to an array. ([GithHub Link](https://github.com/jrawsthorne/review.app/blob/0c4ef17f7b0d451a69e9bab4fc4420a950a70407/src/apis/routes/users.js#L58-L73)) ```javascript router.get('/subscriptions', passport.authenticate('jwt', { session: false }), (req, res) => { const { user } = req; let count = 0; Subscription.find({ user }) .then((subscriptions) => { Promise.all(subscriptions.map(subscription => Post.count({ type: subscription.type, tmdbid: subscription.tmdbid }).then(c => Post.find({ type: subscription.type, tmdbid: subscription.tmdbid }) .then((posts) => { count += c; return posts; })))) .then(posts => res.json({ count, results: orderBy(flatten(posts), 'createdAt', 'desc'), })); }) .catch(() => res.status(404).json({ error: 'Error fetching subscriptions' })); }); ``` ![image.png](https://gateway.ipfs.io/ipfs/QmURRuEN6LujCVpaxPD8p5WEu2btANvHcfE2SUjzAaQECc) ![image.png](https://gateway.ipfs.io/ipfs/QmWS8kwJCMVciA6ZJHTbgXvj39cmd3hJFhWPdAHs82vp9s) ![subscriptions.gif](https://gateway.ipfs.io/ipfs/Qmcp2y16xq5qccNmvgj3rpHyExNGfRTAU2V13j3ajur77P) ### #4 JSON web token To facilitate the previous two new features I added a new sign in flow so that I don't have to rely on steem authentication for every protected action. Having to access the steem api for every rating and subscription was very slow. As those two things don't rely on the steem blockchain it was unnecessary to authenticate using a steemconnect token so I now store a JSON web token with the users details in it. ([GitHub Link](https://github.com/jrawsthorne/review.app/blob/0c4ef17f7b0d451a69e9bab4fc4420a950a70407/src/apis/routes/users.js#L13-L56)) ```javascript router.post('/login', (req, res) => { const { accessToken } = req.body; if (!accessToken) res.status(400).json({ error: 'Not authenticated' }); steemConnectAPI.setAccessToken(accessToken); steemConnectAPI.me() .then((steemUser) => { User.findOne({ username: steemUser.name }).populate({ path: 'ratings', select: 'score mediaType tmdbid seasonNum episodeNum' }).populate('subscriptions', 'tmdbid type') .then((user) => { if (user) { const token = jwt.sign({ id: user.id, username: user.username, }, process.env.JWT_SECRET, { expiresIn: '1h' }); res.json({ user: { ...steemUser, account: { ...steemUser.account, ratings: { scores: user.ratings, }, subscriptions: { items: user.subscriptions, }, }, }, token, }); } else { new User({ username: steemUser.name }).save().then((newUser) => { const token = jwt.sign({ id: newUser.id, username: newUser.username, }, process.env.JWT_SECRET, { expiresIn: '1h' }); res.json({ user: steemUser, token, }); }); } }); }) .catch(() => res.status(400).json({ error: 'Not authenticated' })); }); ``` ### #5 Updated styling The interface for switching between episodes and seasons has been improved with a clickable tooltip. Although this doesn't provide as much information for the user, it saves a lot of space that was wasted before in my opinion. ([GitHub Link](https://github.com/jrawsthorne/review.app/blob/0c4ef17f7b0d451a69e9bab4fc4420a950a70407/src/components/media/Media.js#L36-L80)) ```javascript {props.seasons &&

{props.seasons && (

handleSeasonClick(season.season_number)} className="Filter__option" key={`season-${season.season_number}`} >{season.name}

))} trigger="click" > Seasons } {props.episodes && (

handleEpisodeClick(episode.episode_number)} className="Filter__option" key={`season-${episode.episode_number}`} >{episode.name}

))} trigger="click" > Episodes }

} ``` ![image.png](https://gateway.ipfs.io/ipfs/Qmdk4H6d2KGbzSVZnFk4uR14ZwHxSMYJ7FJD1gpqyFisrX) ![selectors.gif](https://gateway.ipfs.io/ipfs/QmWtFaDkZdKw38B2orP5BEFV4R8XxH4fPW6b6Lhyj2QEFq) ### Roadmap - Ability to actually write new posts - Store all database info in JSON metadata of a post as backup - User actions (like, comment) #### Proof of Work Done https://github.com/jrawsthorne