Revize ddc84a2f
Přidáno uživatelem Schwobik před asi 2 roky(ů)
| App.tsx | ||
|---|---|---|
| 4 | 4 |
import { Provider } from "react-redux"
|
| 5 | 5 |
import store from "./src/stores/store" |
| 6 | 6 |
import Navigation from "./src/components/Navigation" |
| 7 |
import { nativeBaseTheme } from "./src/theme/nativeBaseTheme"
|
|
| 7 | 8 |
|
| 8 | 9 |
export default function App() {
|
| 9 | 10 |
return ( |
| 10 | 11 |
<Provider store={store}>
|
| 11 |
<NativeBaseProvider> |
|
| 12 |
<NativeBaseProvider theme={nativeBaseTheme}>
|
|
| 12 | 13 |
<Navigation/> |
| 13 | 14 |
</NativeBaseProvider> |
| 14 | 15 |
</Provider> |
| src/api/authservice.ts | ||
|---|---|---|
| 2 | 2 |
|
| 3 | 3 |
export const loginRequest = async (username: string, password: string) => {
|
| 4 | 4 |
return await axiosInstance.post( |
| 5 |
"/api/login",
|
|
| 5 |
"/login", |
|
| 6 | 6 |
{
|
| 7 | 7 |
username: username, |
| 8 | 8 |
password: password |
| src/api/constants.ts | ||
|---|---|---|
| 1 |
export const BASE_URL = 'http://147.228.173.159' |
|
| 1 |
export const BASE_URL = 'http://147.228.173.159/api' |
|
| src/components/Navigation.tsx | ||
|---|---|---|
| 1 | 1 |
import { createNativeStackNavigator } from "@react-navigation/native-stack"
|
| 2 | 2 |
import { NavigationContainer } from "@react-navigation/native"
|
| 3 |
import HomePage from "../pages/HomePage" |
|
| 4 |
import LoginPage from "../pages/LoginPage" |
|
| 5 | 3 |
import { IconButton } from "native-base"
|
| 6 | 4 |
import { AntDesign } from "@expo/vector-icons"
|
| 7 |
import SearchPage from "../pages/SearchPage" |
|
| 8 | 5 |
import { createDrawerNavigator } from "@react-navigation/drawer"
|
| 9 | 6 |
import { useSelector } from "react-redux"
|
| 10 | 7 |
import { RootState } from "../stores/store"
|
| 8 |
import { nativeBaseTheme } from "../theme/nativeBaseTheme"
|
|
| 9 |
import HomePage from "../pages/HomePage" |
|
| 10 |
import LoginPage from "../pages/LoginPage" |
|
| 11 |
import SearchPage from "../pages/SearchPage" |
|
| 12 |
import Logout from "../pages/Logout" |
|
| 11 | 13 |
|
| 12 | 14 |
const Navigation = () => {
|
| 13 | 15 |
const Drawer = createDrawerNavigator() |
| ... | ... | |
| 18 | 20 |
<Drawer.Navigator useLegacyImplementation |
| 19 | 21 |
screenOptions={({ navigation }) => ({
|
| 20 | 22 |
headerStyle: {
|
| 21 |
backgroundColor: '#f4511e',
|
|
| 23 |
backgroundColor: nativeBaseTheme.colors.primary[50],
|
|
| 22 | 24 |
}, |
| 23 | 25 |
headerTintColor: '#fff', |
| 24 | 26 |
headerTitleStyle: {
|
| ... | ... | |
| 51 | 53 |
name="Search" |
| 52 | 54 |
component={SearchPage}
|
| 53 | 55 |
/> |
| 56 |
<Drawer.Screen |
|
| 57 |
name="Logout" |
|
| 58 |
component={Logout}
|
|
| 59 |
/> |
|
| 54 | 60 |
</> |
| 55 | 61 |
) : ( |
| 56 | 62 |
<Drawer.Screen |
| src/pages/LoginPage.tsx | ||
|---|---|---|
| 1 |
import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base"
|
|
| 1 |
import {
|
|
| 2 |
Center, |
|
| 3 |
Box, |
|
| 4 |
Heading, |
|
| 5 |
VStack, |
|
| 6 |
FormControl, |
|
| 7 |
Link, |
|
| 8 |
Input, |
|
| 9 |
Button, |
|
| 10 |
HStack, |
|
| 11 |
Text, |
|
| 12 |
KeyboardAvoidingView |
|
| 13 |
} from "native-base" |
|
| 2 | 14 |
import { useState } from "react"
|
| 3 | 15 |
import { useDispatch, useSelector } from "react-redux"
|
| 4 | 16 |
import { login } from "../stores/actions/userThunks"
|
| 5 | 17 |
import { AppDispatch, RootState } from "../stores/store"
|
| 18 |
import { Platform } from "react-native"
|
|
| 6 | 19 |
|
| 7 | 20 |
|
| 8 | 21 |
const LoginPage = () => {
|
| ... | ... | |
| 13 | 26 |
const dispatch = useDispatch<AppDispatch>() |
| 14 | 27 |
|
| 15 | 28 |
const loginUser = () => {
|
| 16 |
dispatch(login({ username, password }))
|
|
| 29 |
dispatch(login({username, password}))
|
|
| 17 | 30 |
//TODO - add error handling |
| 18 |
//TODO add redirect to home page |
|
| 19 | 31 |
} |
| 20 | 32 |
|
| 21 | 33 |
return ( |
| 22 |
<Center w="100%"> |
|
| 23 |
<Box safeArea p="2" py="8" w="90%" maxW="290"> |
|
| 24 |
<Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
|
|
| 25 |
color: "warmGray.50" |
|
| 26 |
}}> |
|
| 27 |
Welcome |
|
| 28 |
</Heading> |
|
| 29 |
<Heading mt="1" _dark={{
|
|
| 30 |
color: "warmGray.200" |
|
| 31 |
}} color="coolGray.600" fontWeight="medium" size="xs"> |
|
| 32 |
Sign in to continue! |
|
| 33 |
</Heading> |
|
| 34 |
|
|
| 35 |
<VStack space={3} mt="5">
|
|
| 36 |
<FormControl> |
|
| 37 |
<FormControl.Label>Username</FormControl.Label> |
|
| 38 |
<Input |
|
| 39 |
// value={username}
|
|
| 40 |
onChangeText={(username) => setUsername(username)}
|
|
| 41 |
/> |
|
| 42 |
</FormControl> |
|
| 43 |
<FormControl> |
|
| 44 |
<FormControl.Label>Password</FormControl.Label> |
|
| 45 |
<Input type="password" |
|
| 46 |
// value={password}
|
|
| 47 |
onChangeText={(password) => setPassword(password)}
|
|
| 48 |
/> |
|
| 49 |
<Link _text={{
|
|
| 50 |
fontSize: "xs", |
|
| 51 |
fontWeight: "500", |
|
| 52 |
color: "indigo.500" |
|
| 53 |
}} alignSelf="flex-end" mt="1"> |
|
| 54 |
Forget Password? |
|
| 55 |
</Link> |
|
| 56 |
</FormControl> |
|
| 57 |
<Button |
|
| 58 |
mt="2" |
|
| 59 |
colorScheme="indigo" |
|
| 60 |
onPress={() => loginUser()}
|
|
| 34 |
<KeyboardAvoidingView |
|
| 35 |
h={ {
|
|
| 36 |
base: "400px", |
|
| 37 |
lg: "auto" |
|
| 38 |
} } |
|
| 39 |
behavior={ Platform.OS === "ios" ? "padding" : "height" }
|
|
| 40 |
> |
|
| 41 |
<Center w="100%"> |
|
| 42 |
<Box |
|
| 43 |
safeArea |
|
| 44 |
p="2" |
|
| 45 |
py="8" |
|
| 46 |
w="90%" |
|
| 47 |
maxW="290" |
|
| 48 |
> |
|
| 49 |
<Heading |
|
| 50 |
size="2xl" |
|
| 51 |
color="primary.100" |
|
| 52 |
textAlign="center" |
|
| 53 |
_dark={ {
|
|
| 54 |
color: "primary.100" |
|
| 55 |
} } |
|
| 56 |
> |
|
| 57 |
Inventaria Rudolphina |
|
| 58 |
</Heading> |
|
| 59 |
<Heading |
|
| 60 |
mt="10" |
|
| 61 |
textAlign="center" |
|
| 62 |
_dark={ {
|
|
| 63 |
color: "primary.50" |
|
| 64 |
} } |
|
| 65 |
color="primary.50" |
|
| 66 |
fontWeight="bold" |
|
| 67 |
size="xl" |
|
| 61 | 68 |
> |
| 62 |
Sign in |
|
| 63 |
</Button> |
|
| 64 |
<HStack mt="6" justifyContent="center"> |
|
| 65 |
<Text fontSize="sm" color="coolGray.600" _dark={{
|
|
| 66 |
color: "warmGray.200" |
|
| 67 |
}}> |
|
| 68 |
I'm a new user.{" "}
|
|
| 69 |
</Text> |
|
| 70 |
<Link _text={{
|
|
| 71 |
color: "indigo.500", |
|
| 72 |
fontWeight: "medium", |
|
| 73 |
fontSize: "sm" |
|
| 74 |
}} href="#"> |
|
| 75 |
Sign Up |
|
| 76 |
</Link> |
|
| 77 |
</HStack> |
|
| 78 |
</VStack> |
|
| 79 |
</Box> |
|
| 80 |
</Center> |
|
| 69 |
Log in |
|
| 70 |
</Heading> |
|
| 71 |
<Text |
|
| 72 |
mt="1" |
|
| 73 |
textAlign="center" |
|
| 74 |
> |
|
| 75 |
Please log in to continue |
|
| 76 |
</Text> |
|
| 77 |
|
|
| 78 |
<VStack space={ 3 } mt="1">
|
|
| 79 |
<FormControl> |
|
| 80 |
<FormControl.Label>Username</FormControl.Label> |
|
| 81 |
<Input |
|
| 82 |
// value={username}
|
|
| 83 |
onChangeText={ (username) => setUsername(username) }
|
|
| 84 |
/> |
|
| 85 |
</FormControl> |
|
| 86 |
<FormControl> |
|
| 87 |
<FormControl.Label>Password</FormControl.Label> |
|
| 88 |
<Input type="password" |
|
| 89 |
// value={password}
|
|
| 90 |
onChangeText={ (password) => setPassword(password) }
|
|
| 91 |
/> |
|
| 92 |
<Link _text={ {
|
|
| 93 |
fontSize: "xs", |
|
| 94 |
fontWeight: "500", |
|
| 95 |
color: "indigo.500" |
|
| 96 |
} } alignSelf="flex-end" mt="1"> |
|
| 97 |
Forget Password? |
|
| 98 |
</Link> |
|
| 99 |
</FormControl> |
|
| 100 |
<Button |
|
| 101 |
mt="2" |
|
| 102 |
colorScheme="indigo" |
|
| 103 |
onPress={ () => loginUser() }
|
|
| 104 |
> |
|
| 105 |
Sign in |
|
| 106 |
</Button> |
|
| 107 |
<HStack mt="6" justifyContent="center"> |
|
| 108 |
<Text fontSize="sm" color="coolGray.600" _dark={ {
|
|
| 109 |
color: "warmGray.200" |
|
| 110 |
} }> |
|
| 111 |
I'm a new user.{ " " }
|
|
| 112 |
</Text> |
|
| 113 |
<Link _text={ {
|
|
| 114 |
color: "indigo.500", |
|
| 115 |
fontWeight: "medium", |
|
| 116 |
fontSize: "sm" |
|
| 117 |
} } href="#"> |
|
| 118 |
Sign Up |
|
| 119 |
</Link> |
|
| 120 |
</HStack> |
|
| 121 |
</VStack> |
|
| 122 |
</Box> |
|
| 123 |
</Center> |
|
| 124 |
</KeyboardAvoidingView> |
|
| 81 | 125 |
) |
| 82 | 126 |
} |
| 83 | 127 |
|
| src/pages/Logout.tsx | ||
|---|---|---|
| 1 |
import { useDispatch } from "react-redux"
|
|
| 2 |
import { useEffect } from "react"
|
|
| 3 |
import { AppDispatch } from "../stores/store"
|
|
| 4 |
import { Heading, HStack, Spinner } from "native-base"
|
|
| 5 |
import { logout } from "../stores/reducers/userSlice"
|
|
| 6 |
|
|
| 7 |
const Logout = () => {
|
|
| 8 |
const dispatch = useDispatch<AppDispatch>(); |
|
| 9 |
|
|
| 10 |
useEffect(() => {
|
|
| 11 |
dispatch(logout()) |
|
| 12 |
}, [dispatch]) |
|
| 13 |
|
|
| 14 |
return ( |
|
| 15 |
<> |
|
| 16 |
<HStack space={2} justifyContent="center">
|
|
| 17 |
<Spinner |
|
| 18 |
accessibilityLabel="Loading logout" |
|
| 19 |
color="primary.50" |
|
| 20 |
/> |
|
| 21 |
<Heading color="primary.50" fontSize="md"> |
|
| 22 |
Loading |
|
| 23 |
</Heading> |
|
| 24 |
</HStack> |
|
| 25 |
</> |
|
| 26 |
) |
|
| 27 |
} |
|
| 28 |
|
|
| 29 |
export default Logout |
|
| src/theme/nativeBaseTheme.ts | ||
|---|---|---|
| 1 |
import { extendTheme } from "native-base"
|
|
| 2 |
|
|
| 3 |
export const nativeBaseTheme = extendTheme({
|
|
| 4 |
colors: {
|
|
| 5 |
primary: {
|
|
| 6 |
50: "#4F4537", |
|
| 7 |
100: "#E3A400", |
|
| 8 |
}, |
|
| 9 |
|
|
| 10 |
} |
|
| 11 |
}) |
|
Také k dispozici: Unified diff
Navigation beta version with pages templates
re #10340