diff --git a/jest.config.js b/jest.config.js index 36a05a3..c56b87e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,6 @@ module.exports = { preset: 'react-native', - "moduleNameMapper": { - ".+\\.(png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" + moduleNameMapper: { + '.+\\.(png|jpg|ttf|woff|woff2)$': 'identity-obj-proxy', }, }; diff --git a/src/App.tsx b/src/App.tsx index 70e85a4..b378f72 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -53,6 +53,8 @@ Sentry.init({ }, integrations: [ new Sentry.ReactNativeTracing({ + enableUserInteractionTracing: true, + routingInstrumentation: reactNavigationInstrumentation, tracePropagationTargets: ['localhost', /^\//, /^https:\/\//], idleTimeout: 15000, // set to prevent spans in the home screen from cancelling prematurely @@ -124,6 +126,9 @@ const App = () => { ); }; -export default Sentry.withTouchEventBoundary(Sentry.wrap(App), { - ignoreNames: ['Provider', 'UselessName', /^SomeRegex/], +export default Sentry.wrap(App, { + touchEventBoundaryProps: { + ignoreNames: ['Provider', 'UselessName', /^SomeRegex/], + labelName: 'id', + }, }); diff --git a/src/config.ts b/src/config.ts index b2f3bbe..e9c8edb 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,4 +3,4 @@ export const DSN = export const BACKEND_URL = 'https://application-monitoring-flask-dot-sales-engineering-sf.appspot.com'; - // 'http://127.0.0.1:8080'; // for local flask backend +// 'http://127.0.0.1:8080'; // for local flask backend diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 5a7fbf0..74fb76d 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -1,19 +1,29 @@ import * as React from 'react'; -import { - Image, - Button, - View, - StyleSheet, - Text, - ActivityIndicator, - FlatList, -} from 'react-native'; +import {Image, Button, View, StyleSheet, Text, FlatList} from 'react-native'; import {useDispatch} from 'react-redux'; import * as Sentry from '@sentry/react-native'; import Toast from 'react-native-toast-message'; import {AppDispatch} from '../reduxApp'; import {GradientBtn} from './CartScreen'; import {BACKEND_URL} from '../config'; +import {StackScreenProps} from '@react-navigation/stack'; +import {RootStackParamList} from '../navigation'; + +type ExtendedSentryScope = Sentry.Scope & { + _tags: Record; + _user: Record; +}; + +type Product = { + sku: string; + name: string; + image: string; + id: number; + type: string; + price: number; + title: string; + imgcropped: string; +}; /** * An example of how to add a Sentry Transaction to a React component manually. @@ -24,31 +34,33 @@ import {BACKEND_URL} from '../config'; * Redux not in use here, so redux is not passing props, therefore Profile can't view that. * Could do redux w/ hooks, but the Profiler isn't going to work with that yet. */ -const EmpowerPlant = ({navigation}) => { +const EmpowerPlant = ({navigation}: StackScreenProps) => { const dispatch = useDispatch(); - const [toolData, setProductData] = React.useState< - | { - sku: string; - name: string; - image: string; - id: number; - type: string; - price: number; - }[] - | null - >(null); + const [toolData, setProductData] = React.useState( + null, + ); const loadData = () => { setProductData(null); let se, customerType, email; - Sentry.withScope(function (scope) { - [se, customerType] = [scope._tags.se, scope._tags.customerType]; - email = scope._user.email; + Sentry.withScope(function (scope: Sentry.Scope) { + const extendedScope = scope as ExtendedSentryScope; + [se, customerType] = [ + extendedScope._tags.se, + extendedScope._tags.customerType, + ]; + email = extendedScope._user.email; }); + const headers: Record = { + se: se ?? '', + customerType: customerType ?? '', + email: email ?? '', + 'Content-Type': 'application/json', + }; fetch(`${BACKEND_URL}/products`, { method: 'GET', - headers: {se, customerType, email, 'Content-Type': 'application/json'}, + headers, }) .then((response) => response.json()) .then((json) => { @@ -88,32 +100,35 @@ const EmpowerPlant = ({navigation}) => { loadData(); // this line is not blocking }, []); + const onProductsListRefresh = () => { + loadData(); + }; + return ( Empower Plant - {toolData ? ( - { - return ( - - ); - }} - keyExtractor={(item) => item.id} - /> - ) : ( - - )} + { + return ( + + ); + }} + keyExtractor={(item) => `${item.id}`} + /> );