Feature/v0.0.2

.gitignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -1,6 +1,8 @@
 # react-meteor-method-hooks
 
-Simple hook to handle `Meteor.call` requests.
+Updated to work with `Meteor.callAsync()` method.
+
+Simple hook to handle `Meteor.callAsync()` or `Meteor.call()` requests.
 
 Usage example:
 
@@ -11,25 +13,51 @@ import { useMeteorCall } from 'react-meteor-method-hooks';
 const MyComponent = () => {
 
   const [
-    calculateSomething, 
-    calculateSomethingLoading, 
-    calculateSomethingError, 
+    calculateSomething,
+    calculateSomethingLoading,
+    calculateSomethingError,
     calculateSomethingResult
   ] = useMeteorCall(
     'calculateSomethingMethodName',
-    {},
-    (error, result) => {
-      if (error) {
-        alert(error.reason);
-      } else {
-        console.log(result);
-      }
+    {
+      /** Callback to be executed after the method is called */
+      cb: (error, result) => {
+        if (error) {
+          alert(error.reason);
+        } else {
+          console.log(result);
+        }
+      },
+
+      /** Validate params before handler execution */
+      validate: (...params) => {
+        const param = params[0];
+
+        return param.methodParam === 'Test string';
+      },
+      /** Transform params after validation before handler execution */
+      transform: (...params) => {
+        const param = params[0];
+
+        return [{ ...param, methodParam: 'Transformed string' }];
+      },
+
+      /** Forces to use Meteor.call() instead of Meteor.callAsync() */
+      forceSyncCall: true,
+      /** Adds some logging in console */
+      logging: true,
+      /**
+       * By default the package logs console.error for all incoming errors
+       * The setting disables such logs
+       */
+      suppressErrorLogging: true
     },
+    { methodParam: 'Test string' },
   );
 
   return (
-    <button 
-      onClick={calculateSomething} 
+    <button
+      onClick={calculateSomething}
       disabled={calculateSomethingLoading}
     >
       Calculate

example/.gitignore

@@ -0,0 +1 @@
+node_modules/

example/.meteor/.finished-upgraders

@@ -0,0 +1,19 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
+1.4.3-split-account-service-packages
+1.5-add-dynamic-import-package
+1.7-split-underscore-from-meteor-base
+1.8.3-split-jquery-from-blaze

example/.meteor/.gitignore

@@ -0,0 +1 @@
+local

example/.meteor/.id

@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+mwteyo9y63m.nsvo9ukypcz7

example/.meteor/packages

@@ -0,0 +1,23 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-base@1.5.1             # Packages every Meteor app needs to have
+mobile-experience@1.1.1       # Packages for a great mobile UX
+mongo@1.16.10                   # The database Meteor supports right now
+reactive-var@1.0.12            # Reactive variable for tracker
+
+standard-minifier-css@1.9.2   # CSS minifier run for production mode
+standard-minifier-js@2.8.1    # JS minifier run for production mode
+es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
+ecmascript@0.16.8              # Enable ECMAScript2015+ syntax in app code
+typescript@4.9.5              # Enable TypeScript syntax in .ts and .tsx modules
+shell-server@0.5.0            # Server-side component of the `meteor shell` command
+hot-module-replacement@0.5.3  # Update client in development without reloading the page
+
+
+static-html@1.3.2             # Define static page content in .html files
+react-meteor-data       # React higher-order component for reactively tracking Meteor data
+zodern:types            # Pull in type declarations from other Meteor packages

example/.meteor/platforms

@@ -0,0 +1,2 @@
+server
+browser

example/.meteor/release

@@ -0,0 +1 @@
+METEOR@2.16

example/.meteor/versions

@@ -0,0 +1,72 @@
+allow-deny@1.1.1
+autoupdate@1.8.0
+babel-compiler@7.10.5
+babel-runtime@1.5.1
+base64@1.0.12
+binary-heap@1.0.11
+blaze-tools@1.1.3
+boilerplate-generator@1.7.2
+caching-compiler@1.2.2
+caching-html-compiler@1.2.1
+callback-hook@1.5.1
+check@1.4.1
+ddp@1.4.1
+ddp-client@2.6.2
+ddp-common@1.4.1
+ddp-server@2.7.1
+diff-sequence@1.1.2
+dynamic-import@0.7.3
+ecmascript@0.16.8
+ecmascript-runtime@0.8.1
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
+ejson@1.1.3
+es5-shim@4.8.0
+fetch@0.1.4
+geojson-utils@1.0.11
+hot-code-push@1.0.4
+hot-module-replacement@0.5.3
+html-tools@1.1.3
+htmljs@1.1.1
+id-map@1.1.1
+inter-process-messaging@0.1.1
+launch-screen@2.0.0
+logging@1.3.4
+meteor@1.11.5
+meteor-base@1.5.1
+minifier-css@1.6.4
+minifier-js@2.8.0
+minimongo@1.9.4
+mobile-experience@1.1.1
+mobile-status-bar@1.1.0
+modern-browsers@0.1.10
+modules@0.20.0
+modules-runtime@0.13.1
+modules-runtime-hot@0.14.2
+mongo@1.16.10
+mongo-decimal@0.1.3
+mongo-dev-server@1.1.0
+mongo-id@1.0.8
+npm-mongo@4.17.2
+ordered-dict@1.1.0
+promise@0.12.2
+random@1.2.1
+react-fast-refresh@0.2.8
+react-meteor-data@2.7.2
+reactive-var@1.0.12
+reload@1.3.1
+retry@1.1.0
+routepolicy@1.1.1
+shell-server@0.5.0
+socket-stream-client@0.5.2
+spacebars-compiler@1.3.1
+standard-minifier-css@1.9.2
+standard-minifier-js@2.8.1
+static-html@1.3.2
+templating-tools@1.2.2
+tracker@1.3.3
+typescript@4.9.5
+underscore@1.6.1
+webapp@1.13.8
+webapp-hashing@1.1.1
+zodern:types@1.0.13

example/client/main.css

@@ -0,0 +1,4 @@
+body {
+  padding: 10px;
+  font-family: sans-serif;
+}

example/client/main.html

@@ -0,0 +1,8 @@
+<head>
+  <title>example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <div id="react-target"></div>
+</body>

example/client/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Meteor } from 'meteor/meteor';
+import { App } from '/imports/ui/App';
+
+Meteor.startup(() => {
+  const container = document.getElementById('react-target');
+  const root = createRoot(container!);
+  root.render(<App />);
+});

example/imports/api/links.ts

@@ -0,0 +1,10 @@
+import { Mongo } from 'meteor/mongo';
+
+export interface Link {
+  _id?: string;
+  title: string;
+  url: string;
+  createdAt: Date;
+}
+
+export const LinksCollection = new Mongo.Collection<Link>('links');

example/imports/ui/App.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect } from 'react';
+
+import { useMeteorCall } from './react-meteor-method-hooks/useMeteorCall';
+
+export const App = () => {
+  const [
+    methodWithResult,
+    methodWithResultLoading,
+    methodWithResultError,
+    methodWithResultResult,
+  ] = useMeteorCall(
+    'methodWithResult',
+    {
+      cb: (error, result) => {
+        console.log('methodWithResult callback', { error, result });
+      },
+      validate: (...params) =>
+        params.every((param) => typeof param === 'string'),
+      transform: (...params) => params.map((p, i) => `${i + 1}-${p}`),
+      forceSyncCall: false,
+      logging: false,
+      suppressErrorLogging: false,
+    },
+    'one',
+    'two',
+    'three'
+  );
+
+  const [
+    methodWithError,
+    methodWithErrorLoading,
+    methodWithErrorError,
+    methodWithErrorResult,
+  ] = useMeteorCall('methodWithError', {
+    cb: (error, result) => {
+      console.log('methodWithError callback', { error, result });
+    },
+    forceSyncCall: false,
+    logging: true,
+    suppressErrorLogging: false,
+  });
+
+  useEffect(() => {
+    methodWithResult();
+    methodWithError();
+  }, []);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      // methodWithResult('one', 'two', 'three');
+      // methodWithResult();
+      // methodWithResult({});
+      methodWithResult({ customParam: true });
+    }, 15000);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  useEffect(() => {
+    console.log({
+      methodWithResultLoading,
+      methodWithResultError,
+      methodWithResultResult,
+      methodWithErrorLoading,
+      methodWithErrorError,
+      methodWithErrorResult,
+    });
+  }, [
+    methodWithResultLoading,
+    methodWithResultError,
+    methodWithResultResult,
+    methodWithErrorLoading,
+    methodWithErrorError,
+    methodWithErrorResult,
+  ]);
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <div>
+        <h4>methodWithResult</h4>
+        <pre>
+          {JSON.stringify(
+            {
+              methodWithResultLoading,
+              methodWithResultError,
+              methodWithResultResult,
+            },
+            undefined,
+            2
+          )}
+        </pre>
+      </div>
+      <div>
+        <h4>methodWithError</h4>
+        <pre>
+          {JSON.stringify(
+            {
+              methodWithErrorLoading,
+              methodWithErrorError,
+              methodWithErrorResult,
+            },
+            undefined,
+            2
+          )}
+        </pre>
+      </div>
+    </div>
+  );
+};

