the statusphere demo reworked into a vite/react app in a monorepo
add profile pictures
+44
-12
+34
-9
packages/appview/src/routes.ts
+34
-9
packages/appview/src/routes.ts
···
3
3
import { TID } from '@atproto/common'
4
4
import { OAuthResolverError } from '@atproto/oauth-client-node'
5
5
import { isValidHandle } from '@atproto/syntax'
6
-
import { AppBskyActorProfile, XyzStatusphereStatus } from '@statusphere/lexicon'
6
+
import {
7
+
AppBskyActorDefs,
8
+
AppBskyActorProfile,
9
+
XyzStatusphereStatus,
10
+
} from '@statusphere/lexicon'
7
11
import express from 'express'
8
12
import { getIronSession, SessionOptions } from 'iron-session'
9
13
···
198
202
.catch(() => undefined)
199
203
200
204
const profileRecord = profileResponse?.data
201
-
const profile =
205
+
let profile: AppBskyActorProfile.Record =
206
+
{} as AppBskyActorProfile.Record
207
+
208
+
if (
202
209
profileRecord &&
203
-
AppBskyActorProfile.isRecord(profileRecord.value) &&
204
-
AppBskyActorProfile.validateRecord(profileRecord.value).success
205
-
? profileRecord.value
206
-
: ({} as AppBskyActorProfile.Record)
210
+
AppBskyActorProfile.isRecord(profileRecord.value)
211
+
) {
212
+
const validated = AppBskyActorProfile.validateRecord(
213
+
profileRecord.value,
214
+
)
215
+
if (validated.success) {
216
+
profile = profileRecord.value
217
+
} else {
218
+
ctx.logger.error(
219
+
{ err: validated.error },
220
+
'Failed to validate user profile',
221
+
)
222
+
}
223
+
}
207
224
208
-
profile.did = did
209
-
profile.handle = await ctx.resolver.resolveDidToHandle(did)
225
+
const profileView: AppBskyActorDefs.ProfileView = {
226
+
$type: 'app.bsky.actor.defs#profileView',
227
+
did: did,
228
+
handle: await ctx.resolver.resolveDidToHandle(did),
229
+
avatar: profile.avatar
230
+
? `https://atproto.pictures/img/${did}/${profile.avatar.ref}`
231
+
: undefined,
232
+
displayName: profile.displayName,
233
+
createdAt: profile.createdAt,
234
+
}
210
235
211
236
// Fetch user status
212
237
const status = await ctx.db
···
218
243
219
244
res.json({
220
245
did: agent.assertDid,
221
-
profile,
246
+
profile: profileView,
222
247
status: status ? await statusToStatusView(status, ctx) : undefined,
223
248
})
224
249
} catch (err) {
+10
-3
packages/client/src/components/Header.tsx
+10
-3
packages/client/src/components/Header.tsx
···
27
27
<nav>
28
28
{user ? (
29
29
<div className="flex gap-4 items-center">
30
+
{user.profile.avatar ? (
31
+
<img
32
+
src={user.profile.avatar}
33
+
alt={user.profile.displayName || user.profile.handle}
34
+
className="w-8 h-8 rounded-full"
35
+
/>
36
+
) : (
37
+
<div className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
38
+
)}
30
39
<span className="text-gray-700 dark:text-gray-300">
31
-
{user.profile?.displayName ||
32
-
user.profile?.handle ||
33
-
user.did.substring(0, 15)}
40
+
{user.profile.displayName || user.profile.handle}
34
41
</span>
35
42
<button
36
43
onClick={handleLogout}