Merge pull request #105 from tjmtmmnk/common-param-reload

Common param bug fix
tjmtmmnk · May 15, 2022 · 79b59eb · 79b59eb
2 parents a13149d + 7952faa
commit 79b59eb
Show file tree

Hide file tree

Showing 13 changed files with 182 additions and 62 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -53,6 +53,9 @@
   "isUseSameParam": {
     "message": "Use common parameters"
   },
+  "reload": {
+    "message": "Reload to apply change"
+  },
 
   "repeatPost": {
     "message": "repeat post"

diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
@@ -53,6 +53,9 @@
   "isUseSameParam": {
     "message": "共通のパラメータを使用する"
   },
+  "reload": {
+    "message": "設定を反映させるために再起動します"
+  },
 
   "repeatPost": {
     "message": "連投"

diff --git a/src/__tests__/moderate.ts b/src/__tests__/moderate.ts
@@ -38,7 +38,6 @@ describe("moderate", () => {
     considerAuthorLength: false,
     considerAuthorNgWord: false,
     isHideCompletely: false,
-    isUseSameParam: false,
   };
   describe("hideRepeatWords", () => {
     const chats: IChat[] = [

diff --git a/src/background.ts b/src/background.ts
@@ -1,5 +1,10 @@
 import { Message, sendRequest, sendRequestToContent } from "./message";
-import { defaultParamsV2, IParameterV2, keyIsUseSameParam } from "./config";
+import {
+  defaultParamsV2,
+  DEFAULT_IS_USE_SAME_PARAM,
+  IParameterV2,
+  keyIsUseSameParam,
+} from "./config";
 import { get, set } from "./storage";
 
 chrome.runtime.onMessage.addListener(
@@ -39,25 +44,51 @@ chrome.runtime.onMessage.addListener(
       if (!req.data) throw new Error("no data");
       if (!req.data.key) throw new Error("no key");
       if (!req.data.param) throw new Error("no param");
+      console.log("update param");
       const key: string = req.data.key;
       const param: IParameterV2 = req.data.param;
       try {
         await set<IParameterV2>(key, param);
-        await set<boolean>(keyIsUseSameParam, param.isUseSameParam);
       } catch (e) {
         console.error(e);
       }
     } else if (
       req.type === "GET_IS_USE_SAME_PARAM" &&
       req.from === "CONTENT_SCRIPT"
     ) {
-      const isUseSameParam = await get<boolean | undefined>(keyIsUseSameParam);
+      console.log(`GET is use same param from content script`);
+      const isUseSameParam =
+        (await get<boolean | undefined>(keyIsUseSameParam)) ??
+        DEFAULT_IS_USE_SAME_PARAM;
       await sendRequestToContent({
         type: "UPDATE_IS_USE_SAME_PARAM",
         from: "BACKGROUND",
         to: "CONTENT_SCRIPT",
-        data: { isUseSameParam: !!isUseSameParam },
+        data: { isUseSameParam },
       });
+      await sendRequest({
+        type: "UPDATE_IS_USE_SAME_PARAM",
+        from: "BACKGROUND",
+        to: "POPUP",
+        data: { isUseSameParam },
+      });
+    } else if (
+      req.type === "UPDATE_IS_USE_SAME_PARAM" &&
+      req.from === "CONTENT_SCRIPT"
+    ) {
+      if (!req.data) throw new Error("no data");
+      if (req.data.isUseSameParam === undefined)
+        throw new Error("no isUseSameParam");
+
+      const isUseSameParam: boolean = req.data.isUseSameParam;
+      console.log(
+        `UPDATE is use same param from content script: ${isUseSameParam}`
+      );
+      try {
+        await set<boolean>(keyIsUseSameParam, isUseSameParam);
+      } catch (e) {
+        console.error(e);
+      }
     }
     sendResponse();
   }

diff --git a/src/components/popup/CheckBox.tsx b/src/components/popup/CheckBox.tsx
@@ -68,11 +68,8 @@ export const CheckBox = (props: {
 
   const [checked, setChecked] = useState(defaultChecked);
 
-  React.useEffect(() => {
-    updateParam(checked);
-  }, [checked]);
-
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateParam(e.target.checked);
     setChecked(e.target.checked);
   };
 

diff --git a/src/components/popup/OptionPage.tsx b/src/components/popup/OptionPage.tsx
@@ -2,8 +2,12 @@ import React, { useEffect } from "react";
 import styled from "styled-components";
 import { CheckBox } from "./CheckBox";
 import { IParameterV2 } from "../../config";
-import { PopupDispatch, updateParam } from "../../popup";
-import { sendRequestToContent } from "../../message";
+import {
+  PopupDispatch,
+  reloadNotification,
+  updateIsUseSameParam,
+  updateParam,
+} from "../../popup";
 
 const StyledContainer = styled.div`
   width: 320px;
@@ -49,10 +53,11 @@ const StyledLi = styled.li`
 
 interface OptionPageProps {
   param: IParameterV2;
+  isUseSameParam: boolean;
   dispatch: PopupDispatch;
 }
 export const OptionPage = (props: OptionPageProps) => {
-  const { param, dispatch } = props;
+  const { param, isUseSameParam, dispatch } = props;
   useEffect(() => {
     updateParam(param);
   }, [
@@ -61,7 +66,6 @@ export const OptionPage = (props: OptionPageProps) => {
     param.considerAuthorNgWord,
     param.considerAuthorLength,
     param.isHideCompletely,
-    param.isUseSameParam,
   ]);
   return (
     <StyledContainer>
@@ -140,13 +144,16 @@ export const OptionPage = (props: OptionPageProps) => {
           <CheckBox
             id={"is-use-same-param"}
             label={chrome.i18n.getMessage("isUseSameParam")}
-            defaultChecked={param.isUseSameParam}
-            updateParam={(checked: boolean) => {
-              const newParam: IParameterV2 = {
-                ...param,
+            defaultChecked={isUseSameParam}
+            updateParam={async (checked: boolean) => {
+              dispatch({
+                t: "update-is-use-same-param",
                 isUseSameParam: checked,
-              };
-              dispatch({ t: "update", param: newParam });
+              });
+              await updateIsUseSameParam(checked);
+              await reloadNotification();
+              window.alert(chrome.i18n.getMessage("reload"));
+              window.close();
             }}
           />
         </StyledLi>

diff --git a/src/components/popup/RangeSlider.tsx b/src/components/popup/RangeSlider.tsx
@@ -149,14 +149,12 @@ export const RangeSlider = (props: {
 }) => {
   const { label, unitLabel, min, max, step, defaultValue, updateParam } = props;
   const [currentValue, setValue] = React.useState(defaultValue);
-  React.useEffect(() => {
-    updateParam(currentValue);
-  }, [currentValue]);
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const value = parseInt(event.target.value, 10);
     if (isNaN(value)) return;
     setValue(value);
+    updateParam(value);
   };
   const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     const { which } = event;

diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx
@@ -26,7 +26,11 @@ export default function PopupPage(props: PopupPageProps) {
           <NgWordPage param={state.param} popupDispatch={dispatch} />
         </Route>
         <Route path="/option">
-          <OptionPage param={state.param} dispatch={dispatch} />
+          <OptionPage
+            param={state.param}
+            isUseSameParam={state.isUseSameParam}
+            dispatch={dispatch}
+          />
         </Route>
         <Route path="/">
           <HomePage param={state.param} dispatch={dispatch} />

diff --git a/src/config.ts b/src/config.ts
@@ -44,7 +44,7 @@ const DEFAULT_IS_ACTIVATE = true;
 const DEFAULT_CONSIDER_AUTHOR_NGWORD = false;
 const DEFAULT_CONSIDER_AUTHOR_LENGTH = false;
 const DEFAULT_IS_HIDE_COMPLETELY = false;
-const DEFAULT_IS_USE_SAME_PARAM = false;
+export const DEFAULT_IS_USE_SAME_PARAM = false;
 
 export const DEFAULT_EXECUTION_INTERVAL_MS = 3000;
 export const OBSERVATION_INTERVAL_MS = 50;
@@ -96,7 +96,6 @@ export interface IParameterV2 {
   considerAuthorNgWord: boolean;
   considerAuthorLength: boolean;
   isHideCompletely: boolean;
-  isUseSameParam: boolean;
 }
 
 export const defaultParamsV2: IParameterV2 = {
@@ -112,7 +111,6 @@ export const defaultParamsV2: IParameterV2 = {
   considerAuthorNgWord: DEFAULT_CONSIDER_AUTHOR_NGWORD,
   considerAuthorLength: DEFAULT_CONSIDER_AUTHOR_LENGTH,
   isHideCompletely: DEFAULT_IS_HIDE_COMPLETELY,
-  isUseSameParam: DEFAULT_IS_USE_SAME_PARAM,
 };
 
 export const isParameter = (arg: any): arg is IParameter => {