Android Deeplinking: Inviting/joining other packs

.github/workflows/build-apk.yml

@@ -8,7 +8,7 @@ on:
       - master
   pull_request:
     paths:
-      - app/*
+      - 'app/*'
 
 jobs:
   build-apk:

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

@@ -22,6 +22,20 @@
                 <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="kangaroo-brian2509.vercel.app" />
+            </intent-filter>
         </activity>
 
         <!-- <custom-config> -->

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),
     });
 
 // Remove Sticker Pack Mutation
@@ -25,15 +25,15 @@ 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),
     });
 
 // Upload Sticker Mutation
 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);
         },
     });
 
@@ -51,6 +51,23 @@ export const useDeleteStickerMutation = (queryClient: QueryClient) =>
     useMutation<StickerRo, any, DeleteStickerRo, unknown>(deleteSticker, {
         onSuccess: (data, variables) => {
             queryClient.invalidateQueries([QUERY_KEYS.stickerPack, variables.stickerPackId]);
-            queryClient.invalidateQueries(QUERY_KEYS.myStickerPacks);
+            queryClient.invalidateQueries(QUERY_KEYS.ownAndJoinedStickerPacks);
+        },
+    });
+
+// Kick user Mutation
+interface KickMemberDto {
+    stickerPackId: string,
+    userToBeKickedId: string
+}
+const kickMember = async (kickMemberDto: KickMemberDto) => {
+    const { stickerPackId, userToBeKickedId } = kickMemberDto;
+    const { data } = await api.stickerPacks.kickMember(stickerPackId, userToBeKickedId);
+    return data;
+};
+export const useKickMemberMutation = (queryClient: QueryClient) =>
+    useMutation<StickerPackRo, any, KickMemberDto, unknown>(kickMember, {
+        onSuccess: (data, variables) => {
+            queryClient.invalidateQueries([QUERY_KEYS.stickerPack, variables.stickerPackId]);
         },
     });

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

@@ -15,13 +15,17 @@ export const useStickerPack = (id: string) =>
     );
 
 const getStickerPacks = async () => {
-    const { data } = await api.users.getOwnStickerPacks();
+    // TODO: After merge, use get "getOwnAndJoinedStickerPacks" method, which is not working at the time of merging
+    const { data } = await api.users.getOwnAndJoinedStickerPacks();
     // Backend returns stickers in reverse order, so we need to sort them first.
     for (let i = 0; i < data.length; i++) {
         data[i].stickers = sortStickersByCreatedAt(data[i].stickers);
     }
     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/components/sticker-pack-manage-screen/MemberClickedModal.tsx

@@ -7,12 +7,14 @@ interface Props {
     selectedMember: UserRo;
     modalVisible: boolean;
     closeModal: () => void;
+    onPressKickMember: () => void;
 }
 
 export const MemberClickedModal = ({
     selectedMember,
     modalVisible,
     closeModal,
+    onPressKickMember
 }: Props): JSX.Element => {
     return (
         <Modal
@@ -32,10 +34,7 @@ export const MemberClickedModal = ({
                         Close
                     </Button>
                 )}>
-                <Button size="medium" appearance="ghost" status="basic">
-                    Remove as Admin
-                </Button>
-                <Button status="danger" size="medium" appearance="ghost">
+                <Button status="danger" size="medium" appearance="ghost" onPress={onPressKickMember}>
                     Remove from Pack
                 </Button>
             </Card>

app/src/components/sticker-pack-manage-screen/MemberList.tsx

@@ -1,33 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Divider, Icon, List, ListItem } from "@ui-kitten/components";
 import { StickerPackRo, UserRo } from "../../api/generated-typescript-api-client/src";
 import { isAuthor } from "../../util/stickerpack_utils";
 import { Text } from "react-native";
-import { MemberClickedModal } from "./MemberClickedModal";
 import tw from "tailwind-react-native-classnames";
 
 interface Props {
     stickerPack: StickerPackRo;
+    onPressMember: (user: UserRo | undefined) => void;
 }
 
-export const MemberList = ({ stickerPack }: Props): JSX.Element => {
-    const [modalVisible, setModalVisible] = useState<boolean>(false);
-    const [clickedMember, setClickedMember] = useState<UserRo | undefined>();
-
-    useEffect(() => {
-        const shouldOpenModal = clickedMember != undefined;
-        setModalVisible(shouldOpenModal);
-    }, [clickedMember]);
-
-    const closeModal = () => {
-        setModalVisible(false);
-        setClickedMember(undefined);
-    };
+export const MemberList = ({ stickerPack, onPressMember }: Props): JSX.Element => {
 
     const renderItem = ({ item: user }: { item: UserRo }) => (
         <ListItem
             onPress={() => {
-                setClickedMember(user);
+                onPressMember(user);
             }}
             title={`${user.username}`}
             accessoryLeft={(props) => <Icon name="person" {...props} />}
@@ -47,13 +35,6 @@ export const MemberList = ({ stickerPack }: Props): JSX.Element => {
                 ItemSeparatorComponent={Divider}
                 renderItem={renderItem}
             />
-            {clickedMember && (
-                <MemberClickedModal
-                    selectedMember={clickedMember}
-                    modalVisible={modalVisible}
-                    closeModal={closeModal}
-                />
-            )}
         </>
     );
 };

app/src/components/stickerpack/PackStickersView.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Layout, Text } from "@ui-kitten/components";
+import { Image, TouchableOpacity } from "react-native";
+import { StickerPackRo, StickerRo } from "../../api/generated-typescript-api-client/src";
+import tw from "tailwind-react-native-classnames";
+
+interface Props {
+    stickerPack: StickerPackRo;
+    onStickerPress?: (sticker: StickerRo) => void;
+}
+
+export const PackStickersView = ({ stickerPack, onStickerPress }: Props): JSX.Element => {
+    const renderSticker = (sticker: StickerRo): JSX.Element => {
+        return (
+            <TouchableOpacity
+                key={sticker.id}
+                style={{
+                    width: "21%",
+                    height: "auto",
+                    marginHorizontal: "2%",
+                    marginBottom: "3.5%",
+                }}
+                disabled={onStickerPress == undefined}
+                onPress={() => {
+                    onStickerPress?.(sticker);
+                }}>
+                <Image
+                    style={tw.style("rounded-lg", {
+                        width: "100%",
+                        paddingBottom: "100%",
+                        borderRadius: 3,
+                    })}
+                    source={{
+                        uri: sticker.fileUrl,
+                    }}
+                />
+            </TouchableOpacity>
+        );
+    };
+
+    return (
+        <Layout style={tw`flex-col p-2 pt-1 pb-8`}>
+            <Layout style={tw`flex-row flex-grow justify-between items-baseline`}>
+                <Text style={tw`font-semibold mr-4`}>
+                    Willem Alexander
+                    <Text style={tw`text-xs text-gray-500`}> ({stickerPack.stickers.length})</Text>
+                </Text>
+                <Text style={tw`text-gray-500 pt-3 text-xs`}>Wed 4:20</Text>
+            </Layout>
+            <Layout style={tw`flex-row flex-wrap pt-3`}>
+                {stickerPack.stickers.map(renderSticker)}
+            </Layout>
+        </Layout>
+    );
+};

app/src/components/stickerpack/StickerPackHeader.tsx

@@ -9,7 +9,7 @@ import { CHEVRON_ICON_COLOR } from "../../constants/colors";
 
 interface Props {
     stickerPack: StickerPackRo;
-    onHeaderPress: () => void;
+    onHeaderPress?: () => void;
 }
 const StickerPackHeader = ({ stickerPack, onHeaderPress }: Props): JSX.Element => {
     const numMembers = stickerPack.members.length;
@@ -18,6 +18,7 @@ const StickerPackHeader = ({ stickerPack, onHeaderPress }: Props): JSX.Element =
         <TouchableOpacity
             style={tailwind("flex flex-row justify-between items-center p-4 border-b-2 border-gray-200")}
             onPress={onHeaderPress}
+            disabled={onHeaderPress === undefined}
         >
             <Layout style={tailwind("flex flex-row items-center")}>
                 <CoverStickerImage
@@ -36,11 +37,13 @@ const StickerPackHeader = ({ stickerPack, onHeaderPress }: Props): JSX.Element =
                     </Text>
                 </Layout>
             </Layout>
-            <Icon
-                style={tailwind("w-8 h-8")}
-                fill={CHEVRON_ICON_COLOR}
-                name='chevron-right-outline'
-            />
+            {onHeaderPress ? (
+                <Icon
+                    style={tailwind("w-8 h-8")}
+                    fill={CHEVRON_ICON_COLOR}
+                    name='chevron-right-outline'
+                />
+            ) : null}
         </TouchableOpacity >
     )
 }

app/src/components/stickerpack/StickerPackStickersBody.tsx

@@ -63,9 +63,9 @@ export const StickerGrid = ({ stickers, onStickerPress, stickersPerRow = 4 }: St
 
 interface StickerPackBodyProps {
     stickerPack: StickerPackRo;
-    onStickerPress: (sticker: StickerRo) => void;
-    refreshing: boolean;
-    onRefresh: () => void;
+    onStickerPress?: (sticker: StickerRo) => void;
+    refreshing?: boolean;
+    onRefresh?: () => void;
 }
 const StickerPackBody = ({ stickerPack, onStickerPress, refreshing, onRefresh }: StickerPackBodyProps): JSX.Element => {
 
@@ -74,7 +74,7 @@ const StickerPackBody = ({ stickerPack, onStickerPress, refreshing, onRefresh }:
     return (
         <ScrollView
             style={tailwind("p-6")}
-            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+            refreshControl={<RefreshControl refreshing={refreshing || false} onRefresh={onRefresh} />}
         >
             <Layout style={tailwind("flex-row justify-between items-baseline pb-4 pt-2")}>
                 <Layout style={tailwind("flex-row items-baseline")}>

app/src/constants/Deeplinking.ts

@@ -0,0 +1 @@
+export const DEEPLINK_SITE_DOMAIN = "https://kangaroo-brian2509.vercel.app";

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/navigation/RootNavigator.tsx

@@ -6,6 +6,7 @@ import { Layout, Spinner } from "@ui-kitten/components";
 import { AuthStackNavigator } from "./auth/AuthStackNavigator";
 import { AppStackNavigator } from "./app/AppStackNavigator";
 import tailwind from "tailwind-rn";
+import { deepLinkingOptions } from "./deeplinking/deeplinkingOptions";
 
 type RootStackNavigatorProps = {
     isAuthenticated: boolean
@@ -45,7 +46,7 @@ export const RootNavigator = (): React.ReactElement => {
     }
 
     return (
-        <NavigationContainer>
+        <NavigationContainer linking={deepLinkingOptions}>
             <RootStackNavigator isAuthenticated={isAuthenticated} />
         </NavigationContainer>
     );