Skip to content

Instantly share code, notes, and snippets.

@appwebtech

appwebtech/22_refactoring.html

Last active March 28, 2019 12:56
Show Gist options
  • Save appwebtech/524c666c3d16f668d7cc31f7d17cba7a to your computer and use it in GitHub Desktop.
Save appwebtech/524c666c3d16f668d7cc31f7d17cba7a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
22_refactoring.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script id="jsbin-javascript">
// Code Refactored.
// See changed Directories from Tree below
app/js
├── app.js
└── components
├── FilterableNameList.js
├── Layout.js
├── NameList
│   └── NameRow.js
├── Timer
│   ├── TimerButton.js
│   └── TimerHeader.js
└── Timer.js
// app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './components/Layout';
import names from '../../mock-data';
// The convenient way to use React Classes.
class App extends React.Component {
render() {
return (
React.createElement("div", null,
React.createElement(Layout, {names: names})
)
)
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById('app')
);
// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';
export default class Timer extends React.Component {
constructor() {
super()
this.state = {
time: 0,
isStarted: false
}
this.handleClick = this.handleClick.bind(this)
}
// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
componentDidMount() {
this.timer = setInterval(
() => this.startTimer(),
1000)
}
componentWillUnmount() {
clearInterval(this.timer)
}
startTimer() {
this.setState(prevState => ({
time: prevState.time += 1
}))
this.setState({
isStarted: true
})
}
endTimer() {
clearInterval(this.timer)
this.setState({
isStarted: false
})
}
handleClick() {
this.state.isStarted ?
this.endTimer() :
this.timer = setInterval(
() => this.startTimer(),
1000)
}
render() {
return(
React.createElement("div", null,
React.createElement(TimerHeader, {time: this.state.time}),
React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
)
)
}
}
// FilterableNameList.js
import React from 'react';
import NameRow from './NameList/NameRow';
export default class FilterableNameList extends React.Component {
constructor() {
super();
this.state = {
names: [],
filterText: ''
};
this.handleClick = this.handleClick.bind(this);
this.nameFilter = this.nameFilter.bind(this);
}
componentWillMount() {
// console.log(this.props.names);
this.setState({
names: this.props.names
})
}
handleClick(event) {
event.preventDefault(); // Prevent link from scrolling to top page upon click.
}
nameFilter(event) {
this.setState({
filterText: event.target.value
})
}
render() {
let {names} = this.state;
let {filterText} = this.state;
if (filterText) {
names = names.filter((name) => {
let fullName = '${name.first_name} ${name.last_name}';
return
fullName.toLowerCase().includes(filterText.toLowerCase());
});
}
return (
React.createElement("div", null,
React.createElement("h2", null, this.state.event),
React.createElement("input", {onChange: this.nameFilter, type: "text"}),
names.map((name) =>
React.createElement(NameRow, {key: name.id, name: name})
)
)
)
}
}
// Layout.js
import React from 'react';
import NameList from './NameList';
import Timer from './Timer';
export default class Layout extends React.Component {
constructor() {
super();
}
render() {
return (
React.createElement("div", null,
React.createElement("h1", null, "Just some React code..."),
React.createElement(Timer, null),
React.createElement("h3", null, "Just switched to the Atom text editor"),
React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
React.createElement(H1Styler, null,
React.createElement(NameList, {names: this.props.names})
)
)
)
}
}
const H1Styler = (props) => {
const blueBackground = {
backgroundColor: "yellow"
}
return React.createElement("h3", {style: blueBackground}, props.children)
}
// NameRow.js
import React from 'react';
export default class NameRow extends React.Component {
constructor() {
super();
}
render() {
let {first_name} = this.props.name;
let {last_name} = this.props.name;
return (
React.createElement("h3", null, first_name, " ", last_name)
)
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Code Refactored.
// app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './components/Layout';
import names from '../../mock-data';
// The convenient way to use React Classes.
class App extends React.Component {
render() {
return (
<div>
<Layout names={names} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';
export default class Timer extends React.Component {
constructor() {
super()
this.state = {
time: 0,
isStarted: false
}
this.handleClick = this.handleClick.bind(this)
}
// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
componentDidMount() {
this.timer = setInterval(
() => this.startTimer(),
1000)
}
componentWillUnmount() {
clearInterval(this.timer)
}
startTimer() {
this.setState(prevState => ({
time: prevState.time += 1
}))
this.setState({
isStarted: true
})
}
endTimer() {
clearInterval(this.timer)
this.setState({
isStarted: false
})
}
handleClick() {
this.state.isStarted ?
this.endTimer() :
this.timer = setInterval(
() => this.startTimer(),
1000)
}
render() {
return(
<div>
<TimerHeader time={this.state.time}/>
<TimerButton handleClick={this.handleClick} isStarted={this.state.isStarted}/>
</div>
)
}
}
// FilterableNameList.js
import React from 'react';
import NameRow from './NameList/NameRow';
export default class FilterableNameList extends React.Component {
constructor() {
super();
this.state = {
names: [],
filterText: ''
};
this.handleClick = this.handleClick.bind(this);
this.nameFilter = this.nameFilter.bind(this);
}
componentWillMount() {
// console.log(this.props.names);
this.setState({
names: this.props.names
})
}
handleClick(event) {
event.preventDefault(); // Prevent link from scrolling to top page upon click.
}
nameFilter(event) {
this.setState({
filterText: event.target.value
})
}
render() {
let {names} = this.state;
let {filterText} = this.state;
if (filterText) {
names = names.filter((name) => {
let fullName = '${name.first_name} ${name.last_name}';
return
fullName.toLowerCase().includes(filterText.toLowerCase());
});
}
return (
<div>
<h2>{this.state.event}</h2>
<input onChange={this.nameFilter} type="text"/>
{names.map((name) =>
<NameRow key={name.id} name={name} />
)}
</div>
)
}
}
// Layout.js
import React from 'react';
import NameList from './NameList';
import Timer from './Timer';
export default class Layout extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<h1>Just some React code...</h1>
<Timer />
<h3>Just switched to the Atom text editor</h3>
<p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
<H1Styler>
<NameList names={this.props.names} />
</H1Styler>
</div>
)
}
}
const H1Styler = (props) => {
const blueBackground = {
backgroundColor: "yellow"
}
return <h3 style={blueBackground}>{props.children}</h3>
}
// NameRow.js
import React from 'react';
export default class NameRow extends React.Component {
constructor() {
super();
}
render() {
let {first_name} = this.props.name;
let {last_name} = this.props.name;
return (
<h3>{first_name} {last_name}</h3>
)
}
}
</script></body>
</html>
Raw
jsbin.paluhaxigi.js
// Code Refactored.
// app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './components/Layout';
import names from '../../mock-data';
// The convenient way to use React Classes.
class App extends React.Component {
render() {
return (
React.createElement("div", null,
React.createElement(Layout, {names: names})
)
)
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById('app')
);
// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';
export default class Timer extends React.Component {
constructor() {
super()
this.state = {
time: 0,
isStarted: false
}
this.handleClick = this.handleClick.bind(this)
}
// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
componentDidMount() {
this.timer = setInterval(
() => this.startTimer(),
1000)
}
componentWillUnmount() {
clearInterval(this.timer)
}
startTimer() {
this.setState(prevState => ({
time: prevState.time += 1
}))
this.setState({
isStarted: true
})
}
endTimer() {
clearInterval(this.timer)
this.setState({
isStarted: false
})
}
handleClick() {
this.state.isStarted ?
this.endTimer() :
this.timer = setInterval(
() => this.startTimer(),
1000)
}
render() {
return(
React.createElement("div", null,
React.createElement(TimerHeader, {time: this.state.time}),
React.createElement(TimerButton, {handleClick: this.handleClick, isStarted: this.state.isStarted})
)
)
}
}
// FilterableNameList.js
import React from 'react';
import NameRow from './NameList/NameRow';
export default class FilterableNameList extends React.Component {
constructor() {
super();
this.state = {
names: [],
filterText: ''
};
this.handleClick = this.handleClick.bind(this);
this.nameFilter = this.nameFilter.bind(this);
}
componentWillMount() {
// console.log(this.props.names);
this.setState({
names: this.props.names
})
}
handleClick(event) {
event.preventDefault(); // Prevent link from scrolling to top page upon click.
}
nameFilter(event) {
this.setState({
filterText: event.target.value
})
}
render() {
let {names} = this.state;
let {filterText} = this.state;
if (filterText) {
names = names.filter((name) => {
let fullName = '${name.first_name} ${name.last_name}';
return
fullName.toLowerCase().includes(filterText.toLowerCase());
});
}
return (
React.createElement("div", null,
React.createElement("h2", null, this.state.event),
React.createElement("input", {onChange: this.nameFilter, type: "text"}),
names.map((name) =>
React.createElement(NameRow, {key: name.id, name: name})
)
)
)
}
}
// Layout.js
import React from 'react';
import NameList from './NameList';
import Timer from './Timer';
export default class Layout extends React.Component {
constructor() {
super();
}
render() {
return (
React.createElement("div", null,
React.createElement("h1", null, "Just some React code..."),
React.createElement(Timer, null),
React.createElement("h3", null, "Just switched to the Atom text editor"),
React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
React.createElement(H1Styler, null,
React.createElement(NameList, {names: this.props.names})
)
)
)
}
}
const H1Styler = (props) => {
const blueBackground = {
backgroundColor: "yellow"
}
return React.createElement("h3", {style: blueBackground}, props.children)
}
// NameRow.js
import React from 'react';
export default class NameRow extends React.Component {
constructor() {
super();
}
render() {
let {first_name} = this.props.name;
let {last_name} = this.props.name;
return (
React.createElement("h3", null, first_name, " ", last_name)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment