From b5a7f7291a47c0dd1a5e936d4bc06d71c0847718 Mon Sep 17 00:00:00 2001
From: Carlos Palhares <chjunior@gmail.com>
Date: Thu, 19 Dec 2024 15:33:44 -0300
Subject: [PATCH] Allow HTTP options (#468)

Allow setting `fetchOptions` to `useAudiences` and `AudienceEditor`, so
client apps can use a remote audiences service with proper
authentication.
---
 audiences-react/docs/CHANGELOG.md          |  4 ++++
 audiences-react/docs/README.md             | 10 ++++++++++
 audiences-react/package.json               |  2 +-
 audiences-react/src/AudienceForm/index.tsx |  4 +++-
 audiences-react/src/audiences.ts           | 13 ++++++++-----
 audiences-react/src/index.tsx              |  4 ++++
 6 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/audiences-react/docs/CHANGELOG.md b/audiences-react/docs/CHANGELOG.md
index e480bf59..146e9f87 100644
--- a/audiences-react/docs/CHANGELOG.md
+++ b/audiences-react/docs/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Unreleased
 
+# Version 1.4.0 (2024-12-18)
+
+- Allow setting fetch options to all API [#468](https://github.com/powerhome/audiences/pull/468)
+
 # Version 1.3.0 (2024-12-12)
 
 - Protect SCIM search from backend [#451](https://github.com/powerhome/audiences/pull/451)
diff --git a/audiences-react/docs/README.md b/audiences-react/docs/README.md
index b7a7b998..473e1121 100644
--- a/audiences-react/docs/README.md
+++ b/audiences-react/docs/README.md
@@ -14,6 +14,16 @@ With everything in place, the usage should look like this:
 <AudienceEditor uri={audienceContextUri} scimUri={scimV2Uri} />
 ```
 
+You can also add arguments to the fetch calls, like headers:
+
+```jsx
+<AudienceEditor
+  uri={audienceContextUri}
+  scimUri={scimV2Uri}
+  fetchOptions={{ headers: { Authorization: "Bearer my-token" } }}
+/>
+```
+
 See [example](../src/example.tsx).
 
 ### Peer Dependencies
diff --git a/audiences-react/package.json b/audiences-react/package.json
index 6ff50604..e4b86a99 100644
--- a/audiences-react/package.json
+++ b/audiences-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiences",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Audiences SCIM client",
   "files": [
     "dist/*.*",
diff --git a/audiences-react/src/AudienceForm/index.tsx b/audiences-react/src/AudienceForm/index.tsx
index bd1740fe..0b07f4a3 100644
--- a/audiences-react/src/AudienceForm/index.tsx
+++ b/audiences-react/src/AudienceForm/index.tsx
@@ -15,6 +15,7 @@ type AudienceFormProps = {
   userResource: string
   groupResources: string[]
   allowIndividuals: boolean
+  fetchOptions: Parameters<typeof useAudiences>[1]
 }
 
 export const AudienceForm = ({
@@ -22,6 +23,7 @@ export const AudienceForm = ({
   userResource,
   groupResources,
   allowIndividuals = true,
+  fetchOptions,
 }: AudienceFormProps) => {
   const [editing, setEditing] = useState<number>()
 
@@ -36,7 +38,7 @@ export const AudienceForm = ({
     reset,
     removeCriteria,
     updateCriteria,
-  } = useAudiences(uri)
+  } = useAudiences(uri, fetchOptions)
 
   const handleRemoveCriteria = (index: number) => {
     if (confirm("Remove criteria?")) {
diff --git a/audiences-react/src/audiences.ts b/audiences-react/src/audiences.ts
index a457be96..e6db7238 100644
--- a/audiences-react/src/audiences.ts
+++ b/audiences-react/src/audiences.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import useFetch, { CachePolicies } from "use-http"
+import useFetch, { CachePolicies, IncomingOptions } from "use-http"
 
 import useFormReducer, {
   RegistryAction,
@@ -16,7 +16,7 @@ type UpdateCriteriaAction = RegistryAction & {
   criterion: GroupCriterion
 }
 
-type UseAudienceContext = UseFormReducer<AudienceContext> & {
+export type UseAudienceContext = UseFormReducer<AudienceContext> & {
   saving: boolean
   save: () => void
   fetchUsers: (
@@ -28,14 +28,17 @@ type UseAudienceContext = UseFormReducer<AudienceContext> & {
   updateCriteria: (index: number, criteria: GroupCriterion) => void
 }
 
-export function useAudiences(uri: string): UseAudienceContext {
-  const { data } = useFetch(uri, [uri])
+export function useAudiences(
+  uri: string,
+  options: IncomingOptions = {},
+): UseAudienceContext {
+  const { data } = useFetch(uri, options, [uri])
   const {
     get,
     put,
     response,
     loading: saving,
-  } = useFetch(uri, { cachePolicy: CachePolicies.NO_CACHE })
+  } = useFetch(uri, { ...options, cachePolicy: CachePolicies.NO_CACHE })
   const criteriaForm = useFormReducer<AudienceContext>(data, {
     "remove-criteria": (
       context,
diff --git a/audiences-react/src/index.tsx b/audiences-react/src/index.tsx
index 03227426..4fc11e93 100644
--- a/audiences-react/src/index.tsx
+++ b/audiences-react/src/index.tsx
@@ -1,5 +1,6 @@
 import { AudienceForm } from "./AudienceForm"
 import Scim from "./scim"
+import { useAudiences } from "./audiences"
 
 const UserResourceId = "Users"
 const AllowedGroupIds = ["Territories", "Departments", "Titles"]
@@ -8,11 +9,13 @@ type AudienceEditorProps = {
   uri: string
   scimUri: string
   allowIndividuals?: boolean
+  fetchOptions?: Parameters<typeof useAudiences>[1]
 }
 export function AudienceEditor({
   uri,
   scimUri,
   allowIndividuals = true,
+  fetchOptions = {},
 }: AudienceEditorProps) {
   return (
     <Scim.Provider value={scimUri}>
@@ -21,6 +24,7 @@ export function AudienceEditor({
         userResource={UserResourceId}
         groupResources={AllowedGroupIds}
         allowIndividuals={allowIndividuals}
+        fetchOptions={fetchOptions}
       />
     </Scim.Provider>
   )