Skip to content

Commit

Permalink
[Examples] Refactor with-electron (#13800)
Browse files Browse the repository at this point in the history
Not much happening, the main page was converted from class to functional component.
  • Loading branch information
todortotev authored Jun 5, 2020
1 parent 88fd6cf commit 4d7b3fd
Showing 1 changed file with 38 additions and 46 deletions.
84 changes: 38 additions & 46 deletions examples/with-electron/renderer/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,54 +1,46 @@
import { Component } from 'react'
import { useState, useEffect } from 'react'

export default class Home extends Component {
state = {
input: '',
message: null,
}
const Home = () => {
const [input, setInput] = useState('')
const [message, setMessage] = useState(null)

componentDidMount() {
// start listening the channel message
global.ipcRenderer.on('message', this.handleMessage)
}
useEffect(() => {
const handleMessage = (event, message) => setMessage(message)
global.ipcRenderer.on('message', handleMessage)

componentWillUnmount() {
// stop listening the channel message
global.ipcRenderer.removeListener('message', this.handleMessage)
}

handleMessage = (event, message) => {
// receive a message from the main process and save it in the local state
this.setState({ message })
}
return () => {
global.ipcRenderer.removeListener('message', handleMessage)
}
}, [])

handleChange = (event) => {
this.setState({ input: event.target.value })
}

handleSubmit = (event) => {
const handleSubmit = (event) => {
event.preventDefault()
global.ipcRenderer.send('message', this.state.input)
this.setState({ message: null })
global.ipcRenderer.send('message', input)
setMessage(null)
}

render() {
return (
<div>
<h1>Hello Electron!</h1>

{this.state.message && <p>{this.state.message}</p>}

<form onSubmit={this.handleSubmit}>
<input type="text" onChange={this.handleChange} />
</form>

<style jsx>{`
h1 {
color: red;
font-size: 50px;
}
`}</style>
</div>
)
}
return (
<div>
<h1>Hello Electron!</h1>

{message && <p>{message}</p>}

<form onSubmit={handleSubmit}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
</form>

<style jsx>{`
h1 {
color: red;
font-size: 50px;
}
`}</style>
</div>
)
}

export default Home

0 comments on commit 4d7b3fd

Please sign in to comment.