minor govno

src/App.tsx

@@ -9,7 +9,7 @@ import CommonPage from "./screens/CommonPage/CommonPage";
 
 export default function App() {
     let [fontsLoading] = useFonts({
-        'SF Pro Text': require('./assets/fonts/SF-Pro.ttf')
+        'SF Pro Text': require('./assets/fonts/SF-Pro-Text-Regular.otf')
     })
     if (!fontsLoading)
         return <View><Text>Loading...</Text></View>

src/components/BasicButton/BasicButton.tsx

@@ -30,13 +30,11 @@ const styles = StyleSheet.create({
         backgroundColor: '#2478F8',
         borderRadius: responsiveWidth(1),
         padding: responsiveWidth(2),
-        flex: 1,
-
     },
     text: {
         color: "white",
         fontSize: RFPercentage(2),
-        textAlignVertical:"center",
+        textAlignVertical: "center",
     }
 });
 

src/components/DText/DText.tsx

@@ -1,9 +1,10 @@
 import React, {FC, ReactElement} from "react";
 import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
 import {RFPercentage} from "react-native-responsive-fontsize";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
 
 type Props = {
-    children: string;
+    children: any;
     style?: StyleProp<TextStyle>;
 }
 const DText: FC<Props> = ({children, style}) => {
@@ -13,7 +14,8 @@ const DText: FC<Props> = ({children, style}) => {
 }
 const styles = StyleSheet.create({
     text: {
-        fontFamily: 'SF Pro Text',
+        // fontFamily: 'SF Pro Text',
+        fontSize: responsiveWidth(3),
     }
 })
 export default DText;

src/components/DTitle/DTitle.tsx

@@ -0,0 +1,21 @@
+import React, {FC, ReactElement} from "react";
+import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
+import {RFPercentage} from "react-native-responsive-fontsize";
+import DText from "../DText/DText";
+import {responsiveWidth} from "react-native-responsive-dimensions";
+
+type Props = {
+    children: string;
+    style?: StyleProp<TextStyle>;
+}
+const DTitle: FC<Props> = ({children, style}) => {
+    return (<DText style={[style, styles.text]}>{children}</DText>)
+}
+const styles = StyleSheet.create({
+    text: {
+        fontSize: responsiveWidth(4.5),
+        fontWeight: "600",
+        fontStyle: "normal"
+    }
+})
+export default DTitle;

src/components/Hyperlink/Hyperlink.tsx

@@ -0,0 +1,27 @@
+import React, {ReactNode} from 'react';
+import {TouchableOpacity, Linking} from 'react-native';
+
+type HyperlinkProps = {
+    url: string;
+    children: ReactNode;
+};
+
+const Hyperlink: React.FC<HyperlinkProps> = ({url, children}) => {
+    const handlePress = () => {
+        Linking.canOpenURL(url).then(supported => {
+            if (supported) {
+                Linking.openURL(url);
+            } else {
+                console.log("Don't know how to open URI: " + url);
+            }
+        });
+    };
+
+    return (
+        <TouchableOpacity onPress={handlePress}>
+            {children}
+        </TouchableOpacity>
+    );
+};
+
+export default Hyperlink;

src/components/OrderCard/OrderCard.tsx

@@ -0,0 +1,98 @@
+import {FC, useState} from "react";
+import {GestureResponderEvent, Image, StyleSheet, TouchableOpacity, View} from "react-native";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import DText from "../DText/DText";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import DTitle from "../DTitle/DTitle";
+
+type Props = {
+    onPress?: (event: GestureResponderEvent) => void
+
+}
+const OrderCard: FC<Props> = ({onPress}) => {
+
+    const [order, setOrder] = useState({
+        article: 183658,
+        imageUrl: "https://421421.selcdn.ru/denco/996956/thumbzoom/h0b41036e5dc84a88b3dd344a46ab33edt.jpg-640x640.jpg",
+        orderNumber: "93757290-0104-7",
+        productName: "Фигурки животных «Собачки» 258, 5-7 см., статичные / 12 шт.",
+        supplierName: "simaland",
+        marketplaceName: "Wildberries РЕНТА",
+        sellerName: "DENCO",
+        assembled: false
+    });
+
+    return (
+        <TouchableOpacity onPress={() => {
+            console.log("pressed11")
+        }}>
+            <View style={styles.container}>
+                <View style={styles.imageWrapper}>
+                    <Image style={styles.image} source={{uri: order.imageUrl}}/>
+                </View>
+                <View style={styles.description}>
+                    <View style={styles.title}>
+
+                        <DTitle>{order.orderNumber}</DTitle>
+                        <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
+                    </View>
+
+                    <DText>Количество: 5</DText>
+                    <DText>Поставщик: {order.supplierName}</DText>
+                    <DText>Селлер: {order.sellerName}</DText>
+                    <DText>Цвет: ГОЛУБОЙ</DText>
+                    <View style={styles.statusContainer}>
+                        <DText>
+                            Ожидает сборки
+                        </DText>
+                    </View>
+                </View>
+
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: "white",
+        display: "flex",
+        borderRadius: RFPercentage(5),
+        height: responsiveHeight(20),
+        flexDirection: "row",
+        padding: RFPercentage(2),
+
+
+    },
+    imageWrapper: {
+        width: responsiveWidth(30),
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+
+    },
+    description: {
+        backgroundColor:"red",
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        paddingLeft: responsiveWidth(3),
+        gap: 0,
+    },
+    title: {
+        marginBottom: responsiveHeight(1),
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    titleImage: {
+        width: responsiveWidth(4),
+        height: responsiveHeight(4),
+        resizeMode: "center",
+        marginLeft: responsiveHeight(1)
+    },
+    statusContainer: {
+        alignSelf: "flex-end",
+    }
+});
+export default OrderCard;

src/features/auth/authSlice.ts

@@ -22,16 +22,6 @@ const initialState: AuthState = {
     isAuthenticated: false
 };
 
-export const pokemonApi = createApi({
-    reducerPath: 'pokemonApi',
-    baseQuery: fetchBaseQuery({baseUrl: 'https://pokeapi.co/api/v2/'}),
-    endpoints: (builder) => ({
-        getPokemonByName: builder.query<any, string>({
-            query: (name) => `pokemon/${name}`,
-        }),
-    }),
-})
-export const {useGetPokemonByNameQuery} = pokemonApi;
 
 export const loginUser = createAsyncThunk(
     'auth/login',

src/redux/store.ts

@@ -1,14 +1,12 @@
 import {configureStore} from '@reduxjs/toolkit';
 
-import authReducer, {pokemonApi} from 'features/auth/authSlice';
+import authReducer from 'features/auth/authSlice';
 import {useDispatch} from "react-redux";
 
 export const store = configureStore({
     reducer: {
         auth: authReducer,
-        [pokemonApi.reducerPath]: pokemonApi.reducer
     },
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(pokemonApi.middleware)
 });
 
 export type RootState = ReturnType<typeof store.getState>;

src/screens/HomeScreen/HomeScreen.tsx

@@ -1,6 +1,5 @@
 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";

src/screens/MainScreen/MainScreen.tsx

@@ -11,6 +11,8 @@ 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";
+import OrderScreen from "../OrderScreen/OrderScreen";
+import OrdersScreen from "../OrdersScreen/OrdersScreen";
 
 
 interface CustomTabProps {
@@ -43,12 +45,12 @@ function MainScreen() {
     const tabScreens = [
         {
             name: "Home",
-            component: HomeScreen,
+            component: OrderScreen,
             icon: require('assets/icons/home.png')
         },
         {
             name: "Box",
-            component: BoxScreen,
+            component: OrdersScreen,
             icon: require('assets/icons/box.png')
         },
         {

src/screens/OrderScreen/OrderScreen.tsx

@@ -0,0 +1,120 @@
+import {View, Text, Image, StyleSheet, Button} from "react-native";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import DText from "../../components/DText/DText";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import DTitle from "../../components/DTitle/DTitle";
+import BasicButton from "../../components/BasicButton/BasicButton";
+import Hyperlink from "../../components/Hyperlink/Hyperlink";
+import React, {useState} from "react";
+
+type ArticleTextProps = {
+    article: number
+}
+
+
+function OrderScreen() {
+
+    const [order, setOrder] = useState({
+        article: 183658,
+        imageUrl: "https://421421.selcdn.ru/denco/996956/thumbzoom/h0b41036e5dc84a88b3dd344a46ab33edt.jpg-640x640.jpg",
+        orderNumber: "93757290-0104-7",
+        productName: "Фигурки животных «Собачки» 258, 5-7 см., статичные / 12 шт.",
+        supplierName: "simaland",
+        marketplaceName: "Wildberries РЕНТА",
+        sellerName: "DENCO",
+        assembled: false
+    });
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.dataContainer}>
+                <View style={styles.imageWrapper}>
+                    <Image source={{uri: order.imageUrl}} style={styles.image}/>
+                </View>
+                <View style={styles.contentContainer}>
+                    <View style={styles.contentWrapper}>
+                        <DTitle style={styles.contentTitle}>{order.orderNumber}</DTitle>
+                        <Hyperlink url={`https://denco.store/manager/?a=resource/update&id=${order.article}`}>
+                            <DText style={styles.articleText}>Артикул: {order.article}</DText>
+                        </Hyperlink>
+                        <DText>Товар: {order.productName}</DText>
+                        <DText>Поставщик: {order.supplierName}</DText>
+                        <DText>Селлер: {order.sellerName}</DText>
+                        <DText>Маркетплейс: {order.marketplaceName}</DText>
+                    </View>
+                </View>
+            </View>
+            <View style={styles.buttonsContainer}>
+                <View style={styles.buttonsWrapper}>
+                    {!order.assembled &&
+                        <BasicButton label={"Отметить как собранный"} onPress={() => {
+                            setOrder({...order, assembled: true})
+                            console.log(order);
+                        }}/>
+                    }
+
+                    {order.assembled &&
+                        <BasicButton label={"Печать этикетки"}/>
+                    }
+                    {/*<BasicButton label={"Следующий товар"}/>*/}
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 30,
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        display: "flex",
+        flex: 1,
+    },
+    dataContainer: {
+        backgroundColor: "black",
+        display: "flex",
+        flexDirection: "row",
+    },
+    buttonsContainer: {
+        backgroundColor: "blue",
+        flex: 1,
+        display: "flex",
+        justifyContent: "center",
+        paddingHorizontal: responsiveWidth(10)
+    },
+    buttonsWrapper: {
+        backgroundColor: "red",
+        rowGap: responsiveHeight(3)
+    },
+    imageWrapper: {
+        width: responsiveWidth(40),
+        // height: responsiveHeight(40),
+        backgroundColor: "red",
+        padding: RFPercentage(1)
+    },
+    image: {
+        flex: 1,
+        borderRadius: RFPercentage(3)
+    },
+    contentContainer: {
+        padding: RFPercentage(1),
+        backgroundColor: "pink",
+        flex: 1
+
+    },
+    contentWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0,
+    },
+    contentTitle: {
+        alignSelf: "center"
+    },
+    articleText: {
+        color: 'blue',
+        textDecorationLine: 'underline'
+    }
+})
+export default OrderScreen;

src/screens/OrdersScreen/OrdersScreen.tsx

@@ -0,0 +1,48 @@
+import {ScrollView, StyleSheet, View} from "react-native";
+import SearchBar from "../../components/SearchBar/SearchBar";
+import OrderCard from "../../components/OrderCard/OrderCard";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import {responsiveHeight} from "react-native-responsive-dimensions";
+
+function OrdersScreen() {
+    return (
+        <View style={styles.container}>
+            <SearchBar onSearch={() => {
+            }}/>
+            <View style={styles.content}>
+                <ScrollView keyboardShouldPersistTaps={"never"} showsHorizontalScrollIndicator={false}
+                            showsVerticalScrollIndicator={false}
+                            contentContainerStyle={styles.scrollContainer}>
+
+                    <OrderCard />
+                    <OrderCard/>
+                    <OrderCard/>
+                    <OrderCard/>
+                    <OrderCard/>
+                    <OrderCard/>
+                    <OrderCard/>
+                </ScrollView>
+
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: RFPercentage(3),
+        paddingTop: RFPercentage(3)
+    },
+    scrollContainer: {
+        rowGap: responsiveHeight(2)
+
+    }
+});
+
+export default OrdersScreen;

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -1,6 +1,5 @@
 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() {

src/types/order.ts

@@ -0,0 +1,4 @@
+export type Order = {
+    id: number;
+    imageUrl: string;
+}