Merge dependabot/npm_and_yarn/vite-5.3.5 into combine-prs-branch

package.json

@@ -17,7 +17,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@amsterdam/design-system-react": "^0.10.0",
+    "@amsterdam/design-system-react": "^0.11.0",
     "@types/lodash.get": "^4.4.9",
     "@types/qs": "^6.9.15",
     "@types/react": "^18.3.3",
@@ -36,7 +36,7 @@
     "styled-components": "^6.1.11",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.4",
-    "vite": "^5.3.1"
+    "vite": "^5.3.5"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

src/app/state/rest/cases.ts

@@ -9,6 +9,7 @@ export const useCases = (options?: Options) => {
     ...options,
     url: `${ makeApiUrl("cases") }`,
     groupName: "cases",
-    handleError
+    handleError,
+    isProtected: true
   })
 }

src/app/state/rest/hooks/useApiRequest.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useContext } from "react"
 
 import { ApiContext } from "../provider/ApiProvider"
 import { ApiGroup } from "../index"
-import useRequest, { RequestError } from "./useRequest"
+import useRequestWrapper, { RequestError } from "./useRequestWrapper"
 
 type GetOptions = {
   method: "get"
@@ -33,7 +33,7 @@ type Config = {
   handleError?: (error: RequestError) => void
 }
 
-const useApiRequest = <Schema, Payload = Partial<Schema>>({ url, groupName, handleError, lazy, keepUsingInvalidCache }: Config) => {
+const useApiRequest = <Schema, Payload = Partial<Schema>>({ url, groupName, isProtected, handleError, lazy, keepUsingInvalidCache }: Config) => {
   const {
     getCacheItem,
     setCacheItem,
@@ -44,7 +44,7 @@ const useApiRequest = <Schema, Payload = Partial<Schema>>({ url, groupName, hand
     isRequestPendingInQueue
   } = useContext(ApiContext)[groupName]
 
-  const request = useRequest()
+  const request = useRequestWrapper(isProtected)
 
   /**
    * Executes an API request

src/app/state/rest/hooks/useProtectedRequest.ts

@@ -0,0 +1,39 @@
+import { useCallback } from "react"
+import { useAuth } from "react-oidc-context"
+import useRequest, { Method } from "./useRequest"
+
+
+const useProtectedRequest = () => {
+  const request = useRequest()
+  const auth = useAuth()
+  const token = auth.user?.access_token
+
+  return useCallback(
+    async <Schema>(method: Method, url: string, data?: unknown, additionalHeaders = {}) => {
+      try {
+        // TODO: What if token expires?
+        const headers = {
+          Authorization: `Bearer ${ token }`,
+          ...additionalHeaders
+        }
+        const response = await request<Schema>(
+          method,
+          url,
+          data,
+          headers
+        )
+        return response
+      } catch (error) {
+        console.log("Error protected request:", error)
+        // switch ((error as RequestError)?.response?.status) {
+        //   case 401: keycloak.logout(); break
+        //   case 403: navigateTo("/auth"); break
+        // }
+        if (error !== undefined) throw error
+      }
+    },
+    [token, request]
+  )
+}
+
+export default useProtectedRequest

src/app/state/rest/hooks/useRequest.ts

@@ -4,7 +4,7 @@ import axios, { Method, AxiosError } from "axios"
 export type { Method } from "axios"
 export type RequestError = AxiosError
 
-export default () => useCallback(
+export const useRequest = () => useCallback(
   async <Schema>(method: Method, url: string, data?: unknown, headers = {}) => 
     await axios.request<Schema>({
       method,
@@ -14,3 +14,5 @@ export default () => useCallback(
     }),
   []
 )
+
+export default useRequest

src/app/state/rest/hooks/useRequestWrapper.ts

@@ -0,0 +1,11 @@
+
+import useRequest from "./useRequest"
+import useProtectedRequest from "./useProtectedRequest"
+export type { RequestError, Method } from "./useRequest"
+
+export default (isProtected?: boolean) => {
+  const request = useRequest()
+  const protectedRequest = useProtectedRequest()
+
+  return  isProtected ? protectedRequest : request
+}