Android Deeplinking: Inviting/joining other packs

app/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,19 @@
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="kangaroo" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="https"
+                    android:host="www.stickr.cf"/>
+            </intent-filter>
         </activity>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 

app/src/api/generatedApiWrapper.ts

@@ -4,6 +4,7 @@ import {
     AuthApi,
     Configuration,
     StickerPacksApi,
+    InvitesApi,
     UserApi,
 } from "./generated-typescript-api-client/src";
 
@@ -20,4 +21,5 @@ export const api = {
     users: new UserApi(configuration, baseURL, instance),
     auth: new AuthApi(configuration, baseURL, instance),
     stickerPacks: new StickerPacksApi(configuration, baseURL, instance),
+    invites: new InvitesApi(configuration, baseURL, instance),
 };

app/src/api/hooks/mutations/invites.ts

@@ -0,0 +1,33 @@
+import { QueryClient, useMutation } from "react-query";
+import { QUERY_KEYS } from "../../../constants/ReactQueryKeys";
+import {
+    CreateInviteDto,
+    InviteRoDto,
+    StickerPackRo,
+} from "../../generated-typescript-api-client/src";
+import { api } from "../../generatedApiWrapper";
+
+const useInvite = async (inviteId: string) => {
+    const { data } = await api.invites.useInvite(inviteId);
+    return data;
+};
+
+export const useInviteMutation = (queryClient: QueryClient) =>
+    useMutation<StickerPackRo, any, string, unknown>(useInvite, {
+        onSuccess: () => {
+            queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks);
+        },
+    });
+
+const createInvite = async (
+    stickerPackId: string,
+    createInviteDto: CreateInviteDto,
+): Promise<InviteRoDto> => {
+    const { data } = await api.stickerPacks.createInvite(stickerPackId, createInviteDto || {});
+    return data;
+};
+
+export const useCreateInviteMutation = (stickerPackId: string) =>
+    useMutation<InviteRoDto, any, CreateInviteDto, unknown>((createInviteDto: CreateInviteDto) =>
+        createInvite(stickerPackId, createInviteDto),
+    );

app/src/api/hooks/mutations/stickerPack.ts

@@ -15,7 +15,7 @@ const createStickerPack = async (createStickerPackDto: CreateStickerPackDto) =>
 
 export const useCreateStickerPackMutation = (queryClient: QueryClient) =>
     useMutation<StickerPackRo, any, CreateStickerPackDto, unknown>(createStickerPack, {
-        onSuccess: () => queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks),
+        onSuccess: () => queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks),
     });
 
 const removeStickerPack = async (stickerPackId: string) => {
@@ -25,13 +25,13 @@ const removeStickerPack = async (stickerPackId: string) => {
 
 export const useRemoveStickerPackMutation = (queryClient: QueryClient) =>
     useMutation<StickerPackRo, any, string, unknown>(removeStickerPack, {
-        onSuccess: () => queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks),
+        onSuccess: () => queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks),
     });
 
 export const useUploadStickerMutation = (queryClient: QueryClient) =>
     useMutation<StickerRo, any, UploadStickerRo, unknown>(uploadSticker, {
         onSuccess: (data, variables) => {
             queryClient.invalidateQueries([QUERY_KEYS.stickerPack, variables.stickerPackId]);
-            queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks);
+            queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks);
         },
     });

app/src/api/hooks/query/invites.ts

@@ -0,0 +1,21 @@
+import { QueryClient, useQuery } from "react-query";
+import { QUERY_KEYS } from "../../../constants/ReactQueryKeys";
+import { StickerPackRo } from "../../generated-typescript-api-client/src";
+import { api } from "../../generatedApiWrapper";
+
+const getInvitePreview = async (inviteId: string) => {
+    const { data } = await api.invites.previewInvite(inviteId);
+    return data;
+};
+
+export const useInvitePreview = (queryClient: QueryClient, inviteId: string) =>
+    useQuery<StickerPackRo, any, StickerPackRo>(
+        [QUERY_KEYS.invitePreview, inviteId],
+        () => getInvitePreview(inviteId),
+        {
+            onSuccess: (data) => {
+                queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks);
+                queryClient.invalidateQueries([QUERY_KEYS.stickerPack, data.id]);
+            },
+        },
+    );

app/src/api/hooks/query/stickerPack.ts

@@ -14,9 +14,12 @@ export const useStickerPack = (id: string) =>
     );
 
 const getStickerPacks = async () => {
-    const { data } = await api.users.getOwnStickerPacks();
+    const { data } = await api.users.getOwnAndJoinedStickerPacks();
     return data;
 };
 
