wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-18 12:30:39 +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/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;