@tracktor/shared-module

This package contains shared components, hooks and utilities for the Tracktor project.
This package use dependencies only with injection. This package is not intended to be used outside the Tracktor project.

• Installation
• Usage
• Inject dependencies with provider
• WebSocket

Installation

yarn add @tracktor/shared-module

Usage

import { InitializeAxiosConfig } from "@tracktor/shared-module";

Inject dependencies with provider

import { InjectDependenciesProvider, InitializeAxiosConfig } from "@tracktor/shared-module";

const App = () => (
  <InjectDependenciesProvider apiURL={import.meta.env.VITE_API_URL} libraries={{
    axios,
  }}>
    <InitializeAxiosConfig/>
    ...
  </InjectDependenciesProvider>
);

export default App;

Providers

| Module | Description | Dependencies | |-------------------------------|-------------------------------------------------------|--------------| | InjectDependenciesProvider | Inject dependencies for other shared component | - | | QueryClientProviderWithConfig | React Query provider with default config | React Query | | ChatProvider | Shared WebSocket chat connection provider via context | - |

Components

| Module | Type | Description | Dependencies | |------------------------|-----------------|-----------------------------------------------------|------------------------------------------------------------| | RequireAuth | React Component | Component for protected routing | Axios & react-router-dom | | GTMSendPageView | React Component | Send page view event to Google Tag Manager | @tracktor/react-google-tag-manager & react-router-dom | | InitializeAxiosConfig | React Component | Initialize Axios with custom default config options | Axios | | InitializeI18nConfig | React Component | Initialize i18n with custom config options | i18next & react-i18next & i18next-browser-languagedetector | | InitializeSentryConfig | React Component | Initialize Sentry | @sentry/react & react-router-dom | | InitializeMapBoxConfig | React Component | Initialize MapBox | mapbox-gl | | InitializeDaysJSConfig | React Component | Initialize DayJS | dayjs | | InitializeHubSpot | React Component | Initialize HubSpot chat widget | - | | PreloadErrorHandler | React Component | his component is used to handle preload error. | dayjs |

Hooks

| Module | Description | Dependencies | |---------------------|----------------------------------------------------------------------------|-------------------| | useAdapter | Hook with several adapter | - | | useAuth | Hook for authentification management | Axios | | useHubSpot | Hook to interact with the HubSpot chat widget (toggle, availability) | InitializeHubSpot | | useResponseError | This hook is used to print error messages from the API | i18next | | useInfiniteDataGrid | This hook is used to handle the infinite scroll of the DataGrid component. | - | | useCurrentLanguage | This get the current language of app | - | | useFilters | Hook to handle filter | - | | useChat | Hook to consume the ChatProvider context (threads, messaging, presence) | ChatProvider |

WebSocket

Chat

The chat module provides a WebSocket client for the Tracktor chat protocol (/v2/threads/ws). It supports thread subscription, messaging, read receipts, and presence events.

With the React provider (recommended):

First, wrap your app with ChatProvider (inside InjectDependenciesProvider):

import { ChatProvider, InjectDependenciesProvider } from "@tracktor/shared-module";

const App = () => (
  <InjectDependenciesProvider apiURL={import.meta.env.VITE_API_URL} libraries={libraries} localStorageKeys={localStorageKeys}>
    <ChatProvider>
      <MyApp />
    </ChatProvider>
  </InjectDependenciesProvider>
);

Then use useChat() in any component:

import { useChat } from "@tracktor/shared-module";

const Chat = ({ threadId }: { threadId: string }) => {
  const { isReady, sendMessage, joinThread } = useChat();

  return (
    <div>
      <p>{isReady ? "Connected" : "Connecting..."}</p>
      <button onClick={() => joinThread(threadId)}>Join</button>
      <button onClick={() => sendMessage(threadId, "Hello!")}>Send</button>
    </div>
  );
};

The provider reads apiURL and the user token from InjectDependenciesProvider automatically. You can override both via props:

<ChatProvider url="wss://app.api.dev.tracktor.fr/v2/threads/ws" token="my-jwt">

Without React (class only):

import { ChatClient } from "@tracktor/shared-module";

const client = new ChatClient({
  url: "wss://app.api.dev.tracktor.fr/v2/threads/ws",
  getToken: () => "my-jwt",
  onEvent: (event) => console.log(event),
  onConnectionChange: (connected) => console.log("connected:", connected),
});

client.connect();
client.joinThread("thread-1");
client.sendMessage("thread-1", "Hello!");

| Module | Description | Dependencies | |--------------|-----------------------------------------------------------|--------------| | ChatClient | Framework-agnostic WebSocket client for the chat protocol | - | | ChatProvider | Provider for shared WebSocket connection via context | - | | useChat | React hook to consume the ChatProvider context | ChatProvider |

Config

| Module | Description | |-----------------------|------------------------------------| | getOrvalOperationName | Get config for orval operationName |

Utils function

| Module | Description | |---------------------|----------------------| | dateAdapter | Adapt given date | | distanceAdapter | Adapt given distance | | worksiteNameAdapter | Adapt worksite name |