ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-01 11:33:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

DmSettings: optimistic updating

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-07-19 14:50:31 +10:00
parent 0e1f365bf5
commit ee046f2eac
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pkg/interface/src/logic/state/graph.ts
View File

@ -2,9 +2,9 @@ import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
import { patp2dec } from 'urbit-ob';
import shallow from 'zustand/shallow';
import { Association, deSig, GraphNode, Graphs, FlatGraphs, resourceFromPath, ThreadGraphs, getGraph, getShallowChildren } from '@urbit/api';
import { Association, deSig, GraphNode, Graphs, FlatGraphs, resourceFromPath, ThreadGraphs, getGraph, getShallowChildren, setScreen } from '@urbit/api';
import { useCallback } from 'react';
import { createState, createSubscription, reduceStateN } from './base';
import { createState, createSubscription, reduceStateN, pokeOptimisticallyN } from './base';
import airlock from '~/logic/api';
import { addDmMessage, addPost, Content, getDeepOlderThan, getFirstborn, getNewest, getNode, getOlderSiblings, getYoungerSiblings, markPending, Post, addNode, GraphNodePoke } from '@urbit/api/graph';
import { GraphReducer, reduceDm } from '../reducers/graph-update';
@ -34,8 +34,8 @@ export interface GraphState {
getGraph: (ship: string, name: string) => Promise<void>;
addDmMessage: (ship: string, contents: Content[]) => Promise<void>;
addPost: (ship: string, name: string, post: Post) => Promise<void>;
addNode: (ship: string, name: string, post: GraphNodePoke) => Promise<void>;
setScreen: (screen: boolean) => void;
}
// @ts-ignore investigate zustand types
const useGraphState = createState<GraphState>('Graph', (set, get) => ({
@ -144,6 +144,10 @@ const useGraphState = createState<GraphState>('Graph', (set, get) => ({
const data = await airlock.scry(getShallowChildren(ship, name, index));
data['graph-update'].fetch = true;
GraphReducer(data);
},
setScreen: (screen: boolean) => {
const poke = setScreen(screen);
pokeOptimisticallyN(useGraphState, poke, reduceDm);
}
// getKeys: async () => {
// const api = useApi();

28
pkg/interface/src/views/apps/settings/components/lib/DmSettings.tsx
View File

@ -4,22 +4,25 @@ import {
Box,
ManagedToggleSwitchField
} from '@tlon/indigo-react';
import { Form, Formik } from 'formik';
import { Form } from 'formik';
import React, { useCallback } from 'react';
import useGraphState from '~/logic/state/graph';
import { AsyncButton } from '~/views/components/AsyncButton';
import airlock from '~/logic/api';
import { setScreen } from '@urbit/api/graph';
import useGraphState, { GraphState } from '~/logic/state/graph';
import { FormikOnBlur } from '~/views/components/FormikOnBlur';
import shallow from 'zustand/shallow';
const selInit = (s: GraphState) => ({
accept: !s.screening
});
export function DmSettings() {
const screening = useGraphState(s => s.screening);
const initialValues = { accept: !screening };
const initialValues = useGraphState(selInit, shallow);
const onSubmit = useCallback(
async (values, actions) => {
await airlock.poke(setScreen(!values.accept));
const { setScreen } = useGraphState.getState();
setScreen(!values.accept);
actions.setStatus({ success: null });
},
[screening]
[]
);
return (
@ -38,7 +41,7 @@ export function DmSettings() {
<Box mb="4" fontWeight="medium" fontSize="1" color="gray">
Direct Messages
</Box>
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<Col gapY="4">
<ManagedToggleSwitchField
@ -46,12 +49,9 @@ export function DmSettings() {
label="Auto-accept DM invites"
caption="Direct messages will be automatically joined, and you wil see any messages sent in notifications"
/>
<AsyncButton width="fit-content" primary>
Save Changes
</AsyncButton>
</Col>
</Form>
</Formik>
</FormikOnBlur>
</Col>
</Col>
);