mirror of
https://github.com/wassname/talk.git
synced 2026-06-30 05:26:17 +08:00
adding changes
This commit is contained in:
@@ -6,7 +6,12 @@ import {ApolloProvider} from 'react-apollo';
|
||||
import Stream from '../../coral-plugin-stream/Stream';
|
||||
|
||||
const client = new ApolloClient({
|
||||
networkInterface: createNetworkInterface({uri: '/api/v1/graph/ql'})
|
||||
networkInterface: createNetworkInterface({
|
||||
uri: '/api/v1/graph/ql',
|
||||
opts: {
|
||||
credentials: 'same-origin'
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
render(
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, {Component} from 'react';
|
||||
import {graphql} from 'react-apollo';
|
||||
import gql from 'graphql-tag';
|
||||
|
||||
export class RileysAwesomeCommentBox extends Component {
|
||||
|
||||
postComment() {
|
||||
console.log(this.props);
|
||||
console.log('postComment', this.props.asset_id);
|
||||
this.props.mutate({
|
||||
variables: {
|
||||
asset_id: this.props.asset_id,
|
||||
body: this.textarea.value,
|
||||
parent_id: null
|
||||
}
|
||||
}).then(({data}) => {
|
||||
console.log('it workt');
|
||||
console.log(data);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
<textarea ref={textarea => this.textarea = textarea}></textarea>
|
||||
<button onClick={this.postComment.bind(this)}>POST</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
const postComment = gql`
|
||||
fragment commentView on Comment {
|
||||
id
|
||||
body
|
||||
user {
|
||||
name: displayName
|
||||
}
|
||||
actions {
|
||||
type: action_type
|
||||
count
|
||||
current: current_user {
|
||||
id
|
||||
created_at
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mutation CreateComment ($asset_id: ID!, $parent_id: ID, $body: String!) {
|
||||
createComment(asset_id:$asset_id, parent_id:$parent_id, body:$body) {
|
||||
...commentView
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const RileysAwesomeCommentBoxWithData = graphql(
|
||||
postComment
|
||||
)(RileysAwesomeCommentBox);
|
||||
|
||||
export default RileysAwesomeCommentBoxWithData;
|
||||
@@ -1,8 +1,10 @@
|
||||
import React, {Component} from 'react';
|
||||
import {graphql} from 'react-apollo';
|
||||
import gql from 'graphql-tag';
|
||||
import {fetchSignIn} from 'coral-framework/actions/auth';
|
||||
import RileysAwesomeCommentBox from 'coral-plugin-stream/RileysAwesomeCommentBox';
|
||||
|
||||
const assetID = '';
|
||||
const assetID = '6187a94b-0b6d-4a96-ac6b-62b529cd8410';
|
||||
|
||||
// MyComponent is a "presentational" or apollo-unaware component,
|
||||
// It could be a simple React class:
|
||||
@@ -12,14 +14,46 @@ class Stream extends Component {
|
||||
super(props);
|
||||
}
|
||||
|
||||
logMeIn() {
|
||||
fetchSignIn({email: 'your@example.com', password: 'yourmom'})(() => {});
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props);
|
||||
return <div>...</div>;
|
||||
const {data} = this.props;
|
||||
return <div>
|
||||
<button onClick={this.logMeIn.bind(this)}>Login or whatever</button>
|
||||
{
|
||||
data.loading
|
||||
? 'loading!'
|
||||
: <div>
|
||||
<RileysAwesomeCommentBox asset_id={data.asset.id} />
|
||||
<p>Asset ID: {data.asset.id}</p>
|
||||
<ul>
|
||||
{
|
||||
data.asset.comments.map(comment => {
|
||||
return <li key={comment.id}>
|
||||
{comment.body} [{comment.id}]
|
||||
<ul>
|
||||
{
|
||||
comment.replies.map(reply => {
|
||||
return <li key={reply.id}>{reply.body}</li>;
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</li>;
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize GraphQL queries or mutations with the `gql` tag
|
||||
const StreamQuery = gql`fragment commentView on Comment {
|
||||
id
|
||||
body
|
||||
user {
|
||||
name: displayName
|
||||
@@ -36,6 +70,7 @@ const StreamQuery = gql`fragment commentView on Comment {
|
||||
|
||||
query AssetQuery($asset_id: ID!) {
|
||||
asset(id: $asset_id) {
|
||||
id
|
||||
title
|
||||
url
|
||||
comments {
|
||||
@@ -47,8 +82,17 @@ query AssetQuery($asset_id: ID!) {
|
||||
}
|
||||
}`;
|
||||
|
||||
|
||||
// We then can use `graphql` to pass the query results returned by MyQuery
|
||||
// to MyComponent as a prop (and update them as the results change)
|
||||
const StreamWithData = graphql(StreamQuery, {options: {variables: {asset_id: assetID}}})(Stream);
|
||||
const StreamWithData = graphql(
|
||||
StreamQuery, {
|
||||
options: {
|
||||
variables: {
|
||||
asset_id: assetID
|
||||
}
|
||||
}
|
||||
}
|
||||
)(Stream);
|
||||
|
||||
export default StreamWithData;
|
||||
|
||||
Reference in New Issue
Block a user