this repo has no description
Display user avi if signed in
+62
-13
app.db-shm
app.db-shm
This is a binary file and will not be displayed.
app.db-wal
app.db-wal
This is a binary file and will not be displayed.
+18
-6
app/components/Header/components/User.tsx
+18
-6
app/components/Header/components/User.tsx
···
1
1
"use client";
2
2
3
+
import Image from "next/image";
3
4
import Link from "next/link";
4
5
import { useEffect, useRef, useState } from "react";
5
6
import { RxAvatar } from "react-icons/rx";
6
7
7
-
const User = () => {
8
+
const User = ({ avi }: { avi: string }) => {
8
9
const ref = useRef<HTMLDivElement | null>(null);
9
10
const [showSettings, setShowSettings] = useState(false);
10
11
···
21
22
document.removeEventListener("mousedown", handleClickOutside);
22
23
};
23
24
}, []);
25
+
24
26
return (
25
27
<div className="flex-1">
26
-
<RxAvatar
27
-
className="hover:cursor-pointer text-[#FF6A00]"
28
-
onClick={() => setShowSettings((s) => !s)}
29
-
size={48}
30
-
/>
28
+
{avi ? (
29
+
<Image
30
+
alt={""}
31
+
className="rounded-full"
32
+
height={48}
33
+
src={avi}
34
+
width={48}
35
+
/>
36
+
) : (
37
+
<RxAvatar
38
+
className="hover:cursor-pointer text-[#FF6A00]"
39
+
onClick={() => setShowSettings((s) => !s)}
40
+
size={48}
41
+
/>
42
+
)}
31
43
{showSettings && (
32
44
<div
33
45
className="absolute bg-[#30255C] flex h-24 items-center justify-center mt-2 right-0 rounded-lg top-full w-full"
+16
-2
app/components/Header/index.tsx
+16
-2
app/components/Header/index.tsx
···
1
+
import { getSession } from "@/app/lib/auth/session";
2
+
import { Agent } from "@atproto/api";
1
3
import { DateTime } from "luxon";
2
4
import User from "./components/User";
3
5
import Weather from "./components/Weather";
6
+
import { getHandle } from "@/app/lib/atproto/profile";
4
7
5
-
const Header = () => {
8
+
const Header = async () => {
9
+
const session = await getSession();
10
+
let avi = "";
11
+
12
+
if(session){
13
+
const agent = new Agent(session)
14
+
const handle = await getHandle(session);
15
+
const json = await agent.app.bsky.actor.getProfile({actor: handle})
16
+
17
+
avi = json.data.avatar;
18
+
}
19
+
6
20
return (
7
21
<div className="flex p-2 justify-between">
8
22
<div className="bg-[#30255C] flex flex-col gap-2 justify-center px-4 rounded-lg">
···
14
28
<p>{DateTime.now().toLocaleString(DateTime.DATE_HUGE)}</p>
15
29
<Weather />
16
30
</div>
17
-
<User />
31
+
<User avi={avi}/>
18
32
</div>
19
33
</div>
20
34
);
+1
-2
app/lib/auth/client/route.ts
app/lib/auth/client.ts
+1
-2
app/lib/auth/client/route.ts
app/lib/auth/client.ts
···
6
6
NodeSavedSession,
7
7
NodeSavedState
8
8
} from "@atproto/oauth-client-node";
9
-
import { getDB } from "../../db/index";
9
+
import { getDB } from "../db/index";
10
10
11
11
declare global {
12
12
var _oauthClient: NodeOAuthClient | undefined;
···
16
16
const PUBLIC_URL = process.env.PUBLIC_URL;
17
17
18
18
export const SCOPE = "atproto transition:generic";
19
-
;
20
19
21
20
const getClientMetadata = () => {
22
21
if (PUBLIC_URL) {
+24
app/lib/auth/session.ts
+24
app/lib/auth/session.ts
···
1
+
import { cookies } from "next/headers";
2
+
import { getOAuthClient } from "./client";
3
+
4
+
export const getDID = async () => {
5
+
const cookieStore = await cookies();
6
+
7
+
return cookieStore.get("did")?.value ?? null;
8
+
};
9
+
10
+
export const getSession = async () => {
11
+
const did = await getDID();
12
+
13
+
if (!did) {
14
+
return null;
15
+
}
16
+
17
+
try {
18
+
const client = await getOAuthClient();
19
+
20
+
return await client.restore(did);
21
+
} catch {
22
+
return null;
23
+
}
24
+
};
+1
-1
app/oauth-client-metadata.json/route.ts
+1
-1
app/oauth-client-metadata.json/route.ts
+1
-1
app/oauth/callback/route.ts
+1
-1
app/oauth/callback/route.ts
···
1
1
import { getHandle } from "../../lib/atproto/profile";
2
-
import { getOAuthClient } from "../../lib/auth/client/route";
2
+
import { getOAuthClient } from "../../lib/auth/client";
3
3
import { NextRequest, NextResponse } from "next/server";
4
4
5
5
const PUBLIC_URL = process.env.PUBLIC_URL || "http://127.0.0.1:3000";