Update all packages except electron to the latest stable major

package.json

@@ -2,11 +2,11 @@
  "name": "dive-downloader",
  "description": "Download dives from any divecomputer with an electron app",
  "productName": "dive-downloader",
- "version": "0.1.4",
+ "version": "0.1.5",
  "main": ".webpack/main",
  "scripts": {
- "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
- "lint:fix": "eslint . --cache --fix --ext .js,.jsx,.ts,.tsx",
+ "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+ "lint:fix": "eslint src --cache --fix --ext .js,.jsx,.ts,.tsx",
  "package": "electron-forge package",
  "start": "electron-forge start",
  "test": "jest",
@@ -81,65 +81,65 @@
  "@electron-forge/plugin-auto-unpack-natives": "^6.0.0-beta.65",
  "@electron-forge/plugin-webpack": "^6.0.0-beta.65",
  "@electron-forge/publisher-github": "^6.0.0-beta.65",
- "@svgr/webpack": "^6.3.1",
- "@testing-library/jest-dom": "^5.16.4",
- "@testing-library/react": "^13.2.0",
+ "@svgr/webpack": "^8.1.0",
+ "@testing-library/jest-dom": "^6.0.0",
+ "@testing-library/react": "^14.0.0",
  "@types/history": "5.0.0",
- "@types/jest": "^27.5.1",
- "@types/node": "17.0.33",
+ "@types/jest": "^29.5.3",
+ "@types/node": "20.5.0",
  "@types/react": "^18.0.9",
  "@types/react-dom": "^18.0.4",
  "@types/react-redux": "^7.1.24",
  "@types/redux-saga": "^0.10.5",
  "@types/styled-components": "^5.1.25",
- "@typescript-eslint/eslint-plugin": "^5.31.0",
- "@typescript-eslint/parser": "^5.31.0",
+ "@typescript-eslint/eslint-plugin": "^6.4.0",
+ "@typescript-eslint/parser": "^6.4.0",
  "@vercel/webpack-asset-relocator-loader": "^1.7.3",
  "css-loader": "^6.7.1",
  "electron": "^19.0.10",
  "eslint": "^8.21.0",
- "eslint-config-prettier": "^8.5.0",
+ "eslint-config-prettier": "^9.0.0",
  "eslint-plugin-compat": "^4.0.2",
- "eslint-plugin-jest": "^26.7.0",
- "eslint-plugin-prettier": "^4.2.1",
+ "eslint-plugin-jest": "^27.2.3",
+ "eslint-plugin-prettier": "^5.0.0",
  "eslint-plugin-promise": "^6.0.0",
  "eslint-plugin-react": "^7.30.1",
  "eslint-plugin-react-hooks": "^4.6.0",
  "file-loader": "^6.0.0",
- "fork-ts-checker-webpack-plugin": "^7.2.13",
+ "fork-ts-checker-webpack-plugin": "^8.0.0",
  "html-webpack-plugin": "^5.5.0",
  "husky": "^8.0.1",
  "identity-obj-proxy": "^3.0.0",
- "jest": "^28.1.3",
- "jest-environment-jsdom": "^28.1.3",
- "lint-staged": "^12.4.1",
+ "jest": "^29.6.2",
+ "jest-environment-jsdom": "^29.6.2",
+ "lint-staged": "^14.0.0",
  "node-loader": "^2.0.0",
- "node-sass": "^7.0.1",
+ "node-sass": "^9.0.0",
  "polished": "^4.2.2",
- "prettier": "^2.6.2",
- "sass-loader": "^12.6.0",
+ "prettier": "^3.0.1",
+ "sass-loader": "^13.3.2",
  "style-loader": "^3.3.1",
- "ts-jest": "^28.0.2",
+ "ts-jest": "^29.1.1",
  "ts-loader": "^9.3.0",
  "ts-node": "^10.7.0",
- "typescript": "^4.7.4",
+ "typescript": "^5.1.6",
  "url-loader": "^4.1.0"
  },
  "dependencies": {
  "@reduxjs/toolkit": "^1.8.1",
  "electron-debug": "^3.2.0",
  "electron-log": "^4.4.7",
  "electron-squirrel-startup": "^1.0.0",
- "electron-updater": "^5.0.1",
+ "electron-updater": "^6.1.1",
  "history": "^5.3.0",
  "libdivecomputerjs": "^0.6.1",
  "react": "^18.1.0",
  "react-dom": "^18.1.0",
  "react-redux": "^8.0.1",
  "react-router-dom": "^6.3.0",
  "redux-saga": "^1.1.3",
- "regenerator-runtime": "^0.13.9",
- "styled-components": "^5.3.5"
+ "regenerator-runtime": "^0.14.0",
+ "styled-components": "^6.0.7"
  },
  "devEngines": {
  "node": ">=10.x",

src/components/Button.tsx

@@ -3,30 +3,30 @@ import styled, { css } from 'styled-components';
 import style from '../styling';
 
 export interface ButtonProps {
- primary?: boolean;
- flat?: boolean;
- outline?: boolean;
- disabled?: boolean;
+ $primary?: boolean;
+ $flat?: boolean;
+ $outline?: boolean;
+ $disabled?: boolean;
 }
 
 const color = (props: ButtonProps) => {
- if (props.disabled) {
+ if (props.$disabled) {
  return style.colors.disabled;
  }
 
- if (props.primary) {
+ if (props.$primary) {
  return style.colors.primary;
  }
 
  return style.colors.font;
 };
 
 const border = (props: ButtonProps) =>
- props.outline ? `1px solid ${color(props)}` : '0';
+ props.$outline ? `1px solid ${color(props)}` : '0';
 const background = (props: ButtonProps) =>
- props.flat || props.outline ? 'transparent' : color(props);
+ props.$flat || props.$outline ? 'transparent' : color(props);
 const fontColor = (props: ButtonProps) =>
- props.flat || props.outline ? color(props) : style.colors.background;
+ props.$flat || props.$outline ? color(props) : style.colors.background;
 
 export const ButtonCSS = css<ButtonProps>`
  color: ${fontColor};

src/components/ErrorNudge.tsx

@@ -28,7 +28,7 @@ export default function ErrorNudge({
  return (
  <ErrorNudgeDiv>
  <ErrorMessage>{message}</ErrorMessage>
- <IconButton flat onClick={onClose}>
+ <IconButton $flat onClick={onClose}>
  <CloseIcon />
  </IconButton>
  </ErrorNudgeDiv>

src/components/FileInput.tsx

@@ -35,7 +35,7 @@ export default function SaveFileInput({
  <>
  <Input name={name} id={name} value={value} readOnly />
  <Button
- outline
+ $outline
  onClick={(e) => {
  e.preventDefault();
  openDialog();

src/components/IconButton.tsx

@@ -31,20 +31,20 @@ function getSpacing(size?: Size) {
 }
 
 interface IconButtonProps {
- rounded?: boolean;
- size?: Size;
+ $rounded?: boolean;
+ $size?: Size;
 }
 
-export default styled(Button)`
- ${(props: IconButtonProps) => (props.rounded ? `border-radius: 50%;` : '')}
+export default styled(Button)<IconButtonProps>`
+ ${(props) => (props.$rounded ? `border-radius: 50%;` : '')}
 
  line-height: 0;
- padding: ${(props: IconButtonProps) => getSpacing(props.size)};
+ padding: ${(props) => getSpacing(props.$size)};
 
  svg {
- ${(props: IconButtonProps) => `
- width: ${getSize(props.size)};
- height: ${getSize(props.size)};
+ ${(props) => `
+ width: ${getSize(props.$size)};
+ height: ${getSize(props.$size)};
  `}
  }
 `;

src/components/LinkButton.tsx

@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { ButtonCSS } from './Button';
+import { ButtonCSS, ButtonProps } from './Button';
 
-const style = styled(Link)`
+const style = styled(Link)<ButtonProps>`
  ${ButtonCSS}
  text-decoration: none;
 `;

src/components/divecomputer/RefreshDeviceButton.tsx

@@ -8,7 +8,7 @@ export default function RefreshDeviceButton() {
 
  return (
  <IconButton
- outline
+ $outline
  onClick={(e) => {
  e.preventDefault();
  dispatch(getAvailableTransportSources());

src/main/main.ts

@@ -9,7 +9,7 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain, dialog } from 'electron';
+import { app, BrowserWindow, shell, ipcMain, dialog, session } from 'electron';
 import MenuBuilder from './menu';
 
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
@@ -79,6 +79,15 @@ const createWindow = async () => {
  mainWindow = null;
  });
 
+ session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
+ callback({
+ responseHeaders: {
+ ...details.responseHeaders,
+ 'Content-Security-Policy': ['default-src \'self\' \'unsafe-inline\' \'unsafe-eval\' data: https://api.dive.littledev.nl http://api.littledivelog.local']
+ }
+ })
+ })
+
  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();
 

src/pages/Download.tsx

@@ -119,10 +119,10 @@ export default function Download() {
 
  {!isReading && (
  <IconButton
- rounded
- primary
- size="lg"
- disabled={
+ $rounded
+ $primary
+ $size="lg"
+ $disabled={
  isReading || !descriptor || !transportType || !transportSource
  }
  onClick={(e) => {

src/pages/Login.tsx

@@ -50,7 +50,7 @@ export default function Login() {
  </InputRow>
 
  <Button
- primary
+ $primary
  onClick={(e) => {
  e.preventDefault();
 

src/redux/auth/withAccessTokenSaga.ts

@@ -49,10 +49,8 @@ export default function* withAccessToken<
 }
 
 export function* execWithAccessToken(
- cb: (accessToken: string) => any
+ cb: (accessToken: string) => unknown
 ): SagaIterator {
- /* eslint-enable @typescript-eslint/no-explicit-any */
-
  const currentAccessToken: string = yield select(getAccessToken);
  try {
  return yield call(cb, currentAccessToken);

src/redux/divecomputer/reader/actions.ts

@@ -1,8 +1,10 @@
 import { createAction } from '@reduxjs/toolkit';
-import { DeviceInfo, Progress, ReadingState } from './types';
+import { DeviceInfo, Progress } from './types';
 
 export const setReadProgress = createAction<Progress>('reader.setProgress');
-export const setReaderState = createAction<ReadingState>('reader.setState');
+export const readerFinished = createAction('reader.finished');
+export const readerStarted = createAction('reader.started');
+export const readerErrored = createAction('reader.errored');
 export const receivedDeviceInfo = createAction<DeviceInfo>(
  'reader.receivedDeviceInfo'
 );

src/redux/divecomputer/reader/reducer.ts

@@ -1,7 +1,8 @@
 import { createReducer } from '@reduxjs/toolkit';
 import {
  setReadProgress,
- setReaderState,
+ readerStarted,
+ readerFinished,
  receivedDeviceInfo,
  setDeviceError,
  resetDeviceError,
@@ -28,8 +29,11 @@ export default createReducer<ReaderState>(intialState, (builder) =>
  .addCase(receivedDeviceInfo, (state, action) => {
  state.deviceInfo = action.payload;
  })
- .addCase(setReaderState, (state, action) => {
- state.state = action.payload;
+ .addCase(readerStarted, (state) => {
+ state.state = 'reading'
+ })
+ .addCase(readerFinished, (state) => {
+ state.state = 'none'
  })
  .addCase(setDeviceError, (state, action) => {
  state.error = action.payload;

src/redux/divecomputer/reader/sagas.ts

@@ -22,11 +22,12 @@ import { selectedDescriptorSelector } from '../descriptor';
 import { getSelectedTransport, TransportSource } from '../transport';
 import {
  setReadProgress,
- setReaderState,
  readStart,
  receivedDeviceInfo,
  setDeviceError,
  resetDeviceError,
+ readerFinished,
+ readerStarted,
 } from './actions';
 import { getNewDivesOnly, getState } from './selectors';
 import { DeviceInfo, ReadingState } from './types';
@@ -62,7 +63,7 @@ export function* readSaga(): SagaIterator {
  throw new Error('No transport selected');
  }
 
- yield put(setReaderState('reading'));
+ yield put(readerStarted());
  yield put(resetDeviceError());
 
  const reader = new AsyncDeviceReader();
@@ -117,7 +118,8 @@ export function* readSaga(): SagaIterator {
  if (err) {
  deviceUpdatesChannel.put(setDeviceError(err.message));
  }
- deviceUpdatesChannel.put(setReaderState('none'));
+
+ deviceUpdatesChannel.put(readerFinished());
  });
 
  let state: ReadingState = yield select(getState);

src/redux/error/withErrorHandler.ts

@@ -3,10 +3,10 @@ import { call, put } from 'redux-saga/effects';
 import userReadableError from '../../services/userReadableError';
 import { error } from '../logging';
 
-export default function withErrorHandling<T>(
- effect: (...args: any[]) => SagaIterator<T>,
+export default function withErrorHandling<A, T>(
+ effect: (...args: A[]) => SagaIterator<T>,
  source = 'unknown'
-): (...args: any[]) => SagaIterator {
+): (...args: A[]) => SagaIterator {
  return function* safe(...args) {
  try {
  return yield call(effect, ...args);

src/redux/writer/sagas.ts

@@ -1,4 +1,4 @@
-import { apply, call, put, select, takeLatest } from '@redux-saga/core/effects';
+import { call, put, select, takeLatest } from '@redux-saga/core/effects';
 import { PayloadAction } from '@reduxjs/toolkit';
 import { Descriptor } from 'libdivecomputerjs';
 import { SagaIterator } from 'redux-saga';
@@ -14,6 +14,7 @@ import {
  DeviceInfo,
  getDeviceInfo,
  receivedDeviceInfo,
+ readerFinished,
 } from '../divecomputer/reader';
 import { initialize } from '../global/actions';
 import { loadPersistedState } from '../persistence';
@@ -58,7 +59,7 @@ export function* setWriter(): SagaIterator {
 }
 
 export function* writeDive(action: PayloadAction<Dive>): SagaIterator {
- yield apply(writer, writer.write, [action.payload]);
+ yield call([writer, writer.write], action.payload);
  yield put(written());
 }
 
@@ -69,7 +70,7 @@ export function* checkDone(): SagaIterator {
  return;
  }
 
- yield apply(writer, writer.end, []);
+ yield call([writer, writer.end]);
  yield put(writerDone());
 }
 
@@ -95,6 +96,7 @@ export default function* writerSaga(): SagaIterator {
  yield takeLatest(setOutputFilePath, setWriterPath);
  yield takeLatest(addDive, writeDive);
  yield takeLatest(written, checkDone);
+ yield takeLatest(readerFinished, checkDone);
  yield takeLatest(receivedDeviceInfo, updateComputer);
  yield takeLatest(setAccessToken, updateAccessToken);
  yield takeLatest(loadPersistedState, setPreviousState);