docs(openwrt-config-dashboard): add documentation for api cals to JSON-RPC openwrt (thymio2+)

Author: andresvcc

apps/openwrt-config-dashboard/src/hooks/useLuciRCPjsonClient/GettingStarded.stories.mdx

@@ -16,34 +16,12 @@ import { Meta, Description } from '@storybook/addon-docs'
 
 This document provides a detailed guide on using the React hook for managing the state of an XState machine. This hook allows interacting with a state machine defined using the XState library in React applications.
 
-## Imports and Configuration
+## Modules and Configurations
 
 The React hook for managing the state of the XState machine is used to connect React components with state machines defined in XState. First, we import the necessary functions and tools:
 
-```javascript
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
-import { useActor } from '@xstate/react';
-import { Actions, assign, createMachine, DoneInvokeEvent, interpret, send } from 'xstate';
-import { getLoginSid } from './fetchCalls/getLoginToken';
-import { getDevices } from './fetchCalls/getAllDevicesIP:Name';
-import { getWifiStatus } from './fetchCalls/getWifiStatus';
-import { getInternetStatus } from './fetchCalls/getInternetStatus';
-import { ContextData, Event, ServiceEvent, initialState } from '.';
-import { createClient, IGroup, INode, Variables } from '@mobsya-association/thymio-api';
-import { getWifiConfigFile } from './fetchCalls/getWifiConfigFile';
-import { getUptime } from './fetchCalls/getUptime';
-import { getIfStatus } from './fetchCalls/getIfstatus';
-import CryptoJS from 'crypto-js';
-```
-
 | Module or Function        | Description                                                                                                                                                                                                                                      |
 |---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `React`                   | Provides access to core React functions and components, allowing the creation of components and state management in React applications.                                                                                                      |
-| `createContext`           | Creates a React context, enabling data sharing between components without manually passing props through each level of the component tree.                                                                                                      |
-| `useContext`              | Allows accessing the value of the React context in a functional component, enabling consuming the context and using its value anywhere within the component.                                                                                 |
-| `useEffect`               | Enables executing side effects in React components, such as subscriptions to external data, DOM updates, and resource cleanup.                                                                                                                 |
-| `useRef`                  | Creates a mutable reference that persists throughout the component's lifecycle, primarily used for accessing DOM nodes or mutable values without causing additional re-renders.                                                             |
-| `useState`                | Adds local state to functional components in React, allowing declaring state variables within a functional component and updating them using the `setState` method.                                                                        |
 | `useActor`                | Provides access to XState actors in React components, allowing subscribing to changes in actor state and sending events to state machines.                                                                                                   |
 | `Actions`                 | Provides functions and utilities for defining actions within XState machines, representing operations performed in response to events.                                                                                                          |
 | `assign`                  | Defines an action that assigns values to properties of the state machine's context.                                                                                                                                                             |
@@ -319,6 +297,3 @@ export const useEmitter = () => {
 
 Overall, these custom hooks encapsulate the logic for accessing state data, obtaining the current state of the state machine, and sending events to the state machine. They provide convenient abstractions for interacting with the state machine within React components, promoting code reusability and maintainability.
 
-## Conclusion
-
-The React hook for managing the state of the XState machine provides an efficient and straightforward way to interact with state machines in React applications. By following this guide, developers can easily integrate state machine logic into their React components in an organized and efficient manner.

apps/openwrt-config-dashboard/src/hooks/useLuciRCPjsonClient/fetchCalls/getAllDevicesIP:Name.ts

@@ -1,7 +1,6 @@
 import { Sid } from '..';
 
 function matchesThymioPattern(str: string): boolean {
-  // Expresión regular para coincidir con el patrón 'Thymio-XXXXXX.lan'
   const pattern = /Thymio-[a-zA-Z0-9]+\.lan/;
   return !pattern.test(str);
 }
@@ -55,7 +54,6 @@ export async function getDevices({ sid }: { sid: Sid }): Promise<Array<any>> {
     id: device[1],
   }));
 
-  // fusione macs and devices by id key
   devices.forEach((device: { ip: string; id: string; mac: string; active: boolean }) => {
     const deviceByMac = macs?.find((mac: { mac: string; id: string }) => mac.id === device.id);
     if (device && deviceByMac) {

apps/openwrt-config-dashboard/src/hooks/useLuciRCPjsonClient/fetchCalls/getAllDevicesIP:Names.stories.mdx

@@ -12,7 +12,7 @@ import { Meta, Description } from '@storybook/addon-docs'
 
 # Get All Devices
 
-### Function: `getDevices`
+### API CALL: `getDevices`
 
 This function retrieves the devices connected to the Thymio2+ router, particularly tablets.
 

apps/openwrt-config-dashboard/src/hooks/useLuciRCPjsonClient/fetchCalls/getIfstatus.stories.mdx

@@ -12,7 +12,7 @@ import { Meta, Description } from '@storybook/addon-docs'
 
 # Get Network Status
 
-### Function: `getIfStatus`
+### API CALL: : `getIfStatus`
 
 This function retrieves the status of the network interface from the router.
 

apps/openwrt-config-dashboard/src/hooks/useLuciRCPjsonClient/fetchCalls/getInternetStatus.stories.mdx

@@ -0,0 +1,101 @@
+import { Meta, Description } from '@storybook/addon-docs'
+
+<Meta
+  title="HTTP CAlls/get internet status"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true }
+     },
+  }}
+/>
+
+# Get Internet Status
+
+### API CALL: getInternetStatus
+
+#### Overview
+The `getInternetStatus` function checks if the device has an active internet connection by attempting to reach Google's homepage. It returns a boolean value indicating whether the internet is accessible.
+
+#### Imports
+```javascript
+import axios, { AxiosRequestConfig } from 'axios';
+import { Sid } from '..';
+```
+- **axios**: Used for making HTTP requests.
+- **AxiosRequestConfig**: Type used for configuring the axios request.
+- **Sid**: A type imported from the parent directory, presumably representing session ID or similar credentials.
+
+#### Parameters
+- `sid`: A session identifier of type `Sid`, required to authenticate or manage the session context for the request.
+
+#### Returns
+- **Promise of boolean**: ```Promise<boolean>``` A promise that resolves to `true` if the internet is reachable, otherwise `false`.
+
+#### Function Logic
+1. **Prepare the Request:**
+   - The function constructs a JSON string that includes the command to check internet connectivity by using `wget` to quietly fetch Google's homepage.
+   - The command will print 'true' if the fetch is successful, and 'false' otherwise.
+
+   ```javascript
+   const data = JSON.stringify({
+     method: 'exec',
+     params: ["wget -q --spider http://www.google.com 2>/dev/null && echo 'true' || echo 'false'"],
+   });
+   ```
+
+2. **Configure the Request:**
+   - An axios configuration object is set up, specifying the HTTP method, URL endpoint, headers, data, and timeout for the request.
+
+   ```javascript
+   const config: AxiosRequestConfig = {
+     method: 'post',
+     url: '/cgi-bin/luci/rpc/sys',
+     headers: {
+       'Content-Type': 'application/json',
+     },
+     data: data,
+     timeout: 4000,
+   };
+   ```
+
+3. **Execute the Request and Handle Response:**
+   - The axios library is used to send the configured request asynchronously.
+   - If the HTTP response status is not 200, an error is thrown.
+   - The function checks if the response contains 'true' within the result field to determine internet connectivity.
+
+   ```javascript
+   const response = await axios(config);
+   if (response.status !== 200) {
+     throw new Error('Error fetching getWifiConfigFile');
+   }
+   return response.data.result.includes('true');
+   ```
+
+4. **Error Handling:**
+   - The catch block handles various errors such as axios cancellation due to timeout, server responses indicating failure, no response received, or other axios errors.
+   - In any error scenario, the function returns `false`, indicating no internet connectivity.
+
+   ```javascript
+   catch (error: any) {
+     if (axios.isCancel(error)) {
+       // Request was cancelled due to timeout
+       return false;
+     } else if (error.response) {
+       // Server responded with an error
+       return false;
+     } else if (error.request) {
+       // No response was received
+       return false;
+     } else {
+       // Other errors
+       console.log('Error:', error.message);
+     }
+     return false;
+   }
+   ```
+
+#### Usage Example
+```javascript
+const isConnected = await getInternetStatus({ sid: yourSessionId })
+```

apps/openwrt-config-dashboard/src/hooks/useLuciRCPjsonClient/fetchCalls/getInternetStatus.ts

@@ -2,7 +2,6 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { Sid } from '..';
 
 export async function getInternetStatus({ sid }: { sid: Sid }): Promise<boolean> {
-  // Preparar el cuerpo de la solicitud y las cabeceras
   const data = JSON.stringify({
     method: 'exec',
     params: ["wget -q --spider http://www.google.com 2>/dev/null && echo 'true' || echo 'false'"],
@@ -21,21 +20,17 @@ export async function getInternetStatus({ sid }: { sid: Sid }): Promise<boolean>
   try {
     const response = await axios(config);
 
-    // Verificar el estado de la respuesta
     if (response.status !== 200) {
       throw new Error('Error fetching getWifiConfigFile');
     }
 
     return response.data.result.includes('true');
   } catch (error: any) {
     if (axios.isCancel(error)) {
-      // console.log('La solicitud ha sido cancelada debido a un timeout');
       return false;
     } else if (error.response) {
-      // console.log('Error response:', error.response.data);
       return false;
     } else if (error.request) {
-      // console.log('No response received:', error.request);
       return false;
     } else {
       console.log('Error:', error.message);