Merge pull request #332 from labzero/develop

Merge to master

.eslintrc.js

@@ -100,6 +100,10 @@ module.exports = {
     "import/no-relative-packages": "off",
     "import/no-import-module-exports": "off",
     "no-use-before-define": "off",
+    "no-param-reassign": [
+      "error",
+      { props: true, ignorePropertyModificationsFor: ["draftState"] },
+    ],
     "@typescript-eslint/no-use-before-define": ["error"],
   },
 

package.json

@@ -28,20 +28,16 @@
     "cors": "^2.8.3",
     "dayjs": "^1.11.7",
     "dotenv": "^2.0.0",
-    "eventemitter3": "^1.2.0",
     "express": "^4.17.3",
     "express-body-parser-error-handler": "^1.0.4",
     "express-jwt": "^8.4.1",
     "express-session": "^1.17.3",
     "express-sslify": "^1.2.0",
     "express-ws": "^5.0.2",
-    "fastclick": "^1.0.6",
-    "fbjs": "^3.0.4",
     "fetch-mock": "^9.11.0",
     "flip-toolkit": "^7.1.0",
     "google-map-react": "^2.2.0",
     "history": "^5.3.0",
-    "immutability-helper": "^3.1.1",
     "isomorphic-style-loader": "^5.3.2",
     "jsonwebtoken": "^9.0.0",
     "lodash.get": "^4.4.2",
@@ -55,15 +51,13 @@
     "pg": "^8.9.0",
     "pretty-error": "^3.0.4",
     "prop-types": "^15.8.1",
-    "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-autosuggest": "^10.0.2",
     "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-flip-toolkit": "^7.0.17",
     "react-geosuggest": "^2.14.1",
     "react-icons": "^4.7.1",
-    "react-intl": "^6.4.2",
     "react-redux": "^8.0.5",
     "react-scroll": "^1.8.9",
     "react-transition-group": "^4.4.5",
@@ -78,9 +72,7 @@
     "sequelize-typescript": "^2.1.5",
     "serialize-javascript": "^6.0.1",
     "source-map-support": "^0.5.21",
-    "sqlite3": "^5.1.5",
-    "universal-router": "^8.1.0",
-    "uuid": "^9.0.0"
+    "universal-router": "^8.1.0"
   },
   "devDependencies": {
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
@@ -99,7 +91,6 @@
     "@types/express-session": "^1.17.6",
     "@types/express-sslify": "^1.2.2",
     "@types/express-ws": "^3.0.1",
-    "@types/fbjs": "^3.0.4",
     "@types/google-map-react": "^2.1.7",
     "@types/google.analytics": "^0.0.42",
     "@types/google.maps": "^3.52.1",
@@ -119,23 +110,18 @@
     "@types/serialize-javascript": "^5.0.2",
     "@types/sinon": "^10.0.15",
     "@types/supertest": "^2.0.12",
-    "@types/uuid": "^9.0.0",
     "@types/validator": "^13.7.17",
     "@types/webpack-env": "^1.18.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
-    "assets-webpack-plugin": "^7.1.1",
     "autoprefixer": "^9.1.5",
     "browser-sync": "2.29.1",
     "chai": "4.3.7",
     "chai-jsdom": "^0.2.3",
     "chokidar": "^3.5.3",
     "cross-env": "^5.0.1",
     "css-loader": "^6.7.3",
-    "custom-event-polyfill": "^0.3.0",
     "cypress": "^12.5.1",
-    "del": "^2.2.2",
-    "es6-promise": "^4.1.0",
     "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
@@ -148,13 +134,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
-    "git-repository": "^0.1.4",
     "glob": "^7.1.3",
     "global-jsdom": "^9.0.1",
     "husky": "^8.0.3",
-    "identity-obj-proxy": "^3.0.0",
     "jsdom": "^22.0.0",
-    "json-loader": "^0.5.7",
     "lint-staged": "^13.2.2",
     "mkdirp": "^2.1.3",
     "mocha": "^10.2.0",
@@ -170,13 +153,11 @@
     "react-dev-utils": "^12.0.1",
     "react-error-overlay": "^4.0.1",
     "react-refresh": "^0.14.0",
-    "react-test-renderer": "^18.2.0",
     "rimraf": "^2.6.2",
     "sass": "^1.58.0",
     "sass-loader": "^13.2.0",
     "sequelize-mock": "^0.7.0",
     "sinon": "^15.1.0",
-    "style-loader": "^0.13.2",
     "stylelint": "^15.6.2",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",

src/actions/flash.ts

@@ -1,19 +1,22 @@
-import { v1 } from "uuid";
+import nodeCrypto from "crypto";
 import { Action } from "../interfaces";
+import canUseDOM from "../helpers/canUseDOM";
+
+const crypto = canUseDOM ? window.crypto : nodeCrypto;
 
 export function flashError(message: string): Action {
   return {
     type: "FLASH_ERROR",
     message,
-    id: v1(),
+    id: crypto.randomUUID(),
   };
 }
 
 export function flashSuccess(message: string): Action {
   return {
     type: "FLASH_SUCCESS",
     message,
-    id: v1(),
+    id: crypto.randomUUID(),
   };
 }
 

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

@@ -1,6 +1,6 @@
 import { ThunkAction } from "@reduxjs/toolkit";
-import { canUseDOM } from "fbjs/lib/ExecutionEnvironment";
 import { credentials, jsonHeaders, processResponse } from "../core/ApiClient";
+import canUseDOM from "../helpers/canUseDOM";
 import { Action, RoleType, State, Team, User } from "../interfaces";
 import { getCurrentUser } from "../selectors/user";
 
@@ -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/api/tests/decisions.test.ts

@@ -4,8 +4,7 @@
 import { expect } from "chai";
 import { SinonSpy, match, spy, stub } from "sinon";
 import bodyParser from "body-parser";
-import { Response } from "superagent";
-import request from "supertest";
+import request, { Response } from "supertest";
 import express, { Application, RequestHandler } from "express";
 import proxyquire from "proxyquire";
 import SequelizeMock from "sequelize-mock";

src/api/tests/user.test.ts

@@ -4,8 +4,7 @@
 import { expect } from "chai";
 import { SinonSpy, spy, stub } from "sinon";
 import bodyParser from "body-parser";
-import { Response } from "superagent";
-import request from "supertest";
+import request, { Response } from "supertest";
 import express, { Application } from "express";
 import proxyquire from "proxyquire";
 import SequelizeMock from "sequelize-mock";

src/api/tests/users.test.ts

@@ -4,8 +4,7 @@
 import { expect } from "chai";
 import { SinonSpy, SinonStub, match, spy, stub } from "sinon";
 import bodyParser from "body-parser";
-import { Response } from "superagent";
-import request from "supertest";
+import request, { Response } from "supertest";
 import express, { Application, RequestHandler } from "express";
 import proxyquire from "proxyquire";
 import SequelizeMock from "sequelize-mock";

src/client.tsx

@@ -7,10 +7,8 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import es6Promise from "es6-promise";
 import React, { useEffect } from "react";
 import { createRoot, hydrateRoot } from "react-dom/client";
-import qs from "qs";
 import { Action, createPath, Location } from "history";
 import App from "./components/App";
 import configureStore from "./store/configureStore";
@@ -19,8 +17,6 @@ import { updateMeta } from "./DOMUtils";
 import routerCreator from "./router";
 import { AppContext, App as AppType } from "./interfaces";
 
-es6Promise.polyfill();
-
 let subdomain: string | undefined;
 
 interface WindowWithApp extends Window {
@@ -41,6 +37,11 @@ if (teamSlug && host.indexOf(teamSlug) === 0) {
 }
 window.App.state.host = host;
 
+// Hack for Electron (Cypress)
+window.crypto.randomUUID =
+  window.crypto.randomUUID ||
+  (() => Math.round(Math.random() * 10 ** 16).toString());
+
 if (!subdomain) {
   // escape domain periods to not appear as regex wildcards
   const subdomainMatch = window.location.host.match(
@@ -114,7 +115,7 @@ const onLocationChange = async ({
   const isInitialRender = !action;
   try {
     context.pathname = location.pathname;
-    context.query = qs.parse(location.search, { ignoreQueryPrefix: true });
+    context.query = new URLSearchParams(location.search);
 
     // Traverses the list of routes in the order they are defined until
     // it finds the first route that matches provided URL path string

src/components/AddUserForm/AddUserForm.test.tsx

@@ -4,37 +4,18 @@
 /* eslint-disable no-unused-expressions */
 import React from "react";
 import { expect } from "chai";
-import proxyquire from "proxyquire";
-import PropTypes from "prop-types";
 import { render, screen, within } from "../../../test/test-utils";
-import { AddUserFormProps } from "./AddUserForm";
-
-const proxyquireStrict = proxyquire.noCallThru();
-
-const AddUserForm = proxyquireStrict("./AddUserForm", {
-  "react-intl": {
-    intlShape: {
-      isRequired: PropTypes.shape({}).isRequired,
-    },
-  },
-}).default;
-
-interface MockAddUserFormProps extends Omit<AddUserFormProps, "intl"> {
-  intl: unknown;
-}
+import AddUserForm, { AddUserFormProps } from "./AddUserForm";
 
 describe("AddUserForm", () => {
-  let props: MockAddUserFormProps;
+  let props: AddUserFormProps;
 
   beforeEach(() => {
     props = {
       addUserToTeam: () => undefined,
       hasGuestRole: false,
       hasMemberRole: false,
       hasOwnerRole: false,
-      intl: {
-        formatMessage: () => "",
-      },
     };
   });
 

src/components/AddUserForm/AddUserForm.tsx

@@ -3,8 +3,6 @@ import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
-import { IntlShape } from "react-intl";
-import { globalMessageDescriptor as gm } from "../../helpers/generateMessageDescriptor";
 import { RoleType } from "../../interfaces";
 
 interface AddUserFormState {
@@ -18,7 +16,6 @@ export interface AddUserFormProps {
   hasGuestRole: boolean;
   hasMemberRole: boolean;
   hasOwnerRole: boolean;
-  intl: IntlShape;
 }
 
 class AddUserForm extends Component<AddUserFormProps, AddUserFormState> {
@@ -50,12 +47,7 @@ class AddUserForm extends Component<AddUserFormProps, AddUserFormState> {
   };
 
   render() {
-    const {
-      hasGuestRole,
-      hasMemberRole,
-      hasOwnerRole,
-      intl: { formatMessage: f },
-    } = this.props;
+    const { hasGuestRole, hasMemberRole, hasOwnerRole } = this.props;
     const { email, name, type } = this.state;
 
     return (
@@ -96,15 +88,9 @@ class AddUserForm extends Component<AddUserFormProps, AddUserFormState> {
                   value={type}
                   required
                 >
-                  {hasGuestRole && (
-                    <option value="guest">{f(gm("guestRole"))}</option>
-                  )}
-                  {hasMemberRole && (
-                    <option value="member">{f(gm("memberRole"))}</option>
-                  )}
-                  {hasOwnerRole && (
-                    <option value="owner">{f(gm("ownerRole"))}</option>
-                  )}
+                  {hasGuestRole && <option value="guest">Guest</option>}
+                  {hasMemberRole && <option value="member">Member</option>}
+                  {hasOwnerRole && <option value="owner">Owner</option>}
                 </Form.Select>
               </Col>
             </Row>

src/components/AddUserForm/AddUserFormContainer.ts

@@ -1,5 +1,4 @@
 import { connect } from "react-redux";
-import { injectIntl } from "react-intl";
 import { addUser } from "../../actions/users";
 import { currentUserHasRole, isUserListReady } from "../../selectors";
 import AddUserForm from "./AddUserForm";
@@ -16,7 +15,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   addUserToTeam: (payload: Partial<User>) => dispatch(addUser(payload)),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(injectIntl(AddUserForm));
+export default connect(mapStateToProps, mapDispatchToProps)(AddUserForm);