example/imports/ui/react-meteor-method-hooks/types.d.ts

@@ -0,0 +1,38 @@
+export type UseMeteorCallHookConfig = {
+  /** Callback to be executed after the method is called */
+  cb?: (error: object | undefined, result: any) => void;
+
+  /** Validate params before handler execution */
+  validate?: (...params: any[]) => boolean;
+  /** Transform params after validation before handler execution */
+  transform?: (...params: any[]) => any[];
+
+  /** Forces to use Meteor.call() instead of Meteor.callAsync() */
+  forceSyncCall?: boolean;
+  /** Adds some logging in console */
+  logging?: boolean;
+  /**
+   * By default the package logs console.error for all incoming errors
+   * The setting disables such logs
+   */
+  suppressErrorLogging?: boolean;
+};
+
+export type UseMeteorCallHookResult = [
+  methodHandler: (...params: any[]) => Promise<any>,
+  loading: boolean,
+  error: object | undefined,
+  result: any
+];
+
+export type UseMeteorCallHookState = {
+  loading: boolean;
+  error?: object;
+  result: any;
+};
+
+export function useMeteorCall(
+  methodName: string,
+  meteorCallHookConfig?: UseMeteorCallHookConfig,
+  ...methodParams: any[]
+): UseMeteorCallHookResult;