tangled
alpha
login
or
join now
danabra.mov
/
statusphere-react
forked from
samuel.fm/statusphere-react
0
fork
atom
the statusphere demo reworked into a vite/react app in a monorepo
0
fork
atom
overview
issues
pulls
pipelines
Remove client side JS
Paul Frazee
2 years ago
c1fe65bf
b5d311ab
+24
-45
4 changed files
expand all
collapse all
unified
split
src
pages
home.ts
public
home.js
styles.css
routes.ts
+10
-9
src/pages/home.ts
···
74
74
</div>
75
75
</div>`}
76
76
</div>
77
77
-
<div class="status-options">
77
77
+
<form action="/status" method="post" class="status-options">
78
78
${STATUS_OPTIONS.map(
79
79
(status) =>
80
80
-
html`<div
81
81
-
class=${myStatus?.status === status
82
82
-
? 'status-option selected'
83
83
-
: 'status-option'}
84
84
-
data-value="${status}"
85
85
-
data-authed=${profile ? '1' : '0'}
80
80
+
html`<button
81
81
+
class=${
82
82
+
myStatus?.status === status
83
83
+
? 'status-option selected'
84
84
+
: 'status-option'
85
85
+
}
86
86
+
name="status"
87
87
+
value="${status}"
86
88
>
87
89
${status}
88
90
</div>`
89
91
)}
90
90
-
</div>
92
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
109
-
<script src="/public/home.js"></script>
110
111
</div>`
111
112
}
112
113
-32
src/pages/public/home.js
···
1
1
-
Array.from(document.querySelectorAll('.status-option'), (el) => {
2
2
-
el.addEventListener('click', async (ev) => {
3
3
-
setError('')
4
4
-
5
5
-
if (el.dataset.authed !== '1') {
6
6
-
window.location = '/login'
7
7
-
return
8
8
-
}
9
9
-
10
10
-
const res = await fetch('/status', {
11
11
-
method: 'POST',
12
12
-
headers: { 'content-type': 'application/json' },
13
13
-
body: JSON.stringify({ status: el.dataset.value }),
14
14
-
})
15
15
-
const body = await res.json()
16
16
-
if (body?.error) {
17
17
-
setError(body.error)
18
18
-
} else {
19
19
-
location.reload()
20
20
-
}
21
21
-
})
22
22
-
})
23
23
-
24
24
-
function setError(str) {
25
25
-
const errMsg = document.querySelector('.error')
26
26
-
if (str) {
27
27
-
errMsg.classList.add('visible')
28
28
-
errMsg.textContent = str
29
29
-
} else {
30
30
-
errMsg.classList.remove('visible')
31
31
-
}
32
32
-
}
+1
src/pages/public/styles.css
···
139
139
font-size: 2rem;
140
140
width: 3rem;
141
141
height: 3rem;
142
142
+
padding: 0;
142
143
background-color: #fff;
143
144
border: 1px solid var(--border-color);
144
145
border-radius: 3rem;
+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
207
-
return res.status(401).json({ error: 'Session required' })
207
207
+
return res
208
208
+
.status(401)
209
209
+
.type('html')
210
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
218
-
return res.status(400).json({ error: 'Invalid status' })
221
221
+
return res
222
222
+
.status(400)
223
223
+
.type('html')
224
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
234
-
return res.status(500).json({ error: 'Failed to write record' })
240
240
+
return res
241
241
+
.status(500)
242
242
+
.type('html')
243
243
+
.send('<h1>Error: Failed to write record</h1>')
235
244
}
236
245
237
246
try {
···
256
265
)
257
266
}
258
267
259
259
-
res.status(200).json({})
268
268
+
return res.redirect('/')
260
269
})
261
270
)
262
271