wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-03 10:37:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Working single comment view

Browse Source
This commit is contained in:
Belén Curcio
2018-07-25 17:24:14 -03:00
parent e519503129
commit 906940f152
13 changed files with 125 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/Comment/Comment.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import React from "react";
import { StatelessComponent } from "react";
import { Typography } from "talk-ui/components";
import Permalink from "../Permalink/Permalink";
import PermalinkContainer from "../Permalink/PermalinkContainer";
import Timestamp from "./Timestamp";
import TopBar from "./TopBar";
import Username from "./Username";
@@ -26,7 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
</TopBar>
<Typography>{props.body}</Typography>
<div>
<Permalink commentID={props.id} />
<PermalinkContainer commentID={props.id} />
</div>
</div>
);
src/core/client/stream/components/Permalink/Permalink.tsx
+3 -2
View File
@@ -5,17 +5,18 @@ import PermalinkPopover from "./PermalinkPopover";
interface InnerProps {
commentID: string;
origin: string | null;
}
class Permalink extends React.Component<InnerProps> {
public render() {
const { commentID } = this.props;
const { commentID, origin } = this.props;
return (
<Popover
placement="top"
body={({ toggleVisibility, forwardRef }) => (
<PermalinkPopover
commentID={commentID}
permalinkUrl={`${origin}/?commentID=${commentID}`}
forwardRef={forwardRef}
toggleVisibility={toggleVisibility}
/>
src/core/client/stream/components/Permalink/PermalinkContainer.tsx
+25
View File
@@ -0,0 +1,25 @@
import React, { StatelessComponent } from "react";
import { graphql } from "react-relay";
import { withLocalStateContainer } from "talk-framework/lib/relay";
import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
import Permalink from "./Permalink";
interface InnerProps {
local: Local;
commentID: string;
}
export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
return <Permalink {...props} origin={props.local.origin} />;
};
const enhanced = withLocalStateContainer<Local>(
graphql`
fragment PermalinkContainerLocal on Local {
origin
}
`
)(PermalinkContainer);
export default enhanced;
src/core/client/stream/components/Permalink/PermalinkPopover.tsx
+4 -4
View File
@@ -6,7 +6,7 @@ import { Button, Flex, TextField } from "talk-ui/components";
import * as styles from "./PermalinkPopover.css";
interface InnerProps {
commentID: string;
permalinkUrl: string;
style?: CSSProperties;
forwardRef?: RefHandler;
toggleVisibility?: () => any;
@@ -35,12 +35,12 @@ class PermalinkPopover extends React.Component<InnerProps> {
};
public render() {
const { commentID } = this.props;
const { permalinkUrl } = this.props;
const { copied } = this.state;
return (
<Flex>
<TextField defaultValue={commentID} className={styles.textField} />
<CopyToClipboard text={commentID} onCopy={this.onCopy}>
<TextField defaultValue={permalinkUrl} className={styles.textField} />
<CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
<Button color="primary" variant="filled">
{copied ? (
<Localized id="comments-permalink-copied">
src/core/client/stream/components/PermalinkView.tsx
+5 -6
View File
@@ -1,26 +1,25 @@
import * as React from "react";
import { StatelessComponent } from "react";
import { CommentProps } from "talk-stream/components/Comment";
import { Flex } from "talk-ui/components";
import CommentContainer from "../containers/CommentContainer";
export interface AppProps {
comment: CommentProps | null;
export interface InnerProps {
comment: {} | null;
}
const PermalinkView: StatelessComponent<AppProps> = props => {
const PermalinkView: StatelessComponent<InnerProps> = props => {
if (props.comment) {
return (
<Flex justifyContent="center">
<Flex direction="column" itemGutter>
<Flex direction="column">
<CommentContainer data={props.comment} />
</Flex>
</Flex>
);
}
return <div> Error </div>;
return <div>Comment not found</div>;
};
export default PermalinkView;
src/core/client/stream/components/Stream.tsx
+34 -51
View File
@@ -10,67 +10,50 @@ import ReplyListContainer from "../containers/ReplyListContainer";
import Logo from "./Logo";
import * as styles from "./Stream.css";
import { Comment, CommentProps } from "talk-stream/components/Comment";
export interface StreamProps {
assetID: string;
comment?: CommentProps;
isClosed?: boolean;
comments?: ReadonlyArray<{ id: string }>;
comments: ReadonlyArray<{ id: string }>;
onLoadMore?: () => void;
hasMore?: boolean;
disableLoadMore?: boolean;
}
const Stream: StatelessComponent<StreamProps> = props => {
if (props.comment) {
return (
<Flex justifyContent="center" className={styles.root}>
<Flex direction="column" itemGutter>
<Comment {...props.comment} />
</Flex>
return (
<div className={styles.root}>
<Logo gutterBottom />
<PostCommentFormContainer assetID={props.assetID} />
<Flex
direction="column"
id="talk-comments-stream-log"
role="log"
aria-live="polite"
itemGutter
>
{props.comments.map(comment => (
<Flex direction="column" key={comment.id} itemGutter>
<CommentContainer data={comment} />
<ReplyListContainer comment={comment} />
</Flex>
))}
{props.hasMore && (
<Localized id="comments-stream-loadMore">
<Button
id={"talk-comments-stream-loadMore"}
onClick={props.onLoadMore}
variant="outlined"
fullWidth
disabled={props.disableLoadMore}
aria-controls="talk-comments-stream-log"
>
Load More
</Button>
</Localized>
)}
</Flex>
);
}
if (props.comments) {
return (
<div className={styles.root}>
<Logo gutterBottom />
<PostCommentFormContainer assetID={props.assetID} />
<Flex
direction="column"
id="talk-comments-stream-log"
role="log"
aria-live="polite"
itemGutter
>
{props.comments.map(comment => (
<Flex direction="column" key={comment.id} itemGutter>
<CommentContainer data={comment} />
<ReplyListContainer comment={comment} />
</Flex>
))}
{props.hasMore && (
<Localized id="comments-stream-loadMore">
<Button
id={"talk-comments-stream-loadMore"}
onClick={props.onLoadMore}
variant="outlined"
fullWidth
disabled={props.disableLoadMore}
aria-controls="talk-comments-stream-log"
>
Load More
</Button>
</Localized>
)}
</Flex>
</div>
);
}
return <div>Error</div>;
</div>
);
};
export default Stream;
src/core/client/stream/containers/AppContainer.tsx
-1
View File
@@ -12,7 +12,6 @@ interface InnerProps {
}
export const AppContainer: StatelessComponent<InnerProps> = props => {
console.log("App query render", props);
return <App {...props.data} />;
};
src/core/client/stream/containers/CommentContainer.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { CommentContainer as Data } from "talk-stream/__generated__/CommentConta
import Comment from "../components/Comment";
interface InnerProps {
export interface InnerProps {
data: Data;
}
src/core/client/stream/containers/PermalinkViewContainer.tsx
+3 -7
View File
@@ -1,32 +1,28 @@
import React, { StatelessComponent } from "react";
import { graphql } from "react-relay";
import { withFragmentContainer } from "talk-framework/lib/relay";
import { PropTypesOf } from "talk-framework/types";
import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
import PermalinkView from "../components/PermalinkView";
import { PermalinkViewContainer as Data } from "talk-stream/__generated__/PermalinkViewContainer.graphql";
interface InnerProps {
data: Data;
}
export const PermalinkViewContainer: StatelessComponent<InnerProps> = props => {
console.log("App query render", props);
return <PermalinkView {...props.data} />;
};
const enhanced = withFragmentContainer<{ data: Data }>({
data: graphql`
fragment PermalinkViewContainer on Query
fragment PermalinkViewContainerQuery on Query
@argumentDefinitions(commentID: { type: "ID!" }) {
comment(id: $commentID) {
id
body
author {
username
}
body
createdAt
}
}
src/core/client/stream/local/initLocalState.ts
+6
View File
@@ -22,6 +22,12 @@ export default async function initLocalState(environment: Environment) {
// Parse query params
const query = qs.parse(location.search);
// Saving location host for permalink until we get the asset url - the url now points to the tenant
if (location) {
localRecord.setValue(location.host, "host");
localRecord.setValue(location.origin, "origin");
}
if (query.assetID) {
localRecord.setValue(query.assetID, "assetID");
}
src/core/client/stream/local/local.graphql
+2
View File
@@ -7,6 +7,8 @@ type Local {
network: Network!
assetID: String
commentID: String
host: String
origin: String
}
extend type Query {
src/core/client/stream/queries/AppQuery.tsx
+40 -16
View File
@@ -13,26 +13,41 @@ import {
} from "talk-stream/__generated__/AppQuery.graphql";
import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
import PermalinkViewContainer from "talk-stream/containers/PermalinkViewContainer";
import AppContainer from "../containers/AppContainer";
import PermalinkViewQuery from "./PermalinkViewQuery";
export const render = ({ error, props }: ReadyState<AppQueryResponse>) => {
if (error) {
return <div>{error.message}</div>;
}
if (props) {
return <AppContainer data={props} />;
}
return <div>Loading</div>;
};
interface InnerProps {
local: Local;
}
const AppQuery: StatelessComponent<InnerProps> = props => {
if (props.local.commentID) {
return <PermalinkViewQuery commentID={props.local.commentID} />;
// TODO (bc) refactor this into another component. break down the needs of each component.
// (careful porting QueryRenderer into another stateless component)
const AppQuery: StatelessComponent<InnerProps> = ({
local: { commentID, assetID },
}) => {
if (commentID) {
return (
<QueryRenderer<AppQueryVariables, AppQueryResponse>
query={graphql`
query AppQuery_PermalinkViewContainer_Query($commentID: ID!) {
...PermalinkViewContainerQuery @arguments(commentID: $commentID)
}
`}
variables={{
commentID,
}}
render={({ error, props }: ReadyState<AppQueryResponse>) => {
if (error) {
return <div>{error.message}</div>;
}
if (props) {
return <PermalinkViewContainer data={props} />;
}
return <div>Loading</div>;
}}
/>
);
}
return (
@@ -43,9 +58,17 @@ const AppQuery: StatelessComponent<InnerProps> = props => {
}
`}
variables={{
assetID: props.local.assetID,
assetID,
}}
render={({ error, props }: ReadyState<AppQueryResponse>) => {
if (error) {
return <div>{error.message}</div>;
}
if (props) {
return <AppContainer data={props} />;
}
return <div>Loading</div>;
}}
render={render}
/>
);
};
@@ -55,6 +78,7 @@ const enhanced = withLocalStateContainer<Local>(
fragment AppQueryLocal on Local {
assetID
commentID
origin
}
`
)(AppQuery);
src/core/client/stream/queries/PermalinkViewQuery.tsx
-57
View File
@@ -1,57 +0,0 @@
import * as React from "react";
import { StatelessComponent } from "react";
import { ReadyState } from "react-relay";
import { graphql, QueryRenderer } from "talk-framework/lib/relay";
import {
PermalinkViewQueryResponse,
PermalinkViewQueryVariables,
} from "talk-stream/__generated__/PermalinkViewQuery.graphql";
import { PermalinkViewContainer } from "talk-stream/containers/PermalinkViewContainer";
export interface CommentData {
id: string;
author: {
username: string;
} | null;
body: string | null;
createdAt: string;
}
export const render = ({
error,
props,
}: ReadyState<{
comment: CommentData;
}>) => {
if (error) {
return <div>{error.message}</div>;
}
if (props) {
return <PermalinkViewContainer data={props} />;
}
return <div>Loading</div>;
};
interface InnerProps {
commentID: string;
}
const PermalinkViewQuery: StatelessComponent<InnerProps> = props => {
return (
<QueryRenderer<PermalinkViewQueryVariables, PermalinkViewQueryResponse>
query={graphql`
query PermalinkViewQuery($commentID: ID!) {
...PermalinkViewContainer @arguments(commentID: $commentID)
}
`}
variables={{
commentID: props.commentID,
}}
render={render}
/>
);
};
export default PermalinkViewQuery;