@ibdop/platform-kit 1.0.10 → 1.0.12

package/src/hooks/useApi.ts

@@ -5,7 +5,7 @@
  * обработкой ошибок и уведомлениями.
  */
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import type { ApiError, ApiResponse, NotificationPayload } from '../types'
 
 // Development mode flag
@@ -104,6 +104,8 @@ export interface UseApiConfig<T = never> {
   errorContext?: string
   onSuccess?: (data: T) => void
   onError?: (error: ApiError) => void
+  /** Auto-execute on mount (default: false) */
+  immediate?: boolean
 }
 
 /**
@@ -117,6 +119,14 @@ export interface UseApiResult<T> {
   isSuccess: boolean
   execute: () => Promise<T | null>
   reset: () => void
+  abort: () => void
+}
+
+/**
+ * Check if error is an abort error
+ */
+function isAbortError(error: unknown): boolean {
+  return error instanceof Error && error.name === 'AbortError'
 }
 
 /**
@@ -128,14 +138,14 @@ export interface UseApiResult<T> {
  * 
  * @example
  * ```tsx
- * const { data, isLoading, isError, execute } = useApi<User[]>(
- *   () => fetch('/api/users').then(r => r.json()),
+ * const { data, isLoading, isError, execute, abort } = useApi<User[]>(
+ *   (signal) => fetch('/api/users', { signal }).then(r => r.json()),
  *   { notifyOnError: true, errorContext: 'загрузка пользователей' }
  * )
  * ```
  */
 export function useApi<T>(
-  request: () => Promise<ApiResponse<T>>,
+  request: (signal?: AbortSignal) => Promise<ApiResponse<T>>,
   config: UseApiConfig<T> = {}
 ): UseApiResult<T> {
   const {
@@ -151,15 +161,50 @@ export function useApi<T>(
   const [error, setError] = useState<ApiError | null>(null)
   const [isLoading, setIsLoading] = useState(false)
 
+  // AbortController ref for request cancellation
+  const abortControllerRef = useRef<AbortController | null>(null)
+
   const isError = error !== null
   const isSuccess = data !== null && !isLoading && !isError
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort()
+      }
+    }
+  }, [])
+
+  const abort = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort()
+      abortControllerRef.current = null
+      setIsLoading(false)
+      logger.log('Request aborted')
+    }
+  }, [])
+
   const execute = useCallback(async () => {
+    // Abort any pending request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort()
+    }
+
+    // Create new AbortController
+    abortControllerRef.current = new AbortController()
+    const signal = abortControllerRef.current.signal
+
     setIsLoading(true)
     setError(null)
 
     try {
-      const response = await request()
+      const response = await request(signal)
+      
+      // Check if aborted during request
+      if (signal.aborted) {
+        return null
+      }
       
       if (response.ok) {
         setData(response.data)
@@ -193,6 +238,12 @@ export function useApi<T>(
         return null
       }
     } catch (err) {
+      // Ignore abort errors
+      if (isAbortError(err)) {
+        logger.log('Request was aborted')
+        return null
+      }
+      
       // Handle network/server errors
       const apiError = err as ApiError
       setError(apiError)
@@ -204,7 +255,10 @@ export function useApi<T>(
       onError?.(apiError)
       return null
     } finally {
-      setIsLoading(false)
+      if (!signal.aborted) {
+        setIsLoading(false)
+      }
+      abortControllerRef.current = null
     }
   }, [request, notifyOnError, notifyOnSuccess, successMessage, errorContext, onSuccess, onError])
 
@@ -222,24 +276,26 @@ export function useApi<T>(
     isSuccess,
     execute,
     reset,
+    abort,
   }
 }
 
 // Convenience hooks for common HTTP methods
 
 /**
- * GET запрос
+ * GET запрос с AbortController
  */
 export function useGet<T>(
   url: string,
   params?: Record<string, unknown>,
   config: UseApiConfig<T> = {}
 ): UseApiResult<T> {
-  const request = () => 
-    fetch(url, params ? { 
+  const request = (signal?: AbortSignal) => 
+    fetch(url, { 
       method: 'GET',
-      headers: { 'Content-Type': 'application/json' }
-    } : {})
+      headers: { 'Content-Type': 'application/json' },
+      signal,
+    })
       .then(async (response) => {
         const data = await response.json()
         return { data, status: response.status, ok: response.ok } as ApiResponse<T>
@@ -249,18 +305,19 @@ export function useGet<T>(
 }
 
 /**
- * POST запрос
+ * POST запрос с AbortController
  */
 export function usePost<T>(
   url: string,
   data?: unknown,
   config: UseApiConfig<T> = {}
 ): UseApiResult<T> {
-  const request = () =>
+  const request = (signal?: AbortSignal) =>
     fetch(url, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: data ? JSON.stringify(data) : undefined,
+      signal,
     })
       .then(async (response) => {
         const responseData = await response.json()
@@ -271,18 +328,19 @@ export function usePost<T>(
 }
 
 /**
- * PUT запрос
+ * PUT запрос с AbortController
  */
 export function usePut<T>(
   url: string,
   data?: unknown,
   config: UseApiConfig<T> = {}
 ): UseApiResult<T> {
-  const request = () =>
+  const request = (signal?: AbortSignal) =>
     fetch(url, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: data ? JSON.stringify(data) : undefined,
+      signal,
     })
       .then(async (response) => {
         const responseData = await response.json()
@@ -293,16 +351,17 @@ export function usePut<T>(
 }
 
 /**
- * DELETE запрос
+ * DELETE запрос с AbortController
  */
 export function useDel<T>(
   url: string,
   config: UseApiConfig<T> = {}
 ): UseApiResult<T> {
-  const request = () =>
+  const request = (signal?: AbortSignal) =>
     fetch(url, {
       method: 'DELETE',
       headers: { 'Content-Type': 'application/json' },
+      signal,
     })
       .then(async (response) => {
         const responseData = await response.json()

package/src/hooks/useFeatures.ts

@@ -0,0 +1,445 @@
+/**
+ * Hook for working with feature toggles
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useShellAuth } from './useShellAuth'
+import type {
+  FeatureToggleInfo,
+  FeaturesResponse,
+  FeatureToggleAdmin,
+  FeatureAdminResponse,
+  FeatureCreateRequest,
+  FeatureUpdateRequest,
+  MicrofrontendWithFeatures,
+  MicrofrontendsFeaturesResponse,
+} from '../types'
+
+/**
+ * Result of useFeatures hook
+ */
+export interface UseFeaturesResult {
+  features: FeatureToggleInfo[]
+  totalCount: number
+  userRoles: string[]
+  isLoading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+  isFeatureEnabled: (featureName: string) => boolean
+  getFeaturesByMf: (mfName: string) => FeatureToggleInfo[]
+}
+
+/**
+ * Hook to get feature toggles for the current user
+ * 
+ * @example
+ * ```typescript
+ * import { useFeatures } from '@ib-dop/platform-kit'
+ * 
+ * function FeatureFlagComponent() {
+ *   const { features, isFeatureEnabled, isLoading } = useFeatures()
+ * 
+ *   if (isLoading) return <Spinner />
+ * 
+ *   return (
+ *     <div>
+ *       {isFeatureEnabled('new-dashboard') && <NewDashboard />}
+ *       {!isFeatureEnabled('new-dashboard') && <OldDashboard />}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useFeatures(): UseFeaturesResult {
+  const auth = useShellAuth()
+  const [features, setFeatures] = useState<FeatureToggleInfo[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [userRoles, setUserRoles] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchFeatures = useCallback(async () => {
+    if (!auth.isAuthenticated) {
+      console.debug('[useFeatures] Not authenticated')
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      const token = auth.user?.access_token
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`
+      }
+
+      const response = await fetch('/api/features', { headers })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: FeaturesResponse = await response.json()
+      setFeatures(result.features || [])
+      setTotalCount(result.totalCount || 0)
+      setUserRoles(result.userRoles || [])
+    } catch (err) {
+      console.debug('Features fetch error:', err)
+      setError(err instanceof Error ? err.message : String(err))
+      setFeatures([])
+      setUserRoles([])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [auth.isAuthenticated, auth.user?.access_token])
+
+  useEffect(() => {
+    fetchFeatures()
+  }, [fetchFeatures])
+
+  const isFeatureEnabled = useCallback(
+    (featureName: string): boolean => {
+      const feature = features.find((f) => f.name === featureName)
+      return feature?.userEnabled ?? false
+    },
+    [features]
+  )
+
+  const getFeaturesByMf = useCallback(
+    (mfName: string): FeatureToggleInfo[] => {
+      return features.filter((f) => f.mfDependencies?.includes(mfName))
+    },
+    [features]
+  )
+
+  return {
+    features,
+    totalCount,
+    userRoles,
+    isLoading,
+    error,
+    refetch: fetchFeatures,
+    isFeatureEnabled,
+    getFeaturesByMf,
+  }
+}
+
+/**
+ * Result of useFeatureAdmin hook
+ */
+export interface UseFeatureAdminResult {
+  features: FeatureToggleAdmin[]
+  microfrontends: string[]
+  isAdmin: boolean
+  isLoading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+  createFeature: (feature: FeatureCreateRequest) => Promise<boolean>
+  updateFeature: (name: string, feature: FeatureUpdateRequest) => Promise<boolean>
+  toggleFeature: (name: string, enabled: boolean) => Promise<boolean>
+  deleteFeature: (name: string) => Promise<boolean>
+}
+
+/**
+ * Hook for admin operations with feature toggles
+ * 
+ * @example
+ * ```typescript
+ * import { useFeatureAdmin } from '@ib-dop/platform-kit'
+ * 
+ * function AdminPanel() {
+ *   const { 
+ *     features, 
+ *     isAdmin, 
+ *     isLoading,
+ *     toggleFeature 
+ *   } = useFeatureAdmin()
+ * 
+ *   if (isLoading) return <Spinner />
+ *   if (!isAdmin) return <AccessDenied />
+ * 
+ *   return (
+ *     <table>
+ *       {features.map(f => (
+ *         <tr key={f.name}>
+ *           <td>{f.name}</td>
+ *           <td>{f.enabled ? 'ON' : 'OFF'}</td>
+ *           <button onClick={() => toggleFeature(f.name, !f.enabled)}>
+ *             Toggle
+ *           </button>
+ *         </tr>
+ *       ))}
+ *     </table>
+ *   )
+ * }
+ * ```
+ */
+export function useFeatureAdmin(): UseFeatureAdminResult {
+  const auth = useShellAuth()
+  const [features, setFeatures] = useState<FeatureToggleAdmin[]>([])
+  const [microfrontends, setMicrofrontends] = useState<string[]>([])
+  const [isAdmin, setIsAdmin] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchFeatures = useCallback(async () => {
+    if (!auth.isAuthenticated) {
+      console.debug('[useFeatureAdmin] Not authenticated')
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      const token = auth.user?.access_token
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`
+      }
+
+      const response = await fetch('/api/features/admin', { headers })
+
+      if (!response.ok) {
+        if (response.status === 403) {
+          console.warn('[useFeatureAdmin] 403 Forbidden - checking if token has admin role')
+          setIsAdmin(false)
+          setFeatures([])
+          setMicrofrontends([])
+          setIsLoading(false)
+          return
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: FeatureAdminResponse = await response.json()
+      setFeatures(result.featureToggles || [])
+      setMicrofrontends(result.microfrontends || [])
+      setIsAdmin(result.isAdmin || false)
+    } catch (err) {
+      console.debug('FeatureAdmin fetch error:', err)
+      setFeatures([])
+      setMicrofrontends([])
+      setIsAdmin(false)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [auth.isAuthenticated, auth.user?.access_token])
+
+  const createFeature = useCallback(
+    async (feature: FeatureCreateRequest): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        }
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch('/api/features/admin', {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(feature),
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  const updateFeature = useCallback(
+    async (name: string, feature: FeatureUpdateRequest): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+        }
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch(`/api/features/admin/${encodeURIComponent(name)}`, {
+          method: 'PUT',
+          headers,
+          body: JSON.stringify(feature),
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  const toggleFeature = useCallback(
+    async (name: string, enabled: boolean): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {}
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch(
+          `/api/features/admin/${encodeURIComponent(name)}/toggle?enabled=${enabled}`,
+          {
+            method: 'POST',
+            headers,
+          }
+        )
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  const deleteFeature = useCallback(
+    async (name: string): Promise<boolean> => {
+      try {
+        const headers: Record<string, string> = {}
+        const token = auth.user?.access_token
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const response = await fetch(`/api/features/admin/${encodeURIComponent(name)}`, {
+          method: 'DELETE',
+          headers,
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `HTTP ${response.status}`)
+        }
+
+        await fetchFeatures()
+        return true
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+        return false
+      }
+    },
+    [fetchFeatures]
+  )
+
+  useEffect(() => {
+    fetchFeatures()
+  }, [fetchFeatures])
+
+  return {
+    features,
+    microfrontends,
+    isAdmin,
+    isLoading,
+    error,
+    refetch: fetchFeatures,
+    createFeature,
+    updateFeature,
+    toggleFeature,
+    deleteFeature,
+  }
+}
+
+/**
+ * Hook to get microfrontends with their features
+ */
+export interface UseMicrofrontendsFeaturesResult {
+  microfrontends: MicrofrontendWithFeatures[]
+  totalCount: number
+  isLoading: boolean
+  error: string | null
+  refetch: () => Promise<void>
+}
+
+export function useMicrofrontendsFeatures(): UseMicrofrontendsFeaturesResult {
+  const auth = useShellAuth()
+  const [microfrontends, setMicrofrontends] = useState<MicrofrontendWithFeatures[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchData = useCallback(async () => {
+    if (!auth.isAuthenticated) {
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      const token = auth.user?.access_token
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`
+      }
+
+      const response = await fetch('/api/features/microfrontends', { headers })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: MicrofrontendsFeaturesResponse = await response.json()
+      setMicrofrontends(result.microfrontends || [])
+      setTotalCount(result.totalCount || 0)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setIsLoading(false)
+    }
+  }, [auth.isAuthenticated, auth.user?.access_token])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  return {
+    microfrontends,
+    totalCount,
+    isLoading,
+    error,
+    refetch: fetchData,
+  }
+}