From 7e7d93872047410abc036622979d4b5f32036e00 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Mon, 25 Oct 2021 11:55:57 -0500 Subject: [PATCH] grid: default to desk name if title empty --- pkg/grid/src/components/AppInfo.tsx | 6 +++--- pkg/grid/src/components/AppLink.tsx | 4 ++-- pkg/grid/src/components/AppList.tsx | 3 ++- pkg/grid/src/nav/SystemPreferences.tsx | 3 ++- pkg/grid/src/nav/preferences/AppPrefs.tsx | 5 +++-- pkg/grid/src/nav/search/TreatyInfo.tsx | 6 ++++-- pkg/grid/src/state/util.ts | 10 +++++++++- pkg/grid/src/tiles/RemoveApp.tsx | 5 +++-- pkg/grid/src/tiles/SuspendApp.tsx | 4 ++-- 9 files changed, 30 insertions(+), 16 deletions(-) diff --git a/pkg/grid/src/components/AppInfo.tsx b/pkg/grid/src/components/AppInfo.tsx index 2bd227699f..1d01985360 100644 --- a/pkg/grid/src/components/AppInfo.tsx +++ b/pkg/grid/src/components/AppInfo.tsx @@ -9,7 +9,7 @@ import { DocketHeader } from './DocketHeader'; import { Spinner } from './Spinner'; import { VatMeta } from './VatMeta'; import useDocketState, { ChargeWithDesk } from '../state/docket'; -import { getAppHref } from '../state/util'; +import { getAppHref, getAppName } from '../state/util'; import { addRecentApp } from '../nav/search/Home'; import { TreatyMeta } from './TreatyMeta'; @@ -113,7 +113,7 @@ export const AppInfo: FC = ({ docket, vat, className }) => { className="space-y-6" containerClass="w-full max-w-md" > -

Install “{docket.title}”

+

Install “{getAppName(docket)}”

This application will be able to view and interact with the contents of your Urbit. Only install if you trust the developer. @@ -123,7 +123,7 @@ export const AppInfo: FC = ({ docket, vat, className }) => { Cancel - Get “{docket.title}” + Get “{getAppName(docket)}” diff --git a/pkg/grid/src/components/AppLink.tsx b/pkg/grid/src/components/AppLink.tsx index 7cec674e6a..7ff8547ec8 100644 --- a/pkg/grid/src/components/AppLink.tsx +++ b/pkg/grid/src/components/AppLink.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React, { HTMLProps, ReactNode } from 'react'; import { Link, LinkProps } from 'react-router-dom'; import { DocketWithDesk } from '../state/docket'; -import { getAppHref } from '../state/util'; +import { getAppHref, getAppName } from '../state/util'; import { DocketImage } from './DocketImage'; type Sizes = 'xs' | 'small' | 'default'; @@ -57,7 +57,7 @@ export const AppLink = ({ <>

-

{app.title}

+

{getAppName(app)}

{app.info && size === 'default' &&

{app.info}

}
diff --git a/pkg/grid/src/components/AppList.tsx b/pkg/grid/src/components/AppList.tsx index 7f09737eb1..0764bab474 100644 --- a/pkg/grid/src/components/AppList.tsx +++ b/pkg/grid/src/components/AppList.tsx @@ -4,6 +4,7 @@ import { MatchItem } from '../nav/Nav'; import { useRecentsStore } from '../nav/search/Home'; import { AppLink, AppLinkProps } from './AppLink'; import { DocketWithDesk } from '../state/docket'; +import { getAppName } from '../state/util'; type AppListProps = { apps: T[]; @@ -45,7 +46,7 @@ export const AppList = ({ aria-labelledby={labelledBy} > {apps.map((app) => ( -
  • +
  • - {charge.title} + {getAppName(charge)} ))} diff --git a/pkg/grid/src/nav/preferences/AppPrefs.tsx b/pkg/grid/src/nav/preferences/AppPrefs.tsx index 421e7bd345..51910f776b 100644 --- a/pkg/grid/src/nav/preferences/AppPrefs.tsx +++ b/pkg/grid/src/nav/preferences/AppPrefs.tsx @@ -4,6 +4,7 @@ import { Setting } from '../../components/Setting'; import { ShipName } from '../../components/ShipName'; import { useCharge } from '../../state/docket'; import useKilnState, { useVat } from '../../state/kiln'; +import { getAppName } from '../../state/util'; export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => { const { desk } = match.params; @@ -18,11 +19,11 @@ export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => { return ( <> -

    {charge?.title} Settings

    +

    {getAppName(charge)} Settings

    {tracking ? ( -

    Automatically download and apply updates to keep {charge?.title} up to date.

    +

    Automatically download and apply updates to keep {getAppName(charge)} up to date.

    {otaSource && (

    OTA Source: diff --git a/pkg/grid/src/nav/search/TreatyInfo.tsx b/pkg/grid/src/nav/search/TreatyInfo.tsx index 9bc4c6de50..a6c78feecb 100644 --- a/pkg/grid/src/nav/search/TreatyInfo.tsx +++ b/pkg/grid/src/nav/search/TreatyInfo.tsx @@ -4,6 +4,7 @@ import { AppInfo } from '../../components/AppInfo'; import { Spinner } from '../../components/Spinner'; import useDocketState, { useCharge, useTreaty } from '../../state/docket'; import { useVat } from '../../state/kiln'; +import { getAppName } from '../../state/util'; import { useLeapStore } from '../Nav'; export const TreatyInfo = () => { @@ -12,6 +13,7 @@ export const TreatyInfo = () => { const treaty = useTreaty(host, desk); const vat = useVat(desk); const charge = useCharge(desk); + const name = getAppName(treaty); useEffect(() => { if (!charge) { @@ -20,9 +22,9 @@ export const TreatyInfo = () => { }, [host, desk]); useEffect(() => { - select(<>{treaty?.title}); + select(<>{name}); useLeapStore.setState({ matches: [] }); - }, [treaty?.title]); + }, [name]); if (!treaty) { // TODO: maybe replace spinner with skeletons diff --git a/pkg/grid/src/state/util.ts b/pkg/grid/src/state/util.ts index d99e2e60e2..a6375bbf01 100644 --- a/pkg/grid/src/state/util.ts +++ b/pkg/grid/src/state/util.ts @@ -1,4 +1,4 @@ -import { DocketHref } from '@urbit/api/docket'; +import { Docket, DocketHref, Treaty } from '@urbit/api/docket'; import { hsla, parseToHsla } from 'color2k'; import _ from 'lodash'; @@ -16,6 +16,14 @@ export function getAppHref(href: DocketHref) { return 'site' in href ? href.site : `/apps/${href.glob.base}/`; } +export function getAppName(app: (Docket & { desk: string }) | Treaty | undefined): string { + if (!app) { + return ''; + } + + return app.title || app.desk; +} + export function disableDefault(e: T): void { e.preventDefault(); } diff --git a/pkg/grid/src/tiles/RemoveApp.tsx b/pkg/grid/src/tiles/RemoveApp.tsx index 1271fe4963..4f07830916 100644 --- a/pkg/grid/src/tiles/RemoveApp.tsx +++ b/pkg/grid/src/tiles/RemoveApp.tsx @@ -4,6 +4,7 @@ import { Button } from '../components/Button'; import { Dialog, DialogClose, DialogContent } from '../components/Dialog'; import { useRecentsStore } from '../nav/search/Home'; import useDocketState, { useCharges } from '../state/docket'; +import { getAppName } from '../state/util'; export const RemoveApp = () => { const history = useHistory(); @@ -21,7 +22,7 @@ export const RemoveApp = () => { return (

    !open && history.push('/')}> -

    Remove “{docket?.title || ''}”?

    +

    Remove “{getAppName(docket)}”?

    This will remove the software's tile from your home screen.

    @@ -30,7 +31,7 @@ export const RemoveApp = () => { Cancel - Remove “{docket?.title}” + Remove “{getAppName(docket)}”
    diff --git a/pkg/grid/src/tiles/SuspendApp.tsx b/pkg/grid/src/tiles/SuspendApp.tsx index abb9d15e5f..17ab6259b6 100644 --- a/pkg/grid/src/tiles/SuspendApp.tsx +++ b/pkg/grid/src/tiles/SuspendApp.tsx @@ -24,7 +24,7 @@ export const SuspendApp = () => { return ( !open && history.push('/')}> -

    Suspend “{charge?.title || ''}”

    +

    Suspend “{getAppName(charge)}”

    Suspending an app will turn off automatic updates. You cannot use an app when it is suspended, but you can resume it at any time. @@ -34,7 +34,7 @@ export const SuspendApp = () => { Cancel - Suspend “{charge?.title}” + Suspend “{getAppName(docket)}”