useApi

src/renderer/common/hooks/useApi.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { ReactReduxContext} from 'react-redux'
+import { v4 as uuidv4 } from "uuid";
+import { TApiMethod, TApiMethodName } from "readium-desktop/common/api/api.type";
+import { TModuleApi } from "readium-desktop/common/api/moduleApi.type";
+import { TMethodApi } from "readium-desktop/common/api/methodApi.type";
+import { apiActions } from "readium-desktop/common/redux/actions";
+import { ApiResponse } from "readium-desktop/common/redux/states/api";
+import { TReturnPromiseOrGeneratorType } from "readium-desktop/typings/api";
+import { useSyncExternalStore } from "./useSyncExternalStore";
+
+export function useApi<T extends TApiMethodName>(_requestId: string, apiPath: T, ...requestData: Parameters<TApiMethod[T]>): ApiResponse<TReturnPromiseOrGeneratorType<TApiMethod[T]>> {
+
+  const requestId = _requestId || React.useMemo(() => uuidv4(), []);
+  const { store } = React.useContext(ReactReduxContext);
+  React.useEffect(() => {
+    const splitPath = apiPath.split("/");
+    const moduleId = splitPath[0] as TModuleApi;
+    const methodId = splitPath[1] as TMethodApi;
+    store.dispatch(apiActions.request.build(requestId, moduleId, methodId, requestData))
+  }, []); // componentDidMount
+
+  const apiResult = useSyncExternalStore(store.subscribe, () => store.getState().api[requestId]);
+  return apiResult;
+};

src/renderer/common/hooks/useDispatch.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ReactReduxContext} from 'react-redux'
+import { Action } from "../../../common/models/redux";
+
+export function useDispatch(action: Action) {
+
+    const {store} = React.useContext(ReactReduxContext);
+    const actionReturned = store.dispatch(action);
+    return actionReturned;
+}

src/renderer/library/components/HooksTest.tsx

@@ -2,8 +2,16 @@
 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";
+import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
+import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
+import { useApi } from "readium-desktop/renderer/common/hooks/useApi";
+// import { v4 as uuidv4 } from "uuid";
+// import { TApiMethod, TApiMethodName } from "readium-desktop/common/api/api.type";
+// import { ReactReduxContext} from 'react-redux'
+// import { TModuleApi } from "readium-desktop/common/api/moduleApi.type";
+// import { TMethodApi } from "readium-desktop/common/api/methodApi.type";
+// import { apiActions } from "readium-desktop/common/redux/actions";
+// import { useSyncExternalStore } from "readium-desktop/renderer/common/hooks/useSyncExternalStore";
 
 export function HooksTest(props: {name:string}) {
 
@@ -35,16 +43,37 @@ export function HooksTest(props: {name:string}) {
     //     return translator.subscribe(handleLocaleChange);
     // }, [translator.subscribe]);
     const _ = useTranslator();
+    // let _ = (_a: any) => {};
 
     // 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);
+    // let id = "";
     log(id);
 
+    // const requestId = React.useMemo(() => uuidv4(), []);
+    const requestId: string = null;
+    log(requestId);
+    // useApi
+    // const [requestId] = React.useState('test');
+    // useDispatchApi(requestId, "publication/findAll");
 
-    log(Date.now().toString(), "rendered");
-    return <h1 style={{position: "absolute", top: 0, zIndex: 999}}>Hello : {name} : id {id} : translate {_("header.books")}</h1>;
-  }
+  // const { store } = React.useContext(ReactReduxContext);
+  // React.useEffect(() => {
+  //   const apiPath = "publication/findAll";
+  //   const requestData: any[] = [];
+  //   const splitPath = apiPath.split("/");
+  //   const moduleId = splitPath[0] as TModuleApi;
+  //   const methodId = splitPath[1] as TMethodApi;
+  //   store.dispatch(apiActions.request.build(requestId, moduleId, methodId, requestData))
+  // }, []);
+
+  // const allPubRes = useSyncExternalStore(store.subscribe, () => store.getState().api[requestId]);
+  const allPubRes = useApi(requestId, "publication/findAll");
+  log(allPubRes);
+  log(Date.now().toString(), "rendered");
+  return <h1 style={{ position: "absolute", top: 0, zIndex: 999 }}>Hello : {name} : id {id} : translate {_("header.books")}</h1>;
+}