#15 add error handling to LoginComponent.

components/LoginComponent.tsx

@@ -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>
   );
 }

package.json

@@ -41,6 +41,7 @@
     "react-dom": "17.0.1",
     "react-hook-form": "^7.19.5",
     "react-native": "0.64.3",
+    "react-native-awesome-alerts": "^1.5.2",
     "react-native-elements": "^3.4.2",
     "react-native-ratings": "^8.1.0",
     "react-native-safe-area-context": "3.3.2",

screens/MovieTableScreen.tsx

@@ -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

yarn.lock

@@ -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"