diff --git a/pkg/interface/src/views/apps/chat/ChatResource.tsx b/pkg/interface/src/views/apps/chat/ChatResource.tsx index cbd5b3d21..59e8f5f5d 100644 --- a/pkg/interface/src/views/apps/chat/ChatResource.tsx +++ b/pkg/interface/src/views/apps/chat/ChatResource.tsx @@ -113,6 +113,7 @@ export function ChatResource(props: ChatResourceProps) { group={group} ship={owner} station={station} + allStations={Object.keys(props.inbox)} api={props.api} hideNicknames={props.hideNicknames} hideAvatars={props.hideAvatars} diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 28aa918eb..bd5e181b4 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -46,9 +46,12 @@ interface ChatMessageProps { className?: string; isPending: boolean; style?: any; + allStations: any; scrollWindow: HTMLDivElement; isLastMessage?: boolean; unreadMarkerRef: React.RefObject; + history: any; + api: any; } export default class ChatMessage extends Component { @@ -83,7 +86,10 @@ export default class ChatMessage extends Component { measure, scrollWindow, isLastMessage, - unreadMarkerRef + unreadMarkerRef, + allStations, + history, + api } = this.props; const renderSigil = Boolean((nextMsg && msg.author !== nextMsg.author) || !nextMsg || msg.number === 1); @@ -112,6 +118,9 @@ export default class ChatMessage extends Component { style, containerClass, isPending, + allStations, + history, + api, scrollWindow }; @@ -145,6 +154,7 @@ interface MessageProps { containerClass: string; isPending: boolean; style: any; + allStations: any; measure(element): void; scrollWindow: HTMLDivElement; }; @@ -161,6 +171,9 @@ export class MessageWithSigil extends PureComponent { hideAvatars, remoteContentPolicy, measure, + allStations, + history, + api, scrollWindow } = this.props; @@ -194,6 +207,9 @@ export class MessageWithSigil extends PureComponent { hideAvatars={hideAvatars} hideNicknames={hideNicknames} scrollWindow={scrollWindow} + allStations={allStations} + history={history} + api={api} className="fl pr3 v-top bg-white bg-gray0-d" />
diff --git a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx index 899a22756..a8e25ba7b 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx @@ -39,6 +39,7 @@ type ChatWindowProps = RouteComponentProps<{ group: Group; ship: Patp; station: any; + allStations: any; api: GlobalApi; hideNicknames: boolean; hideAvatars: boolean; @@ -127,7 +128,6 @@ export default class ChatWindow extends Component diff --git a/pkg/interface/src/views/apps/chat/components/overlay-sigil.js b/pkg/interface/src/views/apps/chat/components/overlay-sigil.js index 905c24449..af60055bf 100644 --- a/pkg/interface/src/views/apps/chat/components/overlay-sigil.js +++ b/pkg/interface/src/views/apps/chat/components/overlay-sigil.js @@ -55,7 +55,7 @@ export class OverlaySigil extends PureComponent { render() { const { props, state } = this; - const { hideAvatars } = props; + const { hideAvatars, allStations } = props; const img = (props.contact && (props.contact.avatar !== null) && !hideAvatars) ? @@ -83,8 +83,11 @@ export class OverlaySigil extends PureComponent { association={props.association} group={props.group} onDismiss={this.profileHide} + allStations={allStations} hideAvatars={hideAvatars} hideNicknames={props.hideNicknames} + history={props.history} + api={props.api} /> )} {img} diff --git a/pkg/interface/src/views/apps/chat/components/profile-overlay.js b/pkg/interface/src/views/apps/chat/components/profile-overlay.js index 329578a83..efbcbb398 100644 --- a/pkg/interface/src/views/apps/chat/components/profile-overlay.js +++ b/pkg/interface/src/views/apps/chat/components/profile-overlay.js @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { cite } from '~/logic/lib/util'; import { Sigil } from '~/logic/lib/sigil'; +import { Center, Button } from "@tlon/indigo-react"; + export const OVERLAY_HEIGHT = 250; export class ProfileOverlay extends PureComponent { @@ -11,6 +13,7 @@ export class ProfileOverlay extends PureComponent { this.popoverRef = React.createRef(); this.onDocumentClick = this.onDocumentClick.bind(this); + this.createAndRedirectToDM = this.createAndRedirectToDM.bind(this); } componentDidMount() { @@ -23,6 +26,42 @@ export class ProfileOverlay extends PureComponent { document.removeEventListener('touchstart', this.onDocumentClick); } + createAndRedirectToDM() { + const { api, ship, history, allStations } = this.props; + const station = `/~${window.ship}/dm--${ship}`; + const theirStation = `/~${ship}/dm--${window.ship}`; + + if (allStations.indexOf(station) !== -1) { + history.push(`/~groups/home/resource/chat${station}`); + return; + } + + if (allStations.indexOf(theirStation) !== -1) { + history.push(`/~groups/home/resource/chat${theirStation}`); + return; + } + + const groupPath = `/ship/~${window.ship}/dm--${ship}`; + const aud = ship !== window.ship ? [`~${ship}`] : []; + const title = `${cite(window.ship)} <-> ${cite(ship)}`; + + api.chat.create( + title, + '', + station, + groupPath, + { invite: { pending: aud } }, + aud, + true, + false + ); + + // TODO: make a pretty loading state + setTimeout(() => { + history.push(`/~groups/home/resource/chat${station}`); + }, 5000); + } + onDocumentClick(event) { const { popoverRef } = this; // Do nothing if clicking ref's element or descendent elements @@ -65,11 +104,9 @@ export class ProfileOverlay extends PureComponent { />; const showNickname = contact?.nickname && !hideNicknames; - if (!group.hidden) { - img = {img}; - } - - // TODO: create a chat DM + if (!group.hidden) { + img = {img}; + } return (
- {img} + {img}
-
+
{showNickname && (
{contact.nickname}
)}
{cite(`~${ship}`)}
{!isOwn && ( - + )} {isOwn && (