commit c1fe65bf366d3d8bdb6e3328e88227c123336b3d · cduck.me/statusphere-example-app-fork

+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