From e7de3533ee44cab5888ffeac83f02cf393758ca3 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Mon, 7 Dec 2020 14:35:10 +1000 Subject: [PATCH] chat: improve multicontent rendering --- .../apps/chat/components/ChatMessage.tsx | 18 ++++-- .../views/apps/chat/components/ChatWindow.tsx | 3 +- .../apps/chat/components/content/text.js | 4 +- .../src/views/components/MentionText.tsx | 62 ++++++++++++++++--- .../landscape/components/ContactCard.tsx | 2 +- pkg/interface/src/views/landscape/index.tsx | 18 +++--- 6 files changed, 80 insertions(+), 27 deletions(-) diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index be3e0ea8c..875be5b10 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -11,6 +11,7 @@ import TextContent from './content/text'; import CodeContent from './content/code'; import RemoteContent from '~/views/components/RemoteContent'; import { Mention } from "~/views/components/MentionText"; +import styled from "styled-components"; export const DATESTAMP_FORMAT = '[~]YYYY.M.D'; @@ -251,7 +252,7 @@ export class MessageWithSigil extends PureComponent { {timestamp} {datestamp} - + {msg.contents.map(c => { measure={measure} fontSize={fontSize} />)} - + ); } } +const ContentBox = styled(Box)` + & > :first-child { + margin-left: 0px; + } + +`; + export const MessageWithoutSigil = ({ timestamp, contacts, msg, remoteContentPolicy, measure }) => ( <> {timestamp} - + {msg.contents.map(c => ())} - + ); @@ -281,7 +289,7 @@ export const MessageContent = ({ content, contacts, remoteContentPolicy, measure return ; } else if ('url' in content) { return ( - + ; } const isPending: boolean = 'pending' in msg && Boolean(msg.pending); - const isLastMessage: boolean = Boolean(index.eq(bigInt(lastMessage))); + const isLastMessage = index.eq(graph.peekLargest()?.[0] ?? bigInt.zero); const highlighted = bigInt(this.props.scrollTo || -1).eq(index); const graphIdx = keys.findIndex(idx => idx.eq(index)); const prevIdx = keys[graphIdx+1]; diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js index c7da104e0..d5c5c58af 100644 --- a/pkg/interface/src/views/apps/chat/components/content/text.js +++ b/pkg/interface/src/views/apps/chat/components/content/text.js @@ -86,7 +86,7 @@ export default class TextContent extends Component { && (urbitOb.isValidPatp(group[2]) // valid patp? && (group[0] === content.text))) { // entire message is room name? return ( - + @@ -96,7 +96,7 @@ export default class TextContent extends Component { ); } else { return ( - + ); diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx index d18e7b457..36787bfa6 100644 --- a/pkg/interface/src/views/components/MentionText.tsx +++ b/pkg/interface/src/views/components/MentionText.tsx @@ -1,9 +1,16 @@ -import React from "react"; +import React, { useState, useCallback } from "react"; import _ from "lodash"; -import { Text } from "@tlon/indigo-react"; -import { Contacts, Content, LocalUpdateRemoteContentPolicy } from "~/types"; +import { Text, Box } from "@tlon/indigo-react"; +import { + Contacts, + Content, + LocalUpdateRemoteContentPolicy, + Group, +} from "~/types"; import RichText from "~/views/components/RichText"; -import { cite } from "~/logic/lib/util"; +import { cite, uxToHex } from "~/logic/lib/util"; +import { ProfileOverlay } from "./ProfileOverlay"; +import {useHistory} from "react-router-dom"; interface MentionTextProps { contacts: Contacts; @@ -37,15 +44,54 @@ export function MentionText(props: MentionTextProps) { ); } -export function Mention(props: { ship: string; contacts: Contacts }) { +export function Mention(props: { + ship: string; + contacts: Contacts; + group: Group; +}) { const { contacts, ship } = props; const contact = contacts[ship]; const showNickname = !!contact?.nickname; const name = showNickname ? contact?.nickname : cite(ship); + const [showOverlay, setShowOverlay] = useState(false); + const onDismiss = useCallback(() => { + setShowOverlay(false); + }, [setShowOverlay]); + const onClick = useCallback(() => { + setShowOverlay(true); + }, [setShowOverlay]); + + const group = props.group ?? { hidden: true }; + + const history = useHistory(); return ( - - {name} - + + {showOverlay && ( + + )} + + {name} + + ); } diff --git a/pkg/interface/src/views/landscape/components/ContactCard.tsx b/pkg/interface/src/views/landscape/components/ContactCard.tsx index 5f8bb920c..843a3f849 100644 --- a/pkg/interface/src/views/landscape/components/ContactCard.tsx +++ b/pkg/interface/src/views/landscape/components/ContactCard.tsx @@ -80,7 +80,7 @@ export function ContactCard(props: ContactCardProps) { const [,,ship] = props.path.split('/'); values.color = uxToHex(values.color); const sharedValues = Object.assign({}, values); - sharedValues.avatar = (values.avatar === "") ? null : { url: values.avatar }; + sharedValues.avatar = !values.avatar ? null : { url: values.avatar }; console.log(values); await props.api.contacts.share(ship, props.path, us, sharedValues); actions.setStatus({ success: null }); diff --git a/pkg/interface/src/views/landscape/index.tsx b/pkg/interface/src/views/landscape/index.tsx index 2a9cc8462..8cff5c278 100644 --- a/pkg/interface/src/views/landscape/index.tsx +++ b/pkg/interface/src/views/landscape/index.tsx @@ -1,4 +1,4 @@ -import React, { Component, useEffect } from 'react'; +import React, { Component, useEffect, useCallback } from 'react'; import { Route, Switch, RouteComponentProps } from 'react-router-dom'; import './css/custom.css'; @@ -25,18 +25,21 @@ type LandscapeProps = StoreState & { export function DMRedirect(props: LandscapeProps & RouteComponentProps & { ship: string; }) { const { ship, api, history, graphKeys } = props; + const goToGraph = useCallback((graph: string) => { + history.push(`/~landscape/home/resource/chat/ship/~${graph}`); + }, [history]); useEffect(() => { - const station = `/ship/~${window.ship}/dm--${ship}`; - const theirStation = `/ship/~${ship}/dm--${window.ship}`; + const station = `${window.ship}/dm--${ship}`; + const theirStation = `${ship}/dm--${window.ship}`; if (graphKeys.has(station)) { - history.push(`/~landscape/home/resource/chat${station}`); + goToGraph(station); return; } if (graphKeys.has(theirStation)) { - history.push(`/~landscape/home/resource/chat${theirStation}`); + goToGraph(theirStation); return; } @@ -51,7 +54,7 @@ export function DMRedirect(props: LandscapeProps & RouteComponentProps & { ship: { invite: { pending: aud } }, 'chat' ).then(() => { - history.push(`/~landscape/home/resource/chat${station}`); + goToGraph(station); }); }, []); @@ -70,9 +73,6 @@ export default class Landscape extends Component { this.props.subscription.startApp('graph'); } - createandRedirectToDM(api, ship, history, allStations) { - } - render() { const { props } = this; const { api } = props;