Add custom path parameters option

src/common/components/path-parameters/index.ts

@@ -0,0 +1 @@
+export { PathParameters } from "./path-parameters";

src/common/components/path-parameters/path-parameters.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Table, Input } from 'antd';
+//@ts-ignore
+import Highlighter from 'react-highlight-words';
+
+export const PathParameters = ({data, onValueChange}) => {
+    const columns = [
+    {
+        title: 'Key',
+        dataIndex: 'key',
+        key: 'key',
+        width: '50%',
+    },
+    {
+        title: 'Value',
+        dataIndex: 'value',
+        key: 'value',
+        width: '50%',
+    } 
+    ];
+    return <Table columns={columns} dataSource={Object.keys(data).map(key => ({key,value:<Input value={data[key]} onChange={(e) => onValueChange(key, e.target.value)}/>}))} />;
+}

src/common/components/rest-method/rest-method.tsx

@@ -4,6 +4,7 @@ import { MethodParameters } from '../method-parameters';
 import { MethodMetadata } from '../../rest';
 import { ResponseValues } from '../response-values';
 import { CustomParameters } from '../custom-parameters';
+import { PathParameters } from '../path-parameters';
 
 export const RestMethod = ({
   author,
@@ -16,7 +17,18 @@ export const RestMethod = ({
 }: MethodMetadata & { useMethod: any }) => {
   const [showParameters, setShowParameters] = useState(false);
   const [showCustomParameters, setShowCustomParameters] = useState(false);
-  const { getData, data } = useMethod();
+  const [showPathParameters, setShowPathParameters] = useState(false);
+  const [urlParams, seturlParams] = useState(null);
+  const [pathParameters, setPathParameters] = useState(()=>{
+    const customParameterObject={};
+    const pathParametersList = name.split(':')
+    pathParametersList.shift()
+    pathParametersList.forEach((pathParameter) => {
+      const pathParameterClean=pathParameter.split('/')
+      customParameterObject[pathParameterClean[0]]=''})
+    return customParameterObject}
+    )
+  const { getData, data } = useMethod({pathParameters});
 
   const handleCall = async () => {
     const dt = await getData(customParameters);
@@ -33,6 +45,10 @@ export const RestMethod = ({
     setCustomParameters({...customParameters, [key]: value})
   }
 
+  const onValuePathChange = (key: string, value: string) => {
+    setPathParameters({...pathParameters, [key]: value})
+  }
+
   const actions = [
     <span
       key="comment-basic-reply-to"
@@ -48,7 +64,13 @@ export const RestMethod = ({
       onClick={() => setShowCustomParameters(!showCustomParameters)}
     >
       Set custom parameters
-    </span>,   
+    </span>,
+        <span
+        key="comment-basic-reply-to"
+        onClick={() => setShowPathParameters(!showPathParameters)}
+      >
+        Set path parameters
+      </span>,   
   ];
 
   return (
@@ -80,6 +102,7 @@ export const RestMethod = ({
       {data && <ResponseValues data={data}/>}
       {/* @ts-ignore */}
       {showCustomParameters && <CustomParameters data={customParameters} onValueChange={onValueChange}/>}
+      {showPathParameters && <PathParameters data={pathParameters} onValueChange={onValuePathChange}/>}
     </Card>
   );
 };

src/common/rest/auth/index.ts

@@ -1,19 +1,27 @@
+import { useMemo } from 'react';
 import { useLazyAxios } from 'use-axios-client';
 import { MethodMetadata, Parameter } from '..';
 import { Headers, URL } from '../../helpers/axios';
 
 const path = 'applications';
 
-export function useMethod() {
+export function useMethod({pathParameters}: any) {
+  const fullPath = useMemo(() => {
+    let newPath = path
+    if (pathParameters) {
+      Object.keys(pathParameters).forEach((key) => { 
+        newPath = newPath.replace(':' + key, [pathParameters[key]])
+      })
+    }
+    return newPath
+  },[pathParameters])
   const [getData, { data, error, loading }] = useLazyAxios({
-    url: `${URL}${path}`,
+    url: `${URL}${fullPath}`,
     headers: Headers
   });
   return { data, error, loading, getData };
 }
 
-
-
 const parameters: Parameter[] = [
   {
     key: 1,
@@ -28,7 +36,7 @@ export const metadata: MethodMetadata = {
   author: 'Hide on bush',
   authorPicture: '',
   description: 'Call for getting applications',
-  name: '/applications',
+  name: path,
   method: 'GET',
   parameters,
 };