feat: add support for path params is useMutate

contiamo · Jun 4, 2020 · f50da00 · f50da00
1 parent 12d905c
commit f50da00
Show file tree

Hide file tree

Showing 8 changed files with 637 additions and 436 deletions.
diff --git a/src/Mutate.tsx b/src/Mutate.tsx
@@ -16,16 +16,20 @@ export interface States<TData, TError> {
   error?: GetState<TData, TError>["error"];
 }
 
-export interface MutateRequestOptions<TQueryParams> extends RequestInit {
+export interface MutateRequestOptions<TQueryParams, TPathParams> extends RequestInit {
   /**
    * Query parameters
    */
   queryParams?: TQueryParams;
+  /**
+   * Path parameters
+   */
+  pathParams?: TPathParams;
 }
 
-export type MutateMethod<TData, TRequestBody, TQueryParams> = (
+export type MutateMethod<TData, TRequestBody, TQueryParams, TPathParams> = (
   data: TRequestBody,
-  mutateRequestOptions?: MutateRequestOptions<TQueryParams>,
+  mutateRequestOptions?: MutateRequestOptions<TQueryParams, TPathParams>,
 ) => Promise<TData>;
 
 /**
@@ -40,7 +44,7 @@ export interface Meta {
 /**
  * Props for the <Mutate /> component.
  */
-export interface MutateProps<TData, TError, TQueryParams, TRequestBody> {
+export interface MutateProps<TData, TError, TQueryParams, TRequestBody, TPathParams = unknown> {
   /**
    * The path at which to request data,
    * typically composed by parents or the RestfulProvider.
@@ -83,7 +87,7 @@ export interface MutateProps<TData, TError, TQueryParams, TRequestBody> {
    * @param actions - a key/value map of HTTP verbs, aliasing destroy to DELETE.
    */
   children: (
-    mutate: MutateMethod<TData, TRequestBody, TQueryParams>,
+    mutate: MutateMethod<TData, TRequestBody, TQueryParams, TPathParams>,
     states: States<TData, TError>,
     meta: Meta,
   ) => React.ReactNode;
@@ -111,8 +115,8 @@ export interface MutateState<TData, TError> {
  * is a named class because it is useful in
  * debugging.
  */
-class ContextlessMutate<TData, TError, TQueryParams, TRequestBody> extends React.Component<
-  MutateProps<TData, TError, TQueryParams, TRequestBody> & InjectedProps,
+class ContextlessMutate<TData, TError, TQueryParams, TRequestBody, TPathParams = unknown> extends React.Component<
+  MutateProps<TData, TError, TQueryParams, TRequestBody, TPathParams> & InjectedProps,
   MutateState<TData, TError>
 > {
   public readonly state: Readonly<MutateState<TData, TError>> = {
@@ -137,7 +141,10 @@ class ContextlessMutate<TData, TError, TQueryParams, TRequestBody> extends React
     this.abortController.abort();
   }
 
-  public mutate = async (body: TRequestBody, mutateRequestOptions?: MutateRequestOptions<TQueryParams>) => {
+  public mutate = async (
+    body: TRequestBody,
+    mutateRequestOptions?: MutateRequestOptions<TQueryParams, TPathParams>,
+  ) => {
     const {
       __internal_hasExplicitBase,
       base,

diff --git a/src/scripts/import-open-api.ts b/src/scripts/import-open-api.ts
@@ -349,7 +349,7 @@ export const generateRestfulComponent = (
         throw new Error(`The path params ${p} can't be found in parameters (${operation.operationId})`);
       }
     })
-    .join("; ");
+    .join(";\n  ");
 
   const queryParamsType = queryParams
     .map(p => {
@@ -399,7 +399,7 @@ export const generateRestfulComponent = (
     verb === "get"
       ? `${needAResponseComponent ? componentName + "Response" : responseTypes}, ${
           queryParamsType ? componentName + "QueryParams" : "void"
-        }`
+        }, ${paramsInPath.length ? componentName + "PathParams" : "void"}`
       : `${needAResponseComponent ? componentName + "Response" : responseTypes}, ${
           queryParamsType ? componentName + "QueryParams" : "void"
         }, ${
@@ -408,7 +408,7 @@ export const generateRestfulComponent = (
             : needARequestBodyComponent
             ? componentName + "RequestBody"
             : requestBodyTypes
-        }`;
+        }, ${paramsInPath.length ? componentName + "PathParams" : "void"}`;
 
   const customPropsEntries = Object.entries(customProps);
 
@@ -432,6 +432,14 @@ export ${
 export interface ${componentName}QueryParams {
   ${queryParamsType};
 }
+`
+      : ""
+  }${
+    paramsInPath.length
+      ? `
+export interface ${componentName}PathParams {
+  ${paramsTypes}
+}
 `
       : ""
   }${
@@ -468,19 +476,19 @@ ${description}export const ${componentName} = (${
   // Hooks version
   output += `export type Use${componentName}Props = Omit<Use${Component}Props<${genericsTypesForHooksProps}>, "path"${
     verb === "get" ? "" : ` | "verb"`
-  }>${paramsInPath.length ? ` & {${paramsTypes}}` : ""};
+  }>${paramsInPath.length ? ` & ${componentName}PathParams` : ""};
 
 ${description}export const use${componentName} = (${
     paramsInPath.length ? `{${paramsInPath.join(", ")}, ...props}` : "props"
   }: Use${componentName}Props) => use${Component}<${genericsTypes}>(${
     verb === "get" ? "" : `"${verb.toUpperCase()}", `
-  }\`${route}\`, ${
+  }${paramsInPath.length ? `({ ${paramsInPath.join(", ")} }) => \`${route}\`` : `\`${route}\``}, { ${
     customPropsEntries.length
       ? `{ ${customPropsEntries
           .map(([key, value]) => `${key}:${reactPropsValueToObjectValue(value || "")}`)
-          .join(", ")}, ...props}`
-      : "props"
-  });
+          .join(", ")}, `
+      : ""
+  }${paramsInPath.length ? `pathParams: { ${paramsInPath.join(", ")} }, ` : ""}...props });
 
 `;
 

diff --git a/src/scripts/tests/__snapshots__/import-open-api.test.ts.snap b/src/scripts/tests/__snapshots__/import-open-api.test.ts.snap
@@ -88,7 +88,7 @@ export const FindPets = (props: FindPetsProps) => (
   />
 );
 
-export type UseFindPetsProps = Omit<UseGetProps<Pet[], FindPetsQueryParams>, \\"path\\">;
+export type UseFindPetsProps = Omit<UseGetProps<Pet[], FindPetsQueryParams, void>, \\"path\\">;
 
 /**
  * Returns all pets from the system that the user has access to
@@ -97,7 +97,7 @@ export type UseFindPetsProps = Omit<UseGetProps<Pet[], FindPetsQueryParams>, \\"
  * Sed tempus felis lobortis leo pulvinar rutrum. Nam mattis velit nisl, eu condimentum ligula luctus nec. Phasellus semper velit eget aliquet faucibus. In a mattis elit. Phasellus vel urna viverra, condimentum lorem id, rhoncus nibh. Ut pellentesque posuere elementum. Sed a varius odio. Morbi rhoncus ligula libero, vel eleifend nunc tristique vitae. Fusce et sem dui. Aenean nec scelerisque tortor. Fusce malesuada accumsan magna vel tempus. Quisque mollis felis eu dolor tristique, sit amet auctor felis gravida. Sed libero lorem, molestie sed nisl in, accumsan tempor nisi. Fusce sollicitudin massa ut lacinia mattis. Sed vel eleifend lorem. Pellentesque vitae felis pretium, pulvinar elit eu, euismod sapien.
  * 
  */
-export const useFindPets = (props: UseFindPetsProps) => useGet<Pet[], Error, FindPetsQueryParams>(\`/pets\`, props);
+export const useFindPets = (props: UseFindPetsProps) => useGet<Pet[], Error, FindPetsQueryParams>(\`/pets\`, { ...props });
 
 
 export type AddPetProps = Omit<MutateProps<Pet, Error, void, NewPet>, \\"path\\" | \\"verb\\">;
@@ -113,14 +113,18 @@ export const AddPet = (props: AddPetProps) => (
   />
 );
 
-export type UseAddPetProps = Omit<UseMutateProps<Pet, void, NewPet>, \\"path\\" | \\"verb\\">;
+export type UseAddPetProps = Omit<UseMutateProps<Pet, void, NewPet, void>, \\"path\\" | \\"verb\\">;
 
 /**
  * Creates a new pet in the store.  Duplicates are allowed
  */
-export const useAddPet = (props: UseAddPetProps) => useMutate<Pet, Error, void, NewPet>(\\"POST\\", \`/pets\`, props);
+export const useAddPet = (props: UseAddPetProps) => useMutate<Pet, Error, void, NewPet>(\\"POST\\", \`/pets\`, { ...props });
 
 
+export interface FindPetByIdPathParams {
+  id: number
+}
+
 export type FindPetByIdProps = Omit<GetProps<Pet, Error, void>, \\"path\\"> & {id: number};
 
 /**
@@ -133,12 +137,12 @@ export const FindPetById = ({id, ...props}: FindPetByIdProps) => (
   />
 );
 
-export type UseFindPetByIdProps = Omit<UseGetProps<Pet, void>, \\"path\\"> & {id: number};
+export type UseFindPetByIdProps = Omit<UseGetProps<Pet, void, FindPetByIdPathParams>, \\"path\\"> & FindPetByIdPathParams;
 
 /**
  * Returns a user based on a single ID, if the user does not have access to the pet
  */
-export const useFindPetById = ({id, ...props}: UseFindPetByIdProps) => useGet<Pet, Error, void>(\`/pets/\${id}\`, props);
+export const useFindPetById = ({id, ...props}: UseFindPetByIdProps) => useGet<Pet, Error, void>(({ id }) => \`/pets/\${id}\`, { pathParams: { id }, ...props });
 
 
 export type DeletePetProps = Omit<MutateProps<void, Error, void, number>, \\"path\\" | \\"verb\\">;
@@ -154,14 +158,18 @@ export const DeletePet = (props: DeletePetProps) => (
   />
 );
 
-export type UseDeletePetProps = Omit<UseMutateProps<void, void, number>, \\"path\\" | \\"verb\\">;
+export type UseDeletePetProps = Omit<UseMutateProps<void, void, number, void>, \\"path\\" | \\"verb\\">;
 
 /**
  * deletes a single pet based on the ID supplied
  */
-export const useDeletePet = (props: UseDeletePetProps) => useMutate<void, Error, void, number>(\\"DELETE\\", \`/pets\`, props);
+export const useDeletePet = (props: UseDeletePetProps) => useMutate<void, Error, void, number>(\\"DELETE\\", \`/pets\`, { ...props });
 
 
+export interface UpdatePetPathParams {
+  id: number
+}
+
 export type UpdatePetProps = Omit<MutateProps<Pet, Error, void, UpdatePetRequestRequestBody>, \\"path\\" | \\"verb\\"> & {id: number};
 
 /**
@@ -175,12 +183,12 @@ export const UpdatePet = ({id, ...props}: UpdatePetProps) => (
   />
 );
 
-export type UseUpdatePetProps = Omit<UseMutateProps<Pet, void, UpdatePetRequestRequestBody>, \\"path\\" | \\"verb\\"> & {id: number};
+export type UseUpdatePetProps = Omit<UseMutateProps<Pet, void, UpdatePetRequestRequestBody, UpdatePetPathParams>, \\"path\\" | \\"verb\\"> & UpdatePetPathParams;
 
 /**
  * Updates a pet in the store.
  */
-export const useUpdatePet = ({id, ...props}: UseUpdatePetProps) => useMutate<Pet, Error, void, UpdatePetRequestRequestBody>(\\"PATCH\\", \`/pets/\${id}\`, props);
+export const useUpdatePet = ({id, ...props}: UseUpdatePetProps) => useMutate<Pet, Error, void, UpdatePetRequestRequestBody>(\\"PATCH\\", ({ id }) => \`/pets/\${id}\`, { pathParams: { id }, ...props });
 
 "
 `;