Skip to content

Commit 0f39281

Browse files
louroulourou
authored
feat: Conversation deep link (#1643)
1 parent 1bdf0fc commit 0f39281

File tree

12 files changed

+5956
-2689
lines changed

12 files changed

+5956
-2689
lines changed

‎features/conversation/conversation-chat/conversation.nav.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { IXmtpConversationId, IXmtpInboxId } from "@features/xmtp/xmtp.types"
2+
import { ConversationScreen } from "@/features/conversation/conversation-chat/conversation.screen"
3+
import { translate } from "@/i18n"
4+
import { AppNativeStack } from "@/navigation/app-navigator"
5+
import { logger } from "@/utils/logger"
6+
7+
export type ConversationNavParams = {
8+
xmtpConversationId?: IXmtpConversationId
9+
composerTextPrefill?: string
10+
searchSelectedUserInboxIds?: IXmtpInboxId[]
11+
isNew?: boolean
12+
}
13+
14+
export const ConversationScreenConfig = {
15+
path: "/conversation/:inboxId?",
16+
parse: {
17+
inboxId: (value: string | undefined) => {
18+
if (!value) return undefined;
19+
20+
const inboxId = decodeURIComponent(value) as IXmtpInboxId;
21+
logger.info(`Parsing inboxId from URL: ${inboxId}`);
22+
return inboxId;
23+
},
24+
composerTextPrefill: (value: string | undefined) => {
25+
if (!value) return undefined;
26+
27+
const text = decodeURIComponent(value);
28+
logger.info(`Parsing composerTextPrefill from URL: ${text}`);
29+
return text;
30+
}
31+
},
32+
stringify: {
33+
inboxId: (value: IXmtpInboxId | undefined) => value ? encodeURIComponent(String(value)) : "",
34+
composerTextPrefill: (value: string | undefined) => value ? encodeURIComponent(value) : "",
35+
}
36+
}
37+
38+
export function ConversationNav() {
39+
return (
40+
<AppNativeStack.Screen
41+
options={{
42+
title: "",
43+
headerTitle: translate("chat"),
44+
}}
45+
name="Conversation"
46+
component={ConversationScreen}
47+
/>
48+
)
49+
}

‎features/deep-linking/conversation-links.ts

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { IXmtpConversationId, IXmtpInboxId } from "@/features/xmtp/xmtp.types"
2+
import { findConversationByInboxIds } from "@/features/conversation/utils/find-conversations-by-inbox-ids"
3+
import { useMultiInboxStore } from "@/features/authentication/multi-inbox.store"
4+
import { logger } from "@/utils/logger"
5+
6+
/**
7+
* Check if a conversation exists with the given inboxId
8+
* @param inboxId The inbox ID to check
9+
* @returns Promise with { exists, conversationId } - where conversationId is set if exists is true
10+
*/
11+
export async function checkConversationExists(inboxId: IXmtpInboxId): Promise<{ exists: boolean, conversationId?: IXmtpConversationId }> {
12+
try {
13+
// Get active user's inbox ID
14+
const state = useMultiInboxStore.getState()
15+
const activeInboxId = state.currentSender?.inboxId
16+
17+
if (!activeInboxId) {
18+
logger.warn("Cannot check conversation existence - no active inbox")
19+
return { exists: false }
20+
}
21+
22+
// Try to find an existing conversation
23+
const conversation = await findConversationByInboxIds({
24+
inboxIds: [inboxId],
25+
clientInboxId: activeInboxId,
26+
})
27+
28+
if (conversation) {
29+
logger.info(`Found existing conversation with ID: ${conversation.xmtpId}`)
30+
return {
31+
exists: true,
32+
conversationId: conversation.xmtpId as IXmtpConversationId
33+
}
34+
}
35+
36+
return { exists: false }
37+
} catch (error) {
38+
logger.warn(`Error checking conversation existence: ${error}`)
39+
return { exists: false }
40+
}
41+
}

‎features/deep-linking/conversation-navigator.ts

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { useCallback } from "react"
2+
import { useNavigation } from "@react-navigation/native"
3+
import { captureError } from "@/utils/capture-error"
4+
import { GenericError } from "@/utils/error"
5+
import { IXmtpInboxId, IXmtpConversationId } from "@/features/xmtp/xmtp.types"
6+
import { logger } from "@/utils/logger"
7+
import { checkConversationExists } from "./conversation-links"
8+
9+
/**
10+
* Custom hook to handle conversation deep links
11+
* This is used by the DeepLinkHandler component to navigate to conversations from deep links
12+
*/
13+
export function useConversationDeepLinkHandler() {
14+
const navigation = useNavigation()
15+
16+
/**
17+
* Process an inbox ID from a deep link and navigate to the appropriate conversation
18+
* @param inboxId The inbox ID from the deep link
19+
* @param composerTextPrefill Optional text to prefill in the composer
20+
*/
21+
const handleConversationDeepLink = useCallback(async (
22+
inboxId: IXmtpInboxId,
23+
composerTextPrefill?: string
24+
) => {
25+
if (!inboxId) {
26+
logger.warn("Cannot handle conversation deep link - missing inboxId")
27+
return
28+
}
29+
30+
try {
31+
logger.info(`Handling conversation deep link for inboxId: ${inboxId}${composerTextPrefill ? ' with prefill text' : ''}`)
32+
33+
// Check if the conversation exists
34+
const { exists, conversationId } = await checkConversationExists(inboxId)
35+
36+
if (exists && conversationId) {
37+
// We have an existing conversation - navigate to it
38+
logger.info(`Found existing conversation with ID: ${conversationId}`)
39+
40+
navigation.navigate("Conversation", {
41+
xmtpConversationId: conversationId,
42+
isNew: false,
43+
composerTextPrefill
44+
})
45+
} else {
46+
// No existing conversation - start a new one
47+
logger.info(`No existing conversation found with inboxId: ${inboxId}, creating new conversation`)
48+
49+
navigation.navigate("Conversation", {
50+
searchSelectedUserInboxIds: [inboxId],
51+
isNew: true,
52+
composerTextPrefill
53+
})
54+
}
55+
} catch (error) {
56+
captureError(
57+
new GenericError({
58+
error,
59+
additionalMessage: `Failed to handle conversation deep link for inboxId: ${inboxId}`,
60+
extra: { inboxId }
61+
})
62+
)
63+
}
64+
}, [navigation])
65+
66+
return { handleConversationDeepLink }
67+
}
68+
69+
/**
70+
* Global function to process a new deep link that uses the ConversationScreenConfig format
71+
* This function is called by the navigation library when it receives a deep link
72+
*/
73+
export function processConversationDeepLink(
74+
params: Record<string, string | undefined>
75+
): Promise<boolean> {
76+
return new Promise(async (resolve) => {
77+
const { inboxId, composerTextPrefill } = params
78+
79+
if (!inboxId) {
80+
// Skip if no inboxId
81+
logger.warn("Cannot process conversation deep link - missing inboxId")
82+
resolve(false)
83+
return
84+
}
85+
86+
try {
87+
logger.info(`Processing Conversation deep link via navigation for inboxId: ${inboxId}${composerTextPrefill ? ' with prefill text' : ''}`)
88+
89+
// Check if the conversation exists
90+
const { exists, conversationId } = await checkConversationExists(inboxId as IXmtpInboxId)
91+
92+
if (exists && conversationId) {
93+
logger.info(`Navigation found existing conversation with ID: ${conversationId}`)
94+
resolve(true)
95+
return
96+
}
97+
98+
// We didn't find an existing conversation, so we'll create a new one
99+
logger.info(`No existing conversation found with inboxId: ${inboxId}, navigation will create a new conversation`)
100+
resolve(true)
101+
} catch (error) {
102+
logger.error(`Error in processConversationDeepLink: ${error}`)
103+
// Still return true to indicate we're handling it, even though there was an error
104+
resolve(true)
105+
}
106+
})
107+
}

‎features/deep-linking/deep-link-handler.component.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { useCallback, useEffect } from "react"
2+
import { Linking } from "react-native"
3+
import { IXmtpInboxId } from "@/features/xmtp/xmtp.types"
4+
import { useAppState } from "@/stores/use-app-state-store"
5+
import { logger } from "@/utils/logger"
6+
import { parseURL } from "./link-parser"
7+
import { useConversationDeepLinkHandler } from "./conversation-navigator"
8+
9+
/**
10+
* Component that handles deep links for the app
11+
* This should be included at the app root to handle incoming links
12+
*/
13+
export function DeepLinkHandler() {
14+
const { currentState } = useAppState.getState()
15+
const { handleConversationDeepLink } = useConversationDeepLinkHandler()
16+
17+
/**
18+
* Handle a URL by parsing it and routing to the appropriate handler
19+
*/
20+
const handleUrl = useCallback(async (url: string) => {
21+
logger.info(`Handling deep link URL: ${url}`)
22+
23+
const { segments, params } = parseURL(url)
24+
25+
// Handle different types of deep links based on the URL pattern
26+
if (segments[0] === "conversation" && segments[1]) {
27+
// Pattern: converse://conversation/{inboxId}
28+
const inboxId = segments[1] as IXmtpInboxId
29+
const composerTextPrefill = params.composerTextPrefill
30+
31+
logger.info(`Deep link matches conversation pattern, inboxId: ${inboxId}${
32+
composerTextPrefill ? `, composerTextPrefill: ${composerTextPrefill}` : ''
33+
}`)
34+
35+
// Use the conversation deep link handler
36+
await handleConversationDeepLink(inboxId, composerTextPrefill)
37+
} else {
38+
logger.info(`Unhandled deep link pattern: ${segments.join('/')}`)
39+
}
40+
}, [handleConversationDeepLink])
41+
42+
// Handle initial URL when the app is first launched
43+
useEffect(() => {
44+
const getInitialURL = async () => {
45+
try {
46+
const initialUrl = await Linking.getInitialURL()
47+
if (initialUrl) {
48+
logger.info(`App launched from deep link: ${initialUrl}`)
49+
handleUrl(initialUrl)
50+
}
51+
} catch (error) {
52+
logger.warn(`Error getting initial URL: ${error}`)
53+
}
54+
}
55+
56+
getInitialURL()
57+
}, [handleUrl])
58+
59+
// Listen for URL events when the app is running
60+
useEffect(() => {
61+
const subscription = Linking.addEventListener("url", ({ url }) => {
62+
logger.info(`Received deep link while running: ${url}`)
63+
handleUrl(url)
64+
})
65+
66+
return () => {
67+
subscription.remove()
68+
}
69+
}, [handleUrl, currentState])
70+
71+
// This is a utility component with no UI
72+
return null
73+
}

‎features/deep-linking/link-parser.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { logger } from "@/utils/logger"
2+
3+
/**
4+
* Deep link URL parsing
5+
* Takes a URL string and extracts information needed for handling deep links
6+
*
7+
* @param url The URL to parse
8+
* @returns An object with parsed information from the URL, including:
9+
* - path: The path of the URL
10+
* - segments: The path segments
11+
* - params: URL query parameters
12+
*/
13+
export function parseURL(url: string) {
14+
try {
15+
const parsedURL = new URL(url)
16+
logger.info(`Parsing deep link URL: ${url}`)
17+
18+
// Extract the path without leading slash
19+
const path = parsedURL.pathname.replace(/^\/+/, "")
20+
21+
// Split path into segments
22+
const segments = path.split("/").filter(Boolean)
23+
24+
// Parse query parameters
25+
const params: Record<string, string> = {}
26+
parsedURL.searchParams.forEach((value, key) => {
27+
params[key] = value
28+
})
29+
30+
return {
31+
path,
32+
segments,
33+
params
34+
}
35+
} catch (error) {
36+
logger.warn(`Error parsing URL: ${url}, error: ${error}`)
37+
return {
38+
path: "",
39+
segments: [],
40+
params: {}
41+
}
42+
}
43+
}

0 commit comments

Comments
 (0)