Merge branch 'develop' into production

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged && CI=1 yarn test

config-overrides.js

@@ -0,0 +1,20 @@
+const webpack = require("webpack");
+
+module.exports = function override(config) {
+  config.resolve.fallback = {
+    util: require.resolve("util"),
+    process: require.resolve("process/browser"),
+    assert: require.resolve("assert"),
+    buffer: require.resolve("buffer"),
+    stream: require.resolve("stream-browserify"),
+  };
+
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    })
+  );
+
+  return config;
+};

package.json

@@ -12,34 +12,42 @@
   "homepage": "https://grouptabs.net/",
   "dependencies": {
     "@seznam/compose-react-refs": "^1.0.6",
-    "@types/jest": "^26.0.24",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^27.4.1",
     "@types/node": "^14.17.32",
     "@types/pouchdb": "^6.4.0",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-redux": "^7.1.20",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
+    "@types/react-test-renderer": "^18.0.0",
     "@types/redux-first-router": "^2.1.7",
     "@types/uuid": "^8.3.1",
+    "assert": "^2.0.0",
+    "buffer": "^6.0.3",
     "debug": "^4.3.2",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
     "lodash.orderby": "^4.6.0",
     "lodash.throttle": "^4.1.1",
     "pouchdb-adapter-memory": "^7.2.2",
     "pouchdb-browser": "^7.2.2",
     "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.6",
-    "react-scripts": "4.0.3",
-    "react-test-renderer": "^17.0.2",
-    "redux": "^4.1.2",
+    "process": "^0.11.10",
+    "react": "^18.0.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^18.0.0",
+    "react-redux": "^8.0.0",
+    "react-scripts": "5.0.1",
+    "react-test-renderer": "^18.0.0",
+    "redux": "^4.2.0",
     "redux-first-router": "^2.1.5",
     "redux-thunk": "^2.4.0",
     "reselect": "^4.1.2",
     "smooth-scroll": "^16.1.3",
+    "stream-browserify": "^3.0.0",
     "typescript": "^4.4.4",
+    "util": "^0.12.4",
     "uuid": "^8.3.2",
     "workbox-background-sync": "^5.1.4",
     "workbox-broadcast-update": "^5.1.4",
@@ -55,10 +63,11 @@
     "workbox-streams": "^5.1.4"
   },
   "scripts": {
-    "start": "REACT_APP_GT_VERSION=`git describe HEAD` react-scripts start",
-    "build": "REACT_APP_GT_VERSION=`git describe HEAD` react-scripts build",
+    "postinstall": "husky install",
+    "start": "REACT_APP_GT_VERSION=${REACT_APP_GT_VERSION:-`git describe HEAD`} react-app-rewired start",
+    "build": "REACT_APP_GT_VERSION=${REACT_APP_GT_VERSION:-`git describe HEAD`} react-app-rewired build",
     "pretest": "tsc",
-    "test": "LC_ALL=en_US react-scripts test",
+    "test": "LC_ALL=en_US react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -81,11 +90,6 @@
     ]
   },
   "license": "GPL-3.0",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && CI=1 npm test"
-    }
-  },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"

release-notes.yml

@@ -3,6 +3,13 @@ description: >
   Track expenses in a group of people!
 
 releases:
+  - version: 1.5.2
+    date: 2022-06-06
+    description: Bug fixes and updates
+    fixed:
+      - Fixed memory leak by updating PouchDB
+    changed:
+      - Update libraries, in particular Create React App to version 5 and React to version 18
   - version: 1.5.1
     date: 2022-04-04
     description: Small improvements and updates

src/components/__snapshots__/main.test.tsx.snap

@@ -20,9 +20,7 @@ exports[`renders empty view with no tab selected 1`] = `
         />
       </svg>
     </button>
-    <h2>
-      
-    </h2>
+    <h2 />
     <button
       className="create"
       onClick={[Function]}
@@ -83,9 +81,7 @@ exports[`renders missing tab info error 1`] = `
         />
       </svg>
     </button>
-    <h2>
-      
-    </h2>
+    <h2 />
     <button
       className="create"
       onClick={[Function]}

src/components/__snapshots__/tabs.test.tsx.snap

@@ -64,7 +64,7 @@ exports[`renders empty tab view 1`] = `
     </main>
     <footer>
       Version: 
-      VERSION
+      N/A
        –
        
       <a
@@ -143,7 +143,7 @@ exports[`renders tab view 1`] = `
     </main>
     <footer>
       Version: 
