Version 1.2.1

README.md

@@ -7,7 +7,8 @@
 [![GitHub license](https://img.shields.io/github/license/react-gx/gx)](https://github.com/react-gx/gx/blob/main/LICENSE)
 
 
-![logo](./assets/logo.png)
+![logo](https://lh4.googleusercontent.com/k2V9Oh-tfABeDjwovtMUqE-lt6cULH0c1EFgb-XNTFh1lt5DVGTGhl3Ty3fMF3xhCBY=w2400)
+
 
 This library aims to provide you an `easy` and `fast` way to set up and manage the global state of your **`react`** application.
 
@@ -123,7 +124,7 @@ For structuring your code very well you have to follow these steps.
 
 Here is the result.
 
-![structure](./assets/structure.png)
+![structure](https://lh3.googleusercontent.com/_z_JTStNFHyXTmjz4GrcphAN6BC_CeKYxN1zwyxWGC-ujpIcVTqthesXT6Lfe8b4t1M=w2400)
 
 ### Second step: Creating your signals.
 
@@ -184,19 +185,19 @@ export default App;
 
 ### Fifth step: Using your signals.
 
-Create a component called `Counter` inside the Counter.js file. Then import two hooks from `gx` called `useSignal` and `useAction` like follow.
+Create a component called `Counter` inside the Counter.js file. Then import two hooks from `gx` called `useSignal` and `useActions` like follow.
 
 
 ```js
 import React from "react";
-import { useSignal, useAction } from "@dilane3/gx";
+import { useSignal, useActions } from "@dilane3/gx";
 
 function Counter() {
   // State
   const counter = useSignal("counter");
 
   // Actions
-  const { increment, decrement } = useAction("counter");
+  const { increment, decrement } = useActions("counter");
 
   return (
     <div>
@@ -278,30 +279,29 @@ This hook takes the name of the signal as a parameter and returns the state cont
 const counter = useSignal("counter");
 ```
 
-### `useAction`
+### `useActions`
 
 This hook takes the name of the signal as a the first parameter and returns an object that contains all the actions of this signal.
 
 ```js
-const { increment, decrement } = useAction("counter");
+const { increment, decrement } = useActions("counter");
 ```
 
-**`New in version 1.1.0`**
-
-Note that, the `useAction` hook can accept a second parameter which is the list of actions that you want to use. If you don't specify the second parameter, all the actions of the signal will be returned.
+### `useAction`
 
-There is another thing that you have to know.
-If you provide only one action as a second parameter, the hook will return only the action itself and not an object that contains the action.
+This hook takes the name of the signal as the first parameter and the name of the action as the second one and then return that action.
 
 ```js
 const increment = useAction("counter", "increment");
 ```
 
-And if you provide more than one action, the hook will return an object that contains all the actions provided.
+See more on the [documentation](https://gx.dilane3.com/docs/guide/hooks/useAction)
 
-```js
-const { increment, decrement } = useAction("counter", "increment", "decrement");
-```
+## TypeScript Support
+
+`GX` support TypeScript, so that you can use it directly into your application.
+
+See how to integrate it on the [documentation](https://gx.dilane3.com/docs/typescript) website
 
 ## License
 

dist/hooks/types.d.ts

@@ -1,3 +1,3 @@
-export type Action = {
+export type Actions = {
     [key: string]: (payload: any) => void;
 };

dist/hooks/useAction.d.ts

@@ -1,4 +1,2 @@
-declare const useAction: (signalName: string, ...actions: string[]) => ((payload: any) => void) | {
-    [key: string]: (payload: any) => void;
-};
+declare const useAction: (signalName: string, action: string) => (payload: any) => void;
 export default useAction;

dist/hooks/useActions.d.ts

@@ -0,0 +1,3 @@
+import { Actions } from "./types";
+declare const useActions: (signalName: string, ...actions: string[]) => Actions;
+export default useActions;

dist/hooks/useSignal.d.ts

@@ -1,2 +1,2 @@
-declare const useSignal: (signalName: string) => any;
+declare const useSignal: <T = any>(signalName: string) => T;
 export default useSignal;

dist/index.d.ts

@@ -2,6 +2,7 @@ import createSignal from "./helpers/createSignal";
 import createStore from "./helpers/createStore";
 import GXProvider from "./providers";
 import useAction from "./hooks/useAction";
+import useActions from "./hooks/useActions";
 import useSignal from "./hooks/useSignal";
 export default GXProvider;
-export { createSignal, createStore, useAction, useSignal, };
+export { createSignal, createStore, useAction, useActions, useSignal, };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilane3/gx",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "private": false,
   "license": "MIT",
   "main": "dist/index.js",
@@ -23,6 +23,7 @@
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.4.2"
   },

src/hooks/types.ts

@@ -1,3 +1,3 @@
-export type Action = {
+export type Actions = {
   [key: string]: (payload: any) => void
 }

src/hooks/useAction.ts

@@ -1,80 +1,15 @@
-import { useContext, useState, useEffect } from "react";
-import GXContext from "../contexts";
-import { GXActionType } from "../contexts/types";
+import useActions from "./useActions";
 
-const useAction = (signalName: string, ...actions: string[]) => {
-  // Get Global Context
-  const { signals, dispatch } = useContext(GXContext);
+const useAction = (signalName: string, action: string) => {
+  if (!signalName || typeof signalName !== "string")
+    throw new Error("Provide a signalName as a first argument of useAction");
 
-  // Some handlers
+  if (!action || typeof action !== "string")
+    throw new Error("Provide an action as second argument of useAction");
 
-  /**
-   * Get actions of a signal
-   * @param signalName
-   * @returns
-   */
-  const handleGetActions = (signalName: string) => {
-    const signal = signals.find((signal) => signal.name === signalName);
+  const actions = useActions(signalName, action);
 
-    if (signal) {
-      if (!actions || actions.length === 0) return signal.actions;
-
-      const filteredActions : GXActionType<any>[] = [];
-
-      for (let action of actions) {
-        const actionName = `${signalName}/${action}`;
-
-        const retrievedAction = signal.actions.find((act) => act.type === actionName);
-
-        if (retrievedAction) filteredActions.push(retrievedAction);
-        else throw new Error(`Action ${actionName} not found`);
-      }
-
-      return filteredActions;
-    } else throw new Error(`Signal ${signalName} not found`);
-  };
-
-  const handleFormatActions = () => {
-    // Get actions
-    const nonFormattedActions = handleGetActions(signalName);
-
-    // Get number of actions
-    const numberOfActions = nonFormattedActions.length;
-
-    // Check if actions are only one
-    if (numberOfActions === 1) {
-      const action = nonFormattedActions[0];
-
-      // Return action as a function
-      return (payload: any) => {
-        dispatch({
-          type: action.type,
-          payload,
-        });
-      };
-    }
-
-    // If actions are more than one
-
-    // Formatted actions
-    const formattedActions: { [key: string]: (payload: any) => void } = {};
-
-    for (const action of nonFormattedActions) {
-      // Get action name
-      const actionName = action.type.split("/")[1];
-
-      formattedActions[actionName] = (payload: any) => {
-        dispatch({
-          type: action.type,
-          payload,
-        });
-      };
-    }
-
-    return formattedActions;
-  };
-
-  return handleFormatActions();
+  return Object.values(actions)[0];
 };
 
 export default useAction;