@servicetitan/marketing-ui 0.5.0 → 0.8.0

package/src/utils/history/__tests__/history.test.ts

@@ -9,7 +9,7 @@ type Keys = 'lorem' | 'ipsum' | 'dolor';
 
 interface UrlParams {
     lorem: { year: number };
-    ipsum: { name: 'Search' | 'Display' };
+    ipsum: { name?: 'Search' | 'Display' };
 }
 
 interface QueryParams {
@@ -19,7 +19,7 @@ interface QueryParams {
 const UrlMap: Record<Keys, string> = {
     dolor: '/',
     lorem: '/lorem/:year(\\d+)',
-    ipsum: '/ipsum/:name(Search|Display)',
+    ipsum: '/ipsum/:name(Search|Display)?',
 };
 
 const handlers = {
@@ -48,6 +48,7 @@ describe('useParamsHistory', () => {
                         cb(
                             useParamsHistory<Keys, UrlParams, QueryParams>(
                                 UrlMap,
+                                undefined,
                                 paramHandler ? handlers : undefined
                             )
                         )
@@ -81,6 +82,12 @@ describe('useParamsHistory', () => {
         expect(result).toBe('/ipsum/Search');
     });
 
+    it('check optional url params', () => {
+        const result = renderHookText(hook => hook.href('ipsum'));
+
+        expect(result).toBe('/ipsum');
+    });
+
     it('uses query param handler', () => {
         const result = renderHookText(
             hook => hook.href('dolor', undefined, { to: 'Search', from: new Date(2021, 8, 9) }),

package/src/utils/history/__tests__/url-params-handler.test.ts

@@ -0,0 +1,32 @@
+import { UrlParamsHandler } from '../url-params-handler';
+
+describe('UrlParamsHandler', () => {
+    const handler = new UrlParamsHandler<{
+        str?: string;
+        numb?: number;
+        bool?: boolean;
+        dt?: Date;
+        strArr?: string[];
+        numbArr?: number[];
+    }>({
+        str: UrlParamsHandler.parserString,
+        numb: UrlParamsHandler.parserNumber,
+    });
+
+    it('parses url params', () => {
+        const result = handler.parse({ str: 'check', numb: '12' });
+
+        expect(result).toEqual({
+            str: 'check',
+            numb: 12,
+        });
+    });
+
+    it('generates url string', () => {
+        const result = handler.toString({
+            numb: 15,
+        });
+
+        expect(result).toEqual({ numb: '15' });
+    });
+});

package/src/utils/history/__tests__/use-url-params.test.ts

@@ -4,6 +4,7 @@ import { createMemoryHistory, History } from 'history';
 import { Router, Route } from 'react-router-dom';
 import { useUrlParams } from '../use-url-params';
 import { paramParsers, StringParamParser } from '../../param-parsers';
+import { UrlParamsHandler } from '../url-params-handler';
 
 type ParsersFromValues<Values extends Record<string, any | undefined>> = {
     [Prop in keyof Values]: StringParamParser<Values[Prop]>;
@@ -30,7 +31,7 @@ describe('useUrlParams', () => {
                     Route,
                     { path },
                     React.createElement(() => {
-                        result = useUrlParams(paramHandler);
+                        result = useUrlParams(UrlParamsHandler.from(paramHandler));
 
                         return null;
                     })

package/src/utils/history/history.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
 import { useHistory, generatePath } from 'react-router-dom';
-import { createPath } from 'history';
+import { createPath, History } from 'history';
+import { useInvariableMemo } from '../invariable-hooks';
 import { QueryParamsHandler } from './query-params-handler';
+import { UrlParamsHandler } from './url-params-handler';
 
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
     ? I
@@ -17,12 +18,17 @@ export interface ParametrizedHistory<
     href: Overloading<Keys, UrlMappings, QueryMappings, string>;
     push: Overloading<Keys, UrlMappings, QueryMappings, void>;
     replace: Overloading<Keys, UrlMappings, QueryMappings, void>;
+    history: History;
 }
 
 type AllOverloads<Keys extends string, UrlMappings, QueryMappings, O> = {
     [Prop in Keys]: Prop extends keyof UrlMappings
         ? Prop extends keyof QueryMappings
-            ? (key: Prop, urlParams: UrlMappings[Prop], queryParams?: QueryMappings[Prop]) => O
+            ? Partial<UrlMappings[Prop]> extends UrlMappings[Prop]
+                ? (key: Prop, urlParams?: UrlMappings[Prop], queryParams?: QueryMappings[Prop]) => O
+                : (key: Prop, urlParams: UrlMappings[Prop], queryParams?: QueryMappings[Prop]) => O
+            : Partial<UrlMappings[Prop]> extends UrlMappings[Prop]
+            ? (key: Prop, urlParams?: UrlMappings[Prop]) => O
             : (key: Prop, urlParams: UrlMappings[Prop]) => O
         : Prop extends keyof QueryMappings
         ? (key: Prop, urlParams?: undefined, queryParams?: QueryMappings[Prop]) => O
@@ -33,10 +39,14 @@ type Overloading<Keys extends string, UrlMappings, QueryMappings, O> = UnionToIn
     Values<AllOverloads<Keys, UrlMappings, QueryMappings, O>>
 >;
 
-type ParamHandlers<QueryMappings> = {
+type QueryParamHandlers<QueryMappings> = {
     [Prop in keyof QueryMappings]?: QueryParamsHandler<QueryMappings[Prop]>;
 };
 
+type UrlParamHandlers<QueryMappings> = {
+    [Prop in keyof QueryMappings]?: UrlParamsHandler<QueryMappings[Prop]>;
+};
+
 /**
  * Create parameterized history to check passed arguments
  *
@@ -75,16 +85,17 @@ type ParamHandlers<QueryMappings> = {
  */
 export const useParamsHistory = <Keys extends string, PU = void, PQ = void>(
     paths: Record<Keys, string>,
-    handlers?: ParamHandlers<PQ>
+    urlHandlers?: UrlParamHandlers<PU>,
+    queryHandlers?: QueryParamHandlers<PQ>
 ): ParametrizedHistory<Keys, PU, PQ> => {
     const history = useHistory();
 
-    return useMemo(() => {
+    return useInvariableMemo(() => {
         const generateLocation = (path: Keys, urlParams?: any, queryParams?: any) => {
             let searchParams = undefined;
 
             if (queryParams) {
-                const hand = (handlers as any)?.[path as any] as QueryParamsHandler<any>;
+                const hand = (queryHandlers as any)?.[path as any] as QueryParamsHandler<any>;
 
                 if (hand) {
                     searchParams = '?' + hand.toString(queryParams);
@@ -93,13 +104,19 @@ export const useParamsHistory = <Keys extends string, PU = void, PQ = void>(
                 }
             }
 
+            const urlHandler = (urlHandlers as any)?.[path] as UrlParamsHandler<any>;
+
             return {
-                pathname: generatePath(paths[path], urlParams),
+                pathname: generatePath(
+                    paths[path],
+                    urlHandler ? urlHandler.toString(urlParams) : urlParams
+                ),
                 search: searchParams,
             };
         };
 
         return {
+            history,
             path: ((key: Keys, urlParams?: unknown, queryParams?: unknown) => {
                 return createPath(generateLocation(key, urlParams, queryParams));
             }) as Overloading<Keys, PU, PQ, string>,
@@ -111,9 +128,9 @@ export const useParamsHistory = <Keys extends string, PU = void, PQ = void>(
             push: ((key: Keys, urlParams?: unknown, queryParams?: unknown) => {
                 history.push(createPath(generateLocation(key, urlParams, queryParams)));
             }) as Overloading<Keys, PU, PQ, void>,
-            replace: ((key: Keys, urlParams?: unknown, queryParams?: unknown) => {
+            replace: ((key: Keys, urlParams?: Partial<PU>, queryParams?: unknown) => {
                 history.replace(createPath(generateLocation(key, urlParams, queryParams)));
             }) as Overloading<Keys, PU, PQ, void>,
         };
-    }, [history, paths, handlers]);
+    });
 };

package/src/utils/history/index.ts

@@ -1,4 +1,5 @@
 export * from './history';
 export * from './query-params-handler';
+export * from './url-params-handler';
 export * from './use-query-params';
 export * from './use-url-params';

package/src/utils/history/query-params-handler.ts

@@ -80,6 +80,10 @@ export class QueryParamsHandler<Values extends Record<string, any | undefined>>
 
     constructor(private handlers: HandlersFromValues<Values>) {}
 
+    static from<T>(handlers: HandlersFromValues<T>) {
+        return new QueryParamsHandler<T>(handlers);
+    }
+
     toString(params: Values): string {
         const keys = Object.keys(this.handlers);
         const url = new URLSearchParams();

package/src/utils/history/url-params-handler.ts

@@ -0,0 +1,65 @@
+import { paramParsers, StringParamParser } from '../param-parsers';
+import { keys } from '../helpers';
+
+type HandlersFromValues<Values extends Record<string, any | undefined>> = {
+    [Prop in keyof Values]: StringParamParser<Values[Prop]>;
+};
+
+type StringParams<T extends Record<string, any>> = {
+    [Prop in keyof T]: string | undefined;
+};
+
+export class UrlParamsHandler<Values extends Record<string, any | undefined>> {
+    static readonly parserString = paramParsers.uri;
+    static readonly parserNumber = paramParsers.number;
+
+    constructor(private parsers: HandlersFromValues<Values>) {}
+
+    static from<T>(parsers: HandlersFromValues<T>) {
+        return new UrlParamsHandler<T>(parsers);
+    }
+
+    toString(values?: Partial<Values>): Partial<StringParams<Values>> {
+        const params: Partial<StringParams<Values>> = {};
+
+        if (!values) {
+            return params;
+        }
+
+        for (const key of keys(values)) {
+            const parser = this.parsers[key];
+
+            if (!parser) {
+                continue;
+            }
+
+            const value = values[key];
+
+            if (value !== undefined) {
+                params[key] = parser.stringify(value!);
+            }
+        }
+
+        return params;
+    }
+
+    parse(params: StringParams<Values>): Partial<Values> {
+        const values: Partial<Values> = {};
+
+        for (const key of keys(params)) {
+            const parser = this.parsers?.[key];
+
+            if (!parser) {
+                continue;
+            }
+
+            const value = params[key];
+
+            if (value !== undefined) {
+                values[key] = parser.parse(value);
+            }
+        }
+
+        return values;
+    }
+}

package/src/utils/history/use-query-params.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { createPath } from 'history';
 import { QueryParamsHandler } from './query-params-handler';
+import { useInvariableMemo } from '../invariable-hooks';
 
 export interface QueryParamsHook<T extends Record<string, any | undefined>> {
     values: T;
@@ -32,11 +33,12 @@ function useQueryParams<T extends Record<string, any>>(
 function useQueryParams<T>(handler?: QueryParamsHandler<T>): QueryParamsHook<T> {
     const history = useHistory();
     const search = history.location.search || '';
+    const memoHandler = useInvariableMemo(() => handler);
 
     return useMemo(() => {
-        const currentValues = handler ? handler.parse(search) : parseParams<T>(search);
+        const currentValues = memoHandler ? memoHandler.parse(search) : parseParams<T>(search);
         const stringify = (params: T) =>
-            handler ? handler.toString(params) : stringifyParams(params);
+            memoHandler ? memoHandler.toString(params) : stringifyParams(params);
 
         const createPathWithParams = (pathName: string, params: T) =>
             createPath({ pathname: pathName, search: stringify(params) });
@@ -61,7 +63,7 @@ function useQueryParams<T>(handler?: QueryParamsHandler<T>): QueryParamsHook<T>
                     pathname: createPath({ pathname: pathName, search: stringify(params) }),
                 }),
         };
-    }, [search, handler, history]);
+    }, [search, memoHandler, history]);
 }
 
 export { useQueryParams };

package/src/utils/history/use-url-params.ts

@@ -1,44 +1,19 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { StringParamParser } from '../param-parsers';
-import { keys } from '../helpers';
+import { UrlParamsHandler } from './url-params-handler';
+import { useInvariableMemo } from '../invariable-hooks';
 
 type StringParams<T extends Record<string, any>> = {
     [Prop in keyof T]: string | undefined;
 };
 
-type ParsersFromValues<Values extends Record<string, any | undefined>> = {
-    [Prop in keyof Values]: StringParamParser<Values[Prop]>;
-};
-
-function useUrlParams<T extends Record<string, string>>(): Partial<T>;
-function useUrlParams<T extends Record<string, any>>(parsers: ParsersFromValues<T>): Partial<T>;
-function useUrlParams<T>(parsers?: ParsersFromValues<T>): Partial<T> {
+function useUrlParams<T extends Record<string, string>>(): StringParams<T>;
+function useUrlParams<T extends Record<string, any>>(parsers: UrlParamsHandler<T>): Partial<T>;
+function useUrlParams<T>(handler?: UrlParamsHandler<T>): Partial<T> | StringParams<T> {
     const params = useParams<StringParams<T>>();
+    const memoHandler = useInvariableMemo(() => handler);
 
-    return useMemo(() => {
-        if (!parsers) {
-            return params as unknown as Partial<T>;
-        }
-
-        const values: Partial<T> = {};
-
-        for (const key of keys(params)) {
-            const parser = parsers[key];
-
-            if (!parser) {
-                continue;
-            }
-
-            const value = params[key];
-
-            if (value !== undefined) {
-                values[key] = parser.parse(value);
-            }
-        }
-
-        return values;
-    }, [parsers, params]);
+    return useMemo(() => (memoHandler ? memoHandler.parse(params) : params), [params, memoHandler]);
 }
 
 export { useUrlParams };

package/src/utils/{use-init-effect.ts → invariable-hooks.ts}

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 /**
  * runs effect only once for component
@@ -13,3 +13,12 @@ export function useInitEffect(init: () => void, dispose?: () => void) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }
+
+/**
+ * gets memo only once
+ * @param memo method that returns memoed data
+ */
+export function useInvariableMemo<T>(memo: () => T): T {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(memo, []);
+}

package/src/utils/param-parsers.ts

@@ -1,3 +1,5 @@
+import { keys } from './helpers';
+
 export interface StringParamParser<T> {
     stringify(value: T): string | undefined;
     parse(query: string): T | undefined;
@@ -12,7 +14,7 @@ const stringParser: StringParamParser<string> = {
     },
 };
 
-const stringEnumParser = <T extends string>(values: T[]): StringParamParser<T> => ({
+const stringSetParser = <T extends string>(values: (string | T)[]): StringParamParser<T> => ({
     stringify(value) {
         return value || undefined;
     },
@@ -25,6 +27,28 @@ const stringEnumParser = <T extends string>(values: T[]): StringParamParser<T> =
     },
 });
 
+const stringEnumParser = <TS extends string, TV>(map: Record<TS, TV>): StringParamParser<TV> => ({
+    stringify(value) {
+        for (const key of keys(map)) {
+            if (map[key] === value) {
+                return key;
+            }
+        }
+
+        return undefined;
+    },
+    parse(query) {
+        const key = query as TS;
+
+        // eslint-disable-next-line no-prototype-builtins
+        if (map.hasOwnProperty(key)) {
+            return map[key];
+        }
+
+        return undefined;
+    },
+});
+
 const uriParser: StringParamParser<string> = {
     stringify(value) {
         return value || undefined;
@@ -70,6 +94,7 @@ const boolParser: StringParamParser<boolean> = {
 
 export const paramParsers = {
     string: stringParser,
+    stringSet: stringSetParser,
     stringEnum: stringEnumParser,
     uri: uriParser,
     number: numberParser,

package/dist/utils/use-init-effect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-init-effect.d.ts","sourceRoot":"","sources":["../../src/utils/use-init-effect.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,IAAI,QAOnE"}

package/dist/utils/use-init-effect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-init-effect.js","sourceRoot":"","sources":["../../src/utils/use-init-effect.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC;;;;GAIG;AACH,SAAgB,aAAa,CAAC,IAAgB,EAAE,OAAoB;IAChE,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,EAAE,CAAC;QAEP,OAAO,OAAO,CAAC;QACf,uDAAuD;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC;AAPD,sCAOC"}