feat(web): trigger converting upon option change

Gowee · Jan 15, 2025 · 38f1406 · 38f1406
1 parent 1730022
commit 38f1406
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 15 deletions.
diff --git a/web/src/components/ConvertButton.tsx b/web/src/components/ConvertButton.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect } from "react";
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  forwardRef,
+  ForwardedRef,
+} from "react";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 import ButtonGroup from "@material-ui/core/ButtonGroup";
@@ -27,14 +33,18 @@ const variants = {
 };
 type Variant = keyof typeof variants;
 
-export default function ConvertButton({
-  onConvert: handleConvert,
-}: {
-  onConvert: (target: Variant) => void;
-}) {
-  const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef<HTMLDivElement>(null);
-  const [selectedVariant, setSelectedVariant] = React.useState<Variant>(() => {
+function ConvertButton(
+  {
+    onConvert: handleConvert,
+  }: {
+    onConvert: (target: Variant) => void;
+  },
+  ref: ForwardedRef<any>
+) {
+  const isMounting = useRef(true);
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [selectedVariant, setSelectedVariant] = useState<Variant>(() => {
     const hash = window.location.hash.slice(1) as Variant;
     if (variants[hash]) {
       return hash;
@@ -58,11 +68,15 @@ export default function ConvertButton({
     setOpen(false);
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => handleConvert(selectedVariant), [selectedVariant]);
   useEffect(() => {
+    if (isMounting.current) {
+      isMounting.current = false;
+      return;
+    }
+    handleConvert(selectedVariant);
     localStorage.setItem(`${PACKAGE.name}-selected-variant`, selectedVariant);
     window.history.replaceState({}, "", `#${selectedVariant}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedVariant]);
 
   const handleToggle = () => {
@@ -87,10 +101,10 @@ export default function ConvertButton({
           variant="outlined"
           color="primary"
           ref={anchorRef}
-          aria-label="split button"
+          aria-label="convert button"
         >
           <Tooltip title="Click to convert / 點擊以轉換">
-            <Button onClick={handleClick}>
+            <Button ref={ref} onClick={handleClick}>
               <small>To/至</small>
               &nbsp;
               <Box sx={{ whiteSpace: "nowrap" }}>
@@ -151,3 +165,5 @@ export default function ConvertButton({
     </Grid>
   );
 }
+
+export default forwardRef(ConvertButton);
diff --git a/web/src/components/OptionsControl.tsx b/web/src/components/OptionsControl.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ForwardedRef, useState, useEffect } from "react";
+import { forwardRef, ForwardedRef, useState, useEffect, useRef } from "react";
 
 // import { withStyles, Theme, makeStyles } from "@material-ui/core/styles";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
@@ -34,6 +34,8 @@ function OptionsControl(
   },
   ref: ForwardedRef<any>
 ) {
+  const convertButtonRef = useRef(null as any);
+  const isMounting = useRef(true);
   const [cgroups, setCGroups] = useState({} as { [name: string]: string });
   const [activatedCGroups, setActivatedCGroups] = useState(() => {
     return JSON.parse(
@@ -53,12 +55,21 @@ function OptionsControl(
     loadCGroups();
   }, []);
   useEffect(() => {
+    if (isMounting.current) {
+      isMounting.current = false;
+      return;
+    }
     const s = JSON.stringify(activatedCGroups);
     localStorage.setItem(`${PACKAGE.name}-activated-cgroups`, s);
   }, [activatedCGroups]);
   useEffect(() => {
+    if (isMounting.current) {
+      // isMounting.current = false;
+      return;
+    }
     const s = JSON.stringify(parsingInline);
     localStorage.setItem(`${PACKAGE.name}-parsing-inline`, s);
+    convertButtonRef.current?.click();
   }, [parsingInline]);
   return (
     <Grid container direction="row" justifyContent="space-around">
@@ -82,7 +93,8 @@ function OptionsControl(
             <Tooltip
               title={
                 <>
-                  Parse and apply inline rules in the MediaWiki LanguageConverter syntax
+                  Parse and apply inline rules in MediaWiki LanguageConverter
+                  syntax
                   <br />/ 解析並應用文本中的 MediaWiki 語言轉換規則
                 </>
               }
@@ -110,6 +122,7 @@ function OptionsControl(
           </Grid>
           <Grid item>
             <ConvertButton
+              ref={convertButtonRef}
               onConvert={(target) =>
                 handleConvert(
                   target,