Created
April 27, 2018 16:02
-
-
Save elijahmanor/be93d8829f8fb8ed460809256f8f5d00 to your computer and use it in GitHub Desktop.
Code from Migrating from Unsafe React Lifecycle Hooks https://www.youtube.com/watch?v=G9S1IghlkCI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import Button from "./Button"; | |
import Message from "./Message"; | |
import { getMessage } from "./utils"; | |
export default class Chat extends Component { | |
state = { | |
isStreaming: this.props.isStreaming, | |
messages: [getMessage()] | |
}; | |
componentDidMount() { | |
this.timerID = setInterval(() => { | |
if (this.state.isStreaming) { | |
this.generateMessage(); | |
} | |
}, 1000); | |
document.addEventListener("keydown", this.handleKey); | |
} | |
generateMessage = () => { | |
const message = getMessage(this.state.messages); | |
this.setState(prevState => ({ | |
messages: [...prevState.messages, message] | |
})); | |
}; | |
handleStreaming = e => { | |
this.setState(prevState => ({ | |
isStreaming: !prevState.isStreaming | |
})); | |
}; | |
static getDerivedStateFromProps(nextProps, prevState) { | |
if (nextProps.isStreaming !== prevState.isStreaming) { | |
return { isStreaming: nextProps.isStreaming }; | |
} | |
return null; | |
} | |
getSnapshotBeforeUpdate(prevProps, prevState) { | |
const { current } = this.ulRef; | |
return { | |
shouldAutoScroll: | |
current.scrollTop + current.clientHeight >= | |
current.scrollHeight | |
}; | |
} | |
componentDidUpdate( | |
prevProps, | |
prevState, | |
{ shouldAutoScroll } | |
) { | |
if (shouldAutoScroll) { | |
const { current } = this.ulRef; | |
current.scrollTop = current.scrollHeight; | |
} | |
} | |
componentWillUnmount() { | |
clearInterval(this.timerID); | |
document.removeEventListener("keydown", this.handleKey); | |
} | |
handleKey = e => { | |
if (e.key === "c") { | |
this.setState({ | |
messages: [getMessage()] | |
}); | |
} | |
}; | |
ulRef = React.createRef(); | |
render() { | |
const { isStreaming, messages } = this.state; | |
return ( | |
<fieldset className="Chat"> | |
<legend className="Chat-legend"> | |
Chat Messages | |
</legend> | |
<ul ref={this.ulRef} className="Chat-list"> | |
{messages.map(message => ( | |
<Message key={message.time} {...message} /> | |
))} | |
</ul> | |
<Button onClick={this.handleStreaming}> | |
{isStreaming ? "Pause" : "Start"} | |
</Button> | |
</fieldset> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import Button from "./Button"; | |
import Message from "./Message"; | |
import { getMessage } from "./utils"; | |
export default class Chat extends Component { | |
state = { | |
isStreaming: this.props.isStreaming, | |
messages: [getMessage()] | |
}; | |
UNSAFE_componentWillMount() { | |
this.timerID = setInterval(() => { | |
if (this.state.isStreaming) { | |
this.generateMessage(); | |
} | |
}, 1000); | |
document.addEventListener("keydown", this.handleKey); | |
} | |
generateMessage = () => { | |
const message = getMessage(this.state.messages); | |
this.setState(prevState => ({ | |
messages: [...prevState.messages, message] | |
})); | |
}; | |
handleStreaming = e => { | |
this.setState(prevState => ({ | |
isStreaming: !prevState.isStreaming | |
})); | |
}; | |
UNSAFE_componentWillReceiveProps(nextProps) { | |
if (nextProps.isStreaming !== this.state.isStreaming) { | |
this.setState({ | |
isStreaming: nextProps.isStreaming | |
}); | |
} | |
} | |
UNSAFE_componentWillUpdate(nextProps, nextState) { | |
const { current } = this.ulRef; | |
this.shouldAutoScroll = | |
current.scrollTop + current.clientHeight >= | |
current.scrollHeight; | |
} | |
componentDidUpdate(prevProps, prevState) { | |
if (this.shouldAutoScroll) { | |
const { current } = this.ulRef; | |
current.scrollTop = current.scrollHeight; | |
} | |
} | |
componentWillUnmount() { | |
clearInterval(this.timerID); | |
document.removeEventListener("keydown", this.handleKey); | |
} | |
handleKey = e => { | |
if (e.key === "c") { | |
this.setState({ messages: [getMessage()] }); | |
} | |
}; | |
ulRef = React.createRef(); | |
render() { | |
const { isStreaming, messages } = this.state; | |
return ( | |
<fieldset className="Chat"> | |
<legend className="Chat-legend"> | |
Chat Messages | |
</legend> | |
<ul ref={this.ulRef} className="Chat-list"> | |
{messages.map(message => ( | |
<Message key={message.time} {...message} /> | |
))} | |
</ul> | |
<Button onClick={this.handleStreaming}> | |
{isStreaming ? "Pause" : "Start"} | |
</Button> | |
</fieldset> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment