put the global toggle on the main page thing

very easy not to enable it in onboarding

Changed files
+37 -21
atproto-notifications
src
+37 -21
atproto-notifications/src/components/NotificationSettings.tsx
··· 1 - import { useState } from 'react'; 2 - 1 + import { useState, useCallback } from 'react'; 2 + import { Link } from 'react-router'; 3 + import { GetJson, postJson } from './Fetch'; 4 + import { ButtonGroup } from './Buttons'; 3 5 4 6 export function NotificationSettings({ secondary, secondaryFilter }) { 7 + const [notifyToggleCounter, setNotifyToggleCounter] = useState(0); 5 8 6 - 7 - // const [notifyToggleCounter, setNotifyToggleCounter] = useState(0); 8 - 9 - // // TODO move up (to chrome?) so it syncs 10 - // const setGlobalNotifications = useCallback(async enabled => { 11 - // const host = import.meta.env.VITE_NOTIFICATIONS_HOST; 12 - // const url = new URL('/global-notify', host); 13 - // try { 14 - // await postJson(url, JSON.stringify({ notify_enabled: enabled }), true) 15 - // } catch (err) { 16 - // console.error('failed to set self-notify setting', err); 17 - // } 18 - // setNotifyToggleCounter(n => n + 1); 19 - // }); 20 - 21 - 9 + // TODO move up (to chrome?) so it syncs 10 + const setGlobalNotifications = useCallback(async enabled => { 11 + const host = import.meta.env.VITE_NOTIFICATIONS_HOST; 12 + const url = new URL('/global-notify', host); 13 + try { 14 + await postJson(url, JSON.stringify({ notify_enabled: enabled }), true) 15 + } catch (err) { 16 + console.error('failed to set self-notify setting', err); 17 + } 18 + setNotifyToggleCounter(n => n + 1); 19 + }); 22 20 21 + if (secondary !== 'all') return; 23 22 24 - if (secondary === 'all') { 25 - return <p>Notifications default: [todo: toggle mute], unknown sources: [toggle mute]</p>; 26 - } 23 + return ( 24 + <div className="feed-filter-type"> 25 + <h4>All notifications:</h4> 26 + <GetJson 27 + key={notifyToggleCounter} 28 + endpoint="/global-notify" 29 + credentials 30 + ok={({ notify_enabled }) => ( 31 + <ButtonGroup 32 + options={[ 33 + {val: 'paused', label: <>⏸&nbsp;&nbsp;pause{!notify_enabled && 'd'}</>}, 34 + {val: 'active', label: <>▶&nbsp;&nbsp;{notify_enabled ? 'notifications active' : 'enable notifications'}</>}, 35 + ]} 36 + current={notify_enabled ? 'active' : 'paused'} 37 + onChange={val => setGlobalNotifications(val === 'active')} 38 + /> 39 + )} 40 + /> 41 + </div> 42 + ); 27 43 }