···
1
1
'use client';
2
2
3
3
-
import React from 'react';
3
3
+
import React, { useState, useEffect } from 'react';
4
4
import Link from 'next/link';
5
5
import Image from 'next/image';
6
6
import { usePathname } from 'next/navigation';
···
12
12
export default function NavigationBar() {
13
13
const pathname = usePathname();
14
14
const { isAuthenticated, signOut, session } = useAuth();
15
15
-
const handle = null; // Will be fetched when needed
15
15
+
const [handle, setHandle] = useState<string | null>(null);
16
16
+
17
17
+
// Fetch user's handle when authenticated
18
18
+
useEffect(() => {
19
19
+
if (isAuthenticated && session?.sub && !handle) {
20
20
+
fetchUserHandle(session.sub);
21
21
+
}
22
22
+
}, [isAuthenticated, session?.sub, handle]);
23
23
+
24
24
+
const fetchUserHandle = async (did: string) => {
25
25
+
try {
26
26
+
// Try to resolve DID to handle using PLC directory
27
27
+
const plcResponse = await fetch(`https://plc.directory/${did}/data`);
28
28
+
29
29
+
if (plcResponse.ok) {
30
30
+
const plcData = await plcResponse.json();
31
31
+
if (plcData.alsoKnownAs && plcData.alsoKnownAs.length > 0) {
32
32
+
const handleUrl = plcData.alsoKnownAs[0];
33
33
+
if (handleUrl.startsWith('at://')) {
34
34
+
const userHandle = handleUrl.substring(5); // Remove 'at://'
35
35
+
console.log(`Resolved DID ${did} to handle ${userHandle}`);
36
36
+
setHandle(userHandle);
37
37
+
return;
38
38
+
}
39
39
+
}
40
40
+
}
41
41
+
} catch (error) {
42
42
+
console.warn('Failed to resolve handle from PLC directory:', error);
43
43
+
}
44
44
+
45
45
+
// Fallback: try using the profile API
46
46
+
try {
47
47
+
const response = await fetch('/api/bluesky/profile', {
48
48
+
method: 'POST',
49
49
+
headers: {
50
50
+
'Content-Type': 'application/json'
51
51
+
},
52
52
+
body: JSON.stringify({
53
53
+
accessToken: 'placeholder', // OAuth session handles auth internally
54
54
+
dpopToken: 'placeholder', // OAuth session handles auth internally
55
55
+
handle: did,
56
56
+
pdsEndpoint: null
57
57
+
})
58
58
+
});
59
59
+
60
60
+
if (response.ok) {
61
61
+
const data = await response.json();
62
62
+
if (data.handle && data.handle !== 'unknown') {
63
63
+
setHandle(data.handle);
64
64
+
}
65
65
+
}
66
66
+
} catch (error) {
67
67
+
console.warn('Failed to fetch handle from profile API:', error);
68
68
+
}
69
69
+
};
16
70
17
71
const handleLogout = async () => {
18
72
await signOut();
73
73
+
setHandle(null); // Clear handle on logout
19
74
};
20
75
21
76
// Check if a link is active