mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-11-28 11:40:11 +03:00
grid: distinguish app sync from system install
By using `%kiln-install` instead of `%kiln-sync` for System Updates, this ensures that the `%kids` desk is also updated. Also, address UX feedback: render the entire source ship's patp to avoid ambiguity. (as opposed to truncating a moon's name).
This commit is contained in:
parent
280c1cb19a
commit
1bd0f4be77
@ -3,11 +3,12 @@ import React, { HTMLAttributes } from 'react';
|
||||
|
||||
type ShipNameProps = {
|
||||
name: string;
|
||||
truncate?: boolean;
|
||||
} & HTMLAttributes<HTMLSpanElement>;
|
||||
|
||||
export const ShipName = ({ name, ...props }: ShipNameProps) => {
|
||||
export const ShipName = ({ name, truncate = true, ...props }: ShipNameProps) => {
|
||||
const separator = /([_^-])/;
|
||||
const citedName = cite(name);
|
||||
const citedName = truncate ? cite(name) : name;
|
||||
|
||||
if (!citedName) {
|
||||
return null;
|
||||
|
@ -1,34 +1,39 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { useAsyncCall } from '../logic/useAsyncCall';
|
||||
import useKilnState from '../state/kiln';
|
||||
import { Button } from './Button';
|
||||
import { ShipName } from './ShipName';
|
||||
import { Spinner } from './Spinner';
|
||||
|
||||
interface SourceSyncerProps {
|
||||
interface SourceSetterProps {
|
||||
appName: string;
|
||||
srcDesk: string;
|
||||
srcShip?: string;
|
||||
title: string;
|
||||
syncDesk: string;
|
||||
syncShip?: string;
|
||||
toggleSrc: (desk: string, ship: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export default function SourceSyncer({ appName, title, syncDesk, syncShip }: SourceSyncerProps) {
|
||||
const [newSyncShip, setNewSyncShip] = useState(syncShip ?? '');
|
||||
const { toggleSync } = useKilnState();
|
||||
const { status: requestStatus, call: setSync } = useAsyncCall(toggleSync);
|
||||
const syncDirty = newSyncShip !== syncShip;
|
||||
export default function SourceSetter({
|
||||
appName,
|
||||
srcDesk,
|
||||
srcShip,
|
||||
title,
|
||||
toggleSrc
|
||||
}: SourceSetterProps) {
|
||||
const [newSyncShip, setNewSyncShip] = useState(srcShip ?? '');
|
||||
const { status: requestStatus, call: handleSubmit } = useAsyncCall(toggleSrc);
|
||||
const syncDirty = newSyncShip !== srcShip;
|
||||
|
||||
const onUnsync = useCallback(() => {
|
||||
if (!syncShip) {
|
||||
const onUnset = useCallback(() => {
|
||||
if (!srcShip) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
// eslint-disable-next-line no-alert, no-restricted-globals
|
||||
confirm(`Are you sure you want to unsync ${appName}? You will no longer receive updates.`)
|
||||
) {
|
||||
toggleSync(syncDesk, syncShip);
|
||||
toggleSrc(srcDesk, srcShip);
|
||||
}
|
||||
}, [syncShip, syncDesk, toggleSync]);
|
||||
}, [srcShip, srcDesk]);
|
||||
|
||||
const handleSourceChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { target } = e;
|
||||
@ -39,26 +44,27 @@ export default function SourceSyncer({ appName, title, syncDesk, syncShip }: Sou
|
||||
const onSubmit = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
await setSync(syncDesk, newSyncShip);
|
||||
await handleSubmit(srcDesk, newSyncShip);
|
||||
},
|
||||
[syncDesk, newSyncShip, toggleSync]
|
||||
[srcDesk, newSyncShip]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="h3 mb-7">{title}</h2>
|
||||
<div className="space-y-3">
|
||||
{syncShip ? (
|
||||
{srcShip ? (
|
||||
<>
|
||||
<h3 className="flex items-center h4 mb-2">Automatic Updates</h3>
|
||||
<p>Automatically download and apply updates to keep {appName} up to date.</p>
|
||||
<div className="flex-1 flex flex-col justify-center space-y-6">
|
||||
<p>
|
||||
OTA Source: <ShipName name={syncShip} className="font-semibold font-mono" />
|
||||
OTA Source:{' '}
|
||||
<ShipName name={srcShip} truncate={false} className="font-semibold font-mono" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button onClick={onUnsync} variant="destructive">
|
||||
<Button onClick={onUnset} variant="destructive">
|
||||
Unsync Updates for {appName}...
|
||||
</Button>
|
||||
</div>
|
@ -1,23 +1,25 @@
|
||||
import React from 'react';
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
import SourceSetter from '../../components/SourceSetter';
|
||||
import { useCharge } from '../../state/docket';
|
||||
import { usePike } from '../../state/kiln';
|
||||
import useKilnState, { usePike } from '../../state/kiln';
|
||||
import { getAppName } from '../../state/util';
|
||||
import SourceSyncer from '../../components/SourceSyncer';
|
||||
|
||||
export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
|
||||
const { desk } = match.params;
|
||||
const charge = useCharge(desk);
|
||||
const appName = getAppName(charge);
|
||||
const pike = usePike(desk);
|
||||
const syncShip = pike?.sync?.ship;
|
||||
const srcShip = pike?.sync?.ship;
|
||||
const { toggleSync } = useKilnState();
|
||||
|
||||
return (
|
||||
<SourceSyncer
|
||||
<SourceSetter
|
||||
appName={appName}
|
||||
toggleSrc={toggleSync}
|
||||
srcDesk={desk}
|
||||
srcShip={srcShip}
|
||||
title={`${appName} Settings`}
|
||||
syncDesk={desk}
|
||||
syncShip={syncShip}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -1,15 +1,22 @@
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import SourceSyncer from '../../components/SourceSyncer';
|
||||
import { usePike } from '../../state/kiln';
|
||||
import SourceSetter from '../../components/SourceSetter';
|
||||
import useKilnState, { usePike } from '../../state/kiln';
|
||||
|
||||
export const SystemUpdatePrefs = () => {
|
||||
const desk = 'base';
|
||||
const appName = 'your Urbit';
|
||||
const pike = usePike(desk);
|
||||
const syncShip = pike?.sync?.ship;
|
||||
const srcShip = pike?.sync?.ship;
|
||||
const { toggleInstall } = useKilnState();
|
||||
|
||||
return (
|
||||
<SourceSyncer appName={appName} title="System Updates" syncDesk={desk} syncShip={syncShip} />
|
||||
<SourceSetter
|
||||
appName={appName}
|
||||
toggleSrc={toggleInstall}
|
||||
srcDesk={desk}
|
||||
srcShip={srcShip}
|
||||
title="System Updates"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -1,4 +1,13 @@
|
||||
import { scryLag, getPikes, Pikes, Pike, kilnUnsync, kilnSync } from '@urbit/api';
|
||||
import {
|
||||
scryLag,
|
||||
getPikes,
|
||||
Pikes,
|
||||
Pike,
|
||||
kilnUnsync,
|
||||
kilnSync,
|
||||
kilnUninstall,
|
||||
kilnInstall
|
||||
} from '@urbit/api';
|
||||
import create from 'zustand';
|
||||
import produce from 'immer';
|
||||
import { useCallback } from 'react';
|
||||
@ -12,6 +21,7 @@ interface KilnState {
|
||||
lag: boolean;
|
||||
fetchLag: () => Promise<void>;
|
||||
fetchPikes: () => Promise<void>;
|
||||
toggleInstall: (desk: string, ship: string) => Promise<void>;
|
||||
toggleSync: (desk: string, ship: string) => Promise<void>;
|
||||
set: (s: KilnState) => void;
|
||||
initializeKiln: () => Promise<void>;
|
||||
@ -33,6 +43,13 @@ const useKilnState = create<KilnState>((set, get) => ({
|
||||
const lag = await api.scry<boolean>(scryLag);
|
||||
set({ lag });
|
||||
},
|
||||
toggleInstall: async (desk: string, ship: string) => {
|
||||
const synced = !!get().pikes[desk].sync;
|
||||
await (useMockData
|
||||
? fakeRequest('')
|
||||
: api.poke(synced ? kilnUninstall(desk) : kilnInstall(ship, desk)));
|
||||
await get().fetchPikes();
|
||||
},
|
||||
toggleSync: async (desk: string, ship: string) => {
|
||||
const synced = !!get().pikes[desk].sync;
|
||||
await (useMockData
|
||||
|
Loading…
Reference in New Issue
Block a user