361 lines
11 KiB
JavaScript
Executable File
361 lines
11 KiB
JavaScript
Executable File
/* eslint-disable react/prop-types */
|
|
import { createDrawerNavigator } from "@react-navigation/drawer";
|
|
import { NavigationContainer, useTheme } from "@react-navigation/native";
|
|
import { createStackNavigator } from "@react-navigation/stack";
|
|
import * as Notifications from "expo-notifications";
|
|
import React, { useEffect } from "react";
|
|
import { Text, useColorScheme, View } from "react-native";
|
|
import Animated from "react-native-reanimated";
|
|
import {
|
|
initialWindowMetrics,
|
|
SafeAreaProvider,
|
|
} from "react-native-safe-area-context";
|
|
import { TextDefault, LeftButton, Sidebar } from "../components";
|
|
import Menu from "../screens/Menu/Menu";
|
|
import MenuItems from "../screens/MenuItems/MenuItems";
|
|
import Addresses from "../screens/Addresses/Addresses";
|
|
import NewAddress from "../screens/NewAddress/NewAddress";
|
|
import EditAddress from "../screens/EditAddress/EditAddress";
|
|
import Cart from "../screens/Cart/Cart";
|
|
import Profile from "../screens/Profile/Profile";
|
|
import FullMap from "../screens/FullMap/FullMap";
|
|
import CartAddress from "../screens/CartAddress/CartAddress";
|
|
import SelectVoucher from "../screens/Coupon/Coupon";
|
|
import Help from "../screens/Help/Help";
|
|
import HelpBrowser from "../screens/HelpBrowser/HelpBrowser";
|
|
import Chat from "../screens/Chat/Chat";
|
|
import Settings from "../screens/Settings/Settings";
|
|
import Paypal from "../screens/Paypal/Paypal";
|
|
import ItemDetail from "../screens/ItemDetail/ItemDetail";
|
|
import MyOrders from "../screens/MyOrders/MyOrders";
|
|
import OrderDetail from "../screens/OrderDetail/OrderDetail";
|
|
import StripeCheckout from "../screens/Stripe/StripeCheckout";
|
|
import RateAndReview from "../screens/RateAndReview/RateAndReview";
|
|
import CreateAccount from "../screens/CreateAccount/CreateAccount";
|
|
import Login from "../screens/Login/Login";
|
|
import Register from "../screens/Register/Register";
|
|
import ForgotPassword from "../screens/ForgotPassword/ForgotPassword";
|
|
|
|
// import {
|
|
// Addresses,
|
|
// Cart,
|
|
// CartAddress,
|
|
// Chat,
|
|
// CreateAccount,
|
|
// EditAddress,
|
|
// ForgotPassword,
|
|
// FullMap,
|
|
// Help,
|
|
// HelpBrowser,
|
|
// ItemDetail,
|
|
// Login,
|
|
// MenuItems,
|
|
// MyOrders,
|
|
// NewAddress,
|
|
// OrderDetail,
|
|
// Paypal,
|
|
// Profile,
|
|
// RateAndReview,
|
|
// Register,
|
|
// SelectVoucher,
|
|
// Settings,
|
|
// StripeCheckout,
|
|
// Menu,
|
|
// } from "../screens";
|
|
|
|
import { THEME } from "../Theme";
|
|
import { ICONS_NAME, NAVIGATION_SCREEN } from "../utils/constant";
|
|
import navigationService from "./navigationService";
|
|
import screenOptions from "./screenOptions";
|
|
import styles from "./styles";
|
|
|
|
const NavigationStack = createStackNavigator();
|
|
const MainStack = createStackNavigator();
|
|
const SideDrawer = createDrawerNavigator();
|
|
|
|
function Drawer() {
|
|
const { colors } = useTheme();
|
|
let animatedStyle = {};
|
|
let opacity;
|
|
let OuterWindowSlide, InnerWindowSlide;
|
|
return (
|
|
<SideDrawer.Navigator
|
|
drawerType="slide"
|
|
overlayColor="transparent"
|
|
screenOptions={{
|
|
drawerStyle: {
|
|
flex: 1,
|
|
backgroundColor: colors.drawerBackground,
|
|
width: "60%",
|
|
justifyContent: "space-between",
|
|
borderRightWidth: 0,
|
|
shadowOpacity: 0,
|
|
elevation: 0,
|
|
},
|
|
sceneContainerStyle: { backgroundColor: colors.drawerBackground },
|
|
}}
|
|
// drawerStyle={{
|
|
// flex: 1,
|
|
// backgroundColor: colors.drawerBackground,
|
|
// width: "60%",
|
|
// justifyContent: "space-between",
|
|
// borderRightWidth: 0,
|
|
// shadowOpacity: 0,
|
|
// elevation: 0,
|
|
// }}
|
|
// sceneContainerStyle={{ backgroundColor: colors.drawerBackground }}
|
|
|
|
drawerContent={(props) => {
|
|
const scale = Animated.interpolateNode(props.progress, {
|
|
inputRange: [0, 1],
|
|
outputRange: [1, 0.7],
|
|
});
|
|
const Animatedopacity = Animated.interpolateNode(props.progress, {
|
|
inputRange: [0, 0.6, 1],
|
|
outputRange: [0, 0, 1],
|
|
});
|
|
const AnimatedOuterSlide = Animated.interpolateNode(props.progress, {
|
|
inputRange: [0, 1],
|
|
outputRange: [0, -35],
|
|
});
|
|
const AnimatedInnerSlide = Animated.interpolateNode(props.progress, {
|
|
inputRange: [0, 1],
|
|
outputRange: [0, -15],
|
|
});
|
|
const borderRadius = Animated.interpolateNode(props.progress, {
|
|
inputRange: [0, 1],
|
|
outputRange: [0, 20],
|
|
});
|
|
animatedStyle = { borderRadius, transform: [{ scale }] };
|
|
opacity = Animatedopacity;
|
|
OuterWindowSlide = AnimatedOuterSlide;
|
|
InnerWindowSlide = AnimatedInnerSlide;
|
|
|
|
return <Sidebar {...props} />;
|
|
}}
|
|
>
|
|
<SideDrawer.Screen name="noDrawer" options={{ headerShown: false }}>
|
|
{(props) => (
|
|
<NoDrawer
|
|
{...props}
|
|
style={animatedStyle}
|
|
opacity={opacity}
|
|
OuterWindowSlide={OuterWindowSlide}
|
|
InnerWindowSlide={InnerWindowSlide}
|
|
/>
|
|
)}
|
|
</SideDrawer.Screen>
|
|
</SideDrawer.Navigator>
|
|
);
|
|
}
|
|
|
|
function NoDrawer({ style, opacity = 1, OuterWindowSlide, InnerWindowSlide }) {
|
|
const { colors } = useTheme();
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Animated.View
|
|
style={[styles.outerView, style, { marginLeft: OuterWindowSlide }]}
|
|
/>
|
|
<Animated.View
|
|
style={[styles.innerView, style, { marginLeft: InnerWindowSlide }]}
|
|
/>
|
|
<Animated.View style={[styles.animatedView, style]}>
|
|
<NavigationStack.Navigator
|
|
//mode="modal"
|
|
presentation="modal"
|
|
screenOptions={screenOptions({
|
|
textColor: colors.headerTextColor,
|
|
})}
|
|
>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Menu}
|
|
component={Menu}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.MenuItems}
|
|
component={MenuItems}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Cart}
|
|
component={Cart}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Profile}
|
|
component={Profile}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Addresses}
|
|
component={Addresses}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.NewAddress}
|
|
component={NewAddress}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.EditAddress}
|
|
component={EditAddress}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.FullMap}
|
|
component={FullMap}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.CartAddress}
|
|
component={CartAddress}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Coupon}
|
|
component={SelectVoucher}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Help}
|
|
component={Help}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Chat}
|
|
component={Chat}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.HelpBrowser}
|
|
component={HelpBrowser}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Settings}
|
|
component={Settings}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.Paypal}
|
|
component={Paypal}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.ItemDetail}
|
|
component={ItemDetail}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.MyOrders}
|
|
component={MyOrders}
|
|
options={{
|
|
headerLeft: () => <LeftButton icon={ICONS_NAME.Menu} />,
|
|
}}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.OrderDetail}
|
|
component={OrderDetail}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.RateAndReview}
|
|
component={RateAndReview}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.StripeCheckout}
|
|
component={StripeCheckout}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.CreateAccount}
|
|
options={{ headerShown: false }}
|
|
component={CreateAccount}
|
|
/>
|
|
<NavigationStack.Screen
|
|
options={{ headerShown: false }}
|
|
name={NAVIGATION_SCREEN.Login}
|
|
component={Login}
|
|
/>
|
|
<NavigationStack.Screen
|
|
options={{ headerShown: false }}
|
|
name={NAVIGATION_SCREEN.Register}
|
|
component={Register}
|
|
/>
|
|
<NavigationStack.Screen
|
|
name={NAVIGATION_SCREEN.ForgotPassword}
|
|
options={{ headerShown: false }}
|
|
component={ForgotPassword}
|
|
/>
|
|
</NavigationStack.Navigator>
|
|
</Animated.View>
|
|
<Animated.View style={[styles.closeView, { opacity: opacity }]}>
|
|
<TextDefault H4 medium>
|
|
{"Close X"}
|
|
</TextDefault>
|
|
</Animated.View>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
function AppContainer() {
|
|
console.log("AppContainer Working");
|
|
const colorScheme = useColorScheme();
|
|
function _handleNotification(notification) {
|
|
try {
|
|
if (notification.origin === "selected") {
|
|
if (notification.data.order) {
|
|
navigationService.navigate(NAVIGATION_SCREEN.OrderDetail, {
|
|
_id: notification.data._id,
|
|
});
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
Notifications.setNotificationHandler({
|
|
handleNotification: async () => ({
|
|
shouldShowAlert: true,
|
|
shouldPlaySound: false,
|
|
shouldSetBadge: false,
|
|
}),
|
|
});
|
|
const subscription =
|
|
Notifications.addNotificationResponseReceivedListener(
|
|
_handleNotification
|
|
);
|
|
return () => subscription.remove();
|
|
}, []);
|
|
return (
|
|
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
|
|
<NavigationContainer
|
|
theme={colorScheme === "dark" ? THEME.Dark : THEME.Light}
|
|
ref={(ref) => {
|
|
navigationService.setGlobalRef(ref);
|
|
Notifications.addNotificationReceivedListener(_handleNotification);
|
|
}}
|
|
>
|
|
<MainStack.Navigator
|
|
screenOptions={{
|
|
headerShown: false,
|
|
}}
|
|
//headerMode="none"
|
|
|
|
initialRouteName={NAVIGATION_SCREEN.Drawer}
|
|
>
|
|
<MainStack.Screen
|
|
name={NAVIGATION_SCREEN.Drawer}
|
|
component={Drawer}
|
|
/>
|
|
</MainStack.Navigator>
|
|
</NavigationContainer>
|
|
</SafeAreaProvider>
|
|
);
|
|
}
|
|
|
|
export default AppContainer;
|