Update packages, adapted typings and removed yargs

package.json

@@ -17,43 +17,42 @@
   },
   "dependencies": {
     "buffer": "^6.0.3",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.2",
     "express": "^4.17.1",
-    "jmuxer": "^2.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
+    "jmuxer": "^2.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "stream-browserify": "^3.0.0",
-    "styled-components": "^5.2.1",
-    "styled-normalize": "^8.0.7",
-    "yargs": "^16.2.0"
+    "styled-components": "^5.3.1",
+    "styled-normalize": "^8.0.7"
   },
   "devDependencies": {
-    "@types/express": "^4.17.11",
-    "@types/node": "^14.14.19",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/styled-components": "^5.1.7",
-    "@types/yargs": "^15.0.12",
-    "@typescript-eslint/eslint-plugin": "^4.11.1",
-    "@typescript-eslint/parser": "^4.11.1",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "@types/express": "^4.17.13",
+    "@types/node": "^16.11.0",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.1",
+    "@types/styled-components": "^5.1.15",
+    "@types/yargs": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^4.5.1",
-    "nodemon": "^2.0.6",
-    "prettier": "^2.2.1",
-    "react-is": "^17.0.1",
-    "ts-loader": "^8.0.13",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.1.3",
-    "typescript-plugin-styled-components": "^1.4.4",
-    "webpack": "^5.11.1",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1"
+    "html-webpack-plugin": "^5.4.0",
+    "nodemon": "^2.0.13",
+    "prettier": "^2.4.1",
+    "react-is": "^17.0.2",
+    "ts-loader": "^9.2.6",
+    "ts-node": "^10.3.0",
+    "typescript": "^4.4.4",
+    "typescript-plugin-styled-components": "^2.0.0",
+    "webpack": "^5.58.2",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1"
   }
 }

src/server/control.ts