-export const useStickerPacks = () =>
-    useQuery<StickerPackRo[], any, StickerPackRo[]>(QUERY_KEYS.myStickerPacks, getStickerPacks);
+export const useOwnAndJoinedStickerPacks = () =>
+    useQuery<StickerPackRo[], any, StickerPackRo[]>(
+        QUERY_KEYS.ownAndJoinedStickerPacks,
+        getStickerPacks,
+    );

app/src/constants/Deeplinking.ts

@@ -0,0 +1 @@
+export const DEEPLINK_SITE_DOMAIN = "https://www.stickr.cf";

app/src/constants/ReactQueryKeys.ts

@@ -1,6 +1,7 @@
 export const QUERY_KEYS = {
-    myStickerPacks: "myStickerPacks",
+    ownAndJoinedStickerPacks: "ownAndJoinedStickerPacks",
     stickerPack: "stickerPack",
+    invitePreview: "invitePreview",
     me: "myProfile",
     like: "like",
 };

app/src/constants/StickerPack.ts

@@ -1 +1,2 @@
 export const ACCOUNT_MAX_PREVIEW_STICKERS = 8;
+export const MAX_STICKERS_PER_PACK = 30;

app/src/contexts/AuthContext.tsx

@@ -38,6 +38,11 @@ export const AuthContextProvider = ({ children }: any): React.ReactElement => {
     }, []);
 
     useEffect(() => {
+        if (accessToken == undefined) {
+            setIsAuthenticated(false);
+            return;
+        }
+
         api.auth
             .testAuth()
             .then(() => setIsAuthenticated(true))

app/src/navigation/AppNavigator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NavigationContainer } from "@react-navigation/native";
+import { LinkingOptions, NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { LoginScreen } from "../screens/auth/LoginScreen";
 import { RegisterScreen } from "../screens/auth/RegisterScreen";
@@ -22,7 +22,9 @@ import { DiscoverScreen } from "../screens/app/home/DiscoverScreen";
 import { SettingsScreen } from "../screens/app/home/SettingsScreen";
 import { SettingsUpdateScreen } from "../screens/app/home/SettingsUpdateScreen";
 import { CreateAddMembersScreen } from "../screens/app/home/stickerpack/CreateAddMembersScreen";
+import { JoinStickerPackScreen } from "../screens/app/home/stickerpack/JoinStickerPackScreen";
 import tw from "tailwind-react-native-classnames";
+import { DEEPLINK_SITE_DOMAIN } from "../constants/Deeplinking";
 
 export type AuthStackParamList = {
     Login: undefined;
@@ -43,7 +45,7 @@ export const AuthStackScreen = (): JSX.Element => (
 export type HomeStackParamList = {
     Homescreen: undefined;
     StickerPackDetailScreen: {
-        stickerPack: StickerPackRo;
+        stickerPackId: string;
     };
     StickerPackManageScreen: {
         stickerPack: StickerPackRo;
@@ -56,6 +58,9 @@ export type HomeStackParamList = {
         name: string;
         personal: boolean;
     };
+    JoinStickerPackScreen: {
+        inviteId: string;
+    };
 };
 
 export type FeedStackParamList = {
@@ -117,7 +122,7 @@ const BottomTabBar = ({ navigation, state }: BottomTabBarProps<BottomTabBarOptio
 
 const Tab = createBottomTabNavigator();
 const HomeTabNavigator = () => (
-    <Tab.Navigator initialRouteName="Home" tabBar={(props) => <BottomTabBar {...props} />}>
+    <Tab.Navigator initialRouteName="SharedPacks" tabBar={(props) => <BottomTabBar {...props} />}>
         <Tab.Screen name="Feed" component={FeedStackScreen} />
         <Tab.Screen name="SharedPacks" component={HomeStackScreen} />
         <Tab.Screen name="Discover" component={DiscoverStackScreen} />
@@ -193,6 +198,11 @@ const HomeStackScreen = () => (
             component={CreateAddMembersScreen}
             options={{ title: "Create Sticker Pack", headerBackTitle: " " }}
         />
+        <HomeStack.Screen
+            name="JoinStickerPackScreen"
+            component={JoinStickerPackScreen}
+            options={{ title: "Join Sticker Pack", headerBackTitle: " " }}
+        />
     </HomeStack.Navigator>
 );
 
@@ -265,8 +275,26 @@ export const AppNavigator = (): React.ReactElement => {
         );
     }
 
+    const linkingOptions: LinkingOptions = {
+        prefixes: ["kangaroo://", DEEPLINK_SITE_DOMAIN],
+        config: {
+            screens: {
+                App: {
+                    screens: {
+                        SharedPacks: {
+                            screens: {
+                                initialRouteName: "SharedPacks",
+                                JoinStickerPackScreen: "invite/:inviteId",
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    };
+
     return (
-        <NavigationContainer>
+        <NavigationContainer linking={linkingOptions}>
             <RootStackScreen isAuthenticated={isAuthenticated} />
         </NavigationContainer>
     );

app/src/screens/app/home/AccountScreen.tsx

@@ -8,7 +8,7 @@ import { TextStatElement } from "../../../components/common/TextStatElement";
 import { AccountProfileImage } from "../../../components/common/AccountProfileImage";
 import { useQueryClient } from "react-query";
 import { useMe } from "../../../api/hooks/query/user";
-import { useStickerPacks } from "../../../api/hooks/query/stickerPack";
+import { useOwnAndJoinedStickerPacks } from "../../../api/hooks/query/stickerPack";
 import { QUERY_KEYS } from "../../../constants/ReactQueryKeys";
 import { CoverStickerImage } from "../../../components/common/CoverStickerImage";
 import { StickerPackRo, StickerRo } from "../../../api/generated-typescript-api-client/src";
@@ -23,11 +23,11 @@ type Props = StackScreenProps<FeedStackParamList, "AccountScreen">;
 export const AccountScreen = ({ navigation }: Props): React.ReactElement => {
     const queryClient = useQueryClient();
     const myUserQuery = useMe();
-    const myStickerPacksQuery = useStickerPacks();
+    const myStickerPacksQuery = useOwnAndJoinedStickerPacks();
 
     useEffect(() => {
         () => queryClient.invalidateQueries(QUERY_KEYS.me);
-        () => queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks);
+        () => queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks);
 
         navigation.setOptions({
             headerRight: function navigationRightIcon() {

app/src/screens/app/home/HomeScreen.tsx

@@ -10,7 +10,7 @@ import { StickerPackRo } from "../../../api/generated-typescript-api-client/src"
 import { HomeScreenHeader } from "../../../components/home/HomeScreenHeader";
 import { StickerPacksList } from "../../../components/stickerpack/StickerPackList";
 import { sortedStickerPacks } from "../../../util/sorting";
-import { useStickerPacks } from "../../../api/hooks/query/stickerPack";
+import { useOwnAndJoinedStickerPacks } from "../../../api/hooks/query/stickerPack";
 import { storeImages } from "../../../util/image_storing";
 import { registerStickerPacks } from "../../..//util/sticker_registration";
 
@@ -22,18 +22,18 @@ export const HomeScreen = ({ navigation }: Props): React.ReactElement => {
     const queryClient = useQueryClient();
 
     useEffect(() => {
-        () => queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks);
+        () => queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks);
     }, [accessToken]);
 
-    const myStickerPacksQuery = useStickerPacks();
+    const ownAndJoinedStickerPacksQuery = useOwnAndJoinedStickerPacks();
 
     useEffect(() => {
         // TODO: move this to a more valid location?
-        if (myStickerPacksQuery.data) {
-            storeImages(myStickerPacksQuery.data);
-            registerStickerPacks(myStickerPacksQuery.data);
+        if (ownAndJoinedStickerPacksQuery.data) {
+            storeImages(ownAndJoinedStickerPacksQuery.data);
+            registerStickerPacks(ownAndJoinedStickerPacksQuery.data);
         }
-    }, [myStickerPacksQuery.dataUpdatedAt]);
+    }, [ownAndJoinedStickerPacksQuery.dataUpdatedAt]);
 
     return (
         <SafeAreaView style={tailwind("flex-1")}>
@@ -42,12 +42,12 @@ export const HomeScreen = ({ navigation }: Props): React.ReactElement => {
                 onLogout={logout}
             />
             <StickerPacksList
-                stickerPacks={sortedStickerPacks(myStickerPacksQuery.data || [])}
-                refreshing={myStickerPacksQuery.isLoading}
-                onRefresh={() => queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks)}
+                stickerPacks={sortedStickerPacks(ownAndJoinedStickerPacksQuery.data || [])}
+                refreshing={ownAndJoinedStickerPacksQuery.isLoading}
+                onRefresh={() => queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks)}
                 onPressStickerPack={(stickerPack: StickerPackRo) => {
                     navigation.navigate("StickerPackDetailScreen", {
-                        stickerPack,
+                        stickerPackId: stickerPack.id,
                     });
                 }}
             />