-      VERSION
+      N/A
        –
        
       <a

src/components/app.test.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { render, screen } from "@testing-library/react";
 import App from "./app";
-import { act } from "react-dom/test-utils";
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
+it("renders Grouptabs heading", () => {
   const props: any = {
     location: {
       type: "",
@@ -35,8 +33,6 @@ it("renders without crashing", () => {
     onAddParticipant: jest.fn(),
     onSetAllJoined: jest.fn(),
   };
-  act(() => {
-    ReactDOM.render(<App {...props} />, div);
-  });
-  ReactDOM.unmountComponentAtNode(div);
+  render(<App {...props} />);
+  expect(screen.getAllByText("Grouptabs")[0]).toBeInTheDocument();
 });

src/components/app.tsx

@@ -94,70 +94,66 @@ export default class App extends Component<Props> {
     }
 
     return (
-      <React.StrictMode>
-        <div className="scenes">
-          <div
-            className={`scenes-container scenes-container-active-${getSceneIndex(
-              this.props.location.type
-            )}`}
-          >
-            <Tabs
-              data={this.props.tabs}
-              visible={this.props.currentLocation === ROUTE_TABS}
-              checkingRemoteTab={this.props.checkingRemoteTab}
-              remoteTabError={this.props.remoteTabError}
-              createTabInputValue={this.props.createTabInputValue}
-              importTabInputValue={this.props.importTabInputValue}
-              onTabClick={this.props.onSelectTab}
-              onCreateTabInputChange={this.props.onCreateTabInputChange}
-              onCreateNewTab={this.props.onCreateTab}
-              onImportTabInputChange={this.props.onImportTabInputChange}
-              onImportTab={this.props.onImportTab}
-            />
-            <Main
-              tabInfo={this.props.tabInfo}
-              tabId={this.props.location.payload.tabId}
-              accounts={this.props.accounts}
-              transactions={this.props.transactions}
-              total={this.props.total}
-              visible={this.props.currentLocation === ROUTE_TAB}
-              checkingRemoteTab={this.props.checkingRemoteTab}
-              remoteTabError={this.props.remoteTabError}
-              importingTab={this.props.importingTab}
-              onChangeTabClick={this.props.onNavigateToTabs}
-              onNavigateToAddTransaction={this.props.onNavigateToAddTransaction}
-              onDetailsClick={this.props.onNavigateToUpdateTransaction}
-            />
-            <div className="scene editEntryScene">
-              {this.getShowEditEntry() && (
-                <EditEntry
-                  visible={
-                    this.props.currentLocation === ROUTE_TRANSACTION ||
-                    this.props.currentLocation === ROUTE_NEW_TRANSACTION
-                  }
-                  mode={this.getEditEntryMode()}
-                  formState={this.props.transactionFormState}
-                  checkingRemoteTab={this.props.checkingRemoteTab}
-                  remoteTabError={this.props.remoteTabError}
-                  importingTab={this.props.importingTab}
-                  onChangeTabClick={this.props.onNavigateToTabs}
-                  onCloseClick={this.props.onCloseTransaction}
-                  onSave={this.props.onAddOrUpdateTransaction}
-                  onDelete={this.props.onRemoveTransaction}
-                  onUpdateForm={this.props.onUpdateTransactionForm}
-                  onUpdateSharedForm={this.props.onUpdateTransactionSharedForm}
-                  onUpdateDirectForm={this.props.onUpdateTransactionDirectForm}
-                  onUpdateParticipant={
-                    this.props.onUpdateTransactionParticipant
-                  }
-                  onAddParticipant={this.props.onAddParticipant}
-                  onSetAllJoined={this.props.onSetAllJoined}
-                />
-              )}
-            </div>
+      <div className="scenes">
+        <div
+          className={`scenes-container scenes-container-active-${getSceneIndex(
+            this.props.location.type
+          )}`}
+        >
+          <Tabs
+            data={this.props.tabs}
+            visible={this.props.currentLocation === ROUTE_TABS}
+            checkingRemoteTab={this.props.checkingRemoteTab}
+            remoteTabError={this.props.remoteTabError}
+            createTabInputValue={this.props.createTabInputValue}
+            importTabInputValue={this.props.importTabInputValue}
+            onTabClick={this.props.onSelectTab}
+            onCreateTabInputChange={this.props.onCreateTabInputChange}
+            onCreateNewTab={this.props.onCreateTab}
+            onImportTabInputChange={this.props.onImportTabInputChange}
+            onImportTab={this.props.onImportTab}
+          />
+          <Main
+            tabInfo={this.props.tabInfo}
+            tabId={this.props.location.payload.tabId}
+            accounts={this.props.accounts}
+            transactions={this.props.transactions}
+            total={this.props.total}
+            visible={this.props.currentLocation === ROUTE_TAB}
+            checkingRemoteTab={this.props.checkingRemoteTab}
+            remoteTabError={this.props.remoteTabError}
+            importingTab={this.props.importingTab}
+            onChangeTabClick={this.props.onNavigateToTabs}
+            onNavigateToAddTransaction={this.props.onNavigateToAddTransaction}
+            onDetailsClick={this.props.onNavigateToUpdateTransaction}
+          />
+          <div className="scene editEntryScene">
+            {this.getShowEditEntry() && (
+              <EditEntry
+                visible={
+                  this.props.currentLocation === ROUTE_TRANSACTION ||
+                  this.props.currentLocation === ROUTE_NEW_TRANSACTION
+                }
+                mode={this.getEditEntryMode()}
+                formState={this.props.transactionFormState}
+                checkingRemoteTab={this.props.checkingRemoteTab}
+                remoteTabError={this.props.remoteTabError}
+                importingTab={this.props.importingTab}
+                onChangeTabClick={this.props.onNavigateToTabs}
+                onCloseClick={this.props.onCloseTransaction}
+                onSave={this.props.onAddOrUpdateTransaction}
+                onDelete={this.props.onRemoveTransaction}
+                onUpdateForm={this.props.onUpdateTransactionForm}
+                onUpdateSharedForm={this.props.onUpdateTransactionSharedForm}
+                onUpdateDirectForm={this.props.onUpdateTransactionDirectForm}
+                onUpdateParticipant={this.props.onUpdateTransactionParticipant}
+                onAddParticipant={this.props.onAddParticipant}
+                onSetAllJoined={this.props.onSetAllJoined}
+              />
+            )}
           </div>
         </div>
-      </React.StrictMode>
+      </div>
     );
   }
 }

src/components/editentry.tsx

@@ -1,4 +1,4 @@
-import React, { ReactFragment, FunctionComponent, memo } from "react";
+import React, { ReactElement, FunctionComponent, memo } from "react";
 import Loader from "./loader";
 import Form from "./form";
 import LoadError from "./loaderror";
@@ -28,7 +28,7 @@ interface Props {
 const EditEntry: FunctionComponent<Props> = (props) => {
   const [isScrolled, scrollContainerRef] = useScrollIndicator();
 
-  const renderHeader = (showSaveButton: boolean): ReactFragment => (
+  const renderHeader = (showSaveButton: boolean): ReactElement => (
     <div className={`header${isScrolled ? " elevated" : ""}`}>
       <button className="left" onClick={props.onCloseClick}>
         <svg height="16" width="16">

src/components/form.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
+import { render, screen } from "@testing-library/react";
 import Form from "./form";
 import {
   TransactionType,
@@ -8,7 +9,6 @@ import {
   TransactionFormParticipantInputType as InputType,
 } from "../types";
 import { createFormData } from "../util/transactionform";
-import { unmountComponentAtNode, render } from "react-dom";
 
 let realDate: any;
 
@@ -102,18 +102,6 @@ it("renders prefilled form", () => {
 });
 
 describe('"all joined" button', () => {
-  let container: any = null;
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    unmountComponentAtNode(container);
-    container.remove();
-    container = null;
-  });
-
   it("shows button for 2 unjoined participants", () => {
     render(
       <Form
@@ -145,11 +133,10 @@ describe('"all joined" button', () => {
         onSetAllJoined={jest.fn()}
         onSave={jest.fn()}
         onDelete={jest.fn()}
-      />,
-      container
+      />
     );
 
-    expect(container.querySelector(".all-joined")).toBeTruthy();
+    expect(screen.getByText("all joined")).toBeInTheDocument();
   });
 
   it("shows no button for 2 joined and 1 unjoined participant", () => {
@@ -188,10 +175,9 @@ describe('"all joined" button', () => {
         onSetAllJoined={jest.fn()}
         onSave={jest.fn()}
         onDelete={jest.fn()}
-      />,
-      container
+      />
     );
 
-    expect(container.querySelector(".all-joined")).toBeNull();
+    expect(screen.queryByText("all joined")).not.toBeInTheDocument();
   });
 });