proteum 1.0.3 → 2.0.0

package/client/services/router/request/api.ts

@@ -5,13 +5,16 @@
 // Core
 import type ClientApplication from '@client/app';
 import { fromJson as errorFromJson, NetworkError } from '@common/errors';
-import ApiClientService, { 
-    TPostData, TPostDataWithoutFile,
-    TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher,
-    TDataReturnedByFetchers
+import ApiClientService, {
+    TPostData,
+    TPostDataWithoutFile,
+    TApiFetchOptions,
+    TFetcherList,
+    TFetcherArgs,
+    TFetcher,
+    TDataReturnedByFetchers,
 } from '@common/router/request/api';
 
-
 // Specific
 import type { default as Router, Request } from '..';
 import { toMultipart } from './multipart';
@@ -22,79 +25,71 @@ import { toMultipart } from './multipart';
 
 const debug = false;
 
-export type Config = {
+export type Config = {};
 
-}
+const isFileValue = (value: unknown): value is File =>
+    typeof File !== 'undefined' && typeof value === 'object' && value instanceof File;
 
 /*----------------------------------
 - FUNCTION
 ----------------------------------*/
 export default class ApiClient implements ApiClientService {
-
     // APO Client needs to know the current request so we can monitor which api request is made from which page
-    public constructor( 
-        public app: ClientApplication, 
+    public constructor(
+        public app: ClientApplication,
         public request: Request,
         public router = request.router,
-    ) {
-
-    }
+    ) {}
 
     /*----------------------------------
     - HIGH LEVEL
     ----------------------------------*/
 
-    public fetch<FetchersList extends TFetcherList = TFetcherList>( 
-        fetchers: FetchersList 
+    public fetch<FetchersList extends TFetcherList = TFetcherList>(
+        fetchers: FetchersList,
     ): TDataReturnedByFetchers<FetchersList> {
         throw new Error("api.fetch shouldn't be called here.");
     }
 
-    public post = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
+    public post = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) =>
         this.createFetcher<TData>('POST', path, data, opts);
 
-    public set( newData: TObjetDonnees ) {
+    public set(newData: TObjetDonnees) {
+        if (!('context' in this.router)) throw new Error('api.set is not available on server side.');
 
-        if (!('context' in this.router))
-            throw new Error("api.set is not available on server side.");
-
-        if (this.router.context.page)
-            this.router.context.page.setAllData(curData => ({ ...curData, ...newData }));
-        else
-            throw new Error(`[api] this.router.context.page undefined`)
+        const currentPage = this.router.context.page;
+        if (currentPage && 'setAllData' in currentPage) {
+            const page = currentPage as { setAllData: (updater: (data: TObjetDonnees) => TObjetDonnees) => void };
+            page.setAllData((curData) => ({ ...curData, ...newData }));
+        }
+        else throw new Error(`[api] this.router.context.page undefined`);
     }
 
-    public reload( ids?: string | string[], params?: TObjetDonnees ) {
+    public reload(ids?: string | string[], params?: TObjetDonnees) {
+        if (!('context' in this.router)) throw new Error('api.reload is not available on server side.');
 
-        if (!('context' in this.router))
-            throw new Error("api.reload is not available on server side.");
-        
         const page = this.router.context.page;
+        if (!page) throw new Error('api.reload requires an active page context.');
 
-        if (ids === undefined)
-            ids = Object.keys(page.fetchers);
-        else if (typeof ids === 'string')   
-            ids = [ids];
-
-        debug && console.log("[api] Reload data", ids, params, page.fetchers);
-
-        for (const id of ids) {
+        if (ids === undefined) ids = Object.keys(page.fetchers);
+        else if (typeof ids === 'string') ids = [ids];
 
-            const fetcher = page.fetchers[id];
-            if (fetcher === undefined)
-                return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
+        if (params !== undefined) page.context.request.data = { ...page.context.request.data, ...params };
 
-            if (params !== undefined)
-                fetcher.data = { ...(fetcher.data || {}), ...params };
+        const nextData = { ...page.data };
+        for (const id of ids) delete nextData[id];
 
-            debug && console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
+        page.data = nextData;
 
-            this.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
-
-                this.set({ [id]: data });
+        debug && console.log('[api] Reload data', ids, params, page.fetchers);
 
+        page.fetchData()
+            .then((data: TObjetDonnees) => {
+                this.set(data);
             })
-        }
+            .catch((error: Error) => {
+                this.app.handleError(error);
+            });
     }
 
     /*----------------------------------
@@ -106,36 +101,29 @@ export default class ApiClient implements ApiClientService {
         // Lazily create (and cache) the underlying promise so the fetcher behaves like a real promise instance.
         let promise: Promise<TData> | undefined;
 
-        const fetcher = {
-            method, path, data, options,
-        } as TFetcher<TData>;
+        const fetcher = { method, path, data, options } as TFetcher<TData>;
 
         const getPromise = () => {
-            if (!promise)
-                promise = this.fetchAsync<TData>(fetcher.method, fetcher.path, fetcher.data, fetcher.options);
+            if (!promise) promise = this.fetchAsync<TData>(fetcher.method, fetcher.path, fetcher.data, fetcher.options);
 
             return promise;
         };
 
         // For async calls: api.post(...).then((data) => ...)
-        fetcher.then = (onfulfilled?: any, onrejected?: any) =>
-            getPromise().then(onfulfilled, onrejected) as any;
+        fetcher.then = (onfulfilled?: any, onrejected?: any) => getPromise().then(onfulfilled, onrejected) as any;
 
-        fetcher.catch = (onrejected?: any) =>
-            getPromise().catch(onrejected) as any;
+        fetcher.catch = (onrejected?: any) => getPromise().catch(onrejected) as any;
 
-        fetcher.finally = (onfinally?: any) =>
-            getPromise().finally(onfinally) as any;
+        fetcher.finally = (onfinally?: any) => getPromise().finally(onfinally) as any;
 
         fetcher.run = () => getPromise();
 
         return fetcher;
     }
 
-    public async fetchAsync<TData extends unknown = unknown>(...[
-        method, path, data, options
-    ]: TFetcherArgs): Promise<TData> {
-
+    public async fetchAsync<TData extends unknown = unknown>(
+        ...[method, path, data, options]: TFetcherArgs
+    ): Promise<TData> {
         /*if (options?.captcha !== undefined)
             await this.gui.captcha.check(options?.captcha);*/
 
@@ -143,111 +131,102 @@ export default class ApiClient implements ApiClientService {
     }
 
     public async fetchSync(fetchers: TFetcherList, alreadyLoadedData: {}): Promise<TObjetDonnees> {
-
         // Pick the fetchers where the data is needed
         const fetchersToRun: TFetcherList = {};
         let fetchersCount: number = 0;
-        for (const fetcherId in fetchers) 
-            // The fetcher can be undefined
-            if (!( fetcherId in alreadyLoadedData ) && fetchers[ fetcherId ]) {
-                fetchersToRun[ fetcherId ] = fetchers[ fetcherId ]
+        // The fetcher can be undefined
+        for (const fetcherId in fetchers)
+            if (!(fetcherId in alreadyLoadedData) && fetchers[fetcherId]) {
+                fetchersToRun[fetcherId] = fetchers[fetcherId];
                 fetchersCount++;
             }
 
         // Fetch all the api data thanks to one http request
-        const fetchedData = fetchersCount === 0
-            ? 0
-            : await this.execute("POST", "/api", { 
-                fetchers: fetchersToRun 
-            }).then((res) => {
-
-                const data: TObjetDonnees = {};
-                for (const id in res) 
-                    data[id] = res[id];
-
-                return data;
-
-            }).catch(e => {
-
-                // API Error hook
-                this.app.handleError(e);
-
-                throw e;
-            })
+        const fetchedData =
+            fetchersCount === 0
+                ? {}
+                : await this.execute<TObjetDonnees>(
+                      'POST',
+                      '/api',
+                      ({ fetchers: fetchersToRun } as unknown) as TPostData,
+                  )
+                      .then((res: TObjetDonnees) => {
+                          const data: TObjetDonnees = {};
+                          for (const id in res) data[id] = res[id];
+
+                          return data;
+                      })
+                      .catch((e: Error) => {
+                          // API Error hook
+                          this.app.handleError(e);
+
+                          throw e;
+                      });
 
         // Errors will be catched in the caller
 
-        return { ...alreadyLoadedData, ...fetchedData }
+        return { ...alreadyLoadedData, ...fetchedData };
     }
 
     public configure = (...[method, path, data, options = {}]: TFetcherArgs) => {
-    
         let url = this.router.url(path, {}, false);
-    
+
         debug && console.log(`[api] Sending request`, method, url, data);
-    
+
         // Create Fetch config
-        const config: With<RequestInit, 'headers'> = {
-            method: method,
-            headers: {
-                'Accept': "application/json",
-            }
-        };
-    
+        const headers = new Headers({ Accept: 'application/json' });
+        const config: RequestInit = { method, headers };
+
         // Update options depending on data
         if (data) {
-
             // If file included in data, need to use multipart
             // TODO: deep check
-            const hasFile = Object.values(data).some((value) => value instanceof File);
+                const hasFile = Object.values(data).some((value) => isFileValue(value));
             if (hasFile) {
                 // GET request = Can't send files
-                if (method === "GET")
-                    throw new Error("Cannot send file in GET request");
+                if (method === 'GET') throw new Error('Cannot send file in GET request');
                 // Auto switch to multiplart
-                else if (options.encoding === undefined)
-                    options.encoding = 'multipart';
+                else if (options.encoding === undefined) options.encoding = 'multipart';
                 else if (options.encoding !== 'multipart')
-                // Encoding set to JSON = Can't send files
-                    throw new Error("Cannot send file in non-multipart request");
+                    // Encoding set to JSON = Can't send files
+                    throw new Error('Cannot send file in non-multipart request');
             }
 
             // Data encoding
-            if (method === "GET") {
-
-                const params = new URLSearchParams( data as unknown as TPostDataWithoutFile ).toString();
+            if (method === 'GET') {
+                const params = new URLSearchParams();
+                for (const [key, value] of Object.entries(data as TPostDataWithoutFile)) {
+                    if (value === undefined || value === null) continue;
+                    params.set(key, String(value));
+                }
                 url = `${url}?${params}`;
-
             } else if (options.encoding === 'multipart') {
-
-                debug && console.log("[api] Multipart request", data);
+                debug && console.log('[api] Multipart request', data);
                 // Browser will automatically choose the right headers
                 config.body = toMultipart(data);
-
             } else {
-                config.headers["Content-Type"] = "application/json";
+                headers.set('Content-Type', 'application/json');
                 config.body = JSON.stringify(data);
             }
         }
-    
+
         return { url, config };
-    }
-    
+    };
+
     public execute<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
         const { url, config } = this.configure(...args);
 
         console.log(`[api] Fetching`, url, config);
-    
+
         return fetch(url, config)
             .then(async (response) => {
                 if (!response.ok) {
-
                     const errorData = await response.json();
                     console.warn(`[api] Failure:`, response.status, errorData);
                     const error = errorFromJson(errorData);
                     throw error;
                 }
-                const json = await response.json() as TData;
+                const json = (await response.json()) as TData;
                 debug && console.log(`[api] Success:`, json);
                 return json;
             })
@@ -263,5 +242,4 @@ export default class ApiClient implements ApiClientService {
                 }
             });
     }
-    
 }

package/client/services/router/request/history.ts

@@ -1,5 +1,5 @@
 import { createBrowserHistory } from 'history';
 export type { Update } from 'history';
 
-export const history = (typeof window !== 'undefined') ? createBrowserHistory() : undefined;
-export const location = history?.location;
+export const history = typeof window !== 'undefined' ? createBrowserHistory() : undefined;
+export const location = history?.location;

package/client/services/router/request/index.ts

@@ -3,9 +3,9 @@
 ----------------------------------*/
 
 // Npm
-import { Location } from 'history'; 
+import { Location } from 'history';
 
-// Core 
+// Core
 import BaseRequest from '@common/router/request';
 
 // Specific
@@ -17,24 +17,21 @@ import type ClientResponse from '../response';
 - TYPES
 ----------------------------------*/
 
-
 /*----------------------------------
 - ROUTER
 ----------------------------------*/
 // Since we do SSR, the server router can also be passed here
-export default class ClientRequest<TRouter extends ClientRouter = ClientRouter> extends BaseRequest {
-
+export default class ClientRequest<TRouter extends ClientRouter<any, any> = ClientRouter<any, any>> extends BaseRequest {
     public api: ApiClient;
     public response?: ClientResponse<TRouter>;
 
     public hash?: string;
 
-    public constructor( 
-        location: Location, 
+    public constructor(
+        location: Location,
         public router: TRouter,
-        public app = router.app
+        public app = router.app,
     ) {
-
         super(location.pathname);
 
         this.host = window.location.host;
@@ -44,10 +41,14 @@ export default class ClientRequest<TRouter extends ClientRouter = ClientRouter>
         // Extract search params
         if (location.search) {
             this.url += location.search;
-            this.data = Object.fromEntries( new URLSearchParams( location.search ));
+            this.data = Object.fromEntries(new URLSearchParams(location.search));
         }
-    
+
         // Request services
         this.api = new ApiClient(this.app, this);
     }
-}
+}
+
+export const isClientRequest = <TRouter extends ClientRouter<any, any> = ClientRouter<any, any>>(
+    request: unknown,
+): request is ClientRequest<TRouter> => request instanceof ClientRequest;

package/client/services/router/request/multipart.ts

@@ -9,65 +9,94 @@ import { TPostData } from '@common/router/request/api';
 - TYPES
 ----------------------------------*/
 
-function mergeObjects(object1, object2) {
-    return [object1, object2].reduce(function (carry, objectToMerge) {
-        Object.keys(objectToMerge).forEach(function (objectKey) {
-            carry[objectKey] = objectToMerge[objectKey];
+type TMultipartPrimitive = PrimitiveValue | null | undefined;
+type TMultipartValue =
+    | TMultipartPrimitive
+    | Blob
+    | Date
+    | FileList
+    | TMultipartValue[]
+    | { [key: string]: TMultipartValue };
+
+type TMultipartObject = { [key: string]: TMultipartValue };
+
+function mergeObjects<TObject extends object>(object1: TObject, object2: Partial<TObject>): TObject {
+    return [object1, object2].reduce<TObject>((carry, objectToMerge) => {
+        Object.keys(objectToMerge).forEach((objectKey) => {
+            carry[objectKey as keyof TObject] = objectToMerge[objectKey as keyof TObject] as TObject[keyof TObject];
         });
         return carry;
-    }, {});
+    }, { ...object1 });
 }
 
-function isArray(val) {
-
-    return ({}).toString.call(val) === '[object Array]';
+function isArray(val: unknown): val is TMultipartValue[] {
+    return Array.isArray(val);
 }
 
-function isJsonObject(val) {
-
+function isJsonObject(val: unknown): val is TMultipartObject {
     return !isArray(val) && typeof val === 'object' && !!val && !(val instanceof Blob) && !(val instanceof Date);
 }
 
-function isAppendFunctionPresent(formData) {
-
+function isAppendFunctionPresent(formData: FormData) {
     return typeof formData.append === 'function';
 }
 
 function isGlobalFormDataPresent() {
-
     return typeof FormData === 'function';
 }
 
-function getDefaultFormData() {
+function getDefaultFormData(): FormData {
+    if (isGlobalFormDataPresent()) return new FormData();
 
-    if (isGlobalFormDataPresent()) {
-        return new FormData();
+    throw new Error('FormData is not available in the current environment.');
+}
+
+function appendValue(formData: FormData, key: string, value: TMultipartValue, options: TOptions) {
+    if (value instanceof FileList) {
+        for (let index = 0; index < value.length; index++) {
+            const file = value.item(index);
+            if (file) formData.append(`${key}[${index}]`, file, file.name);
+        }
+        return;
+    }
+
+    if (value instanceof Blob) {
+        const filename = value instanceof File ? value.name : undefined;
+        if (filename) formData.append(key, value, filename);
+        else formData.append(key, value);
+        return;
+    }
+
+    if (value instanceof Date) {
+        formData.append(key, value.toISOString());
+        return;
+    }
+
+    if (((value === null && options.includeNullValues) || value !== null) && value !== undefined) {
+        formData.append(key, String(value));
     }
 }
 
 function convertRecursively(
-    jsonObject: {}, 
-    options: TOptions, 
-    formData: FormData, 
-    parentKey: string
+    jsonObject: TMultipartObject | TMultipartValue[],
+    options: TOptions,
+    formData: FormData,
+    parentKey: string,
 ) {
+    let index = 0;
 
-    var index = 0;
-
-    for (var key in jsonObject) {
-
+    for (const key in jsonObject) {
         if (jsonObject.hasOwnProperty(key)) {
-
-            var propName = parentKey || key;
-            var value = options.mapping(jsonObject[key]);
+            let propName = parentKey || key;
+            const rawValue = isArray(jsonObject) ? jsonObject[Number(key)] : jsonObject[key];
+            const value = options.mapping(rawValue);
 
             if (parentKey && isJsonObject(jsonObject)) {
                 propName = parentKey + '[' + key + ']';
             }
 
             if (parentKey && isArray(jsonObject)) {
-
-                if (isArray(value) || options.showLeafArrayIndexes ) {
+                if (isArray(value) || options.showLeafArrayIndexes) {
                     propName = parentKey + '[' + index + ']';
                 } else {
                     propName = parentKey + '[]';
@@ -75,25 +104,9 @@ function convertRecursively(
             }
 
             if (isArray(value) || isJsonObject(value)) {
-
                 convertRecursively(value, options, formData, propName);
-
-            } else if (value instanceof FileList) {
-
-                for (var j = 0; j < value.length; j++) {
-                    formData.append(propName + '[' + j + ']', value.item(j));
-                }
-            } else if (value instanceof Blob) {
-
-                formData.append(propName, value, value.name);
-
-            } else if (value instanceof Date) {
-
-                formData.append(propName, value.toISOString());
-
-            } else if (((value === null && options.includeNullValues) || value !== null) && value !== undefined) {
-
-                formData.append(propName, value);
+            } else {
+                appendValue(formData, propName, value, options);
             }
         }
         index++;
@@ -111,37 +124,34 @@ function convertRecursively(
 
 // options type
 type TOptions = {
-    initialFormData: FormData,
-    showLeafArrayIndexes: boolean,
-    includeNullValues: boolean,
-    mapping: (value: any) => any
-}
+    initialFormData: FormData;
+    showLeafArrayIndexes: boolean;
+    includeNullValues: boolean;
+    mapping: (value: TMultipartValue) => TMultipartValue;
+};
 
 export const toMultipart = (jsonObject: TPostData, options?: TOptions) => {
-
     if (options && options.initialFormData) {
-        
         if (!isAppendFunctionPresent(options.initialFormData)) {
             throw 'initialFormData must have an append function.';
         }
     } else if (!isGlobalFormDataPresent()) {
-
         throw 'This environment does not have global form data. options.initialFormData must be specified.';
     }
 
-    var defaultOptions = {
+    const defaultOptions: TOptions = {
         initialFormData: getDefaultFormData(),
         showLeafArrayIndexes: true,
         includeNullValues: false,
-        mapping: function(value) {
+        mapping: function (value) {
             if (typeof value === 'boolean') {
-                return +value ? '1': '0';
+                return value ? '1' : '0';
             }
             return value;
-        }
+        },
     };
 
-    var mergedOptions = mergeObjects(defaultOptions, options || {});
+    const mergedOptions = mergeObjects(defaultOptions, options || {});
 
-    return convertRecursively(jsonObject, mergedOptions, mergedOptions.initialFormData);
-}
+    return convertRecursively(jsonObject as TMultipartObject, mergedOptions, mergedOptions.initialFormData, '');
+};