Merged PR 35045: update warning image implementatie

update warning image Related work items: #128921
Amsterdam · Oct 28, 2024 · 4d56fce · 4d56fce
2 parents b5b578e + 31cc23d
commit 4d56fce
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 14 deletions.
diff --git a/.config/jest-init.js b/.config/jest-init.js
@@ -74,4 +74,5 @@ jest.mock('react-native-applifecycle/dist/AppLifecycle', () =>
 jest.mock('react-native-barcode-creator', () => ({
   getConstants: jest.fn(),
 }))
+jest.mock('react-native-block-screenshot', () => ({}))
 jest.mock('react-native-salesforce-messaging-in-app', () => ({}))
diff --git a/src/hooks/useOpenImagePicker.ts b/src/hooks/useOpenImagePicker.ts
@@ -15,7 +15,7 @@ const DEFAULT_OPTIONS: ImageCropPickerOptions = {
   cropperChooseText: 'Kiezen',
   cropping: true,
   height: 1080,
-  includeBase64: true,
+  includeBase64: false,
   mediaType: 'photo',
   width: 1920,
 }

diff --git a/src/modules/construction-work-editor/screens/ConfirmMessage.screen.tsx b/src/modules/construction-work-editor/screens/ConfirmMessage.screen.tsx
@@ -26,7 +26,10 @@ import {
   selectProject,
 } from '@/modules/construction-work-editor/messageDraftSlice'
 import {ConstructionWorkEditorRouteName} from '@/modules/construction-work-editor/routes'
-import {useAddProjectWarningMutation} from '@/modules/construction-work-editor/service'
+import {
+  useAddProjectWarningImageMutation,
+  useAddProjectWarningMutation,
+} from '@/modules/construction-work-editor/service'
 import {useAlert} from '@/store/slices/alert'
 import {escapeHtml} from '@/utils/escapeHtml'
 
@@ -53,6 +56,8 @@ export const ConfirmMessageScreen = ({navigation}: Props) => {
 
   const [addWarning, {isLoading: isLoadingAddProjectWarning}] =
     useAddProjectWarningMutation()
+  const [addWarningImage, {isLoading: isLoadingAddProjectWarningImage}] =
+    useAddProjectWarningImageMutation()
 
   useSetScreenTitle()
 
@@ -70,11 +75,26 @@ export const ConfirmMessageScreen = ({navigation}: Props) => {
         send_push_notification: isPushNotificationChecked,
       }
 
-      if (mainImage?.data) {
-        arg.image = {
-          main: true,
-          description: mainImageDescription ?? 'Vervangende afbeelding',
-          data: mainImage.data,
+      if (mainImage) {
+        const formData = new FormData()
+
+        formData.append('image', {
+          name:
+            mainImage?.filename ??
+            mainImage?.path.split('/')[mainImage?.path.split('/').length - 1],
+          type: mainImage?.mime,
+          uri: mainImage?.path.startsWith('file://')
+            ? mainImage?.path
+            : `file://${mainImage?.path}`,
+        })
+        const description = mainImageDescription ?? 'Vervangende afbeelding'
+
+        formData.append('description', description)
+        const {warning_image_id} = await addWarningImage(formData).unwrap()
+
+        arg.warning_image = {
+          id: warning_image_id,
+          description,
         }
       }
 
@@ -111,7 +131,9 @@ export const ConfirmMessageScreen = ({navigation}: Props) => {
         <Box>
           <Column gutter="md">
             <Button
-              disabled={isLoadingAddProjectWarning}
+              disabled={
+                isLoadingAddProjectWarning || isLoadingAddProjectWarningImage
+              }
               label="Plaats bericht"
               onPress={onSubmit}
               testID="ConstructionWorkEditorCreateMessageSubmitButton"

diff --git a/src/modules/construction-work-editor/service.ts b/src/modules/construction-work-editor/service.ts
@@ -3,6 +3,8 @@ import {
   selectConstructionWorkEditorAccessToken,
 } from '@/modules/construction-work-editor/slice'
 import {
+  AddProjectWarningImageQueryArgs,
+  AddProjectWarningImageResponse,
   AddProjectWarningQueryArgs,
   ConstructionWorkEditorEndpointName,
   ConstructionWorkEditorResponse,
@@ -66,9 +68,33 @@ export const constructionWorkEditorApi = baseApi.injectEndpoints({
       transformResponse: (response: {result: ProjectWarningResponse}) =>
         response.result,
     }),
+    [ConstructionWorkEditorEndpointName.addProjectWarningImage]:
+      builder.mutation<
+        AddProjectWarningImageResponse,
+        AddProjectWarningImageQueryArgs
+      >({
+        query: formData => ({
+          body: formData,
+          method: 'POST',
+          slug: MODULE_SLUG,
+          url: '/warning-image',
+          prepareHeaders: (...args) => {
+            const headers = prepareHeaders(...args)
+
+            headers.set('Content-Type', 'multipart/form-data')
+            headers.set('Accept', 'application/json')
+
+            return headers
+          },
+          afterError,
+        }),
+      }),
   }),
   overrideExisting: true,
 })
 
-export const {useAddProjectWarningMutation, useGetProjectsQuery} =
-  constructionWorkEditorApi
+export const {
+  useAddProjectWarningMutation,
+  useAddProjectWarningImageMutation,
+  useGetProjectsQuery,
+} = constructionWorkEditorApi
diff --git a/src/modules/construction-work-editor/types.ts b/src/modules/construction-work-editor/types.ts
@@ -4,7 +4,6 @@ import {ApiImage} from '@/types/api'
 export enum ConstructionWorkEditorEndpointName {
   addProjectWarning = 'addProjectWarning',
   addProjectWarningImage = 'addProjectWarningImage',
-  getProjectManager = 'getProjectManager',
   getProjects = 'getProjects',
 }
 
@@ -19,10 +18,9 @@ export type ConstructionWorkEditorResponse =
   ConstructionWorkEditorResponseProject[]
 
 type ImageQueryArgs = {
-  image?: {
-    data: string
+  warning_image?: {
     description: string
-    main: boolean
+    id: number
   }
 }
 
@@ -44,3 +42,8 @@ export type AddProjectWarningQueryArgs = {
 export type DecodedJwtToken = {
   groups?: string[]
 } & JwtPayload
+
+export type AddProjectWarningImageQueryArgs = FormData
+export type AddProjectWarningImageResponse = {
+  warning_image_id: number
+}