Projekt

Obecné

Profil

« Předchozí | Další » 

Revize c8be2597

Přidáno uživatelem Fantič před více než 1 rok

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

Zobrazit rozdíly:

src/pages/LoginPage.tsx
9 9
    Button,
10 10
    HStack,
11 11
    Text,
12
    KeyboardAvoidingView
12
    KeyboardAvoidingView,
13
    useToast
13 14
} from "native-base"
14
import { useCallback, useEffect, useState } from "react"
15
import { useCallback, useContext, useEffect, useState } from "react"
15 16
import { useDispatch, useSelector } from "react-redux"
16 17
import { checkAuth, login } from "../stores/actions/userThunks"
17 18
import { AppDispatch, RootState } from "../stores/store"
......
19 20
import { log } from "../logging/logger"
20 21
import * as SplashScreen from "expo-splash-screen"
21 22
import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
23
import { InfoToast } from "../components/toast/InfoToast"
24
import { ErrorToast } from "../components/toast/ErrorToast"
25
import { SuccessToast } from "../components/toast/SuccessToast"
22 26

  
23 27

  
24 28
const LoginPage = () => {
25 29
    const [username, setUsername] = useState("")
26 30
    const [password, setPassword] = useState("")
31

  
27 32
    const lastError = useSelector((state: RootState) => state.user.lastError)
28 33

  
34
    const toast = useToast();
35

  
36

  
37
    useEffect(() => {
38
        if (lastError) {
39
            toast.closeAll()
40
            toast.show({
41
                render: ({
42
                    id
43
                }) => {
44
                    return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
45
                },
46
                duration: 3000
47
            });
48
        }
49

  
50
    }, [lastError])
51

  
29 52
    const dispatch = useDispatch<AppDispatch>()
30 53

  
31 54
    const loginUser = () => {
32 55
        log.debug("LoginPage", "loginUser", "dispatching login")
33
        dispatch(login({username, password}))
34
        //TODO - add error handling
56
        dispatch(login({ username, password }))
35 57
    }
36 58

  
37

  
38 59
    useEffect(() => {
39 60
        dispatch(checkAuth())
40 61
    }, [])
41 62

  
42 63
    return (
43 64
        <KeyboardAvoidingView
44
            behavior={ Platform.OS === "ios" ? "padding" : "height" }
45
            flex={ 1 }
46
            justifyContent={ "center" }
47
            h={ {
65
            behavior={Platform.OS === "ios" ? "padding" : "height"}
66
            flex={1}
67
            justifyContent={"center"}
68
            h={{
48 69
                base: "400px",
49 70
                lg: "auto"
50
            } }
71
            }}
51 72
        >
52 73
            <Center w="100%">
53 74
                <VStack
54 75
                    p="2"
55 76
                    w="80%"
56
                    justifyContent={ "center" }
77
                    justifyContent={"center"}
57 78
                >
58 79
                    <ApplicationHeading />
59 80
                    <Heading
60 81
                        mt="10"
61 82
                        textAlign="center"
62
                        _dark={ {
83
                        _dark={{
63 84
                            color: "primary.500"
64
                        } }
85
                        }}
65 86

  
66 87
                        fontWeight="bold"
67 88
                        size="xl"
......
74 95
                    >
75 96
                        Please log in to continue
76 97
                    </Text>
77
                    { lastError && (
98
                    {lastError && (
78 99
                        <Text
79 100
                            mt="1"
80 101
                            textAlign="center"
81 102
                            color="error.500"
82 103
                        >
83
                            { lastError }
104
                            {lastError}
84 105
                        </Text>
85
                    ) }
106
                    )}
86 107

  
87
                    <VStack space={ 3 } >
108
                    <VStack space={3} >
88 109
                        <FormControl>
89 110
                            <FormControl.Label>Username</FormControl.Label>
90 111
                            <Input
91 112
                                // value={username}
92 113
                                textContentType={"username"}
93
                                rounded={ "xl" }
114
                                rounded={"xl"}
94 115
                                autoComplete={"username"}
95
                                onSubmitEditing={ () => { loginUser() } }
96
                                onChangeText={ (username) => setUsername(username) }
116
                                onSubmitEditing={() => { loginUser() }}
117
                                onChangeText={(username) => setUsername(username)}
97 118
                            />
98 119
                            <FormControl.Label>Password</FormControl.Label>
99 120
                            <Input
100 121
                                type="password"
101
                                autoComplete={ "password" }
102
                                id={ "password" }
103
                                returnKeyType={ "go" }
104
                                rounded={ "xl" }
105
                                onSubmitEditing={ () => loginUser() }
106
                                onChangeText={ (password) => setPassword(password) }
122
                                autoComplete={"password"}
123
                                id={"password"}
124
                                returnKeyType={"go"}
125
                                rounded={"xl"}
126
                                onSubmitEditing={() => loginUser()}
127
                                onChangeText={(password) => setPassword(password)}
107 128
                            />
108 129
                            <Button
109 130
                                mt="2"
110
                                bg={ "primary.500" }
111
                                onPress={ loginUser }
112
                                rounded={ "xl"}
131
                                bg={"primary.500"}
132
                                onPress={loginUser}
133
                                rounded={"xl"}
113 134
                            >
114 135
                                Sign in
115 136
                            </Button>

Také k dispozici: Unified diff