the statusphere demo reworked into a vite/react app in a monorepo
Remove client side JS
+24
-45
+10
-9
src/pages/home.ts
+10
-9
src/pages/home.ts
···
74
74
</div>
75
75
</div>`}
76
76
</div>
77
-
<div class="status-options">
77
+
<form action="/status" method="post" class="status-options">
78
78
${STATUS_OPTIONS.map(
79
79
(status) =>
80
-
html`<div
81
-
class=${myStatus?.status === status
82
-
? 'status-option selected'
83
-
: 'status-option'}
84
-
data-value="${status}"
85
-
data-authed=${profile ? '1' : '0'}
80
+
html`<button
81
+
class=${
82
+
myStatus?.status === status
83
+
? 'status-option selected'
84
+
: 'status-option'
85
+
}
86
+
name="status"
87
+
value="${status}"
86
88
>
87
89
${status}
88
90
</div>`
89
91
)}
90
-
</div>
92
+
</form>
91
93
${statuses.map((status, i) => {
92
94
const handle = didHandleMap[status.authorDid] || status.authorDid
93
95
const date = ts(status)
···
106
108
`
107
109
})}
108
110
</div>
109
-
<script src="/public/home.js"></script>
110
111
</div>`
111
112
}
112
113
-32
src/pages/public/home.js
-32
src/pages/public/home.js
···
1
-
Array.from(document.querySelectorAll('.status-option'), (el) => {
2
-
el.addEventListener('click', async (ev) => {
3
-
setError('')
4
-
5
-
if (el.dataset.authed !== '1') {
6
-
window.location = '/login'
7
-
return
8
-
}
9
-
10
-
const res = await fetch('/status', {
11
-
method: 'POST',
12
-
headers: { 'content-type': 'application/json' },
13
-
body: JSON.stringify({ status: el.dataset.value }),
14
-
})
15
-
const body = await res.json()
16
-
if (body?.error) {
17
-
setError(body.error)
18
-
} else {
19
-
location.reload()
20
-
}
21
-
})
22
-
})
23
-
24
-
function setError(str) {
25
-
const errMsg = document.querySelector('.error')
26
-
if (str) {
27
-
errMsg.classList.add('visible')
28
-
errMsg.textContent = str
29
-
} else {
30
-
errMsg.classList.remove('visible')
31
-
}
32
-
}
+1
src/pages/public/styles.css
+1
src/pages/public/styles.css
+13
-4
src/routes.ts
+13
-4
src/routes.ts
···
204
204
// If the user is signed in, get an agent which communicates with their server
205
205
const agent = await getSessionAgent(req, res, ctx)
206
206
if (!agent) {
207
-
return res.status(401).json({ error: 'Session required' })
207
+
return res
208
+
.status(401)
209
+
.type('html')
210
+
.send('<h1>Error: Session required</h1>')
208
211
}
209
212
210
213
// Construct & validate their status record
···
215
218
createdAt: new Date().toISOString(),
216
219
}
217
220
if (!Status.validateRecord(record).success) {
218
-
return res.status(400).json({ error: 'Invalid status' })
221
+
return res
222
+
.status(400)
223
+
.type('html')
224
+
.send('<h1>Error: Invalid status</h1>')
219
225
}
220
226
221
227
let uri
···
231
237
uri = res.data.uri
232
238
} catch (err) {
233
239
ctx.logger.warn({ err }, 'failed to write record')
234
-
return res.status(500).json({ error: 'Failed to write record' })
240
+
return res
241
+
.status(500)
242
+
.type('html')
243
+
.send('<h1>Error: Failed to write record</h1>')
235
244
}
236
245
237
246
try {
···
256
265
)
257
266
}
258
267
259
-
res.status(200).json({})
268
+
return res.redirect('/')
260
269
})
261
270
)
262
271