the statusphere demo reworked into a vite/react app in a monorepo

Remove client side JS

+24 -45
+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
··· 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
··· 139 139 font-size: 2rem; 140 140 width: 3rem; 141 141 height: 3rem; 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 - 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