axe-comments
Version:
Comments Module for Axe PHP Framework
107 lines (96 loc) • 3.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axe Comments example</title>
<script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/redux@3.7.2/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@5.0.5/dist/react-redux.js"></script>
<script src="https://unpkg.com/redux-thunk@2.2.0/dist/redux-thunk.js"></script>
<script src="axe-comments.js"></script>
<script src="axe-comments-redux.js"></script>
<link rel="stylesheet" href="themes/theme-1.css"/>
<style>
#axe-comments {
margin : auto;
width : 500px;
}
</style>
</head>
<body>
<div id="axe-comments">
</div>
<script type="text/babel">
const AxeCommentsReduxBundle = AxeCommentsRedux();
const {fetchComments , toggleCommentLike , toggleCommentDislike , deleteComment , createNewComment} = AxeCommentsReduxBundle.actionCreators({
'fetchComments' :'api/get-comments.json' ,
'toggleCommentLike' :apiCall => 'api/dummy.html?' + apiCall + '-comment' ,
'toggleCommentDislike':apiCall => 'api/dummy.html?' + apiCall + '-comment' ,
'deleteComment' :'api/dummy.html?delete-comment' ,
'createNewComment' :'api/dummy.html?create-new-comment'
});
// adapters
const combineReducers = Redux.combineReducers;
const createStore = Redux.createStore;
const applyMiddleware = Redux.applyMiddleware;
const Provider = ReactRedux.Provider;
// redux init
const reducers = combineReducers({
axeComments:AxeCommentsReduxBundle.createReducer()
});
const store = createStore(
reducers ,
applyMiddleware(ReduxThunk.default)
);
// react-redux connection
const mapStateToProps = (state , ownProps) => ({
...state.axeComments
});
const mapDispatchToProps = dispatch => ({
toggleLike :(comment , notLoggedInError) => {
dispatch(toggleCommentLike(comment,notLoggedInError));
} ,
toggleDislike :(comment , notLoggedInError) => {
dispatch(toggleCommentDislike(comment , notLoggedInError));
} ,
deleteComment :comment => {
dispatch(deleteComment(comment));
} ,
createNewComment:(commentorName , text , callback) => {
dispatch(createNewComment(commentorName , text , callback));
}
});
const AxeCommentsContainer = ReactRedux.connect(
mapStateToProps ,
mapDispatchToProps
)(AxeComments);
// fetch comments on regular intervals
setInterval(() => {
//store.dispatch(fetchComments());
} , 5000);
store.dispatch(fetchComments());
// fake loggedInUser
const loggedInUser = {
id :1 ,
username:'sammysaglam' ,
allowedToDeleteComment:comment => comment.id % 2 === 0 // allow user to delete comments which have an id of even number
};
// const customLabel function
const customLabel = comment => comment.customLabel + ' – ' ;
// render react component
var component = ReactDOM.render(
<Provider store={store}>
<AxeCommentsContainer
showNewCommentForm={true}
loggedInUser={loggedInUser}
customLabel={customLabel}
/>
</Provider> ,
document.getElementById('axe-comments')
);
</script>
</body>
</html>