@@ -94,9 +94,10 @@ const raspiControl = (settingsHelper: SettingsHelper): RaspiControl => {
 };
 
 const modeHelper: {
-  [key in RaspiMode | 'Stream']: (
-    settingsHelper: SettingsHelper,
-  ) => { settings: Record<string, unknown>; command: string };
+  [key in RaspiMode | 'Stream']: (settingsHelper: SettingsHelper) => {
+    settings: Record<string, unknown>;
+    command: string;
+  };
 } = {
   Photo: (settingsHelper: SettingsHelper) => {
     const { camera, preview, photo } = settingsHelper;

src/server/index.ts

@@ -1,5 +1,4 @@
 import http from 'http';
-import yargs from 'yargs';
 import raspiControl from './control';
 import { createLogger } from './logger';
 import server from './server';
@@ -8,19 +7,6 @@ import { fileWatcher } from './watcher';
 
 const logger = createLogger('server');
 
-/**
- * Parse the command line arguments
- */
-const argv = yargs
-  .option('port', {
-    alias: 'p',
-    type: 'number',
-    description: 'Port number of the express server',
-    default: 8000,
-  })
-  .help()
-  .alias('help', 'h').argv;
-
 const start = () => {
   logger.info('starting services...');
 
@@ -63,8 +49,8 @@ const start = () => {
   /**
    * Start the web server
    */
-  httpServer.listen(argv.port);
-  logger.success('server listening on', argv.port);
+  httpServer.listen(8000);
+  logger.success('server listening on', 8000);
 };
 
 start();

src/server/logger.ts

@@ -9,8 +9,10 @@ export interface Logger {
 }
 
 export const createLogger = (module: string): Logger => {
-  const log = (fn: chalk.ChalkFunction) => (...text: unknown[]) =>
-    console.log(fn(`[${module}]`, ...text));
+  const log =
+    (fn: chalk.ChalkFunction) =>
+    (...text: unknown[]) =>
+      console.log(fn(`[${module}]`, ...text));
 
   return {
     log: log(chalk.blackBright),

src/server/server.ts

@@ -5,11 +5,15 @@ import {
   RaspiControlStatus,
   RaspiStatus,
   raspiModes,
+  GenericSettingDesc,
+  Setting,
 } from '../shared/settings/types';
 import { RaspiControl } from './control';
 import { SettingsBase, SettingsHelper } from './settings';
 import { FileWatcher } from './watcher';
 
+type SettingRequest = express.Request<undefined, undefined, Setting<GenericSettingDesc>>;
+
 /**
  * Initialize the express server
  */
@@ -30,12 +34,12 @@ const server = (
   const getSettings = (x: SettingsBase) => (_: express.Request, res: express.Response) =>
     res.send(x.read());
 
-  const applySettings = (x: SettingsBase) => (req: express.Request, res: express.Response) => {
+  const applySettings = (x: SettingsBase) => (req: SettingRequest, res: express.Response) => {
     x.apply(req.body);
     res.status(200).send(x.read());
   };
 
-  const applyAndRestart = (x: SettingsBase) => (req: express.Request, res: express.Response) => {
+  const applyAndRestart = (x: SettingsBase) => (req: SettingRequest, res: express.Response) => {
     const applied = x.apply(req.body);
     const sendSettings = () => res.status(200).send(x.read());
     if (applied) {

src/shared/helperFunctions.ts

@@ -53,29 +53,33 @@ const symbol = ['', 'k', 'M', 'G', 'T', 'P', 'E'];
  * @param number number to abbreviate
  * @param [fractionDigits=-1] Digits after the decimal point. -1 = auto
  */
-export const abbreviateNumber = (unit = '', fractionDigits = -1) => (number?: number): string => {
-  if (!number) return '';
-  const tier = (Math.log10(Math.abs(number)) / 3) | 0;
-  if (tier == 0) return `${number.toFixed(0)}${unit}`;
+export const abbreviateNumber =
+  (unit = '', fractionDigits = -1) =>
+  (number?: number): string => {
+    if (!number) return '';
+    const tier = (Math.log10(Math.abs(number)) / 3) | 0;
+    if (tier == 0) return `${number.toFixed(0)}${unit}`;
 
-  const suffix = symbol[tier];
-  const scale = Math.pow(10, tier * 3);
+    const suffix = symbol[tier];
+    const scale = Math.pow(10, tier * 3);
 
-  // scale and format the number
-  const scaled = number / scale;
-  const usedFractionDigits =
-    fractionDigits >= 0 ? fractionDigits : Math.ceil(Math.log10(Math.abs(scaled))) > 1 ? 0 : 2;
-  return `${scaled.toFixed(usedFractionDigits)} ${suffix}${unit}`;
-};
+    // scale and format the number
+    const scaled = number / scale;
+    const usedFractionDigits =
+      fractionDigits >= 0 ? fractionDigits : Math.ceil(Math.log10(Math.abs(scaled))) > 1 ? 0 : 2;
+    return `${scaled.toFixed(usedFractionDigits)} ${suffix}${unit}`;
+  };
 
 /**
  * Format number and append unit
  *
  * @param number number
  * @param [unit] unit
  */
-export const appendUnit = (unit: string) => (number?: number): string =>
-  number ? (unit ? `${number} ${unit}` : number.toString()) : '';
+export const appendUnit =
+  (unit: string) =>
+  (number?: number): string =>
+    number ? (unit ? `${number} ${unit}` : number.toString()) : '';
 
 /**
  * Round a number by significants

src/site/components/common/actionHelper.ts

@@ -13,7 +13,7 @@ export const createActions = <T extends ActionCreatorsMap>(
   Object.entries(actions).reduce(
     (result, [key, value]) => ({
       ...result,
-      [key]: (...args: any) => ({ type: key, payload: value(...args) as ReturnType<T[string]> }),
+      [key]: (...args) => ({ type: key, payload: value(...args) as ReturnType<T[string]> }),
     }),
     {} as ActionCreatorsReturnMap<T>,
   );

src/site/components/common/hooks/useFetch.ts

@@ -90,8 +90,8 @@ export const useFetch = <T>(
 
     fetch(url, { signal: abortFetch.current.signal })
       .then((res) => res.json())
-      .then((json) => dispatch(actions.FETCH_SUCCESS(json)))
-      .catch((error) => {
+      .then((json: T) => dispatch(actions.FETCH_SUCCESS(json)))
+      .catch((error: Error) => {
         if (!abortFetch.current.signal.aborted) {
           dispatch(actions.FETCH_FAILURE(error));
         }
@@ -115,9 +115,9 @@ export const useFetch = <T>(
         signal: abortUpdate.current.signal,
       })
         .then((res) => res.json())
-        .then((json) => dispatch(actions.UPDATE_SUCCESS(json)))
+        .then((json: T) => dispatch(actions.UPDATE_SUCCESS(json)))
         .finally(startRefresh)
-        .catch((error) => {
+        .catch((error: Error) => {
           if (!abortUpdate.current.signal.aborted) {
             dispatch(actions.UPDATE_FAILURE(error));
           }

src/site/components/main/settings/common/helperFunctions.ts

@@ -6,6 +6,8 @@ export const restoreSettings = <T extends Record<string, unknown>>(data: T): Res
     {},
   ) as RestoredSetting<T>;
 
-export const updateTypedField = <T extends Record<string, unknown>>(
-  updateData: (data: T) => void,
-) => <K extends keyof T>(field: K) => (value: T[K]): void => updateData({ [field]: value } as T);
+export const updateTypedField =
+  <T extends Record<string, unknown>>(updateData: (data: T) => void) =>
+  <K extends keyof T>(field: K) =>
+  (value: T[K]): void =>
+    updateData({ [field]: value } as T);