Commit 149775dd authored by ErlendHer's avatar ErlendHer
Browse files

#15 add error handling to LoginComponent.

parent 5512f80b
......@@ -5,6 +5,7 @@ import { signIn, signUp } from '../store/ducks/auth/actions';
import { ApplicationState } from '../store/interface';
import Logo from '../assets/images/cinema.png';
import {
Alert,
View,
Text,
Image,
......@@ -14,6 +15,7 @@ import {
Pressable,
} from 'react-native';
import CustomInput from './CustomInput';
import AwesomeAlert from 'react-native-awesome-alerts';
export default function App() {
const { height } = useWindowDimensions();
......@@ -43,6 +45,7 @@ export default function App() {
const [isLogin, setIsLogin] = useState(true);
const dispatch = useDispatch();
const { loading, error } = useSelector(({ auth }: ApplicationState) => auth);
const [alertMessage, setAlertmessage] = useState('');
// Form completed
const onFinish = (values: FormValues) => {
......@@ -62,15 +65,26 @@ export default function App() {
// TODO If the redux state contains an error, display an error alert
useEffect(() => {
if (error) {
console.log('Show error');
setAlertmessage(error);
} else {
setAlertmessage('');
}
}, [error]);
const styles = StyleSheet.create({
alert: {
width: 400,
},
alertTitle: {
color: 'red',
},
root: {
alignItems: 'center',
padding: 20,
flex: 1,
justifyContent: 'center',
width: '70%',
height: '100%',
},
logo: {
minWidth: 200,
maxWidth: 300,
......@@ -92,7 +106,7 @@ export default function App() {
});
return (
<View>
<View style={styles.root}>
<Image
source={Logo}
style={[styles.logo, { height: height * 0.3 }]}
......@@ -144,6 +158,19 @@ export default function App() {
</Pressable>
</View>
</FormProvider>
<AwesomeAlert
contentContainerStyle={styles.alert}
titleStyle={styles.alertTitle}
show={alertMessage.length > 0}
title={`${isLogin ? 'Login' : 'Registration'} failed`}
message={`Server responded with: ${alertMessage}`}
closeOnTouchOutside={true}
showConfirmButton={true}
confirmText="Ok"
onConfirmPressed={() => {
setAlertmessage('');
}}
/>
</View>
);
}
......@@ -27,7 +27,7 @@ export default function MovieTableScreen({
const [currentPage, setCurrentPage] = useState<number>(1);
const [movies, setMovies] = useState<MovieEntity[]>([]);
const [query, setQuery] = useState<FetchMovieParams>(initialQuery);
const [moviesLoading, setMoviesLoading] = useState<boolean>(false);
const [moviesLoading, setMoviesLoading] = useState<boolean>(true);
const { data, loading, error } = useSelector(
({ movies }: ApplicationState) => movies
......
......@@ -6843,6 +6843,13 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-native-awesome-alerts@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/react-native-awesome-alerts/-/react-native-awesome-alerts-1.5.2.tgz#eb8e05a8bc22ac304c59f82eab6be19308942c32"
integrity sha512-PPTzKLpwDKbjeghvrRkg7OunND4C7d4bQORVLBnhqUK2z2PfZiI3UCULU0tczzeOyavv5hVSrYNXKPXlvhfmVg==
dependencies:
prop-types "^15.7.2"
react-native-codegen@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.6.tgz#b3173faa879cf71bfade8d030f9c4698388f6909"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment