136 lines
4.4 KiB
JavaScript
136 lines
4.4 KiB
JavaScript
import {StyleSheet, View} from 'react-native';
|
|
import {NavigationContainer, useNavigation} from "@react-navigation/native";
|
|
import 'react-native-gesture-handler';
|
|
import {createStackNavigator} from "@react-navigation/stack";
|
|
import Home from "./screens/home";
|
|
import Login from "./screens/login";
|
|
import Event from "./screens/event";
|
|
import Notification from "./screens/notfication";
|
|
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
|
|
|
|
import Database from './db'
|
|
|
|
import TaskIconActive from "./assets/taskIconActive.svg";
|
|
import TaskIcon from "./assets/taskIconInactive.svg"
|
|
import NotificationIconActive from "./assets/notificationActive.svg";
|
|
import NotificationIconInactive from './assets/notificationInactive.svg'
|
|
|
|
import InputScreen from "./screens/InputScreen";
|
|
import TaskStore, {getTasks} from "./store/taskStore";
|
|
import {useSnapshot} from "valtio";
|
|
import {useEffect} from "react";
|
|
import {getSubtasks} from "./store/subtaskStore";
|
|
import NotificationStore, {getNotifications} from "./store/notificationStore";
|
|
import {getEvents} from "./store/eventStore";
|
|
|
|
|
|
const generateTabBarIcon = ({focused, style}) => {
|
|
const styles = {
|
|
taskIcon: {
|
|
focused: <TaskIconActive width={25} height={25}/>,
|
|
default: <TaskIcon width={25} height={25}/>
|
|
},
|
|
|
|
notificationIcon: {
|
|
focused: <NotificationIconActive width={25} height={25}/>,
|
|
default: <NotificationIconInactive width={25} height={25}/>
|
|
}
|
|
}
|
|
|
|
return !!focused ? styles[style].focused : styles[style].default
|
|
|
|
}
|
|
|
|
const Stack = createStackNavigator();
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
|
|
const HomeStack = () => {
|
|
|
|
return (<Stack.Navigator initialRouteName={"Home"} screenOptions={{headerShown: false}}>
|
|
<Stack.Screen name="Home" component={Home}/>
|
|
<Stack.Screen name="Event" component={Event}/>
|
|
<Stack.Screen name="InputEvent" component={() => <InputScreen title={'Добавить событие'}/>}/>
|
|
</Stack.Navigator>
|
|
|
|
)
|
|
}
|
|
|
|
|
|
const MainNavigator = () => {
|
|
const {newTaskBadge} = useSnapshot(TaskStore)
|
|
const {newNotificationBadge} = useSnapshot(NotificationStore)
|
|
return (
|
|
<Tab.Navigator initialRouteName={"HomeStack"} screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: '#E5352D',
|
|
tabBarInactiveTintColor: "rgba(100, 101, 103, 0.5)",
|
|
tabBarLabelStyle: {fontSize: 10, fontWeight: "bold"}
|
|
}}>
|
|
<Tab.Screen name="HomeStack" component={HomeStack} options={{
|
|
tabBarLabel: "Задания",
|
|
tabBarIcon: ({focused}) => generateTabBarIcon({focused, style: "taskIcon"}),
|
|
tabBarBadge: newTaskBadge === 0 ? undefined : newTaskBadge,
|
|
}}/>
|
|
<Tab.Screen name="Notification"
|
|
component={Notification}
|
|
options={
|
|
{
|
|
tabBarLabel: "Уведомления",
|
|
tabBarIcon: ({focused}) => generateTabBarIcon({
|
|
focused,
|
|
style: "notificationIcon"
|
|
}),
|
|
tabBarBadge: newNotificationBadge === 0 ? undefined : newNotificationBadge
|
|
}
|
|
}
|
|
/>
|
|
|
|
|
|
</Tab.Navigator>)
|
|
}
|
|
|
|
|
|
const LoginStack = () => {
|
|
return (
|
|
<Stack.Navigator initialRouteName={"Login"} screenOptions={{headerShown: false}}>
|
|
<Stack.Screen name={"login"} component={Login}></Stack.Screen>
|
|
<Stack.Screen name={"MainNavigator"} component={MainNavigator} />
|
|
</Stack.Navigator>)
|
|
}
|
|
|
|
export default function App() {
|
|
useEffect(() => {
|
|
|
|
// All preloaded data
|
|
|
|
// todo this functions should be called
|
|
// background process
|
|
|
|
getTasks(); // todo check to be sync
|
|
getSubtasks();
|
|
getNotifications();
|
|
getEvents()
|
|
|
|
setInterval(getTasks, 10000)
|
|
setInterval(getSubtasks, 10000)
|
|
setInterval(getNotifications, 10000)
|
|
setInterval(getEvents, 10000)
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<NavigationContainer>
|
|
<LoginStack/>
|
|
</NavigationContainer>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
},
|
|
});
|