@addev-be/ui 0.17.4 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.17.4",
+  "version": "0.18.1",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/search/QuickSearchBar.tsx

@@ -10,22 +10,19 @@ import {
 } from 'react';
 import { SearchResults, SearchTypeDefinitions } from './types';
 
-import { useDebounce } from '@uidotdev/usehooks';
-import { useGlobalSearchRequestHandler } from '../../services';
-import { Input } from '../forms';
 import { Dropdown } from '../layout';
+import { Input } from '../forms';
 import { QuickSearchResults } from './QuickSearchResults';
+import { useDebounce } from '@uidotdev/usehooks';
+import { useGlobalSearchRequestHandler } from '../../services';
 
 type QuickSearchBarProps<R> = {
-  definitions: SearchTypeDefinitions<R>;
-  types?: string[];
-  conditions?: { field: string; operator: string }[];
+  types: SearchTypeDefinitions<R>;
   placeholder?: string;
   inputComponent?: FC<ComponentProps<typeof Input>>;
 };
 
 export const QuickSearchBar = <R,>({
-  definitions,
   types,
   placeholder,
   inputComponent: InputComponent = Input,
@@ -45,21 +42,15 @@ export const QuickSearchBar = <R,>({
   useEffect(() => {
     if (debouncedTerm) {
       globalSearch({
-        types: types ?? Object.keys(definitions),
+        types,
         searchTerm: debouncedTerm,
         limit: 5,
-        conditions: [
-          {
-            field: 'DeletedAt',
-            operator: 'isNull',
-          },
-        ],
       }).then((response) => {
         setResults(response.data as SearchResults<R>);
         setDropdownVisible(true);
       });
     }
-  }, [globalSearch, debouncedTerm, definitions, types]);
+  }, [globalSearch, debouncedTerm, types]);
 
   const onFocus = useCallback(() => {
     setDropdownVisible(true);
@@ -97,7 +88,7 @@ export const QuickSearchBar = <R,>({
             {results && (
               <QuickSearchResults
                 results={results}
-                definitions={definitions}
+                definitions={types}
                 term={debouncedTerm}
               />
             )}

package/src/components/search/types.ts

@@ -1,7 +1,10 @@
 import { FC, ReactNode } from 'react';
+import { ConditionDTO, OrderByDTO } from '../../services';
 
 export type SearchTypeDefinition<T> = {
   title: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
   quickRenderer: (result: T, term: string) => ReactNode;
   titleRenderer: (result: T, term: string) => ReactNode;
   detailsRenderer: (result: T, term: string) => ReactNode;

package/src/providers/AuthenticationProvider/index.tsx

@@ -21,6 +21,7 @@ import {
 import { basePermissions } from './helpers';
 
 export type AuthenticationContextProps = {
+  status?: number;
   token?: string;
   user?: UserDTO;
   isAuthenticated: boolean;
@@ -36,6 +37,7 @@ export type AuthenticationContextProps = {
 };
 
 export const AuthenticationContext = createContext<AuthenticationContextProps>({
+  status: undefined,
   authenticate: () => {},
   isAuthenticated: false,
   login: async () => false,
@@ -64,11 +66,13 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
     () => ({ ...basePermissions, ...permissions }),
     [permissions]
   );
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [, setWebSocketStatus] = useState<boolean | undefined>(false);
   const [token, setToken] = useState<string | undefined>(
     sessionStorage.getItem('authToken') || undefined
   );
   const [user, setUser] = useState<UserDTO | undefined>(undefined);
+  const [status, setStatus] = useState<number | undefined>(undefined);
 
   const sendAuthenticateRequest =
     useAuthenticateRequestHandler(requestHandlerName);
@@ -81,9 +85,12 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
 
   const authenticate = useCallback(
     (force = false) => {
-      if (token && (!user || force)) {
+      if (token && (!user || force) && !isLoading) {
+        setIsLoading(true);
         sendAuthenticateRequest({ token }).then(
           (response) => {
+            setIsLoading(false);
+            setStatus(response.status);
             if (response.status === 0 && response.user) {
               setUser(response.user);
             } else if (response.status > 0) {
@@ -92,13 +99,14 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
             }
           },
           () => {
+            setIsLoading(false);
             setToken(undefined);
             setUser(undefined);
           }
         );
       }
     },
-    [sendAuthenticateRequest, token, user]
+    [isLoading, sendAuthenticateRequest, token, user]
   );
 
   useEffect(() => {
@@ -110,10 +118,20 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
     }
   }, [authenticate, token]);
 
+  const [networkStatus, setNetworkStatus] = useState<boolean | undefined>(
+    false
+  );
+
   const login = useCallback(
-    async (username: string, password: string) =>
-      sendLoginRequest({ username, password })
+    async (username: string, password: string) => {
+      if (isLoading) {
+        throw new Error('Already loading');
+      }
+
+      setIsLoading(true);
+      return sendLoginRequest({ username, password })
         .then((response) => {
+          setIsLoading(false);
           if (response.status === 0 && response.user) {
             setToken(response.token);
             setUser(response.user);
@@ -122,11 +140,13 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
           throw new Error(`Login failed with status ${response.status}`);
         })
         .catch(() => {
+          setIsLoading(false);
           setToken(undefined);
           setUser(undefined);
           return false;
-        }),
-    [sendLoginRequest]
+        });
+    },
+    [isLoading, sendLoginRequest]
   );
 
   const logout = useCallback(
@@ -138,6 +158,7 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
         .finally(() => {
           setToken(undefined);
           setUser(undefined);
+          setStatus(undefined);
         }),
     [sendLogoutRequest]
   );
@@ -183,8 +204,47 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
     ]
   );
 
+  const webSocketStatusChanged = useCallback(
+    (status: boolean | undefined) => {
+      if (!networkStatus && status) {
+        authenticate(true);
+      }
+      setNetworkStatus(status);
+    },
+    [authenticate, networkStatus]
+  );
+
+  const webSocketErrorReceived = useCallback(
+    ({ status }: { status: number; message: string }) => {
+      // Handle logout when NotAuthenticated error is received
+      if (status === -4) {
+        logout();
+      }
+    },
+    [logout]
+  );
+
+  useEffect(() => {
+    const subscription = WebSocketService.getInstance().status$.subscribe(
+      webSocketStatusChanged
+    );
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [webSocketStatusChanged]);
+
+  useEffect(() => {
+    const subscription = WebSocketService.getInstance().error$.subscribe(
+      webSocketErrorReceived
+    );
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [webSocketErrorReceived]);
+
   const contextValue = useMemo(
     () => ({
+      status,
       token,
       user,
       isAuthenticated: !!user,
@@ -199,17 +259,17 @@ export const AuthenticationProvider: FC<AuthenticationProviderProps> = ({
       setToken,
     }),
     [
-      allPermissions,
+      status,
+      token,
+      user,
       authenticate,
-      checkRecoveryKey,
-      hasPermission,
       login,
       logout,
-      resetPassword,
       sendRecoveryKey,
-      token,
-      user,
-      setToken,
+      checkRecoveryKey,
+      resetPassword,
+      allPermissions,
+      hasPermission,
     ]
   );
 

package/src/services/WebSocketService.ts

@@ -3,6 +3,16 @@ import { Request } from './base';
 import { Subject } from 'rxjs';
 import { v4 } from 'uuid';
 
+export class WebSocketError extends Error {
+  public status: number;
+
+  constructor(status: number, message: string) {
+    super(message);
+    this.status = status;
+    this.name = 'WebSocketError';
+  }
+}
+
 export class WebSocketService {
   private static instance: WebSocketService;
   private config: Config;
@@ -10,6 +20,7 @@ export class WebSocketService {
 
   public status: boolean | undefined = undefined;
   public status$ = new Subject<boolean | undefined>();
+  public error$ = new Subject<{ status: number; message: string }>();
 
   private queue: Request[] = [];
   private promises: {
@@ -99,6 +110,7 @@ export class WebSocketService {
       const request: Request = { id, name, data };
       this.promises[id] = { resolve, reject };
       if (!this.socket || !this.status) {
+        console.log('[WS] Queuing request:', request);
         this.queue.push(request);
         return;
       }
@@ -120,7 +132,13 @@ export class WebSocketService {
           typeof response.data?.status === 'number' &&
           response.data.status < 0
         ) {
-          this.promises[response.id].reject(new Error(response.data.message));
+          this.promises[response.id].reject(
+            new WebSocketError(response.data.status, response.data.message)
+          );
+          this.error$.next({
+            status: response.data.status,
+            message: response.data.message || 'Unknown error',
+          });
         } else {
           this.promises[response.id].resolve(response.data);
         }

package/src/services/globalSearch.ts

@@ -1,12 +1,15 @@
 import { ConditionDTO, SqlRequestRow } from './sqlRequests';
 
+import { OrderByDTO } from './sqlRequests';
 import { useWebSocketRequestHandler } from './hooks';
 
 export type GlobalSearchRequestDTO = {
-  types: string[];
+  types: Record<
+    string,
+    { conditions?: ConditionDTO[]; orderBy?: OrderByDTO[] }
+  >;
   searchTerm: string;
   limit?: number;
-  conditions?: ConditionDTO[];
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/services/hooks.ts

@@ -1,6 +1,7 @@
+import { WebSocketError, WebSocketService } from './WebSocketService';
+import { useCallback, useState } from 'react';
+
 import { HttpService } from './HttpService';
-import { WebSocketService } from './WebSocketService';
-import { useCallback } from 'react';
 import { useLoading } from '../providers';
 
 export const useLoadingRequestHandler = <TReq, TRes>(
@@ -42,3 +43,50 @@ export const useHttpRequestHandler = <TReq, TRes>(
     },
     [name]
   );
+
+export const useRequestState = <TReq, TRes>(name: string, loading = false) => {
+  const [state, setState] = useState<
+    'initial' | 'loading' | 'success' | 'error'
+  >('initial');
+  const [status, setStatus] = useState<number | undefined>(undefined);
+  const [response, setResponse] = useState<TRes | null>(null);
+
+  const handleSendRequest = useWebSocketRequestHandler<TReq, TRes>(name);
+  const handleSendLoadingRequest = useLoadingRequestHandler<TReq, TRes>(name);
+
+  const sendRequest = useCallback(
+    async (data: TReq) => {
+      setState('loading');
+      try {
+        const res = await (loading
+          ? handleSendLoadingRequest
+          : handleSendRequest)(data);
+        setStatus(0);
+        setResponse(res);
+        setState('success');
+        return res;
+      } catch (error) {
+        setStatus(error instanceof WebSocketError ? error.status : -1);
+        setState('error');
+      }
+    },
+    [handleSendLoadingRequest, handleSendRequest, loading]
+  );
+
+  const reset = useCallback(() => {
+    setState('initial');
+    setStatus(undefined);
+    setResponse(null);
+  }, []);
+
+  return {
+    status,
+    isInitial: state === 'initial',
+    isLoading: state === 'loading',
+    isSuccess: state === 'success',
+    isError: state === 'error',
+    response,
+    sendRequest,
+    reset,
+  };
+};