as-app/src/scenes/Params/SentryOptOut.js

78 lines
2 KiB
JavaScript

import React, { useCallback } from "react";
import { View } from "react-native";
import { Title, Switch } from "react-native-paper";
import { createStyles } from "~/theme";
import { useParamsState, paramsActions } from "~/stores";
import Text from "~/components/Text";
import { setSentryEnabled } from "~/sentry";
function SentryOptOut() {
const styles = useStyles();
const { sentryEnabled } = useParamsState(["sentryEnabled"]);
const handleToggle = useCallback(async () => {
const newValue = !sentryEnabled;
await paramsActions.setSentryEnabled(newValue);
// Dynamically enable/disable Sentry
setSentryEnabled(newValue);
}, [sentryEnabled]);
return (
<View style={styles.container}>
<Title style={styles.title}>Rapport d'erreurs</Title>
<View style={styles.content}>
<View style={styles.switchContainer}>
<Text style={styles.label}>Envoyer les rapports d'erreurs</Text>
<Switch
value={sentryEnabled}
onValueChange={handleToggle}
style={styles.switch}
/>
</View>
<Text style={styles.description}>
Les rapports d'erreurs nous aident à améliorer l'application en nous
permettant de mieux identifier et corriger les problèmes techniques.
</Text>
</View>
</View>
);
}
const useStyles = createStyles(({ theme: { colors } }) => ({
container: {
width: "100%",
alignItems: "center",
},
title: {
fontSize: 20,
fontWeight: "bold",
marginVertical: 15,
},
content: {
width: "100%",
},
switchContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 5,
paddingVertical: 5,
},
label: {
fontSize: 16,
flex: 1,
marginRight: 15,
},
switch: {
flexShrink: 0,
},
description: {
fontSize: 14,
color: colors.onSurfaceVariant,
textAlign: "left",
lineHeight: 20,
},
}));
export default SentryOptOut;