demos for spacedust
7
fork

Configure Feed

Select the types of activity you want to include in your feed.

notification-rendering error boundary

since a lot is going on there now

+49 -2
+25
atproto-notifications/package-lock.json
··· 15 "psl": "^1.15.0", 16 "react": "^19.1.0", 17 "react-dom": "^19.1.0", 18 "react-router": "^7.6.3", 19 "react-time-ago": "^7.3.3", 20 "reactjs-popup": "^2.0.6" ··· 36 "../lexicons": { 37 "version": "0.0.1", 38 "dependencies": { 39 "psl": "^1.15.0" 40 } 41 }, ··· 327 }, 328 "peerDependencies": { 329 "@babel/core": "^7.0.0-0" 330 } 331 }, 332 "node_modules/@babel/template": { ··· 3075 }, 3076 "peerDependencies": { 3077 "react": "^19.1.0" 3078 } 3079 }, 3080 "node_modules/react-is": {
··· 15 "psl": "^1.15.0", 16 "react": "^19.1.0", 17 "react-dom": "^19.1.0", 18 + "react-error-boundary": "^6.0.0", 19 "react-router": "^7.6.3", 20 "react-time-ago": "^7.3.3", 21 "reactjs-popup": "^2.0.6" ··· 37 "../lexicons": { 38 "version": "0.0.1", 39 "dependencies": { 40 + "@atcute/client": "^4.0.3", 41 + "@atcute/identity-resolver": "^1.1.3", 42 + "jsonpath-plus": "^10.3.0", 43 "psl": "^1.15.0" 44 } 45 }, ··· 331 }, 332 "peerDependencies": { 333 "@babel/core": "^7.0.0-0" 334 + } 335 + }, 336 + "node_modules/@babel/runtime": { 337 + "version": "7.27.6", 338 + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz", 339 + "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==", 340 + "license": "MIT", 341 + "engines": { 342 + "node": ">=6.9.0" 343 } 344 }, 345 "node_modules/@babel/template": { ··· 3088 }, 3089 "peerDependencies": { 3090 "react": "^19.1.0" 3091 + } 3092 + }, 3093 + "node_modules/react-error-boundary": { 3094 + "version": "6.0.0", 3095 + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.0.tgz", 3096 + "integrity": "sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==", 3097 + "license": "MIT", 3098 + "dependencies": { 3099 + "@babel/runtime": "^7.12.5" 3100 + }, 3101 + "peerDependencies": { 3102 + "react": ">=16.13.1" 3103 } 3104 }, 3105 "node_modules/react-is": {
+1
atproto-notifications/package.json
··· 18 "psl": "^1.15.0", 19 "react": "^19.1.0", 20 "react-dom": "^19.1.0", 21 "react-router": "^7.6.3", 22 "react-time-ago": "^7.3.3", 23 "reactjs-popup": "^2.0.6"
··· 18 "psl": "^1.15.0", 19 "react": "^19.1.0", 20 "react-dom": "^19.1.0", 21 + "react-error-boundary": "^6.0.0", 22 "react-router": "^7.6.3", 23 "react-time-ago": "^7.3.3", 24 "reactjs-popup": "^2.0.6"
+8
atproto-notifications/src/components/Notification.css
··· 22 border-bottom-color: hsla(0, 0%, 0%, 0.3); 23 } 24 25 .handle { 26 color: skyblue; 27 }
··· 22 border-bottom-color: hsla(0, 0%, 0%, 0.3); 23 } 24 25 + .notification.error { 26 + background: hsla(347, 72%, 20%, 0.333); 27 + align-items: center; 28 + } 29 + .notification.error p { 30 + margin: 0; 31 + } 32 + 33 .handle { 34 color: skyblue; 35 }
+10
atproto-notifications/src/components/Notification.tsx
··· 7 8 import './Notification.css'; 9 10 export function Notification({ app, group, source, source_record, source_did, subject, timestamp }) { 11 const [resolvedLink, setResolvedLink] = useState(null); 12
··· 7 8 import './Notification.css'; 9 10 + export function fallbackRender({ error, resetErrorBoundary }) { 11 + console.error('rendering fallback for error', error); 12 + return ( 13 + <div className="notification error"> 14 + <p>sorry, something went wrong trying to show this notification</p> 15 + <p><button onClick={resetErrorBoundary}>retry</button></p> 16 + </div> 17 + ); 18 + } 19 + 20 export function Notification({ app, group, source, source_record, source_did, subject, timestamp }) { 21 const [resolvedLink, setResolvedLink] = useState(null); 22
+5 -2
atproto-notifications/src/pages/Feed.tsx
··· 1 import { useCallback, useEffect, useState } from 'react'; 2 import Popup from 'reactjs-popup'; 3 import { getNotifications, getSecondary } from '../db'; 4 import { ButtonGroup } from '../components/Buttons'; 5 import { NotificationSettings } from '../components/NotificationSettings'; 6 - import { Notification } from '../components/Notification'; 7 import { GetJson, PostJson } from '../components/Fetch'; 8 import psl from 'psl'; 9 import lexicons from 'lexicons'; ··· 232 233 <div className="feed-notifications"> 234 {feed.map(([k, n]) => ( 235 - <Notification key={k} {...n} /> 236 ))} 237 </div> 238 </div>
··· 1 import { useCallback, useEffect, useState } from 'react'; 2 + import { ErrorBoundary } from 'react-error-boundary'; 3 import Popup from 'reactjs-popup'; 4 import { getNotifications, getSecondary } from '../db'; 5 import { ButtonGroup } from '../components/Buttons'; 6 import { NotificationSettings } from '../components/NotificationSettings'; 7 + import { Notification, fallbackRender } from '../components/Notification'; 8 import { GetJson, PostJson } from '../components/Fetch'; 9 import psl from 'psl'; 10 import lexicons from 'lexicons'; ··· 233 234 <div className="feed-notifications"> 235 {feed.map(([k, n]) => ( 236 + <ErrorBoundary key={k} fallbackRender={fallbackRender}> 237 + <Notification {...n} /> 238 + </ErrorBoundary> 239 ))} 240 </div> 241 </div>