wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-29 14:24:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enabling stream login with graphql.

Browse Source
This commit is contained in:
David Jay
2017-01-19 15:37:05 -05:00
parent 672d1ee19e
commit e9846c654c
4 changed files with 68 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-embed-stream/src/CommentStream.js
+43 -20
View File
@@ -1,6 +1,7 @@
import React, {Component, PropTypes} from 'react';
import Pym from 'pym.js';
import {graphql} from 'react-apollo';
import {connect} from 'react-redux';
import gql from 'graphql-tag';
import {
@@ -22,8 +23,8 @@ import FlagComment from '../../coral-plugin-flags/FlagComment';
import LikeButton from '../../coral-plugin-likes/LikeButton';
import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
// import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
// import UserBox from '../../coral-sign-in/components/UserBox';
import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
import UserBox from '../../coral-sign-in/components/UserBox';
import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
@@ -35,7 +36,7 @@ import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
// const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
// const {addNotification, clearNotification} = notificationActions;
const {/* logout, */showSignInDialog} = authActions;
const {logout, showSignInDialog} = authActions;
const assetID = 'bc7b4cef-1e14-46e1-9db4-66465192f168';
@@ -45,7 +46,8 @@ class CommentStream extends Component {
super(props);
this.state = {
activeTab: 0
activeTab: 0,
showSignInDialog: false
};
this.changeTab = this.changeTab.bind(this);
@@ -101,12 +103,12 @@ class CommentStream extends Component {
// const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
// const {actions, users, comments} = this.props.items;
// const {status, moderation, closedMessage, charCount, charCountEnable} = this.props.config;
// const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
const {isAdmin, showSignInDialog} = this.props.auth;
const {activeTab} = this.state;
// const banned = (this.props.userData.status === 'banned');
const {loading, asset} = this.props.data;
const {loading, asset, currentUser, refetch} = this.props.data;
const expandForLogin = showSignInDialog ? {
minHeight: document.body.scrollHeight + 150
@@ -118,9 +120,9 @@ class CommentStream extends Component {
<TabBar onChange={this.changeTab} activeTab={activeTab}>
<Tab><Count count={asset.comments.length}/></Tab>
<Tab>Settings</Tab>
<Tab restricted={false /* !isAdmin*/}>Configure Stream</Tab>
<Tab restricted={!isAdmin}>Configure Stream</Tab>
</TabBar>
{/* loggedIn && <UserBox user={user} logout={this.props.logout} />*/}
{currentUser && <UserBox user={currentUser} logout={this.props.logout} />}
<TabContent show={activeTab === 0}>
{
@@ -147,7 +149,11 @@ class CommentStream extends Component {
// </div>
// : <p>{closedMessage}</p>
}
{/* !loggedIn && <SignInContainer offset={signInOffset}/>*/}
{
!currentUser && <SignInContainer
refetch={refetch}
showSignInDialog={showSignInDialog}/>
}
{
asset.comments.map((comment) => {
return <div className="comment" key={comment.id} id={`c_${comment.id}`}>
@@ -162,14 +168,14 @@ class CommentStream extends Component {
deleteAction={this.props.deleteAction}
addItem={this.props.addItem}
updateItem={this.props.updateItem}
currentUser={null/* this.props.auth.user*/}/>
currentUser={currentUser}/>
<PubDate created_at={comment.created_at}/>
<Content body={comment.body}/>
<div className="commentActionsLeft">
<ReplyButton
updateItem={this.props.updateItem}
id={comment.id}
currentUser={null/* this.props.auth.user*/}
currentUser={currentUser}
showReply={comment.showReply}
banned={false/* banned*/}/>
<LikeButton
@@ -181,7 +187,7 @@ class CommentStream extends Component {
deleteAction={this.props.deleteAction}
addItem={this.props.addItem}
updateItem={this.props.updateItem}
currentUser={null/* this.props.auth.user*/}
currentUser={currentUser}
banned={false/* banned*/}/>
</div>
<div className="commentActionsRight">
@@ -196,7 +202,7 @@ class CommentStream extends Component {
showSignInDialog={this.props.showSignInDialog}
updateItem={this.props.updateItem}
banned={false/* banned*/}
currentUser={null/* this.props.auth.user*/}/>
currentUser={currentUser}/>
<PermalinkButton
commentId={comment.id}
articleURL={this.path}/>
@@ -236,7 +242,7 @@ class CommentStream extends Component {
addItem={this.props.addItem}
showSignInDialog={this.props.showSignInDialog}
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}
currentUser={currentUser}
banned={false/* banned*/}/>
</div>
<div className="replyActionsRight">
@@ -279,11 +285,14 @@ class CommentStream extends Component {
</div>;
})
}
<Notification
notifLength={4500}
clearNotification={this.props.clearNotification}
notification={{text: null}}
/>
{
// <Notification
// notifLength={4500}
// clearNotification={this.props.clearNotification}
// notification={{text: null}}
// />
}
</TabContent>
{
@@ -365,10 +374,14 @@ query AssetQuery($asset_id: ID!) {
...commentView
}
}
},
currentUser: me {
id,
displayName
}
}`;
export default graphql(
const CommentStreamWithData = graphql(
StreamQuery, {
options: {
variables: {
@@ -377,3 +390,13 @@ export default graphql(
}
}
)(CommentStream);
export default connect(
state => state,
dispatch => {
return {
logout: () => dispatch(logout()),
showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
};
}
)(CommentStreamWithData);
client/coral-framework/actions/auth.js
+10 -10
View File
@@ -21,17 +21,17 @@ export const cleanState = () => ({type: actions.CLEAN_STATE});
const signInRequest = () => ({type: actions.FETCH_SIGNIN_REQUEST});
// const signInSuccess = (user, isAdmin) => ({type: actions.FETCH_SIGNIN_SUCCESS, user, isAdmin});
const signInSuccess = (user, isAdmin) => ({type: actions.FETCH_SIGNIN_SUCCESS, user, isAdmin});
const signInFailure = error => ({type: actions.FETCH_SIGNIN_FAILURE, error});
export const fetchSignIn = (formData) => (dispatch) => {
dispatch(signInRequest());
coralApi('/auth/local', {method: 'POST', body: formData})
.then(() => {
return coralApi('/auth/local', {method: 'POST', body: formData})
.then((user) => {
// const isAdmin = !!user.roles.filter(i => i === 'admin').length;
// dispatch(signInSuccess(user, isAdmin));
dispatch(hideSignInDialog());
const isAdmin = !!user.roles.filter(i => i === 'admin').length;
dispatch(signInSuccess(user, isAdmin));
// dispatch(hideSignInDialog());
// dispatch(addItem(user, 'users'));
})
@@ -78,7 +78,7 @@ const signUpFailure = error => ({type: actions.FETCH_SIGNUP_FAILURE, error});
export const fetchSignUp = formData => (dispatch) => {
dispatch(signUpRequest());
coralApi('/users', {method: 'POST', body: formData})
return coralApi('/users', {method: 'POST', body: formData})
.then(({user}) => {
dispatch(signUpSuccess(user));
setTimeout(() =>{
@@ -98,7 +98,7 @@ const forgotPassowordFailure = () => ({type: actions.FETCH_FORGOT_PASSWORD_FAILU
export const fetchForgotPassword = email => (dispatch) => {
dispatch(forgotPassowordRequest(email));
coralApi('/account/password/reset', {method: 'POST', body: {email}})
return coralApi('/account/password/reset', {method: 'POST', body: {email}})
.then(() => dispatch(forgotPassowordSuccess()))
.catch(error => dispatch(forgotPassowordFailure(error)));
};
@@ -111,7 +111,7 @@ const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
export const logout = () => dispatch => {
dispatch(logOutRequest());
coralApi('/auth', {method: 'DELETE'})
return coralApi('/auth', {method: 'DELETE'})
.then(() => dispatch(logOutSuccess()))
.catch(error => dispatch(logOutFailure(error)));
};
@@ -129,7 +129,7 @@ const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
export const checkLogin = () => dispatch => {
dispatch(checkLoginRequest());
coralApi('/auth')
return coralApi('/auth')
.then((result) => {
if (!result.user) {
throw new Error('Not logged in');
client/coral-framework/store.js
+9 -3
View File
@@ -8,9 +8,15 @@ export default createStore(
auth: authReducer,
apollo: client.reducer()
}),
{},
{
apollo: {
data: {
loading: true,
}
}
},
compose(
window.devToolsExtension && window.devToolsExtension(),
applyMiddleware(thunk)
applyMiddleware(thunk),
window.devToolsExtension && window.devToolsExtension()
)
);
client/coral-sign-in/containers/SignInContainer.js
+6 -1
View File
@@ -121,7 +121,12 @@ class SignInContainer extends Component {
handleSignIn(e) {
e.preventDefault();
this.props.fetchSignIn(this.state.formData);
this.props.fetchSignIn(this.state.formData)
// Using refetch to get data after the user has logged in.
// This is the equivalent of a page reload, we may want to use a more speficic mustation here.
// Also, we may want to find a way for this logic to live elsewhere.
.then(() => this.props.refetch());
}
handleClose() {