interface: render app preview in link block

This commit is contained in:
Liam Fitzgerald 2021-09-22 12:01:33 +10:00
parent 79142fe4af
commit d3802fa0c0
3 changed files with 45 additions and 9 deletions

View File

@ -9,7 +9,7 @@ import useLocalState from '~/logic/state/local';
import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
import bigInt from 'big-integer';
import airlock from '~/logic/api';
import useHarkState from '~/logic/state/hark';
import useHarkState, { selHarkGraph } from '~/logic/state/hark';
import { BlockScroller } from '~/views/components/BlockScroller';
export interface LinkBlocksProps {
@ -46,11 +46,13 @@ export function LinkBlocks(props: LinkBlocksProps) {
);
useEffect(() => {
const unreads =
useHarkState.getState().unreads.graph?.[association.resource]?.['/']
?.unreads || new Set<string>();
Array.from(unreads as Set<string>).forEach((u) => {
airlock.poke(markEachAsRead(association.resource, '/', u));
const unreads = selHarkGraph(association.resource)(useHarkState.getState());
const [,,ship,name] = association.resource.split('/');
unreads.each.forEach((u) => {
airlock.poke(markEachAsRead({
desk: (window as any).desk,
path: `/graph/${ship}/${name}`
}, u));
});
}, [association.resource]);

View File

@ -198,7 +198,7 @@ const ClampedText = styled(Text)`
type AppTileProps = Treaty & BoxProps;
function AppTile({ color, image, ...props }: AppTileProps) {
export function AppTile({ color, image, ...props }: AppTileProps) {
return (
<Box
position="relative"

View File

@ -1,6 +1,7 @@
import React, {
MouseEvent,
useCallback,
useEffect,
useMemo,
useState
} from 'react';
@ -14,7 +15,8 @@ import {
allSystemStyle,
Icon,
Row,
Col
Col,
Text
} from '@tlon/indigo-react';
import { TruncatedText } from '~/views/components/TruncatedText';
@ -23,11 +25,13 @@ import { IconRef, PropFunc } from '~/types';
import { system } from 'styled-system';
import { Association, GraphConfig, ReferenceContent } from '@urbit/api';
import { Link } from 'react-router-dom';
import { referenceToPermalink } from '~/logic/lib/permalinks';
import { AppPermalink, referenceToPermalink } from '~/logic/lib/permalinks';
import useMetadataState from '~/logic/state/metadata';
import { RemoteContentWrapper } from './wrapper';
import { useEmbed } from '~/logic/state/embed';
import { IS_SAFARI } from '~/logic/lib/platform';
import useDocketState, { useTreaty } from '~/logic/state/docket';
import { AppTile } from '~/views/apps/permalinks/embed';
interface RemoteContentEmbedProps {
url: string;
@ -217,11 +221,41 @@ export function RemoteContentPermalinkEmbed(props: {
return <RemoteContentPermalinkEmbedGraph {...permalink} />;
} else if (permalink.type === 'group') {
return <RemoteContentPermalinkEmbedGroup {...permalink} />;
} else if (permalink.type === 'app') {
return <RemoteContentPermalinkEmbedApp {...permalink} />;
}
return null;
}
function RemoteContentPermalinkEmbedApp({ link, ship, desk }: Omit<AppPermalink, 'type'>) {
const treaty = useTreaty(ship, desk);
useEffect(() => {
if (!treaty) {
useDocketState.getState().requestTreaty(ship, desk);
}
}, [treaty, ship, desk]);
return (
<Col
width="100%"
height="100%"
padding={3}
borderRadius={3}
justifyContent="space-around"
alignItems="center"
>
{treaty && (
<>
<AppTile color="washedGray" marginRight={0} {...treaty} />
<Row><Text fontSize="1" color="gray">App: {treaty.title}</Text></Row>
</>
)}
</Col>
);
}
function RemoteContentPermalinkEmbedGroup(props: {
group: string;
link: string;