Refactoring code and structure

frontend/src/App.tsx

@@ -1,10 +1,9 @@
 import { io } from "socket.io-client";
-import React, { useState, useEffect, Fragment } from "react";
+import React, { useState, useEffect, useRef, Fragment } from "react";
 import {
     Container,
     Row,
     Col,
-    ProgressBar,
     InputGroup,
     FormControl,
     Button,
@@ -15,6 +14,7 @@ import { buildMessage, updateInStateMap, validateDomain, validateIP } from "./ut
 import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces";
 import { MessageToast } from "./components/MessageToast";
 import { StackableResult } from "./components/StackableResult";
+import { CliArguments } from "./classes";
 import './App.css';
 
 const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
@@ -32,7 +32,19 @@ export function App() {
     const [updatedBin, setUpdatedBin] = useState(false);
     const [showSettings, setShowSettings] = useState(false);
     const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark');
-    const [extractAudio, setExtractAudio] = useState(localStorage.getItem('-x') === 'true');
+
+    const xaInput = useRef(null);
+    const mtInput = useRef(null);
+
+    /* -------------------- Init ----------------------- */
+
+    const cliArgs = new CliArguments();
+
+    if (!localStorage.getItem('cliArgs')) {
+        localStorage.setItem('cliArgs', '')
+    }
+
+    cliArgs.fromString(localStorage.getItem('cliArgs'))
 
     /* -------------------- Effects -------------------- */
 
@@ -101,9 +113,7 @@ export function App() {
         setHalt(true)
         socket.emit('send-url', {
             url: url,
-            params: {
-                xa: extractAudio
-            },
+            params: cliArgs.toString(),
         })
         setUrl('')
         const input = document.getElementById('urlInput') as HTMLInputElement;
@@ -112,7 +122,7 @@ export function App() {
 
     /**
      * Update the url state whenever the input value changes
-     * @param {React.ChangeEvent<HTMLInputElement>} e Input change event
+     * @param e Input change event
      */
     const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setUrl(e.target.value)
@@ -121,7 +131,7 @@ export function App() {
     /**
      * Update the server ip address state and localstorage whenever the input value changes.  
      * Validate the ip-addr then set.
-     * @param {React.ChangeEvent<HTMLInputElement>} e Input change event
+     * @param e Input change event
      */
     const handleAddrChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const input = e.target.value;
@@ -138,7 +148,7 @@ export function App() {
 
     /**
      * Abort a specific download if id's provided, other wise abort all running ones.
-     * @param {number} id The download id / pid
+     * @param id The download id / pid
      * @returns void
      */
     const abort = (id?: number) => {
@@ -175,13 +185,38 @@ export function App() {
     /**
      * Handle extract audio checkbox
      */
-    const toggleExtractAudio = () => {
-        if (extractAudio) {
-            localStorage.setItem('-x', 'false')
-            setExtractAudio(false)
+    const setExtractAudio = () => {
+        if (cliArgs.extractAudio) {
+            xaInput.current.checked = false;
+            cliArgs.extractAudio = false;
+
+            const lStorageItem = localStorage.getItem('cliArgs');
+            localStorage.setItem('cliArgs', lStorageItem.replace('-x ', ''));
         } else {
-            localStorage.setItem('-x', 'true')
-            setExtractAudio(true)
+            xaInput.current.checked = true;
+            cliArgs.extractAudio = true;
+
+            const lStorageItem = localStorage.getItem('cliArgs');
+            localStorage.setItem('cliArgs', lStorageItem.concat('-x ', ''));
+        }
+    }
+
+    /**
+     * Handle no modified time header checkbox
+     */
+    const setNoMTime = () => {
+        if (cliArgs.noMTime) {
+            mtInput.current.checked = false;
+            cliArgs.noMTime = false;
+
+            const lStorageItem = localStorage.getItem('cliArgs');
+            localStorage.setItem('cliArgs', lStorageItem.replace('--no-mtime ', ''));
+        } else {
+            mtInput.current.checked = true;
+            cliArgs.noMTime = true;
+
+            const lStorageItem = localStorage.getItem('cliArgs');
+            localStorage.setItem('cliArgs', lStorageItem.concat('--no-mtime ', ''));
         }
     }
 
@@ -276,9 +311,13 @@ export function App() {
                                     {darkMode ? 'Light theme' : 'Dark theme'}
                                 </Button>
                                 <div className="pt-2">
-                                    <input type="checkbox" name="-x" id="-x"
-                                        onClick={() => toggleExtractAudio()} checked={extractAudio} />
+                                    <input type="checkbox" name="-x" defaultChecked={cliArgs.extractAudio} ref={xaInput}
+                                        onClick={setExtractAudio} />
                                     <label htmlFor="-x">&nbsp;Extract audio</label>
+                                    &nbsp;&nbsp;
+                                    <input type="checkbox" name="-nomtime" defaultChecked={cliArgs.noMTime} ref={mtInput}
+                                        onClick={setNoMTime} />
+                                    <label htmlFor="-x">&nbsp;Don't set file modification time</label>
                                 </div>
                             </div> :
                             null

frontend/src/classes.ts

@@ -0,0 +1,49 @@
+export class CliArguments {
+    private _extractAudio: boolean;
+    private _noMTime: boolean;
+
+    constructor() {
+        this._extractAudio = false;
+        this._noMTime = false;
+    }
+
+    public get extractAudio(): boolean {
+        return this._extractAudio;
+    }
+
+    public set extractAudio(v: boolean) {
+        this._extractAudio = v;
+    }
+
+    public get noMTime(): boolean {
+        return this._noMTime;
+    }
+
+    public set noMTime(v: boolean) {
+        this._noMTime = v;
+    }
+
+    public toString(): string {
+        let args = '';
+
+        if (this._extractAudio) {
+            args += '-x '
+        }
+
+        if (this._noMTime) {
+            args += '--no-mtime '
+        }
+
+        return args.trim();
+    }
+
+    public fromString(str: string): void {
+        if (str.includes('-x')) {
+            this._extractAudio = true;
+        }
+
+        if (str.includes('--no-mtime')) {
+            this._noMTime = true;
+        }
+    }
+}

frontend/src/utils.ts

@@ -51,11 +51,11 @@ export function detectSpeed(str: string): number {
 
 /**
  * Update a map stored in React State, in this specific impl. all maps have integer keys
- * @param {num} k Map key
- * @param {*} v Map value
- * @param {Map<number, any>} target The target map saved in-state
- * @param {Function} callback calls React's StateAction function with the newly created Map
- * @param {boolean} remove -optional- is it an update or a deletion operation?
+ * @param k Map key
+ * @param v Map value
+ * @param target The target map saved in-state
+ * @param callback calls React's StateAction function with the newly created Map
+ * @param remove -optional- is it an update or a deletion operation?
  */
 export const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
     if (remove) {
@@ -69,7 +69,7 @@ export const updateInStateMap = (k: number, v: any, target: Map<number, any>, ca
 /**
  * Pre like function
  * @param data 
- * @returns 
+ * @returns formatted server message
  */
 export function buildMessage(data: IMessage) {
     return `operation: ${data.status || '...'} \nprogress: ${data.progress || '?'} \nsize: ${data.size || '?'} \nspeed: ${data.dlSpeed || '?'}`;