hooks useTranslator and useSelector -> redux

package.json

@@ -298,6 +298,7 @@
     "timeout-signal": "^2.0.0",
     "tmp": "^0.2.1",
     "typed-redux-saga": "^1.5.0",
+    "use-sync-external-store": "^1.2.0",
     "uuid": "^9.0.0",
     "validator": "^13.11.0",
     "xml-js": "^1.6.11",
@@ -335,6 +336,7 @@
     "@types/remote-redux-devtools": "^0.5.5",
     "@types/tmp": "^0.2.3",
     "@types/urijs": "^1.19.19",
+    "@types/use-sync-external-store": "^0.0.4",
     "@types/uuid": "^9.0.2",
     "@types/validator": "^13.11.1",
     "@types/xmldom": "^0.1.31",

src/common/hooks/useSelector.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ReactReduxContext, ReactReduxContextValue } from 'react-redux'
+import { useSyncExternalStore } from "./useSyncExternalStore";
+
+export function useSelector<State, Selected>(selector: (state: State) => Selected): Selected {
+
+    const {store} = React.useContext<ReactReduxContextValue<State>>(ReactReduxContext);
+    const selected = useSyncExternalStore(store.subscribe, () => selector(store.getState()));
+    return selected;
+}

src/common/hooks/useSyncExternalStore.ts

@@ -0,0 +1,4 @@
+
+import {useSyncExternalStore} from 'use-sync-external-store/shim';
+
+export {useSyncExternalStore};

src/common/hooks/useTranslator.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { TranslatorContext } from "readium-desktop/renderer/common/translator.context";
+
+export function useTranslator() {
+
+    const translator = React.useContext(TranslatorContext);
+    const { translate: _ } = translator;
+
+    const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+    React.useEffect(() => {
+        const handleLocaleChange = () => {
+            forceUpdate();
+        }
+        return translator.subscribe(handleLocaleChange);
+    }, [translator.subscribe]);
+
+    return _;
+}

src/common/services/translator.ts

@@ -191,7 +191,23 @@ export type I18nTyped = TFunction;
 @injectable()
 export class Translator {
     public translate = this._translate as I18nTyped;
+    public subscribe = this._subscribe.bind(this);
     private locale = "en";
+    private listeners: Set<() => void>;
+
+    constructor() {
+        this.listeners = new Set();
+    }
+
+    private _subscribe(fn: () => void) {
+        if (fn) {
+            this.listeners.add(fn);
+            return () => {
+                this.listeners.delete(fn);
+            }
+        }
+        return () => {};
+    }
 
     public getLocale(): string {
         return this.locale;
@@ -215,6 +231,10 @@ export class Translator {
             } else {
                 resolve();
             }
+        }).finally(() => {
+            for (const listener of this.listeners) {
+                listener();
+            }
         });
     }
 

src/renderer/library/components/HooksTest.tsx

@@ -0,0 +1,50 @@
+
+import * as React from "react";
+import { log } from "console";
+import { ILibraryRootState } from "../redux/states";
+import { useTranslator } from "readium-desktop/common/hooks/useTranslator";
+import { useSelector } from "readium-desktop/common/hooks/useSelector";
+
+export function HooksTest(props: {name:string}) {
+
+    let name = props.name;
+    // useSelector from react-redux
+    // const {locale} = useSelector((state: ILibraryRootState) => {
+
+    //     log(Date.now().toString(), "useSelector Locale");
+    //     return state.i18n;
+
+    // }
+    // ,
+    // (a, b) => {
+
+    //     log("cond: ", a, b, a === b);
+    //     return a === b
+    // }
+    // );
+
+    // const translator = React.useContext(TranslatorContext);
+    // const { translate: _ } = translator;
+    // // useSyncExternalStore(translator.subscribe, () => {console.log("a"); return translator.getLocale();});
+
+    // const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+    // React.useEffect(() => {
+    //     const handleLocaleChange = () => {
+    //         forceUpdate();
+    //     }
+    //     return translator.subscribe(handleLocaleChange);
+    // }, [translator.subscribe]);
+    const _ = useTranslator();
+
+    // const {store} = React.useContext<ReactReduxContextValue<ILibraryRootState>>(ReactReduxContext);
+    // const id = useSyncExternalStore(store.subscribe, () => store.getState().win.identifier);
+    // log(id);
+
+    // useSelector custom with just useSyncExternalStore
+    const id = useSelector((state: ILibraryRootState) => state.win.identifier);
+    log(id);
+
+
+    log(Date.now().toString(), "rendered");
+    return <h1 style={{position: "absolute", top: 0, zIndex: 999}}>Hello : {name} : id {id} : translate {_("header.books")}</h1>;
+  }

src/renderer/library/components/layout/LibraryLayout.tsx

@@ -21,6 +21,7 @@ import {
 import { ILibraryRootState } from "readium-desktop/renderer/library/redux/states";
 
 import LibraryHeader from "./LibraryHeader";
+import { HooksTest } from "../HooksTest";
 
 const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substring(1);
 
@@ -122,6 +123,7 @@ class LibraryLayout extends React.Component<IProps, undefined> {
                     >
                         {__("accessibility.mainContent")}
                     </a>
+                    <HooksTest name="main"></HooksTest>
                     { this.props.children }
                 </main>
             </div>