Merge pull request #331 from labzero/jeffrey/actions

Silence Redux warnings by not storing functions in the state

src/actions/index.ts

@@ -0,0 +1,22 @@
+import { ThunkAction } from "@reduxjs/toolkit";
+import { Action, State } from "../interfaces";
+import { removeRestaurant } from "./restaurants";
+import { removeTag } from "./tags";
+import { changeUserRole, removeUser } from "./users";
+
+const generateConfirmableActions = <
+  T extends {
+    [K in keyof T]: (
+      ...args: Parameters<T[K]>
+    ) => ThunkAction<Promise<Action>, State, unknown, Action>;
+  }
+>(
+  actions: T
+) => actions;
+
+export const confirmableActions = generateConfirmableActions({
+  changeUserRole,
+  removeRestaurant,
+  removeTag,
+  removeUser,
+});

src/actions/modals.ts

@@ -1,11 +1,15 @@
+import { confirmableActions } from ".";
 import { Action, ConfirmOpts, PastDecisionsOpts } from "../interfaces";
 
 export function showModal(name: string): Action;
 export function showModal(
   name: "pastDecisions",
   opts?: PastDecisionsOpts
 ): Action;
-export function showModal(name: "confirm", opts?: ConfirmOpts): Action;
+export function showModal(
+  name: "confirm",
+  opts?: ConfirmOpts<keyof typeof confirmableActions>
+): Action;
 
 export function showModal(name: unknown, opts?: unknown): unknown {
   return {

src/actions/restaurants.ts

@@ -274,7 +274,7 @@ export function addRestaurant(
 
 export function removeRestaurant(
   id: number
-): ThunkAction<Promise<void>, State, unknown, Action> {
+): ThunkAction<Promise<Action>, State, unknown, Action> {
   return (dispatch) => {
     dispatch(deleteRestaurant(id));
     return fetch(`/api/restaurants/${id}`, {

src/actions/users.ts

@@ -93,7 +93,7 @@ export function userDeleted(id: number, team: Team, isSelf: boolean): Action {
 export function removeUser(
   id: number,
   team: Team
-): ThunkAction<void, State, unknown, Action> {
+): ThunkAction<Promise<Action>, State, unknown, Action> {
   return (dispatch, getState) => {
     const state = getState();
     let isSelf = false;
@@ -182,7 +182,7 @@ export function userPatched(
 export function changeUserRole(
   id: number,
   type: RoleType
-): ThunkAction<void, State, unknown, Action> {
+): ThunkAction<Promise<Action>, State, unknown, Action> {
   const payload = { id, type };
   return (dispatch, getState) => {
     const state = getState();

src/components/ConfirmModal/ConfirmModalContainer.ts

@@ -1,30 +1,36 @@
 import { connect } from "react-redux";
+import { confirmableActions } from "../../actions";
 import { hideModal } from "../../actions/modals";
 import ConfirmModal from "./ConfirmModal";
-import { Dispatch, State } from "../../interfaces";
+import {
+  ConfirmModal as ConfirmModalType,
+  Dispatch,
+  State,
+} from "../../interfaces";
 
 const modalName = "confirm";
 
-const mapStateToProps = (state: State) => ({
-  actionLabel: state.modals[modalName].actionLabel!,
-  body: state.modals[modalName].body,
-  action: state.modals[modalName].action,
-  shown: !!state.modals[modalName].shown,
-});
+const mapStateToProps = <T extends keyof typeof confirmableActions>(
+  state: State
+) => state.modals[modalName] as ConfirmModalType<T>;
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   dispatch,
   hideModal: () => dispatch(hideModal("confirm")),
 });
 
-const mergeProps = (
-  stateProps: ReturnType<typeof mapStateToProps>,
+const mergeProps = <T extends keyof typeof confirmableActions>(
+  stateProps: ConfirmModalType<T>,
   dispatchProps: ReturnType<typeof mapDispatchToProps>
 ) => ({
   ...stateProps,
   ...dispatchProps,
   handleSubmit: () => {
-    dispatchProps.dispatch(stateProps.action!);
+    dispatchProps.dispatch(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      confirmableActions[stateProps.action](...stateProps.actionArgs)
+    );
     dispatchProps.hideModal();
   },
 });

src/components/PastDecisionsModal/PastDecisionsModalContainer.ts

@@ -1,7 +1,11 @@
 import { connect } from "react-redux";
 import { decide } from "../../actions/decisions";
 import { hideModal } from "../../actions/modals";
-import { Dispatch, State } from "../../interfaces";
+import {
+  Dispatch,
+  State,
+  PastDecisionsModal as PastDecisionsModalType,
+} from "../../interfaces";
 import { getDecisionsByDay } from "../../selectors/decisions";
 import { getRestaurantEntities } from "../../selectors/restaurants";
 import PastDecisionsModal from "./PastDecisionsModal";
@@ -10,7 +14,8 @@ const modalName = "pastDecisions";
 
 const mapStateToProps = (state: State) => ({
   decisionsByDay: getDecisionsByDay(state),
-  restaurantId: state.modals[modalName].restaurantId,
+  restaurantId: (state.modals[modalName] as PastDecisionsModalType)
+    .restaurantId,
   restaurantEntities: getRestaurantEntities(state),
   shown: !!state.modals[modalName].shown,
 });

src/components/RestaurantDropdown/RestaurantDropdownContainer.ts

@@ -56,7 +56,8 @@ const mergeProps = (
       showModal("confirm", {
         actionLabel: "Delete",
         body: `Are you sure you want to delete ${stateProps.restaurant.name}?`,
-        action: removeRestaurant(ownProps.id),
+        action: "removeRestaurant",
+        actionArgs: [ownProps.id],
       })
     ),
   showEditNameForm: () => {

src/components/TagManagerItem/TagManagerItemContainer.ts

@@ -1,8 +1,7 @@
 import { connect } from "react-redux";
 import { getTagById } from "../../selectors/tags";
 import { showModal } from "../../actions/modals";
-import { removeTag } from "../../actions/tags";
-import { Dispatch, State } from "../../interfaces";
+import { ConfirmOpts, Dispatch, State } from "../../interfaces";
 import TagManagerItem from "./TagManagerItem";
 
 interface OwnProps {
@@ -28,11 +27,12 @@ const mergeProps = (
   handleDeleteClicked() {
     dispatchProps.dispatch(
       showModal("confirm", {
+        action: "removeTag",
+        actionArgs: [ownProps.id],
         actionLabel: "Delete",
         body: `Are you sure you want to delete the “${stateProps.tag.name}” tag?
         All restaurants will be untagged.`,
-        action: removeTag(ownProps.id),
-      })
+      } as ConfirmOpts<"removeTag">)
     );
   },
 });

src/interfaces.ts

@@ -1,10 +1,11 @@
 import { Application, RequestHandler } from "express";
-import { EnhancedStore, ThunkAction, ThunkDispatch } from "@reduxjs/toolkit";
+import { EnhancedStore, ThunkDispatch } from "@reduxjs/toolkit";
 import { BrowserHistory } from "history";
 import { InsertCSS } from "isomorphic-style-loader/StyleContext";
 import { ReactNode } from "react";
 import { ResolveContext } from "universal-router";
 import { WebSocket } from "ws";
+import { confirmableActions } from "./actions";
 import {
   Decision as DecisionModel,
   Restaurant as RestaurantModel,
@@ -387,7 +388,7 @@ export type Action =
   | {
       type: "SHOW_MODAL";
       name: "confirm";
-      opts: ConfirmOpts;
+      opts: ConfirmOpts<keyof typeof confirmableActions>;
     }
   | {
       type: "SHOW_MODAL";
@@ -451,12 +452,25 @@ export interface Notification {
     );
 }
 
-export type ConfirmOpts = {
+export type ConfirmOpts<T extends keyof typeof confirmableActions> = {
   actionLabel: string;
   body: string;
-  action: Action | ThunkAction<void, State, unknown, Action>;
+  action: T;
+  actionArgs: Parameters<(typeof confirmableActions)[T]>;
 };
 
+export type BaseModal = {
+  shown: boolean;
+};
+
+export type ConfirmModal<T extends keyof typeof confirmableActions> =
+  BaseModal & ConfirmOpts<T>;
+export type PastDecisionsModal = BaseModal & PastDecisionsOpts;
+export type Modal =
+  | BaseModal
+  | ConfirmModal<keyof typeof confirmableActions>
+  | PastDecisionsModal;
+
 export interface ListUiItem {
   isEditingName?: boolean;
   editNameFormValue?: string;
@@ -489,15 +503,7 @@ interface BaseState {
   host: string;
   notifications: Notification[];
   modals: {
-    [index: string]: {
-      action?:
-        | Action
-        | ThunkAction<Promise<void> | void, State, unknown, Action>;
-      actionLabel?: string;
-      body?: ReactNode;
-      restaurantId?: number;
-      shown: boolean;
-    };
+    [index: string]: Modal;
   };
   listUi: {
     [index: number]: ListUiItem;

src/routes/main/teams/Teams.tsx

@@ -5,29 +5,30 @@ import ListGroup from "react-bootstrap/ListGroup";
 import { FaTimes } from "react-icons/fa";
 import Container from "react-bootstrap/Container";
 import Link from "../../../components/Link/Link";
-import { ConfirmOpts, Team } from "../../../interfaces";
+import { ConfirmOpts, Team, User } from "../../../interfaces";
 import s from "./Teams.scss";
 
 interface TeamsProps {
-  confirm: (props: ConfirmOpts) => void;
+  confirm: (props: ConfirmOpts<"removeUser">) => void;
   host: string;
-  leaveTeam: (team: Team) => () => void;
   teams: Team[];
+  user: User;
 }
 
 class Teams extends Component<TeamsProps> {
-  confirmLeave = (team: Team) => (event: MouseEvent) => {
+  confirmLeave = (user: User, team: Team) => (event: MouseEvent) => {
     event.preventDefault();
     this.props.confirm({
       actionLabel: "Leave",
       body: `Are you sure you want to leave this team?
 You will need to be invited back by another member.`,
-      action: this.props.leaveTeam(team),
+      action: "removeUser",
+      actionArgs: [user.id, team],
     });
   };
 
   render() {
-    const { host, teams } = this.props;
+    const { host, teams, user } = this.props;
 
     return (
       <div className={s.root}>
@@ -46,7 +47,7 @@ You will need to be invited back by another member.`,
                     <div className={s.itemName}>{team.name}</div>
                     <button
                       className={s.leave}
-                      onClick={this.confirmLeave(team)}
+                      onClick={this.confirmLeave(user, team)}
                       aria-label="Leave"
                       type="button"
                     >

src/routes/main/teams/TeamsContainer.ts

@@ -1,7 +1,6 @@
 import { connect } from "react-redux";
 import { showModal } from "../../../actions/modals";
-import { removeUser } from "../../../actions/users";
-import { ConfirmOpts, Dispatch, State, Team } from "../../../interfaces";
+import { ConfirmOpts, Dispatch, State } from "../../../interfaces";
 import { getCurrentUser } from "../../../selectors/user";
 import { getTeams } from "../../../selectors/teams";
 import Teams from "./Teams";
@@ -13,17 +12,9 @@ const mapStateToProps = (state: State) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  confirm: (opts: ConfirmOpts) => dispatch(showModal("confirm", opts)),
+  confirm: (opts: ConfirmOpts<"removeUser">) =>
+    dispatch(showModal("confirm", opts)),
   dispatch,
 });
 
-const mergeProps = (
-  stateProps: ReturnType<typeof mapStateToProps>,
-  dispatchProps: ReturnType<typeof mapDispatchToProps>
-) => ({
-  ...stateProps,
-  ...dispatchProps,
-  leaveTeam: (team: Team) => removeUser(stateProps.user!.id, team),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Teams);
+export default connect(mapStateToProps, mapDispatchToProps)(Teams);

src/routes/team/team/Team.tsx

@@ -28,13 +28,14 @@ import {
   Team as TeamType,
   ConfirmOpts,
   Action,
+  RoleType,
 } from "../../../interfaces";
 import s from "./Team.scss";
 
 interface TeamProps {
   changeTeamURLShown: boolean;
   changeUserRole: (userId: number, role: string) => Action;
-  confirm: (options: ConfirmOpts) => void;
+  confirm: (options: ConfirmOpts<"changeUserRole">) => void;
   confirmChangeTeamURL: () => void;
   confirmDeleteTeam: () => void;
   currentUser: User;
@@ -59,9 +60,7 @@ class Team extends React.Component<TeamProps> {
     (user: User) => (event: ChangeEvent<HTMLSelectElement>) => {
       const { currentUser, team } = this.props;
 
-      const newRole = event.target.value;
-
-      const changeRole = this.props.changeUserRole(user.id, newRole);
+      const newRole = event.target.value as RoleType;
 
       if (
         event.target.value === "member" &&
@@ -70,15 +69,18 @@ class Team extends React.Component<TeamProps> {
         this.props.confirm({
           actionLabel: "Promote",
           body: "Are you sure you want to promote this user to Member status? You will not be able to demote them later.",
-          action: changeRole,
+          action: "changeUserRole",
+          actionArgs: [user.id, newRole],
         });
       } else if (currentUser.id === user.id && !currentUser.superuser) {
         this.props.confirm({
           actionLabel: "Demote",
           body: "Are you sure you want to demote yourself? You will not be able to undo this by yourself.",
-          action: changeRole,
+          action: "changeUserRole",
+          actionArgs: [user.id, newRole],
         });
       } else {
+        const changeRole = this.props.changeUserRole(user.id, newRole);
         this.props.dispatch(changeRole);
       }
     };

src/routes/team/team/TeamContainer.ts

@@ -26,7 +26,8 @@ const mapStateToProps = (state: State) => ({
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   changeUserRole,
-  confirm: (opts: ConfirmOpts) => dispatch(showModal("confirm", opts)),
+  confirm: (opts: ConfirmOpts<"changeUserRole">) =>
+    dispatch(showModal("confirm", opts)),
   confirmChangeTeamURL: () => dispatch(showModal("changeTeamURL")),
   confirmDeleteTeam: () => dispatch(showModal("deleteTeam")),
   dispatch,