settings: fix notification optimism
Fixes urbit/landscape#1009
import {
Box,
-
Center, Col, Icon,
-
- ToggleSwitch, Text,
+ Text,
StatelessToggleSwitchField
} from '@tlon/indigo-react';
import { Association, GraphConfig, resourceFromPath } from '@urbit/api';
@@ -37,17 +35,19 @@ function GroupWithChannels(props: { association: Association }) {
s.notificationsGroupConfig.includes(association.group)
);
- const [{ value }, meta, { setValue }] = useField(
+ const [, , { setValue }] = useField(
`groups["${association.group}"]`
);
+ const [optValue, setOptValue] = useState(groupWatched);
+
const onChange = () => {
- setValue(!value);
+ setOptValue(v => !v);
};
useEffect(() => {
- setValue(groupWatched);
- }, []);
+ setValue(optValue);
+ }, [optValue]);
const graphs = useGraphsForGroup(association.group);
const joinedGraphs = useGraphState(s => s.graphKeys);
@@ -84,7 +84,7 @@ function GroupWithChannels(props: { association: Association }) {
<Text>{metadata.title}</Text>
</Box>
<Box gridArea="groupToggle">
- <StatelessToggleSwitchField selected={value} onChange={onChange} />
+ <StatelessToggleSwitchField selected={optValue} onChange={onChange} />
</Box>
{open &&
_.map(joinedGroupGraphs, (a: Association, graph: string) => (
@@ -101,19 +101,19 @@ function Channel(props: { association: Association }) {
return isWatching(config, association.resource);
});
- const [{ value }, meta, { setValue, setTouched }] = useField(
+ const [, , { setValue, setTouched }] = useField(
`graph["${association.resource}"]`
);
+ const [optValue, setOptValue] = useState(watching);
useEffect(() => {
- setValue(watching);
+ setValue(optValue);
+ setTouched(true);
}, [watching]);
const onClick = () => {
- setValue(!value);
- setTouched(true);
- }
-
+ setOptValue(v => !v);
+ };
const icon = getModuleIcon((metadata.config as GraphConfig)?.graph as GraphModule);
@@ -126,7 +126,7 @@ function Channel(props: { association: Association }) {
<Text> {metadata.title}</Text>
</Box>
<Box gridColumn={4}>
- <StatelessToggleSwitchField selected={value} onClick={onClick} />
+ <StatelessToggleSwitchField selected={optValue} onClick={onClick} />
</Box>
</>
);
