Merge pull request #2707 from Amsterdam/improvement/dependabot

feat(api): reorganize ApiGroup types and add useContextCache hook and…

.github/dependabot.yml

@@ -10,3 +10,6 @@ updates:
     schedule:
       interval: "daily"
     open-pull-requests-limit: 100
+    ignore:
+      - dependency-name: "*" # This will ignore all dependencies
+        update-types: ["version-update:semver-patch"]

src/app/state/rest/index.ts

@@ -6,18 +6,18 @@ import currentDate from "../../features/shared/utils/currentDate"
 import { Case, Itinerary, ItineraryItem, District } from "app/features/types"
 
 export type ApiGroup =
+  | "auth"
+  | "case"
+  | "daySettings"
+  | "decos"
   | "itineraries"
-  | "users"
+  | "meldingen"
+  | "permits"
+  | "postCodeRangesPresets"
   | "settings"
-  | "daySettings"
   | "teamSettings"
   | "themes"
-  | "postCodeRangesPresets"
-  | "case"
-  | "permits"
-  | "decos"
-  | "auth"
-  | "meldingen"
+  | "users"
 
 export type Options = {
   keepUsingInvalidCache?: boolean
@@ -64,6 +64,17 @@ export const useItineraryItem = (id: number | string, options?: Options) => {
   })
 }
 
+export const useSuggestions = (itineraryId: number, options?: Options) => {
+  const handleError = useErrorHandler()
+  return useApiRequest<{ cases: Case[] }>({
+    ...options,
+    url: makeGatewayUrl([ "itineraries", itineraryId, "suggestions" ]),
+    groupName: "itineraries",
+    handleError,
+    isProtected: true
+  })
+}
+
 export const useCase = (id: number | string, options?: Options) => {
   const handleError = useErrorHandler()
   return useApiRequest<Case>({
@@ -116,17 +127,6 @@ export const useSearch = (streetNumber: number, postalCode?: string, streetName?
   })
 }
 
-export const useSuggestions = (itineraryId: number, options?: Options) => {
-  const handleError = useErrorHandler()
-  return useApiRequest<{ cases: Case[] }>({
-    ...options,
-    url: makeGatewayUrl([ "itineraries", itineraryId, "suggestions" ]),
-    groupName: "itineraries",
-    handleError,
-    isProtected: true
-  })
-}
-
 export const useUsers = (options?: Options) => {
   const handleError = useErrorHandler()
   return useApiRequest<{ results: Components.Schemas.User[] }>({

src/app/state/rest/provider/ApiProvider.tsx

@@ -9,67 +9,67 @@ import { ApiGroup } from "../index"
 type GroupedContext = Record<ApiGroup, ApiCache & RequestQueue>
 
 export const ApiContext = React.createContext<GroupedContext>({
-  itineraries: noopContext,
+  auth: noopContext,
   case: noopContext,
-  users: noopContext,
-  settings: noopContext,
-  permits: noopContext,
-  decos: noopContext,
   daySettings: noopContext,
+  decos: noopContext,
+  itineraries: noopContext,
+  meldingen: noopContext,
+  permits: noopContext,
+  postCodeRangesPresets: noopContext,
+  settings: noopContext,
   teamSettings: noopContext,
   themes: noopContext,
-  postCodeRangesPresets: noopContext,
-  auth: noopContext,
-  meldingen: noopContext
+  users: noopContext
 })
 
 const ApiProvider: React.FC = ({ children }) => {
   const value: GroupedContext = {
-    itineraries: {
+    auth: {
       ...useApiCache(),
       ...useRequestQueue()
     },
     case: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    users: {
+    daySettings: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    settings: {
+    decos: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    daySettings: {
+    itineraries: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    teamSettings: {
+    meldingen: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    themes: {
+    permits: {
       ...useApiCache(),
       ...useRequestQueue()
     },
     postCodeRangesPresets: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    permits: {
+    settings: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    decos: {
+    teamSettings: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    meldingen: {
+    themes: {
       ...useApiCache(),
       ...useRequestQueue()
     },
-    auth: {
+    users: {
       ...useApiCache(),
       ...useRequestQueue()
     }

src/app/state/rest/provider/useContextCache.ts

@@ -0,0 +1,39 @@
+import { useCallback, useContext } from "react"
+import { ApiContext } from "./ApiProvider"
+
+type GroupName = "itineraries"
+
+/*
+ ** Hook for getting and updating items in the Context.
+ ** GroupName and urlKey are defined in the hook where the useApiRequest hook is called.
+
+    EXAMPLE:
+    export const useSuggestions = (itineraryId: number, options?: Options) => {
+      const handleError = useErrorHandler()
+      return useApiRequest<{ cases: Case[] }>({
+        ...options,
+        url: makeGatewayUrl([ "itineraries", itineraryId, "suggestions" ]),
+        groupName: "suggestions",
+        handleError,
+        isProtected: true
+      })
+    }
+
+    CORRECT:
+    const { getContextItem, updateContextItem } = useContextCache("suggestions", makeGatewayUrl([ "itineraries", itineraryId, "suggestions" ]))
+*/
+
+const useContextCache = (groupName: GroupName, apiUrl: string) => {
+  const contextGroup = useContext(ApiContext)[groupName]
+  const item = contextGroup.getCacheItem(apiUrl)?.value
+
+  const getContextItem = useCallback(() => item, [item])
+  const updateContextItem = useCallback((updatedItem: any) =>
+    contextGroup.updateCacheItem(apiUrl, () => updatedItem), [contextGroup, apiUrl]
+  )
+  const clearContextCache = useCallback(() => contextGroup.clearCache(), [ contextGroup ])
+
+  return { getContextItem, updateContextItem, clearContextCache }
+}
+
+export default useContextCache