Add react example to readme, improve UrlBuilder to accept additionalS…

…tring for url concatenation

README.md

@@ -1,5 +1,6 @@
 * [Installation](#install)
 * [How to use](#usage)
+* [Using with react-router](#react-router)
 * [Customization](#customization)
   * [FactoryConfig](#config)
   * [Creating strategies](#strategies)
@@ -36,6 +37,56 @@ routes.user.userId().relativeUrl(); // ':userId'
 routes.user.userId('18').private_info.url(); // '/user/18/private-info'
 ```
 
+### <a name="react-router"></a> Using with react-router
+
+```tsx
+import { createNiceWebRoutes } from 'nice-web-routes';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+const appRoutes = createNiceWebRoutes({
+  auth: {
+    login: {},
+    registration: {},
+  },
+  profile: {
+    userId: () => ({}),
+    settings: {},
+    edit: {
+      personal: {},
+      career: {},
+    },
+  },
+});
+
+const App = () => (
+  <Routes>
+    <Route index element={<Navigate to={appRoutes.auth.relativeUrl()} replace />} />
+
+    <Route path={appRoutes.auth.url('/*')}> {/* '/auth/*' */}
+      <Route index element={<Navigate to={appRoutes.auth.login.relativeUrl()} replace />} />
+
+      <Route path={appRoutes.auth.login.relativeUrl()} element={<LoginDisplay />} />
+      <Route path={appRoutes.auth.registration.relativeUrl()} element={<RegistrationDisplay />} />
+    </Route>
+
+    <Route path={appRoutes.profile.url('/*')}> {/* '/profile/*' */}
+      <Route index element={<MyProfileDisplay />} />
+
+      <Route path={appRoutes.profile.userId().relativeUrl()} element={<UserProfile />} />
+      <Route path={appRoutes.profile.settings.relativeUrl()} element={<SettingsDisplay />} />
+
+      <Route path={appRoutes.profile.edit.relativeUrl('/*')}> {/* 'edit/*' */}
+        <Route index element={<ProfileSettings />} />
+
+        <Route path={appRoutes.profile.edit.career.relativeUrl()} element={<EditCareerDisplay />} />
+        <Route path={appRoutes.profile.edit.personal.relativeUrl()} element={<EditPersonalInformationDisplay />} />
+      </Route>
+    </Route>
+  </Routes>
+);
+
+```
+
 ### <a name="customization"></a> Customization
 
 You can customize routes creating by using `configureNiceWebRoutesCreating` and passing `FactoryConfig`:

src/index.ts

@@ -2,4 +2,9 @@ export * from './configureNiceWebRoutesCreating';
 export * from './createNiceWebRoutes';
 export * from './strategies';
 export * from './types';
-export { UrlBuilder, DefaultUrlBuilder } from './utils';
+export {
+  UrlBuilder,
+  DefaultUrlBuilder,
+  joinRouteSegments,
+  snakeCaseToDashCase,
+} from './utils';

src/makeSearchUrl.ts

@@ -1,4 +1,4 @@
-import { joinRouteSegments } from './joinRouteSegments';
+import { joinRouteSegments } from './utils/joinRouteSegments';
 import { snakeCaseToDashCase, UrlBuilderConstructor } from './utils';
 
 function makeSearchUrl(

src/strategies/createObjectNiceWebRoutes.ts

@@ -1,5 +1,5 @@
 import { defaultSegmentValueGetter } from '../defaultSegmentValueGetter';
-import { joinRouteSegments } from '../joinRouteSegments';
+import { joinRouteSegments } from '../utils/joinRouteSegments';
 import {
   NICE_WEB_ROUTE_URLS_KEYS,
   NiceWebRoutesDescription,
@@ -38,15 +38,15 @@ export const createObjectNiceWebRoutes: CreatingStrategy = (config = {}) =>
 
     const node = {
       url: function <Search extends Record<string, string>>(
-        searchParams?: Search
+        searchParams?: Search | string
       ) {
         return new UrlBuilderImpl()
           .addPathnameIfExists(routePath)
           .addSearchParamsIfExists(searchParams)
           .build();
       },
-      relativeUrl: function () {
-        return currentSegmentName;
+      relativeUrl: function (additionalString: string = '') {
+        return currentSegmentName + additionalString;
       },
     } as NiceWebRoutesNode<
       DescriptionShape,
@@ -69,8 +69,7 @@ export const createObjectNiceWebRoutes: CreatingStrategy = (config = {}) =>
         let segment: string;
         if (snakeTransformation.disableForSegmentName) {
           segment = descriptionSegment;
-        }
-        else {
+        } else {
           segment = snakeCaseToDashCase(descriptionSegment);
         }
 
@@ -84,7 +83,7 @@ export const createObjectNiceWebRoutes: CreatingStrategy = (config = {}) =>
       }
 
       if (typeof descriptionSegmentValue === 'function') {
-        const parametrizedRoute: ParametrizedNiceWebRoute<any> = value => {
+        const parametrizedRoute: ParametrizedNiceWebRoute<any> = (value) => {
           const description = descriptionSegmentValue();
 
           let segmentValue = getSegmentValue(descriptionSegment, value);

src/strategies/createProxyNiceWebRoutes.ts

@@ -1,5 +1,5 @@
 import { defaultSegmentValueGetter } from '../defaultSegmentValueGetter';
-import { joinRouteSegments } from '../joinRouteSegments';
+import { joinRouteSegments } from '../utils/joinRouteSegments';
 import {
   NICE_WEB_ROUTE_URLS_KEYS,
   NiceWebRoutesDescription,
@@ -40,15 +40,15 @@ export const createProxyNiceWebRoutes: CreatingStrategy = (config = {}) =>
     const proxy = new Proxy<ProxyType>(
       {
         url: function <Search extends Record<string, string>>(
-          searchParams?: Search
+          searchParams?: Search | string
         ) {
           return new UrlBuilderImpl()
             .addPathnameIfExists(routePath)
             .addSearchParamsIfExists(searchParams)
             .build();
         },
-        relativeUrl: function () {
-          return currentSegmentName;
+        relativeUrl: function (additionalString: string = '') {
+          return currentSegmentName + additionalString;
         },
       },
       {

src/strategies/creatingStrategies.test.ts

@@ -46,6 +46,12 @@ describe.each(testTable)('%s creating strategy', (strategyName) => {
   test('if relative url on second level equals "statistic"', () => {
     expect(routes.users.statistic.relativeUrl()).toBe('statistic');
   });
+  test('if full url on second level with additional string equals "/users/statistic/*"', () => {
+    expect(routes.users.statistic.url('/*')).toBe('/users/statistic/*');
+  });
+  test('if full url on second level with additional string equals "/users/statistic/*"', () => {
+    expect(routes.users.statistic.relativeUrl('/*')).toBe('statistic/*');
+  });
 
   test('if full url of parametrized route on first level WITHOUT value equals "/:article"', () => {
     expect(routes.article().url()).toBe('/:article');

src/types/NiceWebRouteUrls.ts

@@ -1,6 +1,8 @@
 export type NiceWebRouteUrls = {
-  url: <Search extends Record<string, string>>(searchParams?: Search) => string;
-  relativeUrl: () => string;
+  url: <Search extends Record<string, string>>(
+    searchParams?: Search | string
+  ) => string;
+  relativeUrl: (additionalString?: string) => string;
 };
 
 export const NICE_WEB_ROUTE_URLS_KEYS: (keyof NiceWebRouteUrls)[] = [

src/utils/DefaultUrlBuilder.test.ts

@@ -54,3 +54,19 @@ test('if nullable search params will ignored', () => {
     .build();
   expect(url).toBe('/?one=1&three=three');
 });
+
+test('if additional string was passed in search params', () => {
+  const builder = new DefaultUrlBuilder();
+  const url = builder.addSearchParamsIfExists('*').build();
+  expect(url).toBe('/*');
+});
+
+test('if additional string was passed in search params with other data', () => {
+  const builder = new DefaultUrlBuilder();
+  const url = builder
+    .addPathnameIfExists('some-url')
+    .addPathnameIfExists('asd')
+    .addSearchParamsIfExists('*')
+    .build();
+  expect(url).toBe('/some-url/asd*');
+});

src/utils/DefaultUrlBuilder.ts

@@ -1,22 +1,30 @@
 import { isNullOrUndefined } from './isNullOrUndefined';
+import { joinRouteSegments } from './joinRouteSegments';
 import { UrlBuilder } from './UrlBuilder';
 
 class DefaultUrlBuilder implements UrlBuilder {
   private pathname = '';
   private searchParams: Record<string, string> = {};
+  private additionalString = '';
 
   addPathnameIfExists(pathname?: string) {
     if (!pathname) {
       return this;
     }
-    this.pathname += pathname;
+    this.pathname = joinRouteSegments(this.pathname, pathname);
     return this;
   }
 
-  addSearchParamsIfExists(searchParams?: Record<string, string>) {
+  addSearchParamsIfExists(searchParams?: Record<string, string> | string) {
     if (!searchParams) {
       return this;
     }
+
+    if (typeof searchParams === 'string') {
+      this.additionalString = searchParams;
+      return this;
+    }
+
     this.searchParams = {
       ...this.searchParams,
       ...searchParams,
@@ -36,7 +44,12 @@ class DefaultUrlBuilder implements UrlBuilder {
     });
 
     // remove extra part in url
-    return url.toString().substring(urlBase.length);
+    let builtUrl = url.toString().substring(urlBase.length);
+    if (this.additionalString) {
+      builtUrl += this.additionalString;
+    }
+
+    return builtUrl;
   }
 }
 

src/utils/UrlBuilder.ts

@@ -1,7 +1,9 @@
 export interface UrlBuilder {
   addPathnameIfExists(pathname?: string): UrlBuilder;
 
-  addSearchParamsIfExists(searchParams?: Record<string, string>): UrlBuilder;
+  addSearchParamsIfExists(
+    searchParams?: Record<string, string> | string
+  ): UrlBuilder;
 
   build(): string;
 }

src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './isNullOrUndefined';
 export * from './snakeCaseToDashCase';
 export * from './DefaultUrlBuilder';
 export * from './UrlBuilder';
+export * from './joinRouteSegments';

src/joinRouteSegments.ts → src/utils/joinRouteSegments.ts

@@ -7,12 +7,14 @@ function joinRouteSegments(...segments: string[]) {
   const routeSegmentSeparator = '/';
 
   return segments
+    .flatMap((segment) => segment.split(routeSegmentSeparator))
     .map((segment) => {
       if (segment.endsWith(routeSegmentSeparator)) {
         return segment.slice(0, segment.length - 2);
       }
       return segment;
     })
+    .filter((segment) => segment !== '')
     .join(routeSegmentSeparator);
 }