adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deeplinks for profiles and posts

Browse Source
This commit is contained in:
Adolfo Reyna
2023-03-10 23:08:03 -06:00
parent 7be9b89c5a
commit 424fc016d2
2 changed files with 192 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
App.js
View File

@@ -26,27 +26,6 @@ import MediaView from './components/MediaView.js';
import { useSnapshot } from 'valtio'; import { useSnapshot } from 'valtio';
import GlobalState from './contexts/GlobalState.js'; import GlobalState from './contexts/GlobalState.js';
import NewGroup from './Views/NewGroup.js'; import NewGroup from './Views/NewGroup.js';
import * as Linking2 from 'expo-linking';
import { Linking } from 'expo';
const handleDeepLink = (url) => {
// Handle the deep linking URL here
alert('Deep link:', url);
}
const checkDeepLinking = async () => {
// Check if the app was opened by a deep linking URL
const initialUrl = await Linking.getInitialURL();
if (initialUrl) {
handleDeepLink(initialUrl);
}
// Add an event listener to handle deep linking URLs
Linking.addEventListener('url', (event) => {
handleDeepLink(event.url);
});
}
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
@@ -104,20 +83,13 @@ async function registerForPushNotificationsAsync() {
} }
const MainNavigation = ({ route }) => {
const MainNavigation = ({route}) => {
const gState = useSnapshot(GlobalState); const gState = useSnapshot(GlobalState);
const viewer = gState.me; const viewer = gState.me;
const [expoPushToken, setExpoPushToken] = useState(''); const [expoPushToken, setExpoPushToken] = useState('');
const [notification, setNotification] = useState(false); const [notification, setNotification] = useState(false);
const notificationListener = useRef(); const notificationListener = useRef();
const responseListener = useRef(); const responseListener = useRef();
const url = Linking2.useURL();
useEffect(() => {
// Do something with url
alert(url);
}, [url]);
useEffect(() => { useEffect(() => {
registerForPushNotificationsAsync().then(async (token) => { registerForPushNotificationsAsync().then(async (token) => {
let isLoggedIn = await API.isLoggedIn(); let isLoggedIn = await API.isLoggedIn();
@@ -125,7 +97,6 @@ const MainNavigation = ({route}) => {
API.registerToken(token); API.registerToken(token);
return setExpoPushToken(token); return setExpoPushToken(token);
}); });
checkDeepLinking();
// This listener is fired whenever a notification is received while the app is foregrounded // This listener is fired whenever a notification is received while the app is foregrounded
notificationListener.current = Notifications.addNotificationReceivedListener(notification => { notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
@@ -140,10 +111,10 @@ const MainNavigation = ({route}) => {
}); });
const interval = setInterval(async () => { const interval = setInterval(async () => {
if(await API.isLoggedIn()){ if (await API.isLoggedIn()) {
let me = await API.getMe(); let me = await API.getMe();
//console.log(JSON.stringify(viewer), JSON.stringify(me)) //console.log(JSON.stringify(viewer), JSON.stringify(me))
if(JSON.stringify(viewer) !== JSON.stringify(me)){ if (JSON.stringify(viewer) !== JSON.stringify(me)) {
console.log("Updating me") console.log("Updating me")
GlobalState.me = me; GlobalState.me = me;
} }
@@ -160,108 +131,108 @@ const MainNavigation = ({route}) => {
return ( return (
<> <>
<Tab.Navigator initialRouteName="Home" <Tab.Navigator initialRouteName="Home"
activeColor="#0d6efd" activeColor="#0d6efd"
inactiveColor="#FFFFFF" inactiveColor="#FFFFFF"
> >
<Tab.Screen <Tab.Screen
name="Feed" name="Feed"
component={Feed} component={Feed}
options={{ options={{
tabBarLabel: i18n.t("message.feed"), tabBarLabel: i18n.t("message.feed"),
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<MaterialIcons name="home" color={color} size={26} /> <MaterialIcons name="home" color={color} size={26} />
), ),
header: () => { <></> }, header: () => { <></> },
}} }}
listeners={({ navigation, route }) => ({ listeners={({ navigation, route }) => ({
tabPress: e => { tabPress: e => {
navigation.navigate('Feed', {reRender: Math.random()}); navigation.navigate('Feed', { reRender: Math.random() });
}, },
})} })}
/> />
<Tab.Screen <Tab.Screen
name="Groups" name="Groups"
component={Groups} component={Groups}
options={{ options={{
tabBarLabel: i18n.t('message.groups'), tabBarLabel: i18n.t('message.groups'),
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<MaterialIcons name="groups" color={color} size={26} /> <MaterialIcons name="groups" color={color} size={26} />
), ),
header: () => { <></> }, header: () => { <></> },
}} }}
/> />
<Tab.Screen <Tab.Screen
name="NewPost" name="NewPost"
component={NewPostView} component={NewPostView}
options={{ options={{
tabBarLabel: '',//i18n.t('message.statusUpdate'), tabBarLabel: '',//i18n.t('message.statusUpdate'),
tabBarIcon: ({ color, route }) => ( tabBarIcon: ({ color, route }) => (
<MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} /> <MaterialIcons name={true !== "NewPost" ? "add" : "send"} color="#fff" size={26} />
), ),
tabBarButton: (props) => ( tabBarButton: (props) => (
<TouchableOpacity <TouchableOpacity
onPress={props.onPress} onPress={props.onPress}
style={{ style={{
top: -17, top: -17,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}} }}
> >
<View style={{ <View style={{
height: 56, height: 56,
width: 56, width: 56,
borderRadius: 28, borderRadius: 28,
backgroundColor: "#c44d56", backgroundColor: "#c44d56",
paddingTop: 13 paddingTop: 13
}}>{props.children}</View> }}>{props.children}</View>
</TouchableOpacity> </TouchableOpacity>
), ),
header: () => { <></> }, header: () => { <></> },
}} }}
listeners={({ navigation, route }) => ({ listeners={({ navigation, route }) => ({
tabPress: e => { tabPress: e => {
//console.log("listener", route) //console.log("listener", route)
if(route.name !== "NewPost"){ if (route.name !== "NewPost") {
// Target current profile if one in route // Target current profile if one in route
navigation.navigate('NewPost', {toProfile: route.params?.profileid}); navigation.navigate('NewPost', { toProfile: route.params?.profileid });
} else { } else {
//Send function on child //Send function on child
navigation.navigate('NewPost', {toProfile: route.params?.profileid, sendNow: true}); navigation.navigate('NewPost', { toProfile: route.params?.profileid, sendNow: true });
} }
}, },
})} })}
/> />
<Tab.Screen <Tab.Screen
name="Courses" name="Courses"
component={Courses} component={Courses}
options={{ options={{
tabBarLabel: i18n.t('message.courses'), tabBarLabel: i18n.t('message.courses'),
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<MaterialIcons name="subscriptions" color={color} size={26} /> <MaterialIcons name="subscriptions" color={color} size={26} />
), ),
header: () => { <></> }, header: () => { <></> },
}} }}
/> />
<Tab.Screen <Tab.Screen
name="MyProfile" name="MyProfile"
component={Profile} component={Profile}
options={{ options={{
tabBarLabel: viewer.profile?.firstName, tabBarLabel: viewer.profile?.firstName,
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<MaterialIcons name="person" color={color} size={26} /> <MaterialIcons name="person" color={color} size={26} />
), ),
header: () => { <></> }, header: () => { <></> },
}} }}
listeners={({ navigation, route }) => ({ listeners={({ navigation, route }) => ({
tabPress: e => { tabPress: e => {
navigation.navigate('MyProfile', {profileid: viewer._id}); navigation.navigate('MyProfile', { profileid: viewer._id });
}, },
})} })}
/> />
{/* {/*
<Tab.Screen <Tab.Screen
name="Logout" name="Logout"
component={Login} component={Login}
@@ -273,8 +244,8 @@ const MainNavigation = ({route}) => {
header: () => { <></> }, header: () => { <></> },
}} }}
/>*/} />*/}
</Tab.Navigator> </Tab.Navigator>
</> </>
) )
} }
@@ -284,66 +255,66 @@ export default function App() {
<PaperProvider settings={{ <PaperProvider settings={{
icon: props => <MaterialIcons {...props} />, icon: props => <MaterialIcons {...props} />,
}} theme={theme}> }} theme={theme}>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
<NavigationContainer> <NavigationContainer>
<StatusBar style="dark" /> <StatusBar style="dark" />
<Stack.Navigator screenOptions={{ <Stack.Navigator screenOptions={{
header: (props) => { header: (props) => {
return ( return (
<Appbar.Header style={{backgroundColor: '#fff'}}> <Appbar.Header style={{ backgroundColor: '#fff' }}>
{props.navigation.canGoBack() ? <Appbar.BackAction onPress={()=>{ {props.navigation.canGoBack() ? <Appbar.BackAction onPress={() => {
props.navigation.goBack(); props.navigation.goBack();
}} /> : <Appbar.Action icon="menu" style={{padding:0, margin:0}} onPress={()=>{props.navigation.navigate('Menu');}} />} }} /> : <Appbar.Action icon="menu" style={{ padding: 0, margin: 0 }} onPress={() => { props.navigation.navigate('Menu'); }} />}
<Appbar.Content title="EMI Fellowship" titleStyle={{}}/> <Appbar.Content title="EMI Fellowship" titleStyle={{}} />
<Appbar.Action icon="chat" onPress={()=>{alert("Chats are comming soon.")}} /> <Appbar.Action icon="chat" onPress={() => { alert("Chats are comming soon.") }} />
<Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} /> <Appbar.Action icon="search" onPress={() => { props.navigation.navigate("Search") }} />
<Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} /> <Appbar.Action icon="notifications" onPress={() => { props.navigation.navigate("Notifications") }} />
</Appbar.Header> </Appbar.Header>
) )
}, },
}}> }}>
<Stack.Screen <Stack.Screen
name="MainNavigation" name="MainNavigation"
component={MainNavigation} component={MainNavigation}
/> />
<Stack.Screen <Stack.Screen
name="Profile" name="Profile"
component={Profile} component={Profile}
/> />
<Stack.Screen <Stack.Screen
name="NewPost" name="NewPost"
component={NewPostView} component={NewPostView}
/> />
<Stack.Screen <Stack.Screen
name="NewGroup" name="NewGroup"
component={NewGroup} component={NewGroup}
/> />
<Stack.Screen <Stack.Screen
name="Search" name="Search"
component={Search} component={Search}
/> />
<Stack.Screen <Stack.Screen
name="ProfileSettings" name="ProfileSettings"
component={ProfileSettings} component={ProfileSettings}
/> />
<Stack.Screen <Stack.Screen
name="Invite" name="Invite"
component={InviteView} component={InviteView}
/> />
<Stack.Screen <Stack.Screen
name="Menu" name="Menu"
component={MenuView} component={MenuView}
/> />
<Stack.Screen <Stack.Screen
name="Notifications" name="Notifications"
component={NotificationsView} component={NotificationsView}
/> />
<Stack.Screen name="SinglePost" component={SinglePost} /> <Stack.Screen name="SinglePost" component={SinglePost} />
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} /> <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Tab.Screen name="Logout" component={Login} /> <Tab.Screen name="Logout" component={Login} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
<MediaView></MediaView> <MediaView></MediaView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</PaperProvider> </PaperProvider>
); );

27
Views/Feed.js
View File

@@ -3,6 +3,7 @@ import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from './../API.js'; import API from './../API.js';
import Post from './../components/Post.js'; import Post from './../components/Post.js';
import GlobalState from '../contexts/GlobalState.js'; import GlobalState from '../contexts/GlobalState.js';
import * as Linking from 'expo-linking';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -26,10 +27,34 @@ const getFeed = async () => {
} }
} }
let prevLink = '';
const handleURL = (url, navigation) => {
const { hostname, path, queryParams } = Linking.parse(url);
if(path.includes("feed/post/")){
const postid = path.substring(10);
return navigation.navigate('SinglePost', { postid });
}
if(path.includes("feed/")){
const profileid = path.substring(5);
return navigation.navigate('Profile', { profileid });
}
if (path === 'alert') {
alert(queryParams.str);
} else {
alert(path + " ::: " + queryParams);
}
}
let Feed = ({ navigation, route }) => { let Feed = ({ navigation, route }) => {
let [Posts, setPosts] = useState([]); let [Posts, setPosts] = useState([]);
const flatListRef = React.useRef() const flatListRef = React.useRef()
console.log("Render Feed"); console.log("Render Feed");
const url = Linking.useURL();
useEffect(() => {
if (prevLink === url || !url) return;
prevLink = url;
handleURL(url, navigation);
}, [url]);
useEffect(() => { useEffect(() => {
let subscribed = true; let subscribed = true;
const getData = async () => { const getData = async () => {
@@ -43,7 +68,7 @@ let Feed = ({ navigation, route }) => {
routes: [{ name: 'Login' }], routes: [{ name: 'Login' }],
}); });
if (route.params && route.params.profileid) { if (route.params && route.params.profileid) {
return navigation.navigate('Profile', { profileid: route.params.profileid }) return navigation.navigate('Profile', { profileid: route.params.profileid });
} }
} }
if(!route.params?.reRender){ if(!route.params?.reRender){