diff --git a/pkg/arvo/mar/graph/update.hoon b/pkg/arvo/mar/graph/update.hoon index 4d8e1477e..1cd2a2068 100644 --- a/pkg/arvo/mar/graph/update.hoon +++ b/pkg/arvo/mar/graph/update.hoon @@ -5,7 +5,6 @@ |% ++ noun upd ++ json (update:enjs upd) - ++ noun upd -- :: ++ grab diff --git a/pkg/interface/src/logic/api/metadata.ts b/pkg/interface/src/logic/api/metadata.ts index 216485ec6..4828d7409 100644 --- a/pkg/interface/src/logic/api/metadata.ts +++ b/pkg/interface/src/logic/api/metadata.ts @@ -5,7 +5,7 @@ import { Path, Patp } from '~/types/noun'; export default class MetadataApi extends BaseApi { - metadataAdd(appName: string, appPath: Path, groupPath: Path, title: string, description: string, dateCreated: string, color: string) { + metadataAdd(appName: string, appPath: Path, groupPath: Path, title: string, description: string, dateCreated: string, color: string, module: string = '') { const creator = `~${this.ship}`; return this.metadataAction({ add: { @@ -19,7 +19,8 @@ export default class MetadataApi extends BaseApi { description, color, 'date-created': dateCreated, - creator + creator, + module } } }); diff --git a/pkg/interface/src/logic/store/store.ts b/pkg/interface/src/logic/store/store.ts index aab7823db..541b84615 100644 --- a/pkg/interface/src/logic/store/store.ts +++ b/pkg/interface/src/logic/store/store.ts @@ -18,6 +18,19 @@ import LaunchReducer from '../reducers/launch-update'; import LinkListenReducer from '../reducers/listen-update'; import ConnectionReducer from '../reducers/connection'; +export const homeAssociation = { + "app-path": "/home", + "app-name": "contact", + "group-path": "/home", + metadata: { + color: "0x0", + title: "Home", + description: "", + "date-created": "", + module: "", + }, +}; + export default class GlobalStore extends BaseStore { inviteReducer = new InviteReducer(); diff --git a/pkg/interface/src/logic/store/type.ts b/pkg/interface/src/logic/store/type.ts index 6e94da33d..ce53fbf48 100644 --- a/pkg/interface/src/logic/store/type.ts +++ b/pkg/interface/src/logic/store/type.ts @@ -38,7 +38,7 @@ export interface StoreState { permissions: Permissions; s3: S3State; graphs: Graphs; - graphKeys: Set; + graphKeys: Set; // App specific states diff --git a/pkg/interface/src/logic/subscription/global.ts b/pkg/interface/src/logic/subscription/global.ts index 8a07dde07..4fd2c682e 100644 --- a/pkg/interface/src/logic/subscription/global.ts +++ b/pkg/interface/src/logic/subscription/global.ts @@ -15,12 +15,12 @@ const chatSubscriptions: AppSubscription[] = [ ]; const publishSubscriptions: AppSubscription[] = [ - ['/primary', 'publish'], +// ['/primary', 'publish'], ]; const linkSubscriptions: AppSubscription[] = [ - ['/json/seen', 'link-view'], - ['/listening', 'link-listen-hook'] +// ['/json/seen', 'link-view'], +// ['/listening', 'link-listen-hook'] ] const groupSubscriptions: AppSubscription[] = [ diff --git a/pkg/interface/src/types/index.ts b/pkg/interface/src/types/index.ts index 44a608d9c..10135b03d 100644 --- a/pkg/interface/src/types/index.ts +++ b/pkg/interface/src/types/index.ts @@ -17,3 +17,4 @@ export * from './permission-update'; export * from './publish-response'; export * from './publish-update'; export * from './s3-update'; +export * from './workspace'; diff --git a/pkg/interface/src/types/metadata-update.ts b/pkg/interface/src/types/metadata-update.ts index d6b5bb6e7..2af050667 100644 --- a/pkg/interface/src/types/metadata-update.ts +++ b/pkg/interface/src/types/metadata-update.ts @@ -51,4 +51,5 @@ interface Metadata { 'date-created': string; description: string; title: string; + module: string; } diff --git a/pkg/interface/src/types/noun.ts b/pkg/interface/src/types/noun.ts index 8a8569790..95dedea82 100644 --- a/pkg/interface/src/types/noun.ts +++ b/pkg/interface/src/types/noun.ts @@ -18,7 +18,7 @@ export type Serial = string; export type Jug = Map>; // name of app -export type AppName = 'chat' | 'link' | 'contacts' | 'publish'; +export type AppName = 'chat' | 'link' | 'contacts' | 'publish' | 'graph'; export function getTagFromFrond(frond: O): keyof O { const tags = Object.keys(frond) as Array; diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js index e14d23faf..baf8ee289 100644 --- a/pkg/interface/src/views/apps/launch/app.js +++ b/pkg/interface/src/views/apps/launch/app.js @@ -1,12 +1,14 @@ import React from 'react'; import Helmet from 'react-helmet'; +import { Link } from 'react-router-dom'; -import { Box } from '@tlon/indigo-react'; +import { Box, Row, Icon, Text } from '@tlon/indigo-react'; import './css/custom.css'; import Tiles from './components/tiles'; import Welcome from './components/welcome'; +import Groups from './components/Groups'; export default class LaunchApp extends React.Component { @@ -25,8 +27,30 @@ export default class LaunchApp extends React.Component { OS1 - Home
-
- + + + + + + + + Home + + + + -
+ + { - return props.tiles[key].isShown; + const tile = props.tiles[key]; + + return tile.isShown; }).map((key) => { const tile = props.tiles[key]; if ('basic' in tile.type) { diff --git a/pkg/interface/src/views/apps/links/LinkResource.tsx b/pkg/interface/src/views/apps/links/LinkResource.tsx new file mode 100644 index 000000000..9d8c87600 --- /dev/null +++ b/pkg/interface/src/views/apps/links/LinkResource.tsx @@ -0,0 +1,144 @@ +import React, { useEffect } from "react"; +import { Box, Row, Col, Center } from "@tlon/indigo-react"; +import { Switch, Route, Link } from "react-router-dom"; + +import GlobalApi from "~/logic/api/global"; +import { StoreState } from "~/logic/store/type"; +import { Association, GraphNode } from "~/types"; +import { RouteComponentProps } from "react-router-dom"; +import { LinkList } from "./components/link-list"; +import { LinkDetail } from "./components/link-detail"; + +import { LinkItem } from "./components/lib/link-item"; +import { LinkSubmit } from "./components/lib/link-submit"; +import { LinkPreview } from "./components/lib/link-preview"; +import { CommentSubmit } from "./components/lib/comment-submit"; +import { Comments } from "./components/lib/comments"; +import "./css/custom.css"; + +type LinkResourceProps = StoreState & { + association: Association; + api: GlobalApi; + baseUrl: string; +} & RouteComponentProps; + +export function LinkResource(props: LinkResourceProps) { + const { + association, + api, + baseUrl, + graphs, + contacts, + groups, + associations, + graphKeys, + s3, + hideAvatars, + hideNicknames, + remoteContentPolicy, + } = props; + + const appPath = association["app-path"]; + + const relativePath = (p: string) => `${baseUrl}/resource/link${appPath}${p}`; + + const [, , ship, name] = appPath.split("/"); + const resourcePath = `${ship.slice(1)}/${name}`; + const resource = associations.graph[resourcePath] + ? associations.graph[resourcePath] + : { metadata: {} }; + const contactDetails = contacts[resource["group-path"]] || {}; + const popout = props.match.url.includes("/popout/"); + const graph = graphs[resourcePath] || null; + + useEffect(() => { + api.graph.getGraph(ship, name); + }, [association]); + + const resourceUrl = `${baseUrl}/resource/link${appPath}`; + if (!graph) { + return
Loading...
; + } + + return ( + + + { + return ( + + + + + {Array.from(graph.values()).map((node: GraphNode) => { + const contact = contactDetails[node.post.author]; + return ( + + ); + })} + + ); + }} + /> + { + const indexArr = props.match.params.index.split("-"); + + if (indexArr.length <= 1) { + return
Malformed URL
; + } + + const index = parseInt(indexArr[1], 10); + const node = !!graph ? graph.get(index) : null; + + if (!node) { + return Not found; + } + + const contact = contactDetails[node.post.author]; + + return ( + + {"<- Back"} + + + + + + + ); + }} + /> +
+ + ); +} diff --git a/pkg/interface/src/views/apps/links/components/lib/link-item.js b/pkg/interface/src/views/apps/links/components/lib/link-item.js index 99223fe88..bb95510b3 100644 --- a/pkg/interface/src/views/apps/links/components/lib/link-item.js +++ b/pkg/interface/src/views/apps/links/components/lib/link-item.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { Row, Col, Anchor, Box, Text } from '@tlon/indigo-react'; import { Sigil } from '~/logic/lib/sigil'; import { Link } from 'react-router-dom'; @@ -24,32 +25,43 @@ export const LinkItem = (props) => { const mono = showNickname ? 'inter white-d' : 'mono white-d'; const img = showAvatar - ? - : ; + ? + : ; + + const baseUrl = props.baseUrl || `/~link/${resource}`; + + let hostname = ''; + try { + const url = new URL(contents[1].url); + hostname = url.hostname; + } catch (e) {} + return ( -
+ {img} -
- -

{props.title}

- - {contents[0].text} ↗ - -
-
- - { showNickname ? nickname : cite(author) } - - - {size} comments + + + {contents[0].text} + {hostname} ↗ + + + + {showNickname ? nickname : cite(author) } + + + {size} comments -
-
-
+
+ + ); } diff --git a/pkg/interface/src/views/apps/links/components/link-list.js b/pkg/interface/src/views/apps/links/components/link-list.js index b92b0407b..48acb01ff 100644 --- a/pkg/interface/src/views/apps/links/components/link-list.js +++ b/pkg/interface/src/views/apps/links/components/link-list.js @@ -1,54 +1,53 @@ -import React, { Component, useEffect } from 'react'; +import React, { Component, useEffect } from "react"; -import { TabBar } from '~/views/components/chat-link-tabbar'; -import { SidebarSwitcher } from '~/views/components/SidebarSwitch'; -import { Link } from 'react-router-dom'; -import { LinkItem } from './lib/link-item'; -import { LinkSubmit } from './lib/link-submit'; +import { TabBar } from "~/views/components/chat-link-tabbar"; +import { SidebarSwitcher } from "~/views/components/SidebarSwitch"; +import { Link } from "react-router-dom"; +import { LinkItem } from "./lib/link-item"; +import { LinkSubmit } from "./lib/link-submit"; -import { getContactDetails } from '~/logic/lib/util'; +import { getContactDetails } from "~/logic/lib/util"; export const LinkList = (props) => { const resource = `${props.ship}/${props.name}`; const title = props.metadata.title || resource; + useEffect(() => { + props.api.graph.getGraph( + `~${props.match.params.ship}`, + props.match.params.name + ); + }, [props.match.params.ship, props.match.params.name]); if (!props.graph && props.graphResource) { - useEffect(() => { - props.api.graph.getGraph( - `~${props.match.params.ship}`, - props.match.params.name - ); - }); - - return ( -
Loading...
- ); + return
Loading...
; } if (!props.graph) { - return ( -
Not found
- ); + return
Not found
; } return (
- {'⟵ All Channels'} + style={{ height: "1rem" }} + > + {"⟵ All Channels"}
-
+
-

{title}

+ api={props.api} + /> +

{title}

{
- +
- { Array.from(props.graph.values()).map((node) => { - return ( - - ); - }) - } + {Array.from(props.graph.values()).map((node) => { + return ( + + ); + })}
); -} - +};