From 424fc016d27797ff365aafb7dee7118f1fc0141e Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.comt>
Date: Fri, 10 Mar 2023 23:08:03 -0600
Subject: [PATCH] deeplinks for profiles and posts

---
 App.js        | 361 +++++++++++++++++++++++---------------------------
 Views/Feed.js |  27 +++-
 2 files changed, 192 insertions(+), 196 deletions(-)

diff --git a/App.js b/App.js
index 7989aff..ce49989 100644
--- a/App.js
+++ b/App.js
@@ -26,27 +26,6 @@ import MediaView from './components/MediaView.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from './contexts/GlobalState.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();
@@ -104,20 +83,13 @@ async function registerForPushNotificationsAsync() {
 }
 
 
-
-const MainNavigation = ({route}) => {
+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 url = Linking2.useURL();
-    useEffect(() => {
-        // Do something with url
-        alert(url);
-    }, [url]);
-
     useEffect(() => {
         registerForPushNotificationsAsync().then(async (token) => {
             let isLoggedIn = await API.isLoggedIn();
@@ -125,7 +97,6 @@ const MainNavigation = ({route}) => {
             API.registerToken(token);
             return setExpoPushToken(token);
         });
-        checkDeepLinking();
 
         // This listener is fired whenever a notification is received while the app is foregrounded
         notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
@@ -140,10 +111,10 @@ const MainNavigation = ({route}) => {
         });
 
         const interval = setInterval(async () => {
-            if(await API.isLoggedIn()){
+            if (await API.isLoggedIn()) {
                 let me = await API.getMe();
                 //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")
                     GlobalState.me = me;
                 }
@@ -160,108 +131,108 @@ const MainNavigation = ({route}) => {
 
     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.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="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}
@@ -273,8 +244,8 @@ const MainNavigation = ({route}) => {
                     header: () => { <></> },
                 }}
             />*/}
-            
-        </Tab.Navigator>
+
+            </Tab.Navigator>
         </>
     )
 }
@@ -284,66 +255,66 @@ export default function App() {
         <PaperProvider settings={{
             icon: props => <MaterialIcons {...props} />,
         }} theme={theme}>
-            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}>
-            <NavigationContainer>
-                <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={()=>{alert("Chats are comming soon.")}} />
-                                <Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} />
-                                <Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} />
-                            </Appbar.Header>
-                        )
-                    },
-                }}>
-                    <Stack.Screen
-                        name="MainNavigation"
-                        component={MainNavigation}
-                    />
-                    <Stack.Screen
-                        name="Profile"
-                        component={Profile}
-                    />
-                    <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="SinglePost" component={SinglePost} />
-                    <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
-                    <Tab.Screen name="Logout" component={Login} />
-                </Stack.Navigator>
-            </NavigationContainer>
-            <MediaView></MediaView>
+            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
+                <NavigationContainer>
+                    <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={() => { alert("Chats are comming soon.") }} />
+                                    <Appbar.Action icon="search" onPress={() => { props.navigation.navigate("Search") }} />
+                                    <Appbar.Action icon="notifications" onPress={() => { props.navigation.navigate("Notifications") }} />
+                                </Appbar.Header>
+                            )
+                        },
+                    }}>
+                        <Stack.Screen
+                            name="MainNavigation"
+                            component={MainNavigation}
+                        />
+                        <Stack.Screen
+                            name="Profile"
+                            component={Profile}
+                        />
+                        <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="SinglePost" component={SinglePost} />
+                        <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
+                        <Tab.Screen name="Logout" component={Login} />
+                    </Stack.Navigator>
+                </NavigationContainer>
+                <MediaView></MediaView>
             </KeyboardAvoidingView>
         </PaperProvider>
     );
diff --git a/Views/Feed.js b/Views/Feed.js
index 35ec2b6..f950f8b 100644
--- a/Views/Feed.js
+++ b/Views/Feed.js
@@ -3,6 +3,7 @@ import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from './../API.js';
 import Post from './../components/Post.js';
 import GlobalState from '../contexts/GlobalState.js';
+import * as Linking from 'expo-linking';
 
 
 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 [Posts, setPosts] = useState([]);
     const flatListRef = React.useRef()
     console.log("Render Feed");
+    const url = Linking.useURL();
+    useEffect(() => {
+        if (prevLink === url || !url) return;
+        prevLink = url;
+        handleURL(url, navigation);
+    }, [url]);
     useEffect(() => {
         let subscribed = true;
         const getData = async () => {
@@ -43,7 +68,7 @@ let Feed = ({ navigation, route }) => {
                     routes: [{ name: 'Login' }],
                 });
                 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){