From dcab8c73dc03458219efa12bf5ed9c8f03dada87 Mon Sep 17 00:00:00 2001 From: Riya Shete Date: Mon, 25 Mar 2024 03:18:48 +0530 Subject: [PATCH] migrate to typescript --- src/libs/Navigation/types.ts | 2 +- .../step/IOURequestStepScan/index.native.tsx | 4 +- .../request/step/IOURequestStepScan/index.tsx | 58 ++++++++++++------- .../step/withWritableReportOrNotFound.tsx | 4 +- 4 files changed, 44 insertions(+), 24 deletions(-) diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 59cfac8c2044..319f7ccc4023 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -413,7 +413,7 @@ type MoneyRequestNavigatorParamList = { iouType: string; reportID: string; }; - [SCREENS.MONEY_REQUEST.SCAN_TAB]: { + [SCREENS.MONEY_REQUEST.STEP_SCAN]: { action: ValueOf; iouType: ValueOf; transactionID: string; diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index 3d85c660106e..9a89b92d5fc3 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -1,5 +1,5 @@ import {useFocusEffect} from '@react-navigation/core'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; +import React, {useCallback, useRef, useState} from 'react'; import {ActivityIndicator, Alert, AppState, InteractionManager, View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import {RESULTS} from 'react-native-permissions'; @@ -91,7 +91,7 @@ function IOURequestStepScan({ const tapGesture = Gesture.Tap() .enabled(device?.supportsFocus ?? false) - .onStart((ev) => { + .onStart((ev: {x: number; y: number}) => { const point = {x: ev.x, y: ev.y}; focusIndicatorOpacity.value = withSequence(withTiming(0.8, {duration: 250}), withDelay(1000, withTiming(0, {duration: 250}))); diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index aedc29a20bfd..13b51456b294 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -57,11 +57,11 @@ function IOURequestStepScan({ const [isFlashLightOn, toggleFlashlight] = useReducer((state) => !state, false); const [isTorchAvailable, setIsTorchAvailable] = useState(false); const cameraRef = useRef(null); - const trackRef = useRef(null); + const trackRef = useRef(null); - const getScreenshotTimeoutRef = useRef(null); + const getScreenshotTimeoutRef = useRef(null); - const [videoConstraints, setVideoConstraints] = useState(null); + const [videoConstraints, setVideoConstraints] = useState(); const tabIndex = 1; const isTabActive = useTabNavigatorFocus({tabIndex}); @@ -70,22 +70,30 @@ function IOURequestStepScan({ * The last deviceId is of regular len camera. */ useEffect(() => { - if (!_.isEmpty(videoConstraints) || !isTabActive || !Browser.isMobile()) { + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + if (videoConstraints || !isTabActive || !Browser.isMobile()) { return; } const defaultConstraints = {facingMode: {exact: 'environment'}}; navigator.mediaDevices + // @ts-expect-error there is a type mismatch in typescipt types for MediaStreamTrack microsoft/TypeScript#39010 .getUserMedia({video: {facingMode: {exact: 'environment'}, zoom: {ideal: 1}}}) .then((stream) => { - _.forEach(stream.getTracks(), (track) => track.stop()); + // Stop all tracks + stream.getTracks().forEach((track) => track.stop()); + // Only Safari 17+ supports zoom constraint if (Browser.isMobileSafari() && stream.getTracks().length > 0) { - const deviceId = _.chain(stream.getTracks()) - .map((track) => track.getSettings()) - .find((setting) => setting.zoom === 1) - .get('deviceId') - .value(); + let deviceId; + for (const track of stream.getTracks()) { + const setting = track.getSettings(); + // @ts-expect-error there is a type mismatch in typescipt types for MediaStreamTrack microsoft/TypeScript#39010 + if (setting.zoom === 1) { + deviceId = setting.deviceId; + break; + } + } if (deviceId) { setVideoConstraints({deviceId}); return; @@ -96,12 +104,14 @@ function IOURequestStepScan({ return; } navigator.mediaDevices.enumerateDevices().then((devices) => { - const lastBackDeviceId = _.chain(devices) - .filter((item) => item.kind === 'videoinput') - .last() - .get('deviceId', '') - .value(); - + let lastBackDeviceId = ''; + for (let i = devices.length - 1; i >= 0; i--) { + const device = devices[i]; + if (device.kind === 'videoinput') { + lastBackDeviceId = device.deviceId; + break; + } + } if (!lastBackDeviceId) { setVideoConstraints(defaultConstraints); return; @@ -198,15 +208,16 @@ function IOURequestStepScan({ navigateToConfirmationStep(); }; - const setupCameraPermissionsAndCapabilities = (stream) => { + const setupCameraPermissionsAndCapabilities = (stream: MediaStream) => { setCameraPermissionState('granted'); const [track] = stream.getVideoTracks(); const capabilities = track.getCapabilities(); - if (capabilities.torch) { + + if ('torch' in capabilities && capabilities.torch) { trackRef.current = track; } - setIsTorchAvailable(!!capabilities.torch); + setIsTorchAvailable('torch' in capabilities && !!capabilities.torch); }; const getScreenshot = useCallback(() => { @@ -234,6 +245,7 @@ function IOURequestStepScan({ return; } trackRef.current.applyConstraints({ + // @ts-expect-error there is a type mismatch in typescipt types for MediaStreamTrack microsoft/TypeScript#39010 advanced: [{torch: false}], }); }, []); @@ -242,6 +254,7 @@ function IOURequestStepScan({ if (trackRef.current && isFlashLightOn) { trackRef.current .applyConstraints({ + // @ts-expect-error there is a type mismatch in typescipt types for MediaStreamTrack microsoft/TypeScript#39010 advanced: [{torch: true}], }) .then(() => { @@ -294,7 +307,7 @@ function IOURequestStepScan({ {translate('receipt.cameraAccess')} )} - {!_.isEmpty(videoConstraints) && ( + {videoConstraints && ( setCameraPermissionState('denied')} @@ -304,6 +317,11 @@ function IOURequestStepScan({ videoConstraints={videoConstraints} forceScreenshotSourceSize cameraTabIndex={tabIndex} + audio={false} + disablePictureInPicture={false} + imageSmoothing={false} + mirrored={false} + screenshotQuality={0} /> )} diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index d5d27d8268b1..7f5384246377 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -10,11 +10,13 @@ import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type {Report} from '@src/types/onyx'; +import type {Report, Transaction} from '@src/types/onyx'; type WithWritableReportOrNotFoundOnyxProps = { /** The report corresponding to the reportID in the route params */ report: OnyxEntry; + /** The transaction that the user is trying to create */ + transaction?: OnyxEntry; }; type Route = RouteProp;