user-setting-hooks.tsx

Overview

The user-setting-hooks.tsx file provides a comprehensive suite of custom React hooks designed to manage user settings, tenant information, system tokens, and related functionalities in a React application. It primarily utilizes React Query for asynchronous data fetching and mutations, integrates i18n for translations, and leverages Ant Design components for UI interactions such as modals and messages.

These hooks abstract away the complexity of API interactions through the userService, ensuring that components consuming these hooks can easily fetch, update, and manipulate user and system-related data. The file enables seamless management of user info, tenant info, system status, tokens, and Langfuse configurations with built-in feedback and cache invalidation.

Detailed Explanations

Imports and Dependencies

Hook-by-Hook Breakdown

1. useFetchUserInfo

Fetches the current user information.

const { data: userInfo, loading } = useFetchUserInfo();

2. useFetchTenantInfo

Fetches tenant-related information.

const { data: tenantInfo, loading } = useFetchTenantInfo(true);

3. useSelectParserList

Generates a list of parsers for use in dropdowns or selectors.

const parserList = useSelectParserList();
// [{ value: 'id1', label: 'Parser 1' }, ...]

4. useSaveSetting

Saves user settings or password changes.

const { saveSetting, loading } = useSaveSetting();
await saveSetting({ new_password: 'newPass123' });

5. useFetchSystemVersion

Fetches the current system version.

const { version, loading, fetchSystemVersion } = useFetchSystemVersion();
fetchSystemVersion();

6. useFetchSystemStatus

Fetches the system status.

const { systemStatus, loading, fetchSystemStatus } = useFetchSystemStatus();
fetchSystemStatus();

7. useFetchManualSystemTokenList

Manually fetches system tokens via mutation.

const { data: tokens, fetchSystemTokenList } = useFetchManualSystemTokenList();
fetchSystemTokenList();

8. useFetchSystemTokenList

Fetches system tokens automatically.

const { data: tokens, loading, refetch } = useFetchSystemTokenList();

9. useRemoveSystemToken

Removes a system token by token string.

const { removeToken } = useRemoveSystemToken();
await removeToken('token-string');

10. useCreateSystemToken

Creates a new system token.

const { createToken } = useCreateSystemToken();
await createToken({ name: 'New Token' });

11. useListTenantUser

Lists users associated with the current tenant.

const { data: tenantUsers, loading, refetch } = useListTenantUser();

12. useAddTenantUser

Adds a new user to the tenant via email.

const { addTenantUser } = useAddTenantUser();
await addTenantUser('[email protected]');

13. useDeleteTenantUser

Deletes a user from the tenant.

const { deleteTenantUser } = useDeleteTenantUser();
await deleteTenantUser({ userId: '12345' });

14. useListTenant

Lists tenants.

const { data: tenants, loading, refetch } = useListTenant();

15. useAgreeTenant

Agrees (consents) to a tenant.

const { agreeTenant } = useAgreeTenant();
await agreeTenant('tenantId123');

16. useSetLangfuseConfig

Sets Langfuse configuration.

const { setLangfuseConfig } = useSetLangfuseConfig();
await setLangfuseConfig({ enabled: true });

17. useDeleteLangfuseConfig

Deletes Langfuse configuration.

const { deleteLangfuseConfig } = useDeleteLangfuseConfig();
await deleteLangfuseConfig();

18. useFetchLangfuseConfig

Fetches Langfuse configuration.

const { data: langfuseConfig, loading } = useFetchLangfuseConfig();

Important Implementation Details

Interaction with Other Parts of the System

Usage Example

import React from 'react';
import { useFetchUserInfo, useSaveSetting } from './user-setting-hooks';

const UserProfile: React.FC = () => {
  const { data: userInfo, loading } = useFetchUserInfo();
  const { saveSetting, loading: saving } = useSaveSetting();

  const onChangePassword = async () => {
    await saveSetting({ new_password: 'newSecret123' });
  };

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <p>User: {userInfo.name}</p>
      <button onClick={onChangePassword} disabled={saving}>
        Change Password
      </button>
    </div>
  );
};

Visual Diagram

flowchart TD
  A[useFetchUserInfo] -->|fetches| B[userService.user_info]
  C[useFetchTenantInfo] -->|fetches| D[userService.get_tenant_info]
  E[useSaveSetting] -->|mutates| F[userService.setting]
  G[useFetchSystemVersion] -->|fetches| H[userService.getSystemVersion]
  I[useFetchSystemStatus] -->|fetches| J[userService.getSystemStatus]
  K[useFetchSystemTokenList] -->|fetches| L[userService.listToken]
  M[useRemoveSystemToken] -->|mutates| N[userService.removeToken]
  O[useCreateSystemToken] -->|mutates| P[userService.createToken]
  Q[useListTenantUser] -->|fetches| R[listTenantUser]
  S[useAddTenantUser] -->|mutates| T[addTenantUser]
  U[useDeleteTenantUser] -->|mutates| V[deleteTenantUser]
  W[useListTenant] -->|fetches| X[listTenant]
  Y[useAgreeTenant] -->|mutates| Z[agreeTenant]
  AA[useSetLangfuseConfig] -->|mutates| AB[userService.setLangfuseConfig]
  AC[useDeleteLangfuseConfig] -->|mutates| AD[userService.deleteLangfuseConfig]
  AE[useFetchLangfuseConfig] -->|fetches| AF[userService.getLangfuseConfig]

  style A,C,E,G,I,K,M,O,Q,S,U,W,Y,AA,AC,AE fill:#f9f,stroke:#333,stroke-width:1px
  style B,D,F,H,J,L,N,P,R,T,V,X,Z,AB,AD,AF fill:#bbf,stroke:#333,stroke-width:1px

Summary

This file serves as a centralized collection of React Query-based hooks facilitating user, tenant, and system-related data operations. It abstracts API calls, manages cache, provides user feedback, and integrates localization, enabling developers to easily implement user settings and system configuration features in the app.

End of Documentation for user-setting-hooks.tsx