feat: jsx

mohaalak · Jul 23, 2019 · 3e98cfb · 3e98cfb
1 parent 5cfd5ed
commit 3e98cfb
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 169 deletions.
diff --git a/TodoItem.tsx b/TodoItem.tsx
@@ -0,0 +1,13 @@
+import * as Rahnemaak from './rahnemaak';
+// @jsx Rahnemaak.createElement
+export class TodoItemComponent extends Rahnemaak.Component {
+  render() {
+    const { todo, toggle } = this.props;
+    const className = todo.checked ? 'checked' : '';
+    return (
+      <li className={className} onClick={() => toggle(todo)}>
+        {todo.text}
+      </li>
+    );
+  }
+}
diff --git a/index.html b/index.html
@@ -19,6 +19,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./test.ts"></script>
+    <script src="./index.tsx"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
diff --git a/index.tsx b/index.tsx
@@ -0,0 +1,132 @@
+import * as Rahnemaak from './rahnemaak';
+import { TodoItemComponent } from './TodoItem';
+// @jsx Rahnemaak.createElement
+const root = document.getElementById('root');
+function removeChildren() {
+  for (const child of root.children) {
+    root.removeChild(child);
+  }
+}
+removeChildren();
+
+interface TodoItem {
+  text: string;
+  checked: boolean;
+}
+type TodoStatus = 'all' | 'done' | 'todo';
+interface TodoState {
+  todos: TodoItem[];
+  status: TodoStatus;
+}
+
+class TodoApplication {
+  state: TodoState = {
+    todos: [{ text: 'Hamid', checked: true }],
+    status: 'all'
+  };
+  constructor() {
+    this.addTodo = this.addTodo.bind(this);
+    this.toggleTodo = this.toggleTodo.bind(this);
+  }
+
+  setState(state: Partial<TodoState>) {
+    this.state = { ...this.state, ...state };
+
+    renderApp();
+  }
+
+  private setStatus(status: TodoStatus) {
+    this.setState({ status });
+  }
+
+  private addTodo(e: any) {
+    e.preventDefault();
+    const todo = e.target.children[0].value;
+
+    this.setState({
+      todos: [...this.state.todos, { text: todo, checked: false }]
+    });
+  }
+
+  getTodos() {
+    const { status, todos } = this.state;
+
+    if (status === 'all') {
+      return todos;
+    }
+    if (status === 'done') {
+      return todos.filter(x => x.checked);
+    }
+
+    if (status === 'todo') {
+      return todos.filter(x => !x.checked);
+    }
+  }
+  toggleTodo(todoItem: TodoItem) {
+    const foundTodo = this.state.todos.find(x => x === todoItem);
+    foundTodo.checked = !foundTodo.checked;
+
+    this.setState({
+      todos: this.state.todos
+    });
+  }
+
+  renderForm() {
+    return (
+      <form onSubmit={this.addTodo}>
+        <input />
+        <button>Submit</button>
+      </form>
+    );
+  }
+
+  renderTodoItem(todo: TodoItem) {
+    console.log('salam');
+    return <TodoItemComponent todo={todo} toggle={this.toggleTodo} />;
+  }
+  renderTodoContainer() {
+    return <ul>{this.getTodos().map(x => this.renderTodoItem(x))}</ul>;
+  }
+
+  renderFooterButton(text: string, inputStatus: TodoStatus) {
+    const { status } = this.state;
+    return (
+      <button
+        className={status === inputStatus ? 'active' : ''}
+        onClick={e => this.setStatus(inputStatus)}
+      >
+        {text}
+      </button>
+    );
+  }
+  renderFooter() {
+    return (
+      <div>
+        {this.renderFooterButton('All', 'all')}
+        {this.renderFooterButton('Done', 'done')}
+        {this.renderFooterButton('Todo', 'todo')}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderForm()}
+        {this.renderTodoContainer()}
+        {this.renderFooter()}
+      </div>
+    );
+  }
+}
+
+const todoApp = new TodoApplication();
+
+function renderApp() {
+  const element = todoApp.render();
+  removeChildren();
+
+  Rahnemaak.render(root, element);
+}
+
+renderApp();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,5 +10,9 @@
   "license": "ISC",
   "devDependencies": {
     "typescript": "^3.5.3"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.136",
+    "lodash": "^4.17.15"
   }
 }