inital commit

src/screens/BarcodeScreen/BarcodeScreen.tsx

@@ -0,0 +1,16 @@
+import {Button, Text, View} from "react-native";
+import {useAppDispatch} from "../../redux/store";
+import {logoutUser, useGetPokemonByNameQuery} from "../../features/auth/authSlice";
+import * as process from "process";
+
+function BarcodeScreen() {
+
+    return (
+        <View>
+            <Text style={{fontSize: 36}}>Barcode</Text>
+
+        </View>
+    )
+}
+
+export default BarcodeScreen;

src/screens/BoxScreen/BoxScreen.tsx

@@ -0,0 +1,14 @@
+import {Button, Text, View} from "react-native";
+import {useAppDispatch} from "../../redux/store";
+import {logoutUser, useGetPokemonByNameQuery} from "../../features/auth/authSlice";
+import * as process from "process";
+
+function BoxScreen() {
+    return (
+        <View>
+            <Text style={{fontSize: 36}}>Box</Text>
+        </View>
+    )
+}
+
+export default BoxScreen;

src/screens/CommonPage/CommonPage.tsx

@@ -0,0 +1,27 @@
+import {SafeAreaView, StyleSheet, View} from "react-native";
+import LoginScreen from "../LoginScreen/LoginScreen";
+import MainScreen from "../MainScreen/MainScreen";
+import SearchBar from "../../components/SearchBar/SearchBar";
+import React from "react";
+
+function CommonPage() {
+
+    return (
+
+        <View style={styles.main}>
+            <MainScreen/>
+        </View>
+
+    )
+}
+
+const styles = StyleSheet.create({
+    main: {
+        display: "flex",
+        flexDirection: "column",
+        flexGrow: 1,
+        flex: 1
+    }
+});
+
+export default CommonPage;

src/screens/HomeScreen/HomeScreen.tsx

@@ -0,0 +1,23 @@
+import {Button, Modal, SafeAreaView, Text, View} from "react-native";
+import {useAppDispatch} from "../../redux/store";
+import {logoutUser, useGetPokemonByNameQuery} from "../../features/auth/authSlice";
+import * as process from "process";
+import React, {useState} from "react";
+import BasicButton from "../../components/BasicButton/BasicButton";
+import SearchBar from "components/SearchBar/SearchBar";
+import ScanModal from "components/SearchBar/ScanModal";
+import DText from "../../components/DText/DText";
+
+function HomeScreen() {
+    return (
+        <View style={{backgroundColor: "white"}}>
+            <SearchBar onSearch={(text) => {
+                console.log(`From scanner: ${text}`)
+            }}/>
+            <DText>Хуй</DText>
+        </View>
+
+    )
+}
+
+export default HomeScreen;

src/screens/LoginScreen/LoginScreen.tsx

@@ -0,0 +1,90 @@
+import {FC, useCallback, useEffect, useState} from "react";
+import {StyleSheet, Text, View, ImageBackground, Linking} from 'react-native';
+import TelegramAuthButton from "components/TelegramAuthButton/TelegramAuthButton";
+import WebView from "react-native-webview";
+import InputField from "./components/InputField";
+import {useDispatch, useSelector} from "react-redux";
+import {loadToken, loginUser} from "features/auth/authSlice";
+import {AppDispatch, RootState, useAppDispatch} from "redux/store";
+import * as SecureStore from 'expo-secure-store';
+import {initializeUseSelector} from "react-redux/es/hooks/useSelector";
+import HomeScreen from "../HomeScreen/HomeScreen";
+import {RFPercentage, RFValue} from "react-native-responsive-fontsize";
+import {responsiveWidth} from "react-native-responsive-dimensions";
+
+function LoginScreen() {
+    const dispatch = useAppDispatch();
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const {status, errorMessage, isAuthenticated} = useSelector((state: RootState) => state.auth);
+    const handleLogin = async () => {
+        dispatch(loginUser({login: login, password: password}));
+    }
+
+
+    useEffect(() => {
+        dispatch(loadToken());
+    }, []);
+    return (
+        <>
+            {<View style={styles.container}>
+                <ImageBackground source={require('assets/img/login/backgroud.png')} resizeMode="cover"
+                                 style={styles.image}>
+                    <View style={styles.block}>
+                        <Text style={styles.authText}>Авторизация</Text>
+                        <InputField onChange={setLogin} placeholder={"Логин"}/>
+                        <InputField onChange={setPassword} secureTextEntry={false} placeholder={"Пароль"}/>
+                        <TelegramAuthButton onPress={handleLogin}/>
+                        <Text style={{fontSize: 36}}>{errorMessage}</Text>
+                    </View>
+                </ImageBackground>
+            </View>}
+
+        </>
+
+    );
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    image: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    text: {
+        color: 'white',
+        fontSize: 42,
+        lineHeight: 84,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        backgroundColor: '#000000c0',
+    },
+    authText: {
+        color: '#2478F8',
+        fontFamily: 'SF Pro Text',
+        fontSize: RFPercentage(3),
+        fontStyle: 'normal',
+        fontWeight: '500',
+    },
+    block: {
+        marginHorizontal: responsiveWidth(10),
+        paddingVertical: "5%",
+        paddingHorizontal: "5%",
+        borderRadius: RFPercentage(5),
+        borderColor: "#2478F8",
+        borderWidth: 1,
+        borderStyle: "solid",
+        backgroundColor: "#C6E0EA",
+        alignSelf: "center",
+        opacity: 0.8,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 30
+    }
+})
+export default LoginScreen;

src/screens/LoginScreen/components/InputField.tsx

@@ -0,0 +1,53 @@
+import {FC, useCallback} from "react";
+import {StyleSheet, Text, TextInput, TouchableOpacity, View} from "react-native";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import {responsiveWidth} from "react-native-responsive-dimensions";
+
+type Props = {
+    placeholder?: string;
+    onChange?: (text: string) => void,
+    secureTextEntry?: boolean
+}
+
+const InputField: FC<Props> = ({placeholder, onChange, secureTextEntry = false}) => {
+    return (
+        <View style={styles.fieldContainer}>
+            <View style={styles.textInputWrapper}>
+                <TextInput
+                    placeholder={placeholder}
+                    autoCorrect={false}
+                    autoCapitalize={"none"}
+                    secureTextEntry={secureTextEntry}
+                    style={styles.textInput}
+                    onChangeText={onChange}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    textInputWrapper: {
+        backgroundColor: '#0090c9',
+        borderRadius: RFPercentage(1),
+        flexDirection: 'row',
+        paddingHorizontal: responsiveWidth(3),
+    },
+    fieldLabel: {
+        marginLeft: 40,
+        alignSelf: 'flex-start',
+        fontSize: RFPercentage(3),
+        marginBottom: 10,
+    },
+    fieldContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textInput: {
+        flex: 1,
+        fontSize: RFPercentage(3),
+        color: 'white',
+    },
+});
+
+export default InputField;

src/screens/MainScreen/MainScreen.tsx

@@ -0,0 +1,108 @@
+import {StyleSheet, Text, View, ImageBackground, Linking, Image} from 'react-native';
+import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
+import HomeScreen from "../HomeScreen/HomeScreen";
+import BoxScreen from "../BoxScreen/BoxScreen";
+import BarcodeScreen from "../BarcodeScreen/BarcodeScreen";
+import MoneyScreen from "../MoneyScreen/MoneyScreen";
+import ProfileScreen from "../ProfileScreen/ProfileScreen";
+import {NavigationContainer} from "@react-navigation/native";
+import moneyScreen from "../MoneyScreen/MoneyScreen";
+import profileScreen from "../ProfileScreen/ProfileScreen";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import LoginScreen from "../LoginScreen/LoginScreen";
+
+
+interface CustomTabProps {
+    name: string;
+    component: React.ComponentType<any>;
+    icon: any;
+}
+
+const CustomTab = ({name, component, icon}: CustomTabProps) => ({
+    name,
+    component,
+    options: {
+        tabBarIcon: ({focused, color, size}: { focused: boolean; color: string; size: number }) => (
+            <Image
+                source={icon}
+                style={{
+                    width: RFPercentage(4),
+                    height: RFPercentage(4),
+                    tintColor: color
+                }}
+            />
+        ),
+        tabBarLabel: () => null,
+    }
+});
+
+function MainScreen() {
+    const Tab = createBottomTabNavigator();
+
+    const tabScreens = [
+        {
+            name: "Home",
+            component: HomeScreen,
+            icon: require('assets/icons/home.png')
+        },
+        {
+            name: "Box",
+            component: BoxScreen,
+            icon: require('assets/icons/box.png')
+        },
+        {
+            name: "Barcode",
+            component: BarcodeScreen,
+            icon: require('assets/icons/barcode.png')
+        },
+        {
+            name: "Money",
+            component: moneyScreen,
+            icon: require('assets/icons/money.png')
+        },
+        {
+            name: "Profile",
+            component: profileScreen,
+            icon: require('assets/icons/profile.png')
+        }
+    ];
+
+    return (
+        <NavigationContainer>
+
+            <Tab.Navigator screenOptions={{
+                tabBarStyle: styles.tabBarStyle,
+                headerTitle: ""
+            }}>
+                {tabScreens.map(tabScreen =>
+                    <Tab.Screen key={tabScreen.name} {...CustomTab({
+                        name: tabScreen.name,
+                        component: tabScreen.component,
+                        icon: tabScreen.icon,
+                    })}/>
+                )}
+            </Tab.Navigator>
+        </NavigationContainer>
+    );
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    tabBarStyle: {
+        position: 'absolute',
+        left: responsiveWidth(10),
+        right: responsiveWidth(10),
+        bottom: 0,
+        borderTopLeftRadius: 18,
+        borderTopRightRadius: 18,
+        elevation: 10,
+        height: responsiveHeight(8),
+        paddingHorizontal: responsiveWidth(5)
+    }
+
+})
+export default MainScreen;

src/screens/MoneyScreen/MoneyScreen.tsx

@@ -0,0 +1,15 @@
+import {Button, Text, View} from "react-native";
+import {useAppDispatch} from "../../redux/store";
+import {logoutUser, useGetPokemonByNameQuery} from "../../features/auth/authSlice";
+import * as process from "process";
+
+function MoneyScreen() {
+    return (
+        <View>
+            <Text style={{fontSize: 36}}>Money</Text>
+
+        </View>
+    )
+}
+
+export default MoneyScreen;

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -0,0 +1,15 @@
+import {Button, Text, View} from "react-native";
+import {useAppDispatch} from "../../redux/store";
+import {logoutUser, useGetPokemonByNameQuery} from "../../features/auth/authSlice";
+import * as process from "process";
+
+function ProfileScreen() {
+
+    return (
+        <View>
+            <Text style={{fontSize: 36}}>Profile</Text>
+        </View>
+    )
+}
+
+export default ProfileScreen;