this repo has no description
clientside login
+78
-21
+74
-21
src/index.tsx
+74
-21
src/index.tsx
···
8
8
import './styles.css';
9
9
import * as bsky from '@atproto/api';
10
10
const { BskyAgent } = bsky;
11
+
import type { AtpSessionEvent, AtpSessionData } from '@atproto/api';
11
12
import { config } from './config.js';
12
13
13
-
async function getData(actor = '') {
14
-
const agent = new BskyAgent({
15
-
service: 'https://bsky.social',
16
-
});
14
+
let session: AtpSessionData;
17
15
18
-
await agent.login({
19
-
identifier: config.identifier,
20
-
password: config.password,
21
-
});
16
+
const agent = new BskyAgent({
17
+
service: 'https://bsky.social',
18
+
persistSession: (evt: AtpSessionEvent, sess?: AtpSessionData) => {
19
+
session = sess!;
20
+
},
21
+
});
22
22
23
+
async function getData(actor = '') {
24
+
await agent.resumeSession(session);
23
25
// source: https://github.com/bluesky-social/atproto/blob/efb1cac2bfc8ccb77c0f4910ad9f3de7370fbebb/packages/bsky/tests/_util.ts#L314
24
26
const paginateAll = async <T extends { cursor?: string }>(
25
27
fn: (cursor?: string) => Promise<T>,
···
107
109
const [createdAt, setCreatedAt] = useState<any>();
108
110
const [actor, setActor] = useState<any>('');
109
111
const [updated, setUpdated] = useState(actor);
112
+
const [username, setUsername] = useState<any>('');
113
+
const [password, setPassword] = useState<any>('');
114
+
const [loginPressed, setLoginPressed] = useState<any>(false);
115
+
const [loggedIn, setLoggedIn] = useState<any>(false);
116
+
const [isLoading, setIsLoading] = useState<any>(false);
110
117
111
118
useEffect(() => {
112
119
let ignore = false;
120
+
setPosts([]);
113
121
114
-
getData(actor).then((data) => {
115
-
if (!ignore) {
116
-
setPosts(data.data);
117
-
setMax(data.max);
118
-
setCreatedAt(new Date(data.createdAt));
119
-
}
120
-
});
122
+
if (loggedIn) {
123
+
setIsLoading(true);
124
+
getData(actor).then((data) => {
125
+
if (!ignore) {
126
+
setPosts(data.data);
127
+
setMax(data.max);
128
+
setCreatedAt(new Date(data.createdAt));
129
+
setIsLoading(false);
130
+
}
131
+
});
132
+
}
121
133
122
134
return () => {
123
135
ignore = true;
124
136
};
125
-
}, [updated, max]);
137
+
}, [updated, loggedIn]);
138
+
139
+
useEffect(() => {
140
+
let ignore = false;
141
+
if (loginPressed && !ignore) {
142
+
agent
143
+
.login({
144
+
identifier: config.identifier,
145
+
password: config.password,
146
+
})
147
+
.then(() => {
148
+
setLoggedIn(true);
149
+
});
150
+
}
151
+
return () => {
152
+
ignore = true;
153
+
};
154
+
}, [loginPressed]);
126
155
return (
127
156
<div>
128
157
<h1>Bluesky Posts Heatmap</h1>
158
+
{loggedIn === false ? (
159
+
<>
160
+
<div id="loginMessage">Please log in</div>
161
+
<br />
162
+
</>
163
+
) : null}
164
+
<div id="login">
165
+
Username:
166
+
<input type="text" placeholder="username" onChange={(e) => setUsername(e.target.value)} value={username} />
167
+
<br />
168
+
Password:
169
+
<input type="password" placeholder="password" onChange={(e) => setPassword(e.target.value)} value={password} />
170
+
<input
171
+
type="button"
172
+
value="login"
173
+
onClick={() => {
174
+
setLoginPressed(true);
175
+
setActor(username);
176
+
}}
177
+
disabled={loggedIn}
178
+
/>
179
+
<br />
180
+
<br />
181
+
</div>
129
182
<div id="actor">
130
183
🦋
131
-
<input type="text" placeholder="Enter a BlueSky DID" onChange={(e) => setActor(e.target.value)} value={actor} />
184
+
<input type="text" placeholder="Bluesky username" onChange={(e) => setActor(e.target.value)} value={actor} />
132
185
<input
133
186
type="button"
134
-
value="Submit"
187
+
value="Get heatmap"
135
188
onClick={() => {
136
189
setMax(0);
137
190
setUpdated(actor);
138
191
}}
192
+
disabled={!loggedIn || isLoading}
139
193
/>
140
194
</div>
141
195
<div>
142
196
<br />
143
197
</div>
144
-
{max === 0 ? (
145
-
<p>Loading...</p>
146
-
) : (
198
+
{isLoading ? <div>Loading...</div> : null}
199
+
{posts.length === 0 ? null : (
147
200
<>
148
201
<CalendarHeatmap
149
202
startDate={createdAt}