group-feed: copy permalinks from group feed posts

This commit is contained in:
Logan Allen 2021-03-25 14:13:54 -05:00
parent b865227de7
commit bd5de5b145
7 changed files with 59 additions and 11 deletions

View File

@ -13,7 +13,7 @@ import { roleForShip } from '~/logic/lib/group';
import Author from '~/views/components/Author'; import Author from '~/views/components/Author';
import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api'; import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api';
import {useCopy} from '~/logic/lib/useCopy'; import {useCopy} from '~/logic/lib/useCopy';
import {usePermalinkForGraph, getPermalinkForGraph} from '~/logic/lib/permalinks'; import { getPermalinkForGraph } from '~/logic/lib/permalinks';
import {useQuery} from '~/logic/lib/useQuery'; import {useQuery} from '~/logic/lib/useQuery';
interface NoteProps { interface NoteProps {

View File

@ -27,6 +27,7 @@ export function GroupFeed(props) {
).length; ).length;
const relativePath = (path) => baseUrl + path; const relativePath = (path) => baseUrl + path;
const association = associations.graph[graphPath];
useEffect(() => { useEffect(() => {
// TODO: VirtualScroller should support lower starting values than 100 // TODO: VirtualScroller should support lower starting values than 100
@ -53,6 +54,7 @@ export function GroupFeed(props) {
return ( return (
<PostTimeline <PostTimeline
{...props} {...props}
association={association}
graphs={graphs} graphs={graphs}
pendingSize={pendingSize} pendingSize={pendingSize}
graphResource={graphResource} /> graphResource={graphResource} />
@ -64,6 +66,7 @@ export function GroupFeed(props) {
return ( return (
<PostReplies <PostReplies
{...props} {...props}
association={association}
graphs={graphs} graphs={graphs}
pendingSize={pendingSize} pendingSize={pendingSize}
graphResource={graphResource} /> graphResource={graphResource} />

View File

@ -23,7 +23,8 @@ export class PostFeed extends React.Component {
api, api,
history, history,
baseUrl, baseUrl,
parentNode parentNode,
association
} = this.props; } = this.props;
const node = graph.get(index); const node = graph.get(index);
if (!node) { return null; } if (!node) { return null; }
@ -53,6 +54,7 @@ export class PostFeed extends React.Component {
node={parentNode} node={parentNode}
contacts={contacts} contacts={contacts}
graphResource={graphResource} graphResource={graphResource}
association={association}
api={api} api={api}
index={nodeIndex} index={nodeIndex}
baseUrl={baseUrl} baseUrl={baseUrl}
@ -65,6 +67,7 @@ export class PostFeed extends React.Component {
node={node} node={node}
contacts={contacts} contacts={contacts}
graphResource={graphResource} graphResource={graphResource}
association={association}
api={api} api={api}
index={[...nodeIndex, index]} index={[...nodeIndex, index]}
baseUrl={baseUrl} baseUrl={baseUrl}
@ -83,6 +86,7 @@ export class PostFeed extends React.Component {
node={node} node={node}
contacts={contacts} contacts={contacts}
graphResource={graphResource} graphResource={graphResource}
association={association}
api={api} api={api}
index={[index]} index={[index]}
baseUrl={baseUrl} baseUrl={baseUrl}

View File

@ -1,14 +1,30 @@
import React from 'react'; import React from 'react';
import { Row, Icon } from '@tlon/indigo-react'; import { Col, Row, Icon, Action } from '@tlon/indigo-react';
import Author from '~/views/components/Author'; import Author from '~/views/components/Author';
import { useCopy } from '~/logic/lib/useCopy';
import { getPermalinkForGraph } from '~/logic/lib/permalinks';
import { Dropdown } from '~/views/components/Dropdown';
export function PostHeader(props) { export function PostHeader(props) {
const { post, contacts, api, isReply } = props; const { post, contacts, api, association, isReply } = props;
const mb = isReply ? "2" : "3"; const mb = isReply ? "2" : "3";
const permalink = !!association ? getPermalinkForGraph(
association.group,
association.resource,
post.index
) : '';
const { copyDisplay, doCopy } = useCopy(permalink, 'Copy Link');
return ( return (
<Row width="100%" height="36px" mb={mb} justifyContent="space-between"> <Row
width="100%"
height="36px"
mb={mb}
justifyContent="space-between"
onClick={(e) => { e.stopPropagation(); }}>
<Author <Author
showImage showImage
contacts={contacts} contacts={contacts}
@ -21,7 +37,25 @@ export function PostHeader(props) {
time={true} time={true}
showAsCol={true} showAsCol={true}
/> />
<Dropdown
dropWidth="200px"
alignX="right"
alignY="top"
options={
<Col
backgroundColor="white"
border={1}
borderRadius={1}
borderColor="lightGray">
<Row alignItems="center" p={1}>
<Action bg="white" m={1} color="black" onClick={doCopy}>
{copyDisplay}
</Action>
</Row>
</Col>
}>
<Icon icon="Ellipsis" color="gray" /> <Icon icon="Ellipsis" color="gray" />
</Dropdown>
</Row> </Row>
); );
} }

View File

@ -46,6 +46,7 @@ class PostItem extends React.Component {
contacts, contacts,
api, api,
graphResource, graphResource,
association,
index, index,
innerRef, innerRef,
isParent, isParent,
@ -82,7 +83,12 @@ class PostItem extends React.Component {
onClick={this.navigateToReplies} onClick={this.navigateToReplies}
cursor={isParent ? "default": "pointer"} cursor={isParent ? "default": "pointer"}
{...bind}> {...bind}>
<PostHeader post={node.post} contacts={contacts} api={api} isReply={isReply} /> <PostHeader
post={node.post}
contacts={contacts}
api={api}
association={association}
isReply={isReply} />
{ isReply ? ( { isReply ? (
<Row width="100%" alignItems="center" mb="3"> <Row width="100%" alignItems="center" mb="3">
<Text color="gray" pr="1">Replying to</Text> <Text color="gray" pr="1">Replying to</Text>

View File

@ -12,7 +12,7 @@ export function PostReplies(props) {
baseUrl, baseUrl,
api, api,
history, history,
associations, association,
groups, groups,
contacts, contacts,
graphPath, graphPath,
@ -68,6 +68,7 @@ export function PostReplies(props) {
node={node} node={node}
contacts={contacts} contacts={contacts}
graphResource={graphResource} graphResource={graphResource}
association={association}
api={api} api={api}
index={nodeIndex} index={nodeIndex}
baseUrl={baseUrl} baseUrl={baseUrl}
@ -99,7 +100,7 @@ export function PostReplies(props) {
graph={graph} graph={graph}
parentNode={node} parentNode={node}
pendingSize={pendingSize} pendingSize={pendingSize}
associations={associations} association={association}
groups={groups} groups={groups}
contacts={contacts} contacts={contacts}
api={api} api={api}

View File

@ -10,7 +10,7 @@ export function PostTimeline(props) {
baseUrl, baseUrl,
api, api,
history, history,
associations, association,
groups, groups,
contacts, contacts,
graphPath, graphPath,
@ -85,7 +85,7 @@ export function PostTimeline(props) {
graphResource={graphResource} graphResource={graphResource}
graph={graphs[graphId]} graph={graphs[graphId]}
pendingSize={pendingSize} pendingSize={pendingSize}
associations={associations} association={association}
groups={groups} groups={groups}
contacts={contacts} contacts={contacts}
api={api} api={api}