underpost 3.1.2 → 3.2.0

package/src/client/components/core/AppStore.js

@@ -0,0 +1,69 @@
+/**
+ * Core per-app state store for WebSocket channel data.
+ *
+ * @module client/core/AppStore
+ * @namespace AppStore
+ */
+
+/**
+ * @class AppStore
+ * @classdesc Per-app singleton state store for WebSocket channel data and authenticated user state.
+ *
+ * Usage: `AppStoreX.Data.user.main.model.user` — the authenticated user object.
+ * `AppStoreX.Data` keys (`chat`, `mailer`, `stream`, etc.) — channel definitions for `SocketIo.Init`.
+ * @memberof AppStore
+ */
+class AppStore {
+  /**
+   * Channel data map, keyed by channel name (e.g. `user`, `chat`, `mailer`).
+   * The `user` channel always contains `{ main: { model: { user: { _id: '' } } } }`.
+   *
+   * @type {Object.<string, Object>}
+   */
+  Data;
+
+  /** @private @type {function(): Object} */
+  #initialStateFactory;
+
+  /**
+   * Creates a new AppStore instance.
+   *
+   * @param {function(): Object} initialStateFactory - Factory function returning the initial data shape.
+   *   Must return at least `{ user: { main: { model: { user: { _id: '' } } } } }`.
+   */
+  constructor(initialStateFactory) {
+    this.#initialStateFactory = initialStateFactory;
+    this.Data = initialStateFactory();
+  }
+
+  /**
+   * Resets `Data` to its initial state.
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.Data = this.#initialStateFactory();
+  }
+
+  /**
+   * Creates an AppStore with the standard channel layout.
+   * Always includes `user`, `chat`, and `mailer` channels.
+   *
+   * @static
+   * @param {...string} extraChannels - Additional channel names (e.g. `'stream'`).
+   * @returns {AppStore}
+   */
+  static create(...extraChannels) {
+    return new AppStore(() => {
+      const state = {
+        user: { main: { model: { user: { _id: '' } } } },
+        chat: {},
+        mailer: {},
+      };
+      for (const ch of extraChannels) state[ch] = {};
+      return state;
+    });
+  }
+}
+
+export { AppStore };

package/src/client/components/core/CalendarCore.js

@@ -25,7 +25,7 @@ const eventDateFactory = (event) =>
 const CalendarCore = {
   RenderStyle: async function () {},
   Data: {},
-  Render: async function (options = { idModal: '', Elements: {}, hiddenDates: [] }) {
+  Render: async function (options = { idModal: '', appStore: {}, hiddenDates: [] }) {
     this.Data[options.idModal] = {
       data: [],
       originData: [],
@@ -49,7 +49,7 @@ const CalendarCore = {
         this.Data[options.idModal].filesData = [];
         this.Data[options.idModal].originData = newInstance(resultData);
         this.Data[options.idModal].data = resultData.map((o) => {
-          if (o.creatorUserId && options.Elements.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
+          if (o.creatorUserId && options.appStore.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
           o.id = o._id;
 
           this.Data[options.idModal].filesData.push({});

package/src/client/components/core/Docs.js

@@ -24,11 +24,18 @@ const Docs = {
       html: async () => {
         if (docData.renderHtml) return await docData.renderHtml();
         return html`
+          <style>
+            .iframe-${ModalId} {
+              width: 100%;
+              border: none;
+              background: white;
+              display: block;
+            }
+          </style>
           <iframe
             class="in iframe-${ModalId}"
-            style="width: 100%; border: none; background: white; display: block"
             src="${docData.url()}"
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
           >
           </iframe>
         `;

package/src/client/components/core/DropDown.js

@@ -1,4 +1,6 @@
+import { Badge } from './Badge.js';
 import { getId, newInstance } from './CommonJs.js';
+import { darkTheme, ThemeEvents } from './Css.js';
 import { Input } from './Input.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
@@ -15,17 +17,75 @@ const DropDown = {
       originData: options.data ? newInstance(options.data) : [],
     };
 
+    const _renderSelectedBadges = async () => {
+      if (options.type !== 'checkbox') return;
+      const container = s(`.dropdown-current-${id}`);
+      if (!container) return;
+      const selected = Object.entries(DropDown.Tokens[id].oncheckvalues);
+      if (selected.length === 0) {
+        htmls(`.dropdown-current-${id}`, '');
+        return;
+      }
+      let badgesHtml = '';
+      for (const [key, val] of selected) {
+        badgesHtml += html`<span class="inl" style="display:inline-flex;align-items:center;margin:2px;">
+          ${await Badge.Render({
+            text: html`<i class="fa-solid fa-tag" style="margin-right:3px;font-size:9px;"></i>${val.display}`,
+            style: {
+              background: darkTheme ? '#335' : '#cde',
+              color: darkTheme ? '#adf' : '#246',
+              'border-radius': '4px',
+              'font-size': '11px',
+              height: 'auto',
+              'min-width': 'auto',
+            },
+          })}
+          <span
+            class="dd-badge-del-${id}"
+            data-key="${key}"
+            style="cursor:pointer;padding:0 4px;font-size:14px;color:${darkTheme ? '#f88' : '#a00'};line-height:1;"
+            >&times;</span
+          >
+        </span>`;
+      }
+      htmls(`.dropdown-current-${id}`, badgesHtml);
+      container.querySelectorAll(`.dd-badge-del-${id}`).forEach((btn) => {
+        btn.onclick = async (e) => {
+          e.stopPropagation();
+          const key = btn.dataset.key;
+          delete DropDown.Tokens[id].oncheckvalues[key];
+          const dataItem = options.data.find((d) => d.value.trim().replaceAll(' ', '-') === key);
+          if (dataItem) dataItem.checked = false;
+          if (ToggleSwitch.Tokens[`checkbox-role-${key}`]) {
+            const checkbox = s(`.checkbox-role-${key}-checkbox`);
+            if (checkbox && checkbox.checked) ToggleSwitch.Tokens[`checkbox-role-${key}`].click();
+          }
+          DropDown.Tokens[id].value = Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data);
+          s(`.${id}`).value = DropDown.Tokens[id].value;
+          await _renderSelectedBadges();
+        };
+      });
+    };
+    DropDown.Tokens[id]._renderSelectedBadges = _renderSelectedBadges;
+
     options.data.push({
       value: 'reset',
       display: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
       onClick: () => {
         console.log('DropDown onClick', this.value);
         if (options && options.resetOnClick) options.resetOnClick();
-        if (options && options.type === 'checkbox')
-          for (const opt of DropDown.Tokens[id].value) {
-            s(`.dropdown-option-${id}-${opt}`).click();
+        if (options && options.type === 'checkbox') {
+          if (options.serviceProvider) {
+            DropDown.Tokens[id].oncheckvalues = {};
+            DropDown.Tokens[id].value = [];
+            htmls(`.dropdown-current-${id}`, '');
+            htmls(`.${id}-render-container`, '');
+          } else {
+            for (const opt of DropDown.Tokens[id].value) {
+              s(`.dropdown-option-${id}-${opt}`).click();
+            }
           }
-        else this.Tokens[id].value = undefined;
+        } else this.Tokens[id].value = undefined;
       },
     });
 
@@ -52,7 +112,7 @@ const DropDown = {
         const i = index;
         const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
         setTimeout(() => {
-          const onclick = (e) => {
+          const onclick = async (e) => {
             if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
               s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
             }
@@ -72,22 +132,18 @@ const DropDown = {
             if (optionData.value !== 'close') {
               if (optionData.value !== 'reset') {
                 if (options.type === 'checkbox') {
-                  // const _instanValue = data
-                  //   .filter((d) => d.checked)
-                  //   .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
-                  //   .join('');
-                  const value = Object.keys(DropDown.Tokens[id].oncheckvalues);
-                  htmls(
-                    `.dropdown-current-${id}`,
-                    value.map((v) => DropDown.Tokens[id].originData.find((_v) => _v.value === v).display),
-                  );
+                  _renderSelectedBadges();
                 } else {
                   htmls(`.dropdown-current-${id}`, optionData.display);
                 }
               } else htmls(`.dropdown-current-${id}`, '');
 
               this.Tokens[id].value =
-                options.type === 'checkbox' ? data.filter((d) => d.checked).map((d) => d.data) : optionData.data;
+                options.type === 'checkbox'
+                  ? options.serviceProvider
+                    ? Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data)
+                    : data.filter((d) => d.checked).map((d) => d.data)
+                  : optionData.data;
 
               console.warn('current value dropdown id:' + id, this.Tokens[id].value);
 
@@ -126,7 +182,11 @@ const DropDown = {
                       },
                       checked: () => {
                         optionData.checked = true;
-                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {};
+                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {
+                          data: optionData.data,
+                          display: optionData.display,
+                          value: optionData.value,
+                        };
                       },
                     },
                   })}
@@ -153,6 +213,10 @@ const DropDown = {
       s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
       if (options && options.open) switchOptionsPanel();
 
+      if (options.type === 'checkbox') {
+        ThemeEvents[`dropdown-badge-${id}`] = () => _renderSelectedBadges();
+      }
+
       const dropDownSearchHandle = async () => {
         const _data = [];
         if (!s(`.search-box-${id}`)) return;
@@ -160,6 +224,12 @@ const DropDown = {
         let _value = s(`.search-box-${id}`).value.toLowerCase();
 
         for (const objData of options.data) {
+          if (
+            options.excludeSelected &&
+            options.type === 'checkbox' &&
+            DropDown.Tokens[id].oncheckvalues[objData.value.trim().replaceAll(' ', '-')]
+          )
+            continue;
           const objValue = objData.value.toLowerCase();
           if (
             objValue.match(_value) ||
@@ -186,7 +256,49 @@ const DropDown = {
         }
       };
 
-      s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+      if (options.serviceProvider) {
+        let serviceSearchTimeout = null;
+        s(`.search-box-${id}`).oninput = () => {
+          clearTimeout(serviceSearchTimeout);
+          const q = s(`.search-box-${id}`).value.trim();
+          if (!q) {
+            htmls(`.${id}-render-container`, '');
+            return;
+          }
+          serviceSearchTimeout = setTimeout(async () => {
+            try {
+              let results = await options.serviceProvider(q);
+              if (options.type === 'checkbox') {
+                if (options.excludeSelected) {
+                  const selectedKeys = Object.keys(DropDown.Tokens[id].oncheckvalues);
+                  results = results.filter((item) => !selectedKeys.includes(item.value.trim().replaceAll(' ', '-')));
+                }
+                results = results.map((item) => {
+                  const vd = item.value.trim().replaceAll(' ', '-');
+                  return { ...item, checked: !!DropDown.Tokens[id].oncheckvalues[vd] };
+                });
+              }
+              const controlItems = options.data.filter((d) => d.value === 'reset' || d.value === 'close');
+              const allData = [...results, ...controlItems];
+              if (allData.length > controlItems.length) {
+                const { render } = await _render(allData);
+                htmls(`.${id}-render-container`, render);
+              } else {
+                htmls(
+                  `.${id}-render-container`,
+                  html` <div class="inl" style="padding: 10px; color: red">
+                    <i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}
+                  </div>`,
+                );
+              }
+            } catch (e) {
+              console.error('DropDown serviceProvider error:', e);
+            }
+          }, 200);
+        };
+      } else {
+        s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+      }
 
       // Not use onblur generate bug on input toggle
       // s(`.search-box-${id}`).onblur = dropDownSearchHandle;

package/src/client/components/core/Keyboard.js

@@ -3,8 +3,8 @@ import { cap, getId } from './CommonJs.js';
 const Keyboard = {
   ActiveKey: {},
   Event: {},
-  Init: async function (options = { callBackTime: 50 }) {
-    const { callBackTime } = options;
+  Init: async function () {
+    const callBackTime = 45;
     window.onkeydown = (e = new KeyboardEvent()) => {
       this.ActiveKey[e.key] = true;
       // e.composedPath()

package/src/client/components/core/LogIn.js

@@ -10,7 +10,7 @@ import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { htmls, s } from './VanillaJs.js';
-import { Webhook } from './Webhook.js';
+import { WebhookProvider } from './Webhook.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -31,7 +31,7 @@ const LogIn = {
 
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (!user || user.role === 'guest') return;
-    await Webhook.register({ user });
+    await WebhookProvider.register({ user });
     if (s(`.session`))
       htmls(
         `.session`,

package/src/client/components/core/LogOut.js

@@ -3,13 +3,13 @@ import { BtnIcon } from './BtnIcon.js';
 import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
-import { Webhook } from './Webhook.js';
+import { WebhookProvider } from './Webhook.js';
 import { NotificationManager } from './NotificationManager.js';
 
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    await Webhook.unregister();
+    await WebhookProvider.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))
       htmls(

package/src/client/components/core/Modal.js

@@ -1357,7 +1357,6 @@ const Modal = {
                   class: 'hide',
                   style: {
                     // overflow: 'hidden',
-                    background: 'none',
                     resize: 'none',
                     'min-width': `${minWidth}px`,
                     'z-index': 5,

package/src/client/components/core/Panel.js

@@ -453,7 +453,6 @@ const Panel = {
 
                         tagRender += await Badge.Render({
                           text: tag,
-                          style: { color: tagColor },
                           classList: 'inl panel-tag-clickable',
                           style: {
                             margin: '3px',

package/src/client/components/core/PanelForm.js

@@ -85,7 +85,7 @@ const PanelForm = {
     options = {
       idPanel: '',
       defaultUrlImage: '',
-      Elements: {},
+      appStore: {},
       parentIdModal: undefined,
       route: 'home',
       htmlFormHeader: async () => '',
@@ -97,7 +97,7 @@ const PanelForm = {
       showCreatorProfile: false,
     },
   ) {
-    const { idPanel, defaultUrlImage, Elements } = options;
+    const { idPanel, defaultUrlImage, appStore } = options;
 
     // Authenticated users don't need 'public' tag - they see all their own posts
     // Only include 'public' for unauthenticated users (handled by backend)
@@ -458,10 +458,10 @@ const PanelForm = {
             baseNewDoc.mdFileId = hasMdContent
               ? `<div class="markdown-content">${marked.parse(data.mdFileId)}</div>`
               : null;
-            baseNewDoc.userId = Elements.Data.user?.main?.model?.user?._id;
+            baseNewDoc.userId = appStore.Data.user?.main?.model?.user?._id;
 
             // Ensure profileImageId is properly formatted as object with _id property
-            const profileImageIdValue = Elements.Data.user?.main?.model?.user?.profileImageId;
+            const profileImageIdValue = appStore.Data.user?.main?.model?.user?.profileImageId;
             const formattedProfileImageId = profileImageIdValue
               ? typeof profileImageIdValue === 'string'
                 ? { _id: profileImageIdValue }
@@ -469,9 +469,9 @@ const PanelForm = {
               : null;
 
             baseNewDoc.userInfo = {
-              username: Elements.Data.user?.main?.model?.user?.username,
-              email: Elements.Data.user?.main?.model?.user?.email,
-              _id: Elements.Data.user?.main?.model?.user?._id,
+              username: appStore.Data.user?.main?.model?.user?.username,
+              email: appStore.Data.user?.main?.model?.user?.email,
+              _id: appStore.Data.user?.main?.model?.user?._id,
               profileImageId: formattedProfileImageId,
             };
             baseNewDoc.tools = true;
@@ -737,8 +737,8 @@ const PanelForm = {
                 tools:
                   documentObject.userId &&
                   typeof documentObject.userId === 'object' &&
-                  Elements.Data.user?.main?.model?.user?._id &&
-                  documentObject.userId._id === Elements.Data.user.main.model.user._id,
+                  appStore.Data.user?.main?.model?.user?._id &&
+                  documentObject.userId._id === appStore.Data.user.main.model.user._id,
                 _id: documentObject._id,
                 totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
                 isPublic: documentObject.isPublic || false,
@@ -772,8 +772,8 @@ const PanelForm = {
                 tools:
                   documentObject.userId &&
                   typeof documentObject.userId === 'object' &&
-                  Elements.Data.user?.main?.model?.user?._id &&
-                  documentObject.userId._id === Elements.Data.user.main.model.user._id,
+                  appStore.Data.user?.main?.model?.user?._id &&
+                  documentObject.userId._id === appStore.Data.user.main.model.user._id,
                 _id: documentObject._id,
                 totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
                 isPublic: documentObject.isPublic || false,
@@ -867,10 +867,10 @@ const PanelForm = {
         try {
           const cid = getQueryParams().cid ? getQueryParams().cid : '';
           const forceUpdate =
-            Elements.Data.user.main.model &&
-            Elements.Data.user.main.model.user &&
-            Elements.Data.user.main.model.user._id &&
-            lastUserId !== Elements.Data.user.main.model.user._id;
+            appStore.Data.user.main.model &&
+            appStore.Data.user.main.model.user &&
+            appStore.Data.user.main.model.user._id &&
+            lastUserId !== appStore.Data.user.main.model.user._id;
 
           logger.warn(
             {
@@ -878,8 +878,8 @@ const PanelForm = {
               cid,
               forceUpdate,
             },
-            Elements.Data.user?.main?.model?.user
-              ? JSON.stringify(Elements.Data.user.main.model.user, null, 4)
+            appStore.Data.user?.main?.model?.user
+              ? JSON.stringify(appStore.Data.user.main.model.user, null, 4)
               : 'No user data',
           );
 
@@ -889,8 +889,8 @@ const PanelForm = {
 
           if (loadingGetData || (normalizedLastCid === normalizedCid && !forceUpdate)) return;
           loadingGetData = true;
-          lastUserId = Elements.Data.user?.main?.model?.user?._id
-            ? newInstance(Elements.Data.user.main.model.user._id)
+          lastUserId = appStore.Data.user?.main?.model?.user?._id
+            ? newInstance(appStore.Data.user.main.model.user._id)
             : null;
           lastCid = cid;
 

package/src/client/components/core/RichText.js

@@ -30,10 +30,9 @@ const RichText = {
     return html` <style>
         .md-container {
           background: white;
-          color: black;
         }
         .md-container button {
-          color: black !important;
+          color: black;
         }
       </style>
       <div class="in md-container"><textarea class="${id}"></textarea></div>`;

package/src/client/components/core/SocketIo.js

@@ -1,25 +1,81 @@
+/**
+ * Client-side WebSocket provider using Socket.IO.
+ * Manages a singleton socket connection, channel registration, and event dispatching.
+ *
+ * @module client/core/SocketIo
+ * @namespace SocketIoProvider
+ */
 import { io } from 'socket.io/client-dist/socket.io.esm.min.js';
 import { loggerFactory } from './Logger.js';
 import { getWsBasePath, getWsBaseUrl } from '../../services/core/core.service.js';
 
 const logger = loggerFactory(import.meta);
 
-const SocketIo = {
-  Event: {
+/**
+ * @class SocketIoProvider
+ * @classdesc Provides static methods for managing a singleton Socket.IO client connection,
+ * channel event dispatching, and message emission.
+ * @memberof SocketIoProvider
+ */
+class SocketIoProvider {
+  /**
+   * Event callback registry, keyed by channel name → unique callback ID → handler function.
+   * Built-in channels: `connect`, `connect_error`, `disconnect`.
+   *
+   * @static
+   * @type {Object.<string, Object.<string, function>>}
+   */
+  static Event = {
     connect: {},
     connect_error: {},
     disconnect: {},
-  },
-  /** @type {import('socket.io').Socket} */
-  socket: null,
-  Emit: function (channel = '', payload = {}) {
+  };
+
+  /**
+   * The active Socket.IO client socket instance.
+   *
+   * @static
+   * @type {import('socket.io-client').Socket|null}
+   */
+  static socket = null;
+
+  /**
+   * The current WebSocket host URL.
+   *
+   * @static
+   * @type {string|undefined}
+   */
+  static host;
+
+  /**
+   * Emits a JSON-serialized payload to the server on the specified channel.
+   *
+   * @static
+   * @param {string} [channel=''] - The channel/event name to emit on.
+   * @param {Object} [payload={}] - The data to send.
+   * @returns {void}
+   */
+  static Emit(channel = '', payload = {}) {
     try {
       this.socket.emit(channel, JSON.stringify(payload));
     } catch (error) {
       logger.error(error);
     }
-  },
-  Init: async function (options) {
+  }
+
+  /**
+   * Initializes (or re-initializes) the Socket.IO connection.
+   * Disconnects any existing socket, creates a new connection, and registers
+   * built-in event listeners and custom channels.
+   *
+   * @static
+   * @async
+   * @param {Object} options - Connection options.
+   * @param {string} [options.host] - Override WebSocket host URL.
+   * @param {Object.<string, Object>} [options.channels] - Channel definitions to register listeners for.
+   * @returns {Promise<void>}
+   */
+  static async Init(options) {
     if (this.socket) this.socket.disconnect();
     const path = getWsBasePath();
     this.host = options.host ? options.host : getWsBaseUrl({ wsBasePath: '' });
@@ -29,24 +85,10 @@ const SocketIo = {
     });
     const connectOptions = {
       path: path === '/' ? undefined : path,
-      // auth: {
-      //   token: '',
-      // },
-      // query: {
-      //   'my-key': 'my-value',
-      // },
-      // forceNew: true,
-      // reconnectionAttempts: 'Infinity',
-      // timeout: 10000,
-      // autoConnect: 5000,
-      // Custom auth socket io credentials:
       withCredentials: true,
-      extraHeaders: {
-        //   "my-custom-header": "abcd"
-      },
+      extraHeaders: {},
       transports: ['websocket', 'polling', 'flashsocket'],
     };
-    // logger.error(`connect options:`, JSON.stringify(connectOptions, null, 4));
     this.socket = io(this.host, connectOptions);
 
     this.socket.on('connect', () => {
@@ -65,17 +107,28 @@ const SocketIo = {
     });
 
     if (options && 'channels' in options) this.setChannels(options.channels);
-  },
-  setChannels: function (channels) {
+  }
+
+  /**
+   * Registers socket listeners for each channel key, routing incoming messages
+   * to all registered callbacks in `Event[channel]`.
+   *
+   * @static
+   * @param {Object.<string, Object>} channels - Channel definitions keyed by channel name.
+   * @returns {void}
+   */
+  static setChannels(channels) {
     Object.keys(channels).map((type) => {
       logger.info(`load chanel`, type);
       this.Event[type] = {};
       this.socket.on(type, (...args) => {
-        // logger.info(`event: ${type} | ${JSON.stringify(args, null, 4)}`);
         Object.keys(this.Event[type]).map((keyEvent) => this.Event[type][keyEvent](args));
       });
     });
-  },
-};
+  }
+}
+
+/** @type {SocketIoProvider} Backward compatibility alias. */
+const SocketIo = SocketIoProvider;
 
-export { SocketIo };
+export { SocketIoProvider, SocketIo };