392 lines
17 KiB
JavaScript
392 lines
17 KiB
JavaScript
import { StatusBar } from 'expo-status-bar';
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { Provider as PaperProvider, DefaultTheme, Appbar, Button, Text } from 'react-native-paper';
|
|
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
|
import Login from "./Views/Login.js"
|
|
import Feed from "./Views/Feed.js"
|
|
import Profile from "./Views/Profile.js"
|
|
import Tags from "./Views/Tags.js"
|
|
import Search from './Views/Search.js';
|
|
import Groups from './Views/Groups.js';
|
|
import Courses from './Views/Courses.js';
|
|
import NotificationsView from './Views/NotificationsView.js';
|
|
import SinglePost from './Views/SinglePost.js'
|
|
import * as Device from 'expo-device';
|
|
import * as Notifications from 'expo-notifications';
|
|
import API from './API.js';
|
|
import i18n from "./i18nMessages.js";
|
|
import NewPostView from './Views/NewPost.js';
|
|
import { TouchableOpacity, View, Image, KeyboardAvoidingView } from 'react-native';
|
|
import MenuView from './Views/Menu.js';
|
|
import ProfileSettings from './Views/ProfileSettings.js';
|
|
import InviteView from './Views/Invite.js';
|
|
import MediaView from './components/MediaView.js';
|
|
import { useSnapshot } from 'valtio';
|
|
import GlobalState from './contexts/GlobalState.js';
|
|
import NewGroup from './Views/NewGroup.js';
|
|
import Slideshow from './Views/Slideshow.js';
|
|
import SongPlayer from './Views/SongPlayer.js';
|
|
import GlobalChat from './Views/GlobalChat.js';
|
|
import { Platform } from 'react-native';
|
|
import { PostHogProvider } from 'posthog-react-native'
|
|
import * as Updates from 'expo-updates';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
const Stack = createNativeStackNavigator();
|
|
const theme = {
|
|
...DefaultTheme,
|
|
roundness: 2,
|
|
colors: {
|
|
...DefaultTheme.colors,
|
|
primary: '#000000',
|
|
accent: '#0d6efd',
|
|
background: "#edf2f7",
|
|
},
|
|
};
|
|
|
|
Notifications.setNotificationHandler({
|
|
handleNotification: async () => {
|
|
//console.log("notif background");
|
|
return {
|
|
shouldShowAlert: true,
|
|
shouldPlaySound: true,
|
|
shouldSetBadge: true,
|
|
};
|
|
},
|
|
});
|
|
|
|
async function registerForPushNotificationsAsync() {
|
|
|
|
if (Platform.OS === 'android') {
|
|
Notifications.setNotificationChannelAsync('default', {
|
|
name: 'default',
|
|
importance: Notifications.AndroidImportance.MAX,
|
|
vibrationPattern: [0, 250, 250, 250],
|
|
lightColor: '#FF231F7C',
|
|
});
|
|
}
|
|
|
|
let token;
|
|
if (Device.isDevice) {
|
|
const { status: existingStatus } = await Notifications.getPermissionsAsync();
|
|
let finalStatus = existingStatus;
|
|
if (existingStatus !== 'granted') {
|
|
const { status } = await Notifications.requestPermissionsAsync();
|
|
finalStatus = status;
|
|
}
|
|
if (finalStatus !== 'granted') {
|
|
//alert('Failed to get push token for push notification!');
|
|
return;
|
|
}
|
|
token = (await Notifications.getExpoPushTokenAsync({ projectId: "c2bb4d4e-4d4d-4f34-a873-7cad78c6023c", })).data;
|
|
} else {
|
|
//alert('Must use physical device for Push Notifications');
|
|
}
|
|
return token;
|
|
}
|
|
|
|
|
|
const MainNavigation = ({ route }) => {
|
|
const gState = useSnapshot(GlobalState);
|
|
const viewer = gState.me;
|
|
const [expoPushToken, setExpoPushToken] = useState('');
|
|
const [notification, setNotification] = useState(false);
|
|
const notificationListener = useRef();
|
|
const responseListener = useRef();
|
|
const mainNavigation = useNavigation();
|
|
useEffect(() => {
|
|
registerForPushNotificationsAsync().then(async (token) => {
|
|
let isLoggedIn = await API.isLoggedIn();
|
|
if (!isLoggedIn) return false;
|
|
if (!token) return false;
|
|
API.registerToken(token);
|
|
return setExpoPushToken(token);
|
|
});
|
|
|
|
// This listener is fired whenever a notification is received while the app is foregrounded
|
|
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
|
|
//console.log("got notif", notification);
|
|
setNotification(notification);
|
|
});
|
|
|
|
// This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
|
|
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
|
|
const data = response.notification.request.content.data;
|
|
if (data && Object.keys(data).length > 0) {
|
|
try {
|
|
if (data.profile_id) {
|
|
mainNavigation.navigate("Profile", { profileid: data.profile_id });
|
|
}
|
|
if (data.post_id) {
|
|
mainNavigation.navigate("SinglePost", { postid: data.post_id });
|
|
}
|
|
} catch (error) {
|
|
alert("Error: " + error);
|
|
}
|
|
} else {
|
|
//alert("Notification clicked but no data found.");
|
|
}
|
|
});
|
|
|
|
const interval = setInterval(async () => {
|
|
if (await API.isLoggedIn()) {
|
|
let me = await API.getMe();
|
|
//console.log(JSON.stringify(viewer), JSON.stringify(me))
|
|
if (JSON.stringify(viewer) !== JSON.stringify(me)) {
|
|
console.log("Updating me")
|
|
GlobalState.me = me;
|
|
}
|
|
}
|
|
}, 30000);
|
|
|
|
return () => {
|
|
Notifications.removeNotificationSubscription(notificationListener.current);
|
|
Notifications.removeNotificationSubscription(responseListener.current);
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Tab.Navigator initialRouteName="Home"
|
|
activeColor="#0d6efd"
|
|
inactiveColor="#FFFFFF"
|
|
>
|
|
<Tab.Screen
|
|
name="Feed"
|
|
component={Feed}
|
|
options={{
|
|
tabBarLabel: i18n.t("message.feed"),
|
|
tabBarIcon: ({ color }) => (
|
|
<MaterialIcons name="home" color={color} size={26} />
|
|
),
|
|
header: () => { <></> },
|
|
}}
|
|
listeners={({ navigation, route }) => ({
|
|
tabPress: e => {
|
|
navigation.navigate('Feed', { reRender: Math.random() });
|
|
},
|
|
})}
|
|
|
|
/>
|
|
<Tab.Screen
|
|
name="Groups"
|
|
component={Groups}
|
|
options={{
|
|
tabBarLabel: i18n.t('message.groups'),
|
|
tabBarIcon: ({ color }) => (
|
|
<MaterialIcons name="groups" color={color} size={26} />
|
|
),
|
|
header: () => { <></> },
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="NewPost"
|
|
component={NewPostView}
|
|
options={{
|
|
tabBarLabel: '',//i18n.t('message.statusUpdate'),
|
|
tabBarIcon: ({ color, route }) => (
|
|
<MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} />
|
|
),
|
|
tabBarButton: (props) => (
|
|
<TouchableOpacity
|
|
onPress={props.onPress}
|
|
style={{
|
|
top: -17,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
|
|
}}
|
|
>
|
|
<View style={{
|
|
height: 56,
|
|
width: 56,
|
|
borderRadius: 28,
|
|
backgroundColor: "#c44d56",
|
|
paddingTop: 13
|
|
}}>{props.children}</View>
|
|
</TouchableOpacity>
|
|
),
|
|
header: () => { <></> },
|
|
}}
|
|
listeners={({ navigation, route }) => ({
|
|
tabPress: e => {
|
|
//console.log("listener", route)
|
|
if (route.name !== "NewPost") {
|
|
// Target current profile if one in route
|
|
navigation.navigate('NewPost', { toProfile: route.params?.profileid });
|
|
} else {
|
|
//Send function on child
|
|
navigation.navigate('NewPost', { toProfile: route.params?.profileid, sendNow: true });
|
|
}
|
|
},
|
|
})}
|
|
/>
|
|
<Tab.Screen
|
|
name="Courses"
|
|
component={Courses}
|
|
options={{
|
|
tabBarLabel: i18n.t('message.courses'),
|
|
tabBarIcon: ({ color }) => (
|
|
<MaterialIcons name="subscriptions" color={color} size={26} />
|
|
),
|
|
header: () => { <></> },
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="MyProfile"
|
|
component={Profile}
|
|
options={{
|
|
tabBarLabel: viewer.profile?.firstName,
|
|
tabBarIcon: ({ color }) => (
|
|
<MaterialIcons name="person" color={color} size={26} />
|
|
),
|
|
header: () => { <></> },
|
|
}}
|
|
listeners={({ navigation, route }) => ({
|
|
tabPress: e => {
|
|
navigation.navigate('MyProfile', { profileid: viewer._id });
|
|
},
|
|
})}
|
|
/>
|
|
{/*
|
|
<Tab.Screen
|
|
name="Logout"
|
|
component={Login}
|
|
options={{
|
|
tabBarLabel: i18n.t('message.logout'),
|
|
tabBarIcon: ({ color }) => (
|
|
<MaterialIcons name="logout" color={color} size={26} />
|
|
),
|
|
header: () => { <></> },
|
|
}}
|
|
/>*/}
|
|
|
|
</Tab.Navigator>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
const appState = useSnapshot(GlobalState);
|
|
const viewer = appState.me || {};
|
|
const hasUnviewedNotifications = Array.isArray(viewer?.notifications)
|
|
? viewer.notifications.some((n) => n && n.viewed !== true)
|
|
: false;
|
|
|
|
return (
|
|
<PaperProvider settings={{
|
|
icon: props => <MaterialIcons {...props} />,
|
|
}} theme={theme}>
|
|
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
|
|
<NavigationContainer>
|
|
<PostHogProvider apiKey="phc_2zh7SoBDi83vaa7Rz4YWTXWCjV0bOLfiqRyUo2mkf0b" autocapture>
|
|
<StatusBar style="dark" />
|
|
<Stack.Navigator screenOptions={{
|
|
header: (props) => {
|
|
return (
|
|
<Appbar.Header style={{ backgroundColor: '#fff' }}>
|
|
{props.navigation.canGoBack() ? <Appbar.BackAction onPress={() => {
|
|
props.navigation.goBack();
|
|
}} /> : <Appbar.Action icon="menu" style={{ padding: 0, margin: 0 }} onPress={() => { props.navigation.navigate('Menu'); }} />}
|
|
<Appbar.Content title="EMI Fellowship" titleStyle={{}} />
|
|
<Appbar.Action icon="chat" onPress={() => {
|
|
props.navigation.navigate("GlobalChat");
|
|
}} onLongPress={() => {
|
|
props.navigation.navigate("SongPlayer");
|
|
}} />
|
|
<Appbar.Action icon="search" onPress={() => { props.navigation.navigate("Search") }} />
|
|
<Appbar.Action
|
|
icon={({ size, color }) => (
|
|
<View style={{ width: size, height: size, justifyContent: "center", alignItems: "center" }}>
|
|
<MaterialIcons name="notifications" size={size} color={color} />
|
|
{hasUnviewedNotifications ? (
|
|
<View style={{
|
|
position: "absolute",
|
|
top: 2,
|
|
right: 0,
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: "#d93025",
|
|
}} />
|
|
) : <></>}
|
|
</View>
|
|
)}
|
|
onPress={() => { props.navigation.navigate("Notifications") }}
|
|
/>
|
|
</Appbar.Header>
|
|
)
|
|
},
|
|
}}>
|
|
<Stack.Screen
|
|
name="MainNavigation"
|
|
component={MainNavigation}
|
|
/>
|
|
<Stack.Screen
|
|
name="Profile"
|
|
component={Profile}
|
|
/>
|
|
<Stack.Screen
|
|
name="Tags"
|
|
component={Tags}
|
|
/>
|
|
<Stack.Screen
|
|
name="NewPost"
|
|
component={NewPostView}
|
|
/>
|
|
<Stack.Screen
|
|
name="NewGroup"
|
|
component={NewGroup}
|
|
/>
|
|
<Stack.Screen
|
|
name="Search"
|
|
component={Search}
|
|
/>
|
|
<Stack.Screen
|
|
name="ProfileSettings"
|
|
component={ProfileSettings}
|
|
/>
|
|
<Stack.Screen
|
|
name="Invite"
|
|
component={InviteView}
|
|
/>
|
|
<Stack.Screen
|
|
name="Menu"
|
|
component={MenuView}
|
|
/>
|
|
<Stack.Screen
|
|
name="Notifications"
|
|
component={NotificationsView}
|
|
/>
|
|
<Stack.Screen
|
|
name="Slideshow"
|
|
component={Slideshow}
|
|
//options={{ headerShown: false }}
|
|
/>
|
|
<Stack.Screen
|
|
name="SongPlayer"
|
|
component={SongPlayer}
|
|
/>
|
|
<Stack.Screen
|
|
name="GlobalChat"
|
|
component={GlobalChat}
|
|
/>
|
|
<Stack.Screen name="SinglePost" component={SinglePost} />
|
|
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
|
|
<Tab.Screen name="Logout" component={Login} />
|
|
</Stack.Navigator>
|
|
</PostHogProvider>
|
|
</NavigationContainer>
|
|
<MediaView></MediaView>
|
|
</KeyboardAvoidingView>
|
|
</PaperProvider>
|
|
);
|
|
}
|