Move ConfigForm & theme to new separate files; Create SmallIconNavBut…

…ton and SmallIconButton to avoid code duplication
Henry8192 · Sep 5, 2024 · 6a82d80 · 6a82d80
1 parent c934ee0
commit 6a82d80
Show file tree

Hide file tree

Showing 4 changed files with 258 additions and 248 deletions.
diff --git a/new-log-viewer/src/App.tsx b/new-log-viewer/src/App.tsx
@@ -1,91 +1,13 @@
-import {
-    CssVarsProvider,
-    extendTheme,
-} from "@mui/joy/styles";
-
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import {CssVarsProvider} from "@mui/joy/styles";
 
 import Layout from "./components/Layout";
 import StateContextProvider from "./contexts/StateContextProvider";
 import UrlContextProvider from "./contexts/UrlContextProvider";
 import {CONFIG_KEY} from "./typings/config";
 import {CONFIG_DEFAULT} from "./utils/config";
+import monacoTheme from "./utils/theme";
 
 
-const monacoTheme = extendTheme({
-    colorSchemes: {
-        light: {
-            palette: {
-                success: {
-                    solidBg: "#007acc",
-                    solidHoverBg: "#0062a3",
-                    solidActiveBg: "#0062a3",
-                },
-                neutral: {
-                    solidBg: "#5f6a79",
-                    solidHoverBg: "#4c5561",
-                    solidActiveBg: "#4c5561",
-                },
-                focusVisible: "#0090f1",
-            },
-        },
-        dark: {
-            palette: {
-                success: {
-                    solidBg: "#0e639c",
-                    solidHoverBg: "#1177bb",
-                    solidActiveBg: "#1177bb",
-                },
-                neutral: {
-                    solidBg: "#313131",
-                    solidHoverBg: "#45494e",
-                    solidActiveBg: "#45494e",
-                },
-                focusVisible: "#007fd4",
-            },
-        },
-    },
-    focus: {
-        default: {
-            outlineWidth: "3px",
-        },
-    },
-    fontFamily: {
-        body: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-    },
-    components: {
-        JoyButton: {
-            styleOverrides: {
-                root: ({ownerState}) => ({
-                    borderRadius: "2px",
-                    ...("md" === ownerState.size && {
-                        "fontWeight": 600,
-                        "fontSize": "14px",
-                        "--Button-paddingInline": "1rem",
-                    }),
-                }),
-            },
-        },
-        JoySelect: {
-            defaultProps: {
-                indicator: <KeyboardArrowDown/>,
-            },
-            styleOverrides: {
-                root: {
-                    borderRadius: "2px",
-                },
-            },
-        },
-        JoyInput: {
-            styleOverrides: {
-                root: {
-                    borderRadius: "2px",
-                },
-            },
-        },
-    },
-});
-
 /**
  * Renders the main application.
  *

diff --git a/new-log-viewer/src/components/ConfigForm.tsx b/new-log-viewer/src/components/ConfigForm.tsx
@@ -0,0 +1,134 @@
+import React from "react";
+
+import {
+    Button,
+    Input,
+} from "@mui/joy";
+
+import {
+    CONFIG_KEY,
+    LOCAL_STORAGE_KEY,
+} from "../typings/config";
+import {
+    getConfig,
+    setConfig,
+} from "../utils/config";
+
+
+const formFields = [
+    {
+        initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).formatString,
+        label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
+        name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING,
+        type: "text",
+    },
+    {
+        initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).logLevelKey,
+        label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
+        name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY,
+        type: "text",
+    },
+    {
+        initialValue: getConfig(CONFIG_KEY.DECODER_OPTIONS).timestampKey,
+        label: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
+        name: LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY,
+        type: "text",
+    },
+    {
+        initialValue: getConfig(CONFIG_KEY.PAGE_SIZE),
+        label: LOCAL_STORAGE_KEY.PAGE_SIZE,
+        name: LOCAL_STORAGE_KEY.PAGE_SIZE,
+        type: "number",
+    },
+];
+
+/**
+ * Renders a form for testing config utilities.
+ *
+ * @return
+ */
+const ConfigForm = () => {
+    const handleConfigFormReset = (ev: React.FormEvent) => {
+        ev.preventDefault();
+        window.localStorage.clear();
+        window.location.reload();
+    };
+
+    const handleConfigFormSubmit = (ev: React.FormEvent) => {
+        ev.preventDefault();
+        const formData = new FormData(ev.target as HTMLFormElement);
+
+        const formatString = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_FORMAT_STRING);
+        const logLevelKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_LOG_LEVEL_KEY);
+        const timestampKey = formData.get(LOCAL_STORAGE_KEY.DECODER_OPTIONS_TIMESTAMP_KEY);
+        const pageSize = formData.get(LOCAL_STORAGE_KEY.PAGE_SIZE);
+        let error = null;
+        if (
+            "string" === typeof formatString &&
+            "string" === typeof logLevelKey &&
+            "string" === typeof timestampKey
+        ) {
+            error ||= setConfig({
+                key: CONFIG_KEY.DECODER_OPTIONS,
+                value: {formatString, logLevelKey, timestampKey},
+            });
+        }
+        if ("string" === typeof pageSize) {
+            error ||= setConfig({
+                key: CONFIG_KEY.PAGE_SIZE,
+                value: Number(pageSize),
+            });
+        }
+        if (null !== error) {
+            // eslint-disable-next-line no-alert
+            window.alert(error);
+        } else {
+            window.location.reload();
+        }
+    };
+
+    return (
+        <form
+            onReset={handleConfigFormReset}
+            onSubmit={handleConfigFormSubmit}
+        >
+            <table>
+                <tbody>
+                    {formFields.map((field, index) => (
+                        <tr key={index}>
+                            <td>
+                                {field.label}
+                            </td>
+                            <td>
+                                <Input
+                                    slotProps={{
+                                        input: {
+                                            defaultValue: field.initialValue,
+                                            name: field.name,
+                                            size: 100,
+                                            type: field.type,
+                                        },
+                                    }}/>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            <div>
+                <Button
+                    type={"submit"}
+                >
+                    Apply
+                </Button>
+                <Button
+                    color={"neutral"}
+                    type={"reset"}
+                >
+                    Reset Default
+                </Button>
+            </div>
+        </form>
+    );
+};
+
+export default ConfigForm;