Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: change variable to let & const, add destructuring parameter #2159

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor: change variable to let & const, add destructuring parameter #2159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 50 additions & 49 deletions examples/typescript-react/js/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ class TodoApp extends React.Component<IAppProps, IAppState> {
}

public componentDidMount() {
var setState = this.setState;
var router = Router({
'/': setState.bind(this, {nowShowing: ALL_TODOS}),
'/active': setState.bind(this, {nowShowing: ACTIVE_TODOS}),
'/completed': setState.bind(this, {nowShowing: COMPLETED_TODOS})
});
router.init('/');
const setState = this.setState;
const router = Router({
'/': setState.bind(this, {nowShowing: ALL_TODOS}),
'/active': setState.bind(this, {nowShowing: ACTIVE_TODOS}),
'/completed': setState.bind(this, {nowShowing: COMPLETED_TODOS})
});
router.init('/');
}

public handleNewTodoKeyDown(event : React.KeyboardEvent) {
Expand All @@ -43,18 +43,18 @@ class TodoApp extends React.Component<IAppProps, IAppState> {

event.preventDefault();

var val = (ReactDOM.findDOMNode(this.refs["newField"]) as HTMLInputElement).value.trim();
const val = (ReactDOM.findDOMNode(this.refs["newField"]) as HTMLInputElement).value.trim();

if (val) {
if (val) {
this.props.model.addTodo(val);
(ReactDOM.findDOMNode(this.refs["newField"]) as HTMLInputElement).value = '';
}
}

public toggleAll(event : React.FormEvent) {
var target : any = event.target;
var checked = target.checked;
this.props.model.toggleAll(checked);
const target: any = event.target;
const checked = target.checked;
this.props.model.toggleAll(checked);
}

public toggle(todoToToggle : ITodo) {
Expand Down Expand Up @@ -83,47 +83,48 @@ class TodoApp extends React.Component<IAppProps, IAppState> {
}

public render() {
var footer;
var main;
const todos = this.props.model.todos;

var shownTodos = todos.filter((todo) => {
switch (this.state.nowShowing) {
case ACTIVE_TODOS:
return !todo.completed;
case COMPLETED_TODOS:
return todo.completed;
default:
return true;
}
});

var todoItems = shownTodos.map((todo) => {
return (
<TodoItem
key={todo.id}
todo={todo}
onToggle={this.toggle.bind(this, todo)}
onDestroy={this.destroy.bind(this, todo)}
onEdit={this.edit.bind(this, todo)}
editing={this.state.editing === todo.id}
onSave={this.save.bind(this, todo)}
onCancel={ e => this.cancel() }
/>
);
});

// Note: It's usually better to use immutable data structures since they're
const { model } = this.props;
let footer;
let main;
const todos = model.todos;

const shownTodos = todos.filter((todo) => {
switch (this.state.nowShowing) {
case ACTIVE_TODOS:
return !todo.completed;
case COMPLETED_TODOS:
return todo.completed;
default:
return true;
}
});

const todoItems = shownTodos.map((todo) => {
return (
<TodoItem
key={todo.id}
todo={todo}
onToggle={this.toggle.bind(this, todo)}
onDestroy={this.destroy.bind(this, todo)}
onEdit={this.edit.bind(this, todo)}
editing={this.state.editing === todo.id}
onSave={this.save.bind(this, todo)}
onCancel={e => this.cancel()}
/>
);
});

// Note: It's usually better to use immutable data structures since they're
// easier to reason about and React works very well with them. That's why
// we use map(), filter() and reduce() everywhere instead of mutating the
// array or todo items themselves.
var activeTodoCount = todos.reduce(function (accum, todo) {
return todo.completed ? accum : accum + 1;
}, 0);
const activeTodoCount = todos.reduce(function (accum, todo) {
return todo.completed ? accum : accum + 1;
}, 0);

var completedCount = todos.length - activeTodoCount;
const completedCount = todos.length - activeTodoCount;

if (activeTodoCount || completedCount) {
if (activeTodoCount || completedCount) {
footer =
<TodoFooter
count={activeTodoCount}
Expand Down Expand Up @@ -174,7 +175,7 @@ class TodoApp extends React.Component<IAppProps, IAppState> {
}
}

var model = new TodoModel('react-todos');
const model = new TodoModel('react-todos');

function render() {
ReactDOM.render(
Expand Down
12 changes: 6 additions & 6 deletions examples/typescript-react/js/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,24 @@ import { Utils } from "./utils";
class TodoFooter extends React.Component<ITodoFooterProps, {}> {

public render() {
var activeTodoWord = Utils.pluralize(this.props.count, 'item');
var clearButton = null;
const { completedCount, onClearCompleted, count, nowShowing } = this.props;
let activeTodoWord = Utils.pluralize(count, 'item');
let clearButton = null;

if (this.props.completedCount > 0) {
if (completedCount > 0) {
clearButton = (
<button
className="clear-completed"
onClick={this.props.onClearCompleted}>
onClick={onClearCompleted}>
Clear completed
</button>
);
}

const nowShowing = this.props.nowShowing;
return (
<footer className="footer">
<span className="todo-count">
<strong>{this.props.count}</strong> {activeTodoWord} left
<strong>{count}</strong> {activeTodoWord} left
</span>
<ul className="filters">
<li>
Expand Down
16 changes: 9 additions & 7 deletions examples/typescript-react/js/todoItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
}

public handleSubmit(event : React.FormEvent) {
var val = this.state.editText.trim();
const val = this.state.editText.trim();
if (val) {
this.props.onSave(val);
this.setState({editText: val});
Expand All @@ -31,8 +31,9 @@ class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
}

public handleEdit() {
const { todo } = this.props;
this.props.onEdit();
this.setState({editText: this.props.todo.title});
this.setState({ editText: todo.title });
}

public handleKeyDown(event : React.KeyboardEvent) {
Expand All @@ -44,9 +45,9 @@ class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
}
}

public handleChange(event : React.FormEvent) {
var input : any = event.target;
this.setState({ editText : input.value });
public handleChange({ target } : React.FormEvent) {
const input: any = target;
this.setState({ editText : input.value });
}

/**
Expand All @@ -72,8 +73,8 @@ class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
*/
public componentDidUpdate(prevProps : ITodoItemProps) {
if (!prevProps.editing && this.props.editing) {
var node = (ReactDOM.findDOMNode(this.refs["editField"]) as HTMLInputElement);
node.focus();
const node = (ReactDOM.findDOMNode(this.refs["editField"]) as HTMLInputElement);
node.focus();
node.setSelectionRange(node.value.length, node.value.length);
}
}
Expand All @@ -85,6 +86,7 @@ class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> {
editing: this.props.editing
})}>
<div className="view">
aso
<input
className="toggle"
type="checkbox"
Expand Down
18 changes: 9 additions & 9 deletions examples/typescript-react/js/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ class Utils {

public static uuid() : string {
/*jshint bitwise:false */
var i, random;
var uuid = '';
let i, random;
let uuid = '';

for (i = 0; i < 32; i++) {
for (i = 0; i < 32; i++) {
random = Math.random() * 16 | 0;
if (i === 8 || i === 12 || i === 16 || i === 20) {
uuid += '-';
Expand All @@ -27,15 +27,15 @@ class Utils {
return localStorage.setItem(namespace, JSON.stringify(data));
}

var store = localStorage.getItem(namespace);
return (store && JSON.parse(store)) || [];
const store = localStorage.getItem(namespace);
return (store && JSON.parse(store)) || [];
}

public static extend(...objs : any[]) : any {
var newObj = {};
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
for (var key in obj) {
const newObj = {};
for (let i = 0; i < objs.length; i++) {
const obj = objs[i];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
Expand Down