Handle port change

2022-06-15 13:20:24 +02:00
parent b6ff444526
commit 1c706db799
4 changed files with 39 additions and 11 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -36,7 +36,7 @@ import ArchivedDownloads from "./Archived";

 const drawerWidth: number = 240;

-const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
+const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:${localStorage.getItem('server-port') || '3022'}`)

 interface AppBarProps extends MuiAppBarProps {
    open?: boolean;
--- a/frontend/src/Settings.tsx
+++ b/frontend/src/Settings.tsx
@@ -19,9 +19,9 @@ import {
 } from "@mui/material";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { debounceTime, distinctUntilChanged, map, of } from "rxjs";
+import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs";
 import { Socket } from "socket.io-client";
-import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
+import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setServerPort, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
 import { alreadyUpdated, updated } from "./features/status/statusSlice";
 import { RootState } from "./stores/store";
 import { validateDomain, validateIP } from "./utils";
@@ -63,6 +63,22 @@ export default function Settings({ socket }: Props) {
        return $serverAddr.unsubscribe()
    }

+    /**
+     * Set server port
+     */
+    const handlePortChange = (event: any) => {
+        const $port = of(event)
+            .pipe(
+                map(event => event.target.value),
+                map(val => Number(val)),
+                takeWhile(val => isFinite(val) && val <= 65535),
+            )
+            .subscribe(port => {
+                dispatch(setServerPort(port.toString()))
+            })
+        return $port.unsubscribe()
+    }
+
    /**
     * Language toggler handler 
     */
@@ -102,7 +118,7 @@ export default function Settings({ socket }: Props) {
                        </Typography>
                        <FormGroup>
                            <Grid container spacing={2}>
-                                <Grid item xs={12} md={12}>
+                                <Grid item xs={12} md={11}>
                                    <TextField
                                        fullWidth
                                        label={settings.i18n.t('serverAddressTitle')}
@@ -115,16 +131,16 @@ export default function Settings({ socket }: Props) {
                                        sx={{ mb: 2 }}
                                    />
                                </Grid>
-                                {/* <Grid item xs={12} md={2}>
+                                <Grid item xs={12} md={1}>
                                    <TextField
                                        fullWidth
-                                        label={settings.i18n.t('serverAddressTitle')}
-                                        defaultValue={settings.serverAddr}
-                                        onChange={handleAddrChange}
-                                        error={invalidIP}
+                                        label={settings.i18n.t('serverPortTitle')}
+                                        defaultValue={settings.serverPort}
+                                        onChange={handlePortChange}
+                                        error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
                                        sx={{ mb: 2 }}
                                    />
-                                </Grid> */}
+                                </Grid>
                            </Grid>
                            <Grid container spacing={2}>
                                <Grid item xs={12} md={6}>
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -11,6 +11,7 @@ languages:
    lightThemeButton: Light theme
    settingsAnchor: Settings
    serverAddressTitle: Server address
+    serverPortTitle: Port
    extractAudioCheckbox: Extract audio
    noMTimeCheckbox: Don't set file modification time
    bgReminder: Once you close this page the download will continue in the background.
@@ -28,6 +29,7 @@ languages:
    lightThemeButton: Tema chiaro
    settingsAnchor: Impostazioni
    serverAddressTitle: Indirizzo server
+    serverPortTitle: Porta
    extractAudioCheckbox: Estrai l'audio
    noMTimeCheckbox: Non impostare la proprietà "Data ultima modifica"
    bgReminder: Chiusa questa UI il download continuerà in background.
@@ -45,6 +47,7 @@ languages:
    lightThemeButton: 明亮主题
    settingsAnchor: 设置
    serverAddressTitle: 服务器地址
+    serverPortTitle: Port
    extractAudioCheckbox: 提取音频
    noMTimeCheckbox: 不设置文件修改时间
    bgReminder: 关闭页面后，下载会继续在后台运行。
@@ -62,6 +65,7 @@ languages:
    lightThemeButton: Light theme
    settingsAnchor: Settings
    serverAddressTitle: Server address
+    serverPortTitle: Port
    extractAudioCheckbox: Extract audio
    noMTimeCheckbox: Don't set file modification time
    bgReminder: Once you close this page the download will continue in the background.
@@ -79,6 +83,7 @@ languages:
    lightThemeButton: Light theme
    settingsAnchor: Settings
    serverAddressTitle: Server address
+    serverPortTitle: Port
    extractAudioCheckbox: Extract audio
    noMTimeCheckbox: Don't set file modification time
    bgReminder: Once you close this page the download will continue in the background.
@@ -96,6 +101,7 @@ languages:
    lightThemeButton: 라이트 모드
    settingsAnchor: 설정
    serverAddressTitle: 서버 주소
+    serverPortTitle: Port
    extractAudioCheckbox: 오디오 추출
    noMTimeCheckbox: 파일 수정 시간을 설정하지 않음
    bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다
--- a/frontend/src/features/settings/settingsSlice.ts
+++ b/frontend/src/features/settings/settingsSlice.ts
@@ -7,6 +7,7 @@ export type ThemeUnion = "light" | "dark"

 export interface SettingsState {
    serverAddr: string,
+    serverPort: string,
    language: LanguageUnion,
    theme: ThemeUnion,
    cliArgs: CliArguments,
@@ -16,6 +17,7 @@ export interface SettingsState {

 const initialState: SettingsState = {
    serverAddr: localStorage.getItem("server-addr") || window.location.hostname,
+    serverPort: localStorage.getItem("server-port") || window.location.port,
    language: (localStorage.getItem("language") || "english") as LanguageUnion,
    theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
    cliArgs: localStorage.getItem("cli-args") ? new CliArguments().fromString(localStorage.getItem("cli-args") ?? "") : new CliArguments(false, true),
@@ -31,6 +33,10 @@ export const settingsSlice = createSlice({
            state.serverAddr = action.payload
            localStorage.setItem("server-addr", action.payload)
        },
+        setServerPort: (state, action: PayloadAction<string>) => {
+            state.serverPort = action.payload
+            localStorage.setItem("server-port", action.payload)
+        },
        setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
            state.language = action.payload
            state.i18n.setLanguage(action.payload)
@@ -51,6 +57,6 @@ export const settingsSlice = createSlice({
    }
 })

-export const { setLanguage, setCliArgs, setTheme, setServerAddr, setFormatSelection } = settingsSlice.actions
+export const { setLanguage, setCliArgs, setTheme, setServerAddr, setServerPort, setFormatSelection } = settingsSlice.actions

 export default settingsSlice.reducer