Type and clean up meeting components

app/actions/ArticleActions.ts

@@ -5,7 +5,7 @@ import type { ID } from 'app/store/models';
 import type { ArticleEntity, Thunk } from 'app/types';
 import { Article } from './ActionTypes';
 
-export function fetchArticle(articleId: ID): Thunk<void> {
+export function fetchArticle(articleId: ID): Thunk<Promise<void>> {
   return callAPI({
     types: Article.FETCH,
     endpoint: `/articles/${articleId}/`,

app/actions/MeetingActions.ts

@@ -3,6 +3,7 @@ import { startSubmit, stopSubmit } from 'redux-form';
 import callAPI from 'app/actions/callAPI';
 import { meetingSchema } from 'app/reducers';
 import type { UserEntity } from 'app/reducers/users';
+import type { ID } from 'app/store/models';
 import type { Thunk, Action } from 'app/types';
 import createQueryString from 'app/utils/createQueryString';
 import { Meeting } from './ActionTypes';
@@ -150,19 +151,18 @@ export function inviteUsersAndGroups({
   users,
   groups,
 }: {
-  id: number;
+  id: ID;
   users: [
     {
-      value: number;
-      id: number;
+      id: ID;
     }
   ];
   groups: [
     {
-      value: number;
+      value: ID;
     }
   ];
-}): Thunk<any> {
+}): Thunk<Promise<void>> {
   return callAPI({
     types: Meeting.EDIT,
     endpoint: `/meetings/${id}/bulk_invite/`,

app/components/UserAttendance/AttendanceStatus.tsx

@@ -5,7 +5,7 @@ import withModal from './withModal';
 import type { Pool } from './AttendanceModal';
 
 type AttendancePool = Pool & {
-  capacity: number;
+  capacity?: number;
   registrationCount?: number;
 };
 

app/components/UserAttendance/withModal.tsx

@@ -64,7 +64,7 @@ const ChildrenWithProps = ({
   children,
   ...restProps
 }: WithModalProps & {
-  children: ReactElement[];
+  children: ReactElement | ReactElement[];
 }) => (
   <div>
     {Children.map(children, (child) => cloneElement(child, { ...restProps }))}

app/reducers/__tests__/meetingsToken.spec.ts

@@ -3,21 +3,21 @@ import meetingsToken from '../meetingsToken';
 
 describe('reducers', () => {
   const prevState = {
-    response: 'abc',
-    user: {},
-    meeting: null,
-    status: '',
+    response: undefined,
+    user: undefined,
+    meeting: undefined,
+    status: undefined,
   };
   describe('meetingsToken', () => {
     it('Meeting.ANSWER_INVITATION_TOKEN.FAILURE', () => {
       const action = {
         type: Meeting.ANSWER_INVITATION_TOKEN.FAILURE,
       };
       expect(meetingsToken(prevState, action)).toEqual({
-        response: 'abc',
-        user: {},
-        meeting: null,
-        status: 'FAILURE',
+        response: 'FAILURE',
+        user: undefined,
+        meeting: undefined,
+        status: undefined,
       });
     });
     it('Meeting.ANSWER_INVITATION_TOKEN.SUCCESS', () => {
@@ -41,10 +41,10 @@ describe('reducers', () => {
         type: Meeting.RESET_MEETINGS_TOKEN,
       };
       expect(meetingsToken(prevState, action)).toEqual({
-        response: '',
-        user: {},
-        meeting: null,
-        status: '',
+        response: undefined,
+        user: undefined,
+        meeting: undefined,
+        status: undefined,
       });
     });
   });

app/reducers/meetingInvitations.ts

@@ -1,10 +1,17 @@
 import { produce } from 'immer';
 import { createSelector } from 'reselect';
 import type { User } from 'app/models';
-import type { MeetingInvitationStatus } from 'app/store/models/MeetingInvitation';
+import type { RootState } from 'app/store/createRootReducer';
+import type { ID } from 'app/store/models';
+import type {
+  MeetingInvitation,
+  MeetingInvitationStatus,
+} from 'app/store/models/MeetingInvitation';
+import type { PublicUser } from 'app/store/models/User';
 import createEntityReducer from 'app/utils/createEntityReducer';
 import { Meeting } from '../actions/ActionTypes';
 import { selectMeetingById } from './meetings';
+import type { Selector } from 'reselect';
 
 export const statusesText: {
   [value in MeetingInvitationStatus]: string;
@@ -48,7 +55,16 @@ export const selectMeetingInvitation = createSelector(
   (meetingInvitationsById, meetingId, userId) =>
     meetingInvitationsById[getMeetingInvitationId(meetingId, userId)]
 );
-export const selectMeetingInvitationsForMeeting = createSelector(
+
+export type MeetingInvitationWithUser = Omit<MeetingInvitation, 'user'> & {
+  id: ID;
+  user: PublicUser;
+};
+
+export const selectMeetingInvitationsForMeeting: Selector<
+  RootState,
+  MeetingInvitationWithUser[]
+> = createSelector(
   selectMeetingById,
   (state) => state.meetingInvitations.byId,
   (state) => state.users.byId,

app/reducers/meetings.ts

@@ -1,30 +1,15 @@
 import moment from 'moment-timezone';
 import { createSelector } from 'reselect';
-import type { Dateish } from 'app/models';
 import { mutateComments } from 'app/reducers/comments';
-import type { ReactionsGrouped } from 'app/store/models/Reaction';
+import type { ListMeeting } from 'app/store/models/Meeting';
 import createEntityReducer from 'app/utils/createEntityReducer';
 import joinReducers from 'app/utils/joinReducers';
 import { Meeting } from '../actions/ActionTypes';
 import { mutateReactions } from './reactions';
 
-export type MeetingEntity = {
-  id: number;
-  title: string;
-  location: string;
-  startTime: Dateish;
-  endTime: Dateish;
-  report: string;
-  invitations: Array<number>;
-  reportAuthor: number;
-  createdBy: number;
-  mazemapPoi: number;
-  reactionsGrouped?: ReactionsGrouped[];
-};
-
 export type MeetingSection = {
   title: string;
-  meetings: Array<MeetingEntity>;
+  meetings: ListMeeting[];
 };
 
 const mutate = joinReducers(

app/reducers/meetingsToken.ts

@@ -1,18 +1,30 @@
 import { produce } from 'immer';
+import type { ID } from 'app/store/models';
+import type { MeetingInvitationStatus } from 'app/store/models/MeetingInvitation';
+import type { PublicUser } from 'app/store/models/User';
 import { Meeting } from '../actions/ActionTypes';
 import type { Reducer } from '@reduxjs/toolkit';
 
-const initialState = {
-  response: '',
-  user: {},
-  meeting: null,
-  status: '',
+export type MeetingsTokenResponse = 'SUCCESS' | 'FAILURE';
+
+type State = {
+  response?: MeetingsTokenResponse;
+  user?: PublicUser;
+  meeting?: ID;
+  status?: MeetingInvitationStatus;
+};
+
+const initialState: State = {
+  response: undefined,
+  user: undefined,
+  meeting: undefined,
+  status: undefined,
 };
-type State = typeof initialState;
+
 const meetingsToken: Reducer<State> = produce((newState, action) => {
   switch (action.type) {
     case Meeting.ANSWER_INVITATION_TOKEN.FAILURE:
-      newState.status = 'FAILURE';
+      newState.response = 'FAILURE';
       break;
 
     case Meeting.ANSWER_INVITATION_TOKEN.SUCCESS: {

app/routes/app/AppRoute.tsx

@@ -57,6 +57,9 @@ export const UserContext = createContext<{
   loggedIn: false,
 });
 
+// Extract the type of the user context
+export type UserContextType = ReturnType<typeof useUserContext>;
+
 export const useUserContext = () => useContext(UserContext);
 
 class AppChildren extends PureComponent<Props> {

app/routes/articles/ArticleCreateRoute.ts

@@ -8,7 +8,7 @@ import { selectCurrentUser } from 'app/reducers/auth';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import ArticleEditor from './components/ArticleEditor';
 
-const mapStateToProps = (state, props) => {
+const mapStateToProps = (state) => {
   const currentUser = selectCurrentUser(state);
   const authors = [currentUser];
   return {

app/routes/articles/ArticleListRoute.ts

@@ -3,13 +3,9 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { fetchAll } from 'app/actions/ArticleActions';
 import { fetchPopular } from 'app/actions/TagActions';
-import {
-  selectArticles,
-  selectArticlesWithAuthorDetails,
-} from 'app/reducers/articles';
+import { selectArticlesWithAuthorDetails } from 'app/reducers/articles';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import { selectPopularTags } from 'app/reducers/tags';
-import { selectUserById } from 'app/reducers/users';
 import type { PublicArticle } from 'app/store/models/Article';
 import type { PublicUser } from 'app/store/models/User';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';

app/routes/meetings/MeetingDetailLoginRoute.ts

@@ -12,16 +12,26 @@ import {
   selectCommentsForMeeting,
 } from 'app/reducers/meetings';
 import { selectUserById } from 'app/reducers/users';
+import type { UserContextType } from 'app/routes/app/AppRoute';
+import type { RootState } from 'app/store/createRootReducer';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import MeetingDetail from './components/MeetingDetail';
+import type { RouteChildrenProps } from 'react-router';
+
+type Params = {
+  meetingId: string;
+};
 
 const mapDispatchToProps = {
   setInvitationStatus,
   fetchMeeting,
   push,
 };
 
-const mapStateToProps = (state, props) => {
+const mapStateToProps = (
+  state: RootState,
+  props: RouteChildrenProps<Params> & UserContextType
+) => {
   const { meetingId } = props.match.params;
   const { currentUser } = props;
   const meeting = selectMeetingById(state, {

app/routes/meetings/MeetingDetailRoute.tsx

@@ -10,13 +10,21 @@ import {
   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 { ReactionsGrouped } from 'app/store/models/Reaction';
+import type { MeetingsTokenResponse } from 'app/reducers/meetingsToken';
+import type { UserContextType } from 'app/routes/app/AppRoute';
+import type { ID } from 'app/store/models';
+import type { MeetingInvitationStatus } from 'app/store/models/MeetingInvitation';
+import type { PublicUser } from 'app/store/models/User';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
 import MeetingDetailLoginRoute from './MeetingDetailLoginRoute';
 import MeetingAnswer from './components/MeetingAnswer';
+import type { RouteChildrenProps } from 'react-router';
+
+type Params = {
+  meetingId: string;
+};
 
 const loadMeeting = (
   {
@@ -31,7 +39,10 @@ const loadMeeting = (
     ? Promise.all([dispatch(fetchMeeting(meetingId), dispatch(fetchEmojis()))])
     : Promise.resolve();
 
-const loadData = (props, dispatch): any => {
+const loadData = (
+  props: RouteChildrenProps<Params> & UserContextType,
+  dispatch
+): any => {
   const search = qs.parse(props.location.search, {
     ignoreQueryPrefix: true,
   });
@@ -85,24 +96,21 @@ const mapStateToProps = (state, props) => {
 type Props = {
   loggedIn: boolean;
   meetingsToken: {
-    status: number;
-    user: User;
-    response: string;
-    meeting: number;
-    reactionsGrouped: ReactionsGrouped[];
+    user: PublicUser;
+    response: MeetingsTokenResponse;
+    meeting: ID;
+    status: MeetingInvitationStatus;
   };
-  router: any;
   resetMeetingsToken: () => void;
 };
 
 const MeetingComponent = (props: Props) => {
-  const { loggedIn, meetingsToken, router, resetMeetingsToken } = props;
+  const { loggedIn, meetingsToken, resetMeetingsToken } = props;
 
   if (!loggedIn && meetingsToken.meeting) {
     return (
       <MeetingAnswer
         {...meetingsToken}
-        router={router}
         resetMeetingsToken={resetMeetingsToken}
       />
     );

app/routes/meetings/MeetingEditRoute.ts

@@ -11,6 +11,7 @@ import { LoginPage } from 'app/components/LoginForm';
 import { selectMeetingInvitationsForMeeting } from 'app/reducers/meetingInvitations';
 import { selectMeetingById } from 'app/reducers/meetings';
 import { selectUserById } from 'app/reducers/users';
+import type { UserContextType } from 'app/routes/app/AppRoute';
 import type { RootState } from 'app/store/createRootReducer';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
@@ -23,7 +24,7 @@ type Params = {
 
 const mapStateToProps = (
   state: RootState,
-  props: RouteChildrenProps<Params>
+  props: RouteChildrenProps<Params> & UserContextType
 ) => {
   const { meetingId } = props.match.params;
   const meeting = selectMeetingById(state, {
@@ -70,8 +71,10 @@ const mapDispatchToProps = {
 };
 export default compose(
   replaceUnlessLoggedIn(LoginPage),
-  withPreparedDispatch('fetchMeetingEdit', (props, dispatch) =>
-    dispatch(fetchMeeting(props.match.params.meetingId))
+  withPreparedDispatch(
+    'fetchMeetingEdit',
+    (props: RouteChildrenProps<Params>, dispatch) =>
+      dispatch(fetchMeeting(props.match.params.meetingId))
   ),
   connect(mapStateToProps, mapDispatchToProps)
 )(MeetingEditor);

app/routes/meetings/MeetingListRoute.ts

@@ -4,10 +4,10 @@ import { compose } from 'redux';
 import { fetchAll } from 'app/actions/MeetingActions';
 import { LoginPage } from 'app/components/LoginForm';
 import { selectGroupedMeetings } from 'app/reducers/meetings';
+import { selectPagination } from 'app/reducers/selectors';
 import createQueryString from 'app/utils/createQueryString';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
-import { selectPagination } from '../../reducers/selectors';
 import MeetingList from './components/MeetingList';
 
 const mapStateToProps = (state, props) => {