Revize c8be2597

re #10818 Vývoj Toast info/error: basic components style

src/pages/LoginPage.tsx

@@ -9 +9 @@
     Button,
     HStack,
     Text,
-    KeyboardAvoidingView
+    KeyboardAvoidingView,
+    useToast
 } from "native-base"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useContext, useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { checkAuth, login } from "../stores/actions/userThunks"
 import { AppDispatch, RootState } from "../stores/store"
@@ -19 +20 @@
 import { log } from "../logging/logger"
 import * as SplashScreen from "expo-splash-screen"
 import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
+import { InfoToast } from "../components/toast/InfoToast"
+import { ErrorToast } from "../components/toast/ErrorToast"
+import { SuccessToast } from "../components/toast/SuccessToast"
 
 
 const LoginPage = () => {
     const [username, setUsername] = useState("")
     const [password, setPassword] = useState("")
+
     const lastError = useSelector((state: RootState) => state.user.lastError)
 
+    const toast = useToast();
+
+
+    useEffect(() => {
+        if (lastError) {
+            toast.closeAll()
+            toast.show({
+                render: ({
+                    id
+                }) => {
+                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
+                },
+                duration: 3000
+            });
+        }
+
+    }, [lastError])
+
     const dispatch = useDispatch<AppDispatch>()
 
     const loginUser = () => {
         log.debug("LoginPage", "loginUser", "dispatching login")
-        dispatch(login({username, password}))
-        //TODO - add error handling
+        dispatch(login({ username, password }))
     }
 
-
     useEffect(() => {
         dispatch(checkAuth())
     }, [])
 
     return (
         <KeyboardAvoidingView
-            behavior={ Platform.OS === "ios" ? "padding" : "height" }
-            flex={ 1 }
-            justifyContent={ "center" }
-            h={ {
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            flex={1}
+            justifyContent={"center"}
+            h={{
                 base: "400px",
                 lg: "auto"
-            } }
+            }}
         >
             <Center w="100%">
                 <VStack
                     p="2"
                     w="80%"
-                    justifyContent={ "center" }
+                    justifyContent={"center"}
                 >
                     <ApplicationHeading />
                     <Heading
                         mt="10"
                         textAlign="center"
-                        _dark={ {
+                        _dark={{
                             color: "primary.500"
-                        } }
+                        }}
 
                         fontWeight="bold"
                         size="xl"
@@ -74 +95 @@
                     >
                         Please log in to continue
                     </Text>
-                    { lastError && (
+                    {lastError && (
                         <Text
                             mt="1"
                             textAlign="center"
                             color="error.500"
                         >
-                            { lastError }
+                            {lastError}
                         </Text>
-                    ) }
+                    )}
 
-                    <VStack space={ 3 } >
+                    <VStack space={3} >
                         <FormControl>
                             <FormControl.Label>Username</FormControl.Label>
                             <Input
                                 // value={username}
                                 textContentType={"username"}
-                                rounded={ "xl" }
+                                rounded={"xl"}
                                 autoComplete={"username"}
-                                onSubmitEditing={ () => { loginUser() } }
-                                onChangeText={ (username) => setUsername(username) }
+                                onSubmitEditing={() => { loginUser() }}
+                                onChangeText={(username) => setUsername(username)}
                             />
                             <FormControl.Label>Password</FormControl.Label>
                             <Input
                                 type="password"
-                                autoComplete={ "password" }
-                                id={ "password" }
-                                returnKeyType={ "go" }
-                                rounded={ "xl" }
-                                onSubmitEditing={ () => loginUser() }
-                                onChangeText={ (password) => setPassword(password) }
+                                autoComplete={"password"}
+                                id={"password"}
+                                returnKeyType={"go"}
+                                rounded={"xl"}
+                                onSubmitEditing={() => loginUser()}
+                                onChangeText={(password) => setPassword(password)}
                             />
                             <Button
                                 mt="2"
-                                bg={ "primary.500" }
-                                onPress={ loginUser }
-                                rounded={ "xl"}
+                                bg={"primary.500"}
+                                onPress={loginUser}
+                                rounded={"xl"}
                             >
                                 Sign in
                             </Button>