Hi all,
I have a tiny project with "react" implemented and now I want to migrate to NodeRed. But I dont know, how can I do this
hier is index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comments</title>
<script src="../Libraries/es6/es6-promise.min.js"></script>
<script src="../Libraries/es6/es6-promise.auto.min.js"></script>
<!-- React and a Babel to transpile JSX on client side-->
<script src="../Libraries/react/react.production.min.js"></script>
<script src="../Libraries/react/react-dom.production.min.js"></script>
<script src="../Libraries/babel/babel.min.js" data-presets="es2015,react,stage1"></script>
<!-- timeago.js for display of ".. ago" times -->
<script src="../Libraries/timeago/timeago.min.js"></script>
<!-- Semantic UI -->
<script src="../Libraries/semantic-ui/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="../Libraries/semantic-ui/semantic.min.css">
<!-- The config file -->
<script type="text/javascript" src="config/config.js"></script>
<!-- our application files -->
<script type="text/babel" src="src/comments.js"></script>
<script type="text/babel" src="src/main.js">
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
main.js
const { Segment } = semanticUIReact
const App = () => (
<div>
<CommentsSection/>
</div>
)
ReactDOM.render(<App />, document.getElementById('root'))
comment.js
const {
Comment,
Input,
Button,
Divider,
Icon,
TextArea,
Form,
Loader,
Segment
} = semanticUIReact;
//Version of this module
const module_version = 1;
class CommentsSection extends React.Component {
constructor(props) {
super(props);
this.handleOnInput = this.handleOnInput.bind(this);
this.handleAddComment = this.handleAddComment.bind(this);
this.getUserName = this.getUserName.bind(this);
this.getUserAvatar = this.getUserAvatar.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.handleShowAll = this.handleShowAll.bind(this);
var userData ;
this.state = {
docID: null,
userID: 0,
number_to_show: number_of_displayed_comments,
textAreaValue: "",
comments: {
total: 0,
version: module_version,
commentshistory: []
}
};
}
componentDidMount() {
//get userID from db hier
}
componentDidUpdate(){
postContentSize();
}
handleAddComment(e) {
// start by reading again comments from database, in case another user made an update since the last read.
}
handleOnInput(e, { value }) {
this.setState({
textAreaValue: value
});
}
handleShowAll(e, { value }) {
this.setState({
number_to_show: this.state.total,
}
);
}
handleDelete(key) {
// some code hier
}
getUserAvatar(userID) {
if (userID == 10000) {
return "https://react.semantic-ui.com/assets/images/avatar/small/matt.jpg";
}
if (userID == 10002) {
return "https://react.semantic-ui.com/assets/images/avatar/small/jenny.jpg";
}
//fallback: default image
return "./images/default_avatar.png";
}
render() {
return (
<Segment basic secondary>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "flex-end"
}}
>
<div style={{ flex: "1" }}>
<Form reply>
<Form.TextArea
autoHeight
rows={1}
placeholder="Write your comment here..."
onInput={this.handleOnInput}
value={this.state.textAreaValue}
id="textArea"
/>
</Form>
</div>
<div style={{ flex: "0", marginLeft: "10px" }}>
<Button
onClick={this.handleAddComment}
disabled={this.state.textAreaValue.length > 0 ? false : true}
content="Add"
primary
/>
</div>
</div>
<Comment.Group>
{this.state.comments.total == 0 ? (
<div />
) : (
this.state.comments.commentshistory.slice(0, this.state.number_to_show).map((item, key) => (
<Comment>
<Comment.Avatar src={this.getUserAvatar(item.user)} />
<Comment.Content>
<Comment.Author as="a">
{item.user == this.state.userID
? "You"
: (item.user)}
</Comment.Author>
<Comment.Metadata>
<span title={Date(item.timestamp)}>
{timeago().format(item.timestamp)}
</span>
</Comment.Metadata>
<Comment.Text>
{/*This function manages the line breaks in the JSON. Compatible with IE11*/}
{item.text.split(/\n/).map(function(item, key) {
return (
<span key={key}>
{item}
<br />
</span>
);
})}
</Comment.Text>
<Comment.Actions>
<Comment.Action
onClick={(e, value) => {
this.handleDelete(key);
}}
style={{
display: item.user == this.state.userID ? "" : "none"
}}
>
Delete
</Comment.Action>
</Comment.Actions>
</Comment.Content>
</Comment>
))
)}
</Comment.Group>
{this.state.comments.total > this.state.number_to_show ? (
<Divider horizontal clearing>
<Button onClick={this.handleShowAll}>
Show {this.state.comments.total - this.state.number_to_show} older
</Button>
</Divider>
) : (
<div/>
)
}
</Segment>
);
}
}
function postContentSize() {
const contentSize: WpLib.Notify.View.ContentSizeData = {
width: document.getElementById("root").scrollWidth,
height: document.getElementById("root").scrollHeight
}
plugin.postNotify(WpLib.Notify.View.Module, WpLib.Notify.View.ContentSize, contentSize)
}
