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'; ...@@ -5,6 +5,7 @@ import { signIn, signUp } from '../store/ducks/auth/actions';
import { ApplicationState } from '../store/interface'; import { ApplicationState } from '../store/interface';
import Logo from '../assets/images/cinema.png'; import Logo from '../assets/images/cinema.png';
import { import {
Alert,
View, View,
Text, Text,
Image, Image,
...@@ -14,6 +15,7 @@ import { ...@@ -14,6 +15,7 @@ import {
Pressable, Pressable,
} from 'react-native'; } from 'react-native';
import CustomInput from './CustomInput'; import CustomInput from './CustomInput';
import AwesomeAlert from 'react-native-awesome-alerts';
export default function App() { export default function App() {
const { height } = useWindowDimensions(); const { height } = useWindowDimensions();
...@@ -43,6 +45,7 @@ export default function App() { ...@@ -43,6 +45,7 @@ export default function App() {
const [isLogin, setIsLogin] = useState(true); const [isLogin, setIsLogin] = useState(true);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { loading, error } = useSelector(({ auth }: ApplicationState) => auth); const { loading, error } = useSelector(({ auth }: ApplicationState) => auth);
const [alertMessage, setAlertmessage] = useState('');
// Form completed // Form completed
const onFinish = (values: FormValues) => { const onFinish = (values: FormValues) => {
...@@ -62,15 +65,26 @@ export default function App() { ...@@ -62,15 +65,26 @@ export default function App() {
// TODO If the redux state contains an error, display an error alert // TODO If the redux state contains an error, display an error alert
useEffect(() => { useEffect(() => {
if (error) { if (error) {
console.log('Show error'); setAlertmessage(error);
} else {
setAlertmessage('');
} }
}, [error]); }, [error]);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
alert: {
width: 400,
},
alertTitle: {
color: 'red',
},
root: { root: {
alignItems: 'center', flex: 1,
padding: 20, justifyContent: 'center',
width: '70%',
height: '100%',
}, },
logo: { logo: {
minWidth: 200, minWidth: 200,
maxWidth: 300, maxWidth: 300,
...@@ -92,7 +106,7 @@ export default function App() { ...@@ -92,7 +106,7 @@ export default function App() {
}); });
return ( return (
<View> <View style={styles.root}>
<Image <Image
source={Logo} source={Logo}
style={[styles.logo, { height: height * 0.3 }]} style={[styles.logo, { height: height * 0.3 }]}
...@@ -144,6 +158,19 @@ export default function App() { ...@@ -144,6 +158,19 @@ export default function App() {
</Pressable> </Pressable>
</View> </View>
</FormProvider> </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> </View>
); );
} }
...@@ -27,7 +27,7 @@ export default function MovieTableScreen({ ...@@ -27,7 +27,7 @@ export default function MovieTableScreen({
const [currentPage, setCurrentPage] = useState<number>(1); const [currentPage, setCurrentPage] = useState<number>(1);
const [movies, setMovies] = useState<MovieEntity[]>([]); const [movies, setMovies] = useState<MovieEntity[]>([]);
const [query, setQuery] = useState<FetchMovieParams>(initialQuery); const [query, setQuery] = useState<FetchMovieParams>(initialQuery);
const [moviesLoading, setMoviesLoading] = useState<boolean>(false); const [moviesLoading, setMoviesLoading] = useState<boolean>(true);
const { data, loading, error } = useSelector( const { data, loading, error } = useSelector(
({ movies }: ApplicationState) => movies ({ 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: ...@@ -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" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== 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: react-native-codegen@^0.0.6:
version "0.0.6" version "0.0.6"
resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.6.tgz#b3173faa879cf71bfade8d030f9c4698388f6909" 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