51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { FontAwesome5 as Icon } from '@expo/vector-icons';
|
|
import React from 'react';
|
|
import { Text, StyleSheet, View } from 'react-native';
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const FormErrors = ({ errors }: { errors: Record<string, any> }) => {
|
|
if (!errors) {
|
|
return [];
|
|
}
|
|
|
|
let errorFormatted;
|
|
if (errors instanceof Error) {
|
|
// This check might backfire on us as it's too general. We do not wish to display the error message to the user
|
|
// Hence we display this generic one
|
|
errorFormatted = 'Kunne ikke sende inn skjemaet! Prøv igjen senere...';
|
|
} else if ('non_field_errors' in errors) {
|
|
errorFormatted = errors.non_field_errors?.[0];
|
|
} else if ('detail' in errors) {
|
|
errorFormatted = errors.detail;
|
|
}
|
|
|
|
if (!errorFormatted) {
|
|
return [];
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Icon name="exclamation-triangle" size={16} color="#b91c1c" style={styles.icon} />
|
|
<View>
|
|
<Text>{errorFormatted}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
backgroundColor: '#fecaca',
|
|
padding: 12,
|
|
borderRadius: 4,
|
|
},
|
|
icon: {
|
|
marginTop: 2,
|
|
marginRight: 8,
|
|
},
|
|
});
|
|
|
|
export default FormErrors;
|