Add reactions to meetings. Rewrote meeting from class component -> hook.

app/models.ts

@@ -1,4 +1,5 @@
 import type Comment from 'app/store/models/Comment';
+import type { ReactionsGrouped } from './store/models/Reaction';
 import type { Moment } from 'moment';
 // TODO: Id handling could be opaque
 export type ID = number;
@@ -316,6 +317,7 @@ export type Meeting = {
   comments?: ID[];
   contentTarget?: string;
   actionGrant?: ActionGrant;
+  reactionsGrouped?: ReactionsGrouped;
 };
 
 export type AddPenalty = {

app/reducers/index.ts

@@ -84,6 +84,7 @@ export const meetingSchema = new schema.Entity('meetings', {
   reportAuthor: userSchema,
   createdBy: userSchema,
   comments: [commentSchema],
+  reactions: [reactionSchema],
 });
 export const frontpageSchema = new schema.Entity('frontpage', {
   events: [eventSchema],

app/reducers/meetings.ts

@@ -3,7 +3,10 @@ import { createSelector } from 'reselect';
 import type { Dateish } from 'app/models';
 import { mutateComments } from 'app/reducers/comments';
 import createEntityReducer from 'app/utils/createEntityReducer';
+import joinReducers from 'app/utils/joinReducers';
 import { Meeting } from '../actions/ActionTypes';
+import { mutateReactions } from './reactions';
+import type { ReactionEntity } from './reactions';
 
 export type MeetingEntity = {
   id: number;
@@ -16,14 +19,18 @@ export type MeetingEntity = {
   reportAuthor: number;
   createdBy: number;
   mazemapPoi: number;
+  reactionsGrouped?: Array<ReactionEntity>;
 };
 
 export type MeetingSection = {
   title: string;
   meetings: Array<MeetingEntity>;
 };
 
-const mutate = mutateComments('meetings');
+const mutate = joinReducers(
+  mutateComments('meetings'),
+  mutateReactions('meetings')
+);
 
 export default createEntityReducer({
   key: 'meetings',
@@ -52,6 +59,18 @@ export const selectCommentsForMeeting = createSelector(
     return meeting.comments.map((commentId) => commentsById[commentId]);
   }
 );
+
+export const selectReactionsForMeeting = createSelector(
+  selectMeetingById,
+  (state) => state.reactions.byId,
+  (meeting, reactionsById) => {
+    if (!meeting) return [];
+    return (meeting.reactionsGrouped || []).map(
+      (reactionId) => reactionsById[reactionId]
+    );
+  }
+);
+
 export const selectGroupedMeetings = createSelector(
   selectMeetings,
   (meetings) => {

app/routes/meetings/MeetingDetailRoute.tsx

@@ -2,14 +2,18 @@ import qs from 'qs';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { deleteComment } from 'app/actions/CommentActions';
+import { fetchEmojis } from 'app/actions/EmojiActions';
 import {
   fetchMeeting,
   setInvitationStatus,
   answerMeetingInvitation,
   resetMeetingsToken,
 } from 'app/actions/MeetingActions';
+import { addReaction, deleteReaction } from 'app/actions/ReactionActions';
 import type { User } from 'app/models';
+import { selectEmojis } from 'app/reducers/emojis';
 import { selectMeetingById } from 'app/reducers/meetings';
+import type { ReactionEntity } from 'app/reducers/reactions';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
 import MeetingDetailLoginRoute from './MeetingDetailLoginRoute';
 import MeetingAnswer from './components/MeetingAnswer';
@@ -22,7 +26,10 @@ const loadMeeting = (
     },
   },
   dispatch
-) => (loggedIn ? dispatch(fetchMeeting(meetingId)) : Promise.resolve());
+) =>
+  loggedIn
+    ? dispatch(fetchMeeting(meetingId), fetchEmojis())
+    : Promise.resolve();
 
 const loadData = (props, dispatch): any => {
   const search = qs.parse(props.location.search, {
@@ -63,12 +70,14 @@ const mapStateToProps = (state, props) => {
   const showAnswer = Boolean(
     meetingsToken.response === 'SUCCESS' && action && token
   );
+  const emojis = selectEmojis(state);
   return {
     meetingsToken,
     user: props.currentUser,
     showAnswer,
     meeting,
     currentUser,
+    emojis,
   };
 };
 
@@ -79,6 +88,7 @@ type Props = {
     user: User;
     response: string;
     meeting: number;
+    reactionsGrouped: Array<ReactionEntity>;
   };
   router: any;
   resetMeetingsToken: () => void;
@@ -105,6 +115,9 @@ const mapDispatchToProps = {
   setInvitationStatus,
   resetMeetingsToken,
   deleteComment,
+  fetchEmojis,
+  addReaction,
+  deleteReaction,
 };
 export default compose(
   withPreparedDispatch('fetchMeetingDetail', loadData, (props) => [

app/routes/meetings/components/MeetingDetail.css

@@ -19,3 +19,9 @@
   display: flex;
   margin-bottom: 10px;
 }
+
+.meetingReactions {
+  display: flex;
+  flex-direction: row;
+  margin: 0.5em 0 0.5em 0;
+}