Add query functionality on the Interpolation

README.md

@@ -29,12 +29,20 @@ pinterpolate('/users/:id', { id: 1 });
 
 pinterpolate(':name is here.', { name: 'Barbara' });
 // => 'Barbaba is here.'
+
+pinterpolate('/query', {}, { name: 'John', address: 'Nepal' });
+// => '/query?name=John&address=Nepal'
+
+pinterpolate('/users/:id', { id: 1 }, { name: 'John' });
+// => '/users/1?name=John'
 ```
 
 ## Use Case
 
 I mostly use this utility in conjuction with my API endpoints and React Router routes.
+
 #### For APIs
+
 ```js
 const USERS_IMAGE = '/users/:userId/images/:imageId'
 
@@ -47,14 +55,15 @@ export function fetchUsersImage(userId, imageId) {
 ```
 
 #### For React Router routes
+
 ```js
 // constants/routes.js
 const USER = '/users/:userId'
 const USERS_RECORD = '/users/:userId/records/:recordId';
 
 // Router.js
 export Router = () => (
-  <Router> 
+  <Router>
     <Route path={routes.USER} component={UserComponent} />
     <Route path={routes.USERS_RECORD} component={RecordComponent} />
   </Router>

index.d.ts

@@ -1,5 +1,13 @@
 export interface Params {
-    [key: string]: string | number;
+  [key: string]: string | number;
 }
 
-export default function interpolate(str: string, params: Params): string;
+export interface Queries {
+  [key: string]: string | number;
+}
+
+export default function interpolate(
+  str: string,
+  params: Params,
+  queries?: Queries
+): string;

src/index.js

@@ -5,15 +5,21 @@
  * interpolate(':name is here.', {name: 'Barbara'})
  * => 'Barbaba is here.'
  *
+ * @example
+ * interpolate('/:id', {id: 'user1'},{company:'Google'})
+ * => '/user1?company=Google'
+ *
  * @param {string} str
  * @param {object} params
+ * @param {object} queries
  *
  * @returns string
  */
-export default function interpolate(str, params) {
+export default function interpolate(str, params, queries = {}) {
   let formattedString = str;
   params = params || {};
 
+  // interpolates string, :name to Barbaba
   for (const [key, value] of Object.entries(params)) {
     const val = value || '';
     formattedString = formattedString.replace(
@@ -22,5 +28,20 @@ export default function interpolate(str, params) {
     );
   }
 
+  queries = queries || {};
+
+  // adds queries to interpolated string
+  if (Object.values(queries).filter((a) => a).length) {
+    formattedString += '?';
+
+    Object.entries(queries).forEach(([name, value]) => {
+      if (name && value) {
+        formattedString += `${name}=${value}&`;
+      }
+    });
+
+    formattedString = formattedString.slice(0, formattedString.length - 1);
+  }
+
   return formattedString;
 }

test/index.spec.js

@@ -8,7 +8,7 @@ describe('interpolate()', () => {
     const params = {
       one: 1,
       two: 2,
-      three: 3,
+      three: 3
     };
     const expectedStr = '1 2 3';
 
@@ -20,7 +20,7 @@ describe('interpolate()', () => {
     const params = {
       one: 1,
       two: 2,
-      three: undefined,
+      three: undefined
     };
     const expectedStr = '1 2 ';
 
@@ -34,24 +34,54 @@ describe('interpolate()', () => {
     expect(pinterpolate(str, undefined)).equal(str);
   });
 
-  it('shoud not interpolate keys with same initial key name', () => {
+  it('should not interpolate keys with same initial key name', () => {
     const str = 'Test';
 
     expect(
       pinterpolate(':one :onextwo', {
         one: '1',
-        onextwo: '2',
+        onextwo: '2'
       })
     ).equal('1 2');
   });
 
-  const str = 'This is test to check if :library passes this test.';
+  it('should not interpolate keys with same initial key name', () => {
+    const str = 'This is test to check if :library passes this test.';
 
-  it('shoud not interpolate keys with same initial key name', () => {
     expect(
       pinterpolate(str, {
-        library: 'pinterpolate',
+        library: 'pinterpolate'
       })
     ).equal('This is test to check if pinterpolate passes this test.');
   });
+
+  it('should add queries to link for search', () => {
+    const str = 'https://github.com/search';
+    const params = {}; // can be empty string, null or undefined
+    const queries = {
+      l: 'JavaScript',
+      q: 'label:"help+wanted"',
+      type: 'Issues'
+    };
+
+    expect(pinterpolate(str, params, queries)).equal(
+      'https://github.com/search?l=JavaScript&q=label:"help+wanted"&type=Issues'
+    );
+  });
+
+  it('should add the queries for name and address to link', () => {
+    const str = '/:userId/:companyId';
+    const params = {
+      userId: '456',
+      companyId: '123'
+    };
+    const queries = {
+      name: 'John',
+      address: 'KTM'
+    };
+
+    expect(pinterpolate(str, params, queries)).equal(
+      '/456/123?name=John&address=KTM'
+    );
+  });